@devvistatech/devvista-kit 0.0.12 → 0.0.13

package/app/page.tsx

@@ -1,289 +1,33 @@
+// src/app/page.tsx
 "use client";
 
-import { useState, useEffect, useRef } from "react";
-import { GalleryHero } from "@/components/addOns/non-functional/Heros/HeroSection";
+import { useState, useEffect } from "react";
+import { HomeHero } from "@/components/addOns/non-functional/heros/HomeHero";
 import { AboutSection } from "@/components/addOns/functional/aboutSections/AboutSection";
-import { ScheduleCarousel } from "@/components/addOns/functional/ScheduleCarousel";
-import { FileUploader } from "@/components/addOns/functional/FileUploader";
-import { FeaturesSection } from "@/components/addOns/non-functional/FeaturesSection";
+import { ScheduleCarousel } from "@/components/addOns/functional/carousels/ScheduleCarousel";
+import { FileUploader } from "@/components/addOns/functional/fileUploaders/FileUploader";
 import BlogList from "@/components/addOns/functional/blogSections/BlogList";
+import { FeaturesSection } from "@/components/addOns/non-functional/featureSections/FeaturesSection";
 import Spinner from "@/components/addOns/non-functional/spinner";
-import { useAuth, useUser } from "@clerk/nextjs";
-import { useStrapiAuth } from "@/lib/auth-context";
-import { HOME_PAGE } from "../lib/constants/page";
-
-interface ScheduleClass {
-  name: string;
-  startTime: string;
-  endTime: string;
-}
-
-interface WeeklySchedule {
-  [key: string]: ScheduleClass[];
-}
-
-interface UploadedFile {
-  id: number;
-  documentId: string;
-  name: string;
-  url: string;
-  createdAt: string;
-}
-
-interface StrapiUser {
-  id: number;
-  username: string;
-  email: string;
-  businessAdminId?: string;
-  documentId?: string;
-}
+import { useUser } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
+import { HOME_PAGE } from "@/lib/constants/page";
+import ThreeSetGallery from "@/components/addOns/functional/galleries/ThreeSetGallery";
 
 export default function Home() {
-  const [pdfUrl, setPdfUrl] = useState<string>("");
-  const [weeklySchedule, setWeeklySchedule] = useState<WeeklySchedule>({
-    Monday: [], Tuesday: [], Wednesday: [], Thursday: [], Friday: [], Saturday: [], Sunday: [],
-  });
   const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
-  const hasFetched = useRef(false);
-
-  const { getToken } = useAuth();
-  const { user: clerkUser, isSignedIn } = useUser();
-  const { user, authLoading } = useStrapiAuth();
-
-  const numberToDayKey: { [key: number]: string } = {
-    1: "Monday", 2: "Tuesday", 3: "Wednesday", 4: "Thursday", 5: "Friday", 6: "Saturday", 7: "Sunday",
-  };
-
-  const backgroundImages = [
-    HOME_PAGE.UI.BACKGROUND_IMAGE_1,
-    HOME_PAGE.UI.BACKGROUND_IMAGE_2,
-    HOME_PAGE.UI.BACKGROUND_IMAGE_3,
-    HOME_PAGE.UI.BACKGROUND_IMAGE_4,
-    HOME_PAGE.UI.BACKGROUND_IMAGE_5,
-    HOME_PAGE.UI.BACKGROUND_IMAGE_6,
-    HOME_PAGE.UI.BACKGROUND_IMAGE_7,
-  ];
+  const { user } = useStrapiAuth();
+  const { isSignedIn } = useUser();
 
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
 
-  useEffect(() => {
-    if (hasFetched.current) return;
-    hasFetched.current = true;
-
-    const fetchInitialData = async () => {
-      setIsLoading(true);
-      try {
-        let updatedSchedule: WeeklySchedule = {
-          Monday: [], Tuesday: [], Wednesday: [], Thursday: [], Friday: [], Saturday: [], Sunday: [],
-        };
-        const scheduleResponse = await fetch(`/api/schedule?t=${Date.now()}`, {
-          headers: { "Content-Type": "application/json" },
-          cache: "no-store",
-        });
-        if (scheduleResponse.ok) {
-          const scheduleResult = await scheduleResponse.json();
-          const fetchedClasses = (scheduleResult.data || []).map((event: any) => ({
-            name: event.title || "Untitled",
-            startTime: event.startTime || "00:00",
-            endTime: event.endTime || "00:00",
-            daysOfWeek: event.daysOfWeek || [],
-          }));
-          fetchedClasses.forEach((cls: any) => {
-            cls.daysOfWeek.forEach((dayNum: number) => {
-              const dayKey = numberToDayKey[dayNum];
-              if (dayKey && updatedSchedule[dayKey]) {
-                updatedSchedule[dayKey].push({
-                  name: cls.name,
-                  startTime: cls.startTime,
-                  endTime: cls.endTime,
-                });
-              }
-            });
-          });
-        } else {
-          setError(HOME_PAGE.ERRORS.FETCH_SCHEDULE_FAILED);
-        }
-        setWeeklySchedule(updatedSchedule);
-
-        const filesResponse = await fetch(`/api/files?t=${Date.now()}`, {
-          headers: { "Content-Type": "application/json" },
-          cache: "no-store",
-        });
-        if (filesResponse.ok) {
-          const filesResult = await filesResponse.json();
-          if (filesResult.meta?.pagination?.total > 100) {
-            setError(HOME_PAGE.ERRORS.PAGINATION_WARNING);
-          }
-          setUploadedFiles(
-            filesResult.data.map((file: any) => ({
-              id: file.id,
-              documentId: file.documentId,
-              name: file.name || "Untitled",
-              url: file.url,
-              createdAt: file.createdAt,
-            })) || []
-          );
-        } else {
-          setError(HOME_PAGE.ERRORS.FETCH_FILES_FAILED);
-        }
-      } catch (err) {
-        console.error("Fetch Error:", err);
-        setError(err instanceof Error ? err.message : HOME_PAGE.ERRORS.FETCH_ERROR);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchInitialData();
-  }, []);
-
-  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!isSignedIn || !user?.businessAdminId) {
-      setError(HOME_PAGE.ERRORS.UNAUTHORIZED_UPLOAD);
-      return;
-    }
-    const file = e.target.files?.[0];
-    if (!file) {
-      setError(HOME_PAGE.ERRORS.NO_FILE_SELECTED);
-      return;
-    }
-    if (file.type !== "application/pdf") {
-      setError(HOME_PAGE.ERRORS.INVALID_FILE_TYPE);
-      return;
-    }
-    setError(null);
-    try {
-      const token = await getToken();
-      if (!token) {
-        throw new Error(HOME_PAGE.ERRORS.NO_AUTH_TOKEN);
-      }
-      const formData = new FormData();
-      formData.append("files", file);
-
-      const response = await fetch("/api/files", {
-        method: "POST",
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-        body: formData,
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || HOME_PAGE.ERRORS.UPLOAD_FILE_FAILED.replace("${response.status}", response.status.toString()));
-      }
-      const filesResult = await response.json();
-      setUploadedFiles(
-        filesResult.data.map((file: any) => ({
-          id: file.id,
-          documentId: file.documentId,
-          name: file.name || "Unnamed File",
-          url: file.url,
-          createdAt: file.createdAt,
-        })) || []
-      );
-      setPdfUrl(filesResult.newFileUrl || "");
-    } catch (err) {
-      console.error("Upload Error:", err);
-      setError(err instanceof Error ? err.message : HOME_PAGE.ERRORS.UPLOAD_FILE_ERROR);
-    }
-  };
-
-  const handleDeleteFile = async (documentId: string) => {
-    if (!isSignedIn || !user?.businessAdminId) {
-      setError(HOME_PAGE.ERRORS.UNAUTHORIZED_DELETE);
-      return;
-    }
-    setError(null);
-    try {
-      const token = await getToken();
-      if (!token) {
-        throw new Error(HOME_PAGE.ERRORS.NO_AUTH_TOKEN);
-      }
-      const response = await fetch("/api/files", {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({ documentId }),
-      });
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || HOME_PAGE.ERRORS.DELETE_FILE_FAILED.replace("${response.status}", response.status.toString()));
-      }
-      const filesResult = await response.json();
-      setUploadedFiles(
-        filesResult.data.map((file: any) => ({
-          id: file.id,
-          documentId: file.documentId,
-          name: file.name || "Unnamed File",
-          url: file.url,
-          createdAt: file.createdAt,
-        })) || []
-      );
-      if (pdfUrl === uploadedFiles.find((f) => f.documentId === documentId)?.url) {
-        setPdfUrl("");
-      }
-    } catch (err) {
-      console.error("Delete Error:", err);
-      setError(err instanceof Error ? err.message : HOME_PAGE.ERRORS.DELETE_FILE_ERROR);
-    }
-  };
-
-  const isAdmin = isSignedIn && !!user?.businessAdminId || false;
-
-  if (authLoading || isLoading) {
-    return <Spinner />;
-  }
-
   return (
-    <div className="w-full min-h-screen bg-[#FFFFFF] overflow-hidden">
-      <style jsx global>{`
-        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");
-
-        :root {
-          --jubilee: #F47C7C;
-          --natural-white: #FFFFFF;
-          --caviar: #2D2D2D;
-          --storm-cloud: #4A636E;
-          --exuberant-blue: #FF69B4;
-        }
-
-        * {
-          font-family: "Inter", sans-serif;
-          font-weight: 400;
-        }
-
-        .gradient-text {
-          background: linear-gradient(90deg, var(--exuberant-blue), var(--jubilee));
-          -webkit-background-clip: text;
-          background-clip: text;
-          color: transparent;
-        }
-
-        body.overflow-hidden {
-          overflow: hidden !important;
-          -webkit-overflow-scrolling: none;
-        }
-
-        section {
-          position: relative;
-          z-index: 1;
-        }
-      `}</style>
-
-      <div className="hidden">
-        {backgroundImages.map((src, index) => (
-          <img key={index} src={src} alt="" />
-        ))}
-      </div>
-
+    <div className="w-full min-h-screen bg-white/70 overflow-hidden font-inter">
+      {isLoading && <Spinner />}
       <div className="relative w-full min-h-screen flex flex-col">
-        <GalleryHero
+        <HomeHero
           title={HOME_PAGE.UI.HERO_TITLE}
           subtitle={HOME_PAGE.UI.HERO_SUBTITLE}
           ctaText={HOME_PAGE.BUTTONS.HERO_CTA_TEXT}
@@ -292,47 +36,12 @@ export default function Home() {
           posterSrc=""
           videoAriaLabel={HOME_PAGE.UI.HERO_VIDEO_ARIA_LABEL}
         />
-
-        <AboutSection
-          user={user}
-          authLoading={authLoading}
-        />
-
-        <ScheduleCarousel
-          weeklySchedule={weeklySchedule}
-          backgroundImages={backgroundImages}
-          error={error}
-        />
-
+        <AboutSection user={user} isSignedIn={isSignedIn} />
+        <ThreeSetGallery/>
+        <ScheduleCarousel />
         <BlogList />
-        
-        <section className="relative z-10">
-          <FileUploader
-            uploadedFiles={uploadedFiles}
-            setUploadedFiles={setUploadedFiles}
-            setPdfUrl={setPdfUrl}
-            pdfUrl={pdfUrl}
-            isAdmin={isAdmin}
-            error={error}
-            setError={setError}
-            handleFileUpload={handleFileUpload}
-            handleDeleteFile={handleDeleteFile}
-          />
-        </section>
-
-        <FeaturesSection
-          features={[
-            { text: HOME_PAGE.UI.FEATURE_1 },
-            { text: HOME_PAGE.UI.FEATURE_2 },
-            { text: HOME_PAGE.UI.FEATURE_3 },
-            { text: HOME_PAGE.UI.FEATURE_4 },
-            { text: HOME_PAGE.UI.FEATURE_5 },
-          ]}
-          title={HOME_PAGE.UI.FEATURES_TITLE}
-          description={HOME_PAGE.UI.FEATURES_DESCRIPTION}
-          ctaText={HOME_PAGE.BUTTONS.FEATURES_CTA_TEXT}
-          ctaLink="/schedule"
-        />
+        <FileUploader user={user} isSignedIn={isSignedIn} />
+        <FeaturesSection />
       </div>
     </div>
   );

package/app/products/constants/product.ts

@@ -0,0 +1,27 @@
+// app/products/constants/productOne.ts
+"use client";
+
+export const PRODUCT_CATEGORIES: string[] = [
+  "indoor",
+  "outdoor",
+  "commercial",
+];
+
+export const PRODUCT_PAGE = {
+  ERRORS: {
+    NO_AUTH_TOKEN: "No authentication token found.",
+    FETCH_IMAGES_FAILED: "Failed to fetch images: ${errorText}",
+    FETCH_ERROR: "An error occurred while fetching images.",
+    NO_FILE_SELECTED: "No file selected for upload.",
+    INVALID_FILE_TYPE: "Invalid file type. Please upload a JPEG, PNG, or GIF image.",
+    UNAUTHORIZED_UPLOAD: "You are not authorized to upload images.",
+    AUTHENTICATION_ERROR: "Authentication error. Please log in again.",
+    UPLOAD_IMAGE_FAILED: "Failed to upload image: ${response.status}",
+    UPLOAD_IMAGE_ERROR: "An error occurred while uploading the image.",
+    UNAUTHORIZED_DELETE: "You are not authorized to delete images.",
+    DELETE_IMAGE_FAILED: "Failed to delete image: ${response.status}",
+    DELETE_IMAGE_ERROR: "An error occurred while deleting the image.",
+    PAGINATION_WARNING: "Too many images to display. Only the first 100 images are shown.",
+  },
+  DEFAULT_CATEGORY: "bagged-cement-products",
+};

package/app/products/page.tsx

@@ -0,0 +1,296 @@
+'use client';
+
+import { motion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import ProductHero from "@/components/addOns/non-functional/heros/ProductHero";
+import Spinner from "@/components/addOns/non-functional/spinner";
+
+interface ProductCategory {
+  title: string;
+  description: string;
+  image: string;
+  link: string;
+}
+
+export default function Products() {
+  const sectionBackgroundRef = useRef<HTMLDivElement | null>(null);
+  const [activeTab, setActiveTab] = useState<string>("All");
+  const [isMobile, setIsMobile] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  useEffect(() => {
+    const debounce = (fn: () => void, delay: number) => {
+      let timeout: NodeJS.Timeout;
+      return () => {
+        clearTimeout(timeout);
+        timeout = setTimeout(fn, delay);
+      };
+    };
+
+    const checkMobile = debounce(() => {
+      setIsMobile(window.innerWidth < 768);
+    }, 100);
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  const productCategories: ProductCategory[] = [
+    {
+      title: "Test Product",
+      description:
+        "New for 2025 are several styles of natural stone boulders. Check out the awesome patterns!",
+      image: "images/products/boulders.jpg",
+      link: "/products/productOne",
+    },
+  ];
+
+  const tabs = ["All", ...productCategories.map((category) => category.title)];
+
+  const filteredProducts =
+    activeTab === "All"
+      ? productCategories
+      : productCategories.filter((category) => category.title === activeTab);
+
+  const sectionVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+  };
+
+  const cardVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+    hover: {
+      scale: isMobile ? 1 : 1.05,
+      transition: { duration: 0.2, ease: "easeOut" },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+  };
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <div className="min-h-screen w-full relative flex flex-col">
+      <style jsx>{`
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
+
+        :root {
+          --jubilee: #F47C7C;
+          --natural-white: #F7F7F7;
+          --caviar: #2D2D2D;
+          --storm-cloud: #4A636E;
+          --exuberant-blue: #FF69B4;
+          --modern-purple: #D946EF;
+        }
+
+        * {
+          font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        }
+
+        .gradient-text {
+          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        }
+
+        .glassmorphism {
+          background: rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(12px);
+          -webkit-backdrop-filter: blur(12px);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+          transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
+        }
+
+        @supports not (backdrop-filter: blur(12px)) {
+          .glassmorphism {
+            background: rgba(255, 255, 255, 0.3);
+          }
+        }
+
+        .glassmorphism:hover {
+          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        }
+
+        @media (max-width: 768px) {
+          .glassmorphism {
+            padding: 1rem;
+          }
+          .gradient-text {
+            font-size: 2.5rem;
+          }
+        }
+
+        .line-clamp-8 {
+          display: -webkit-box;
+          -webkit-line-clamp: 8;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      `}</style>
+      <div className="w-full pt-20 lg:pt-40 flex-grow relative z-10 container-padding bg-white">
+        <ProductHero />
+        <motion.section
+          className="relative z-10 py-16 sm:py-20 lg:py-24 px-4 sm:px-6 lg:px-8 bg-white"
+          variants={sectionVariants}
+          initial="hidden"
+          animate="visible"
+        >
+          <div className="relative max-w-7xl mx-auto">
+            {/* Tabs Filter */}
+            <motion.div
+              className="mb-12 hidden sm:flex flex-wrap justify-center gap-4"
+              variants={itemVariants}
+            >
+              {tabs.map((tab) => (
+                <motion.button
+                  key={tab}
+                  onClick={() => setActiveTab(tab)}
+                  className={`px-6 py-3 rounded-lg text-base sm:text-lg font-medium transition-all duration-300 ${
+                    activeTab === tab
+                      ? "bg-amber-600 text-white shadow-md"
+                      : "bg-gray-200 text-gray-800 hover:bg-gray-300"
+                  }`}
+                  variants={itemVariants}
+                >
+                  {tab}
+                </motion.button>
+              ))}
+            </motion.div>
+            {/* Dropdown (Mobile) */}
+            <motion.div
+              className="mb-12 sm:hidden px-2"
+              variants={itemVariants}
+            >
+              <div className="relative">
+                <select
+                  value={activeTab}
+                  onChange={(e) => setActiveTab(e.target.value)}
+                  className="w-full appearance-none px-5 py-3 bg-gray-200 text-gray-800 font-medium rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-green-600 transition-all duration-200"
+                >
+                  {tabs.map((tab) => (
+                    <option key={tab} value={tab}>
+                      {tab}
+                    </option>
+                  ))}
+                </select>
+                <div className="absolute inset-y-0 right-4 flex items-center pointer-events-none">
+                  <svg
+                    className="w-4 h-4 text-gray-500"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M19 9l-7 7-7-7"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </motion.div>
+            {/* Filtered Products */}
+            <motion.div
+              className="space-y-12"
+              variants={sectionVariants}
+            >
+              {filteredProducts.length > 0 ? (
+                filteredProducts.map((category, index) => (
+                  <motion.div
+                    key={index}
+                    className="group bg-white rounded-xl shadow-md hover:shadow-lg hover:bg-gray-50 transition-all duration-300 overflow-hidden"
+                    variants={cardVariants}
+                    initial="hidden"
+                    animate="visible"
+                    whileHover="hover"
+                  >
+                    <div className="flex flex-col md:flex-row">
+                      <div className="relative w-full md:w-1/2 h-80 sm:h-96 md:h-[600px] overflow-hidden">
+                        <Image
+                          src={category.image}
+                          alt={category.title}
+                          fill
+                          sizes="100vw"
+                          className="object-cover transition-transform duration-500 group-hover:scale-110"
+                        />
+                        <div className="absolute inset-0 bg-gradient-to-t from-gray-800/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                      </div>
+                      <div className="p-6 sm:p-8 lg:p-12 flex flex-col w-full md:w-1/2">
+                        <h3 className="text-xl sm:text-2xl lg:text-3xl font-semibold mb-4 text-gray-900">
+                          <Link
+                            href={category.link}
+                            className="hover:text-green-600 transition-colors duration-300"
+                          >
+                            {category.title}
+                          </Link>
+                        </h3>
+                        <p className="text-base sm:text-lg lg:text-xl text-gray-700 mb-6 line-clamp-8">
+                          {category.description}
+                        </p>
+                        <Link
+                          href={category.link}
+                          className="inline-flex items-center text-gray-900 font-semibold text-base sm:text-lg lg:text-lg hover:text-green-600 transition-colors duration-300"
+                        >
+                          Explore {category.title}
+                          <svg
+                            className="ml-3 h-5 w-5 text-gray-900 group-hover:text-green-600 transition-transform duration-300 group-hover:translate-x-2"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M9 5l7 7-7 7"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                          </svg>
+                        </Link>
+                      </div>
+                    </div>
+                  </motion.div>
+                ))
+              ) : (
+                <motion.p
+                  className="text-center text-lg text-gray-700"
+                  variants={itemVariants}
+                >
+                  No products found for this category.
+                </motion.p>
+              )}
+            </motion.div>
+          </div>
+        </motion.section>
+      </div>
+    </div>
+  );
+}