@devvistatech/devvista-kit 0.0.1

package/dist/app/contact/page.jsx

@@ -0,0 +1,119 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Card } from "@/components/other/card";
+import { toast } from "@/hooks/use-toast";
+import { MapPin, Phone, Mail } from "lucide-react";
+import { useEffect, useState, useRef } from "react";
+import { motion } from "framer-motion";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import ContactForm from "@/components/addOns/functional/ContactForm";
+import { CONTACT_PAGE } from "../constants/contact";
+var formSchema = z.object({
+    name: z.string().min(2, { message: CONTACT_PAGE.ERRORS.NAME_VALIDATION_ERROR }),
+    email: z.string().email({ message: CONTACT_PAGE.ERRORS.EMAIL_VALIDATION_ERROR }),
+    message: z.string().min(10, { message: CONTACT_PAGE.ERRORS.MESSAGE_VALIDATION_ERROR }),
+});
+export default function ContactPage() {
+    var _a = useState(true), isIframeLoading = _a[0], setIsIframeLoading = _a[1];
+    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var containerRef = useRef(null);
+    useEffect(function () {
+        var timer = setTimeout(function () {
+            setIsIframeLoading(false);
+        }, 300);
+        return function () { return clearTimeout(timer); };
+    }, []);
+    var form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: { name: "", email: "", message: "" },
+    });
+    function onSubmit(values) {
+        toast({
+            title: CONTACT_PAGE.ERRORS.TOAST_SUCCESS_TITLE,
+            description: CONTACT_PAGE.ERRORS.TOAST_SUCCESS_DESCRIPTION,
+        });
+        form.reset();
+    }
+    if (isLoading) {
+        return <Spinner />;
+    }
+    return (<div className="min-h-screen w-full relative overflow-hidden flex flex-col">
+      <style jsx>{"\n        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');\n\n        :root {\n          --jubilee: #F47C7C;\n          --natural-white: #F7F7F7;\n          --caviar: #2D2D2D;\n          --storm-cloud: #4A636E;\n          --exuberant-blue: #FF69B4;\n          --modern-purple: #D946EF;\n        }\n\n        * {\n          font-family: 'Inter', system-ui, sans-serif;\n        }\n\n        .gradient-text {\n          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));\n          -webkit-background-clip: text;\n          background-clip: text;\n          color: transparent;\n          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n        }\n\n        .glassmorphism {\n          background: rgba(255, 255, 255, 0.08);\n          backdrop-filter: blur(10px);\n          -webkit-backdrop-filter: blur(10px);\n          border: 2px solid transparent;\n          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;\n          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);\n        }\n\n        .iframe-container {\n          overflow: hidden;\n          padding: 0;\n          margin: 0;\n          width: 100%;\n          height: 110%;\n          min-height: 600px;\n        }\n\n        .iframe-container iframe {\n          display: block;\n          object-fit: contain;\n          overflow: hidden;\n          padding: 0;\n          margin: 0;\n          border: none;\n          width: 105%;\n          height: 100%;\n        }\n\n        .map-container {\n          width: 100%;\n          height: 500px;\n          border-radius: 1.5rem;\n          overflow: hidden;\n          position: relative;\n        }\n\n        .map-container iframe {\n          width: 100%;\n          height: 100%;\n          border: none;\n        }\n\n          .main-heading {\n            font-size: 3rem;\n            margin-bottom: 3rem;\n          }\n\n          .section-heading {\n            font-size: 2.5rem;\n          }\n\n          .iframe-container {\n            min-height: 600px; \n          }\n\n          .map-container {\n            height: 400px;\n          }\n\n          .contact-text {\n            font-size: 1.25rem;\n          }\n\n          .hours-heading {\n            font-size: 1.75rem;\n          }\n        }\n\n          .main-heading {\n            font-size: 2.5rem;\n          }\n\n          .section-heading {\n            font-size: 2rem;\n          }\n\n          .iframe-container {\n            min-height: 600px;\n            padding: 0;\n            margin: 0;\n            width: 100%;\n          }\n\n          .iframe-container iframe {\n            padding: 0;\n            margin: 0;\n            width: 100%;\n            height: 100%;\n            transform: none;\n          }\n\n        .map-container {\n          max-width: 100%;\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n          .contact-text {\n            font-size: 1rem;\n          }\n\n          .hours-heading {\n            font-size: 1.5rem;\n          }\n        }\n      "}</style>
+      <div className="w-full pt-20 lg:pt-40 flex-grow relative z-10 container-padding bg-white">
+        <motion.h1 initial={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }} className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg main-heading pt-36 sm:pt-32">
+          {CONTACT_PAGE.UI.MAIN_HEADING}
+        </motion.h1>
+
+        <div className="grid lg:grid-cols-2 gap-8 bg-gradient-to-b rounded-[2rem] lg:p-12 h-full mb-40 px-4">
+          {/* Contact Form */}
+          <div>
+            <div className="relative w-full iframe-container">
+              {isIframeLoading && (<div className="absolute inset-0 flex flex-col items-center justify-center bg-[#F7F7F7]/90 rounded-[1.5rem] z-20">
+                  <div className="w-10 h-10 border-4 border-t-4 border-gray-300 border-t-[#FF69B4] rounded-full animate-spin"></div>
+                  <p className="text-gray-700 mt-3 text-xl font-bold">{CONTACT_PAGE.UI.LOADING_TEXT}</p>
+                </div>)}
+              {/* <iframe
+          src="https://contact-form-devvista-kit.netlify.app/"
+          className={`w-full h-full rounded-[1.5rem] border-0 transition-opacity duration-500 ${isIframeLoading ? "opacity-0" : "opacity-100"}`}
+          title="Contact Form"
+          allowFullScreen
+          loading="lazy"
+        ></iframe> */}
+              <ContactForm />
+            </div>
+          </div>
+          {/* Contact Info */}
+          <div className="px-4">
+            <h2 className="text-4xl sm:text-5xl font-black mb-8 lg:mb-12 uppercase section-heading pt-24 pl-4">
+              {CONTACT_PAGE.UI.CONTACT_INFO_HEADING}
+            </h2>
+            <Card className="p-8 lg:p-12 glassmorphism rounded-[2rem] shadow-4xl w-full">
+              <div className="space-y-6">
+                <div className="flex items-center space-x-4">
+                  <MapPin className="h-6 w-6 text-[#FF69B4] drop-shadow-lg"/>
+                  <p className="text-gray-700 text-xl sm:text-2xl font-bold drop-shadow-md contact-text">
+                    {CONTACT_PAGE.UI.ADDRESS}
+                  </p>
+                </div>
+                <div className="flex items-center space-x-4">
+                  <Phone className="h-6 w-6 text-[#FF69B4] drop-shadow-lg"/>
+                  <div className="space-y-2">
+                    <a href={"tel:".concat(CONTACT_PAGE.UI.PHONE_1)} className="text-gray-700 text-xl sm:text-2xl font-bold hover:text-[#FF69B4] transition-all duration-200 drop-shadow-md contact-text">
+                      {CONTACT_PAGE.UI.PHONE_1}
+                    </a>
+                    <br />
+                    <a href={"tel:".concat(CONTACT_PAGE.UI.PHONE_2)} className="text-gray-700 text-xl sm:text-2xl font-bold hover:text-[#FF69B4] transition-all duration-200 drop-shadow-md contact-text">
+                      {CONTACT_PAGE.UI.PHONE_2}
+                    </a>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-4">
+                  <Mail className="h-6 w-6 text-[#FF69B4] drop-shadow-lg"/>
+                  <a href={"mailto:".concat(CONTACT_PAGE.UI.SUPPORT_EMAIL)} className="text-gray-700 text-xl sm:text-2xl font-bold hover:text-[#FF69B4] transition-all duration-200 drop-shadow-md contact-text">
+                    {CONTACT_PAGE.UI.SUPPORT_EMAIL}
+                  </a>
+                </div>
+              </div>
+              <div className="mt-6">
+                <h3 className="text-2xl sm:text-3xl font-black mb-4 uppercase pb-2 hours-heading">
+                  {CONTACT_PAGE.UI.HOURS_HEADING}
+                </h3>
+                <p className="text-gray-700 text-xl sm:text-2xl font-bold drop-shadow-md contact-text">
+                  {CONTACT_PAGE.UI.HOURS_TEXT}
+                </p>
+              </div>
+            </Card>
+          </div>
+        </div>
+
+        {/* Map Section */}
+        <div className="py-32 lg:mt-20 bg-[#1B2743] w-full">
+          <div className="map-container glassmorphism w-full max-w-[95%] mx-auto">
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2914.8248046145767!2d-76.07309392369562!3d43.06558317113779!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89d9f3b7c0a5b8f5%3A0x7f0b47a6628a12e0!2s215%20W%20Manlius%20St%2C%20East%20Syracuse%2C%20NY%2013057%2C%20USA!5e0!3m2!1sen!2s!4v1698675309866!5m2!1sen!2s" allowFullScreen loading="lazy" title={CONTACT_PAGE.UI.MAP_TITLE} className="w-full h-[1000px] lg:h-[1200px]"></iframe>
+          </div>
+        </div>
+      </div>
+    </div>);
+}

package/dist/app/faq/page.jsx

@@ -0,0 +1,97 @@
+"use client";
+import { motion } from "framer-motion";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/other/accordion";
+import { useEffect, useState } from "react";
+import { FAQ_PAGE } from "../constants/faq";
+export default function FAQPage() {
+    var _a = useState(false), isMobile = _a[0], setIsMobile = _a[1];
+    useEffect(function () {
+        var checkMobile = function () {
+            var mobile = window.innerWidth < 768;
+            setIsMobile(mobile);
+        };
+        checkMobile();
+        window.addEventListener("resize", checkMobile);
+        return function () { return window.removeEventListener("resize", checkMobile); };
+    }, []);
+    var sectionVariants = {
+        hidden: { opacity: 0, y: 20 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+        },
+    };
+    var itemVariants = {
+        hidden: { opacity: 0, y: 10 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+        },
+    };
+    var faqs = [
+        {
+            question: FAQ_PAGE.UI.FAQ_1_QUESTION,
+            answer: FAQ_PAGE.UI.FAQ_1_ANSWER,
+        },
+        {
+            question: FAQ_PAGE.UI.FAQ_2_QUESTION,
+            answer: FAQ_PAGE.UI.FAQ_2_ANSWER,
+        },
+        {
+            question: FAQ_PAGE.UI.FAQ_3_QUESTION,
+            answer: FAQ_PAGE.UI.FAQ_3_ANSWER,
+        },
+        {
+            question: FAQ_PAGE.UI.FAQ_4_QUESTION,
+            answer: FAQ_PAGE.UI.FAQ_4_ANSWER,
+        },
+        {
+            question: FAQ_PAGE.UI.FAQ_5_QUESTION,
+            answer: FAQ_PAGE.UI.FAQ_5_ANSWER,
+        },
+        {
+            question: FAQ_PAGE.UI.FAQ_6_QUESTION,
+            answer: FAQ_PAGE.UI.FAQ_6_ANSWER,
+        },
+        {
+            question: FAQ_PAGE.UI.FAQ_7_QUESTION,
+            answer: FAQ_PAGE.UI.FAQ_7_ANSWER,
+        },
+        {
+            question: FAQ_PAGE.UI.FAQ_8_QUESTION,
+            answer: FAQ_PAGE.UI.FAQ_8_ANSWER,
+        },
+        {
+            question: FAQ_PAGE.UI.FAQ_9_QUESTION,
+            answer: FAQ_PAGE.UI.FAQ_9_ANSWER,
+        },
+    ];
+    return (<div className="min-h-screen w-full bg-[#F7F7F7] flex flex-col">
+      <style jsx>{"\n        @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap\");\n\n        :root {\n          --jubilee: #F47C7C;\n          --natural-white: #F7F7F7;\n          --caviar: #2D2D2D;\n          --storm-cloud: #4A636E;\n          --exuberant-blue: #FF69B4;\n          --modern-purple: #D946EF;\n        }\n\n        * {\n          font-family: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n            Roboto, sans-serif;\n        }\n\n        .gradient-text {\n          background: linear-gradient(\n            135deg,\n            var(--exuberant-blue),\n            var(--jubilee),\n            var(--modern-purple)\n          );\n          -webkit-background-clip: text;\n          background-clip: text;\n          color: transparent;\n          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n        }\n\n        .glassmorphism {\n          background: rgba(255, 255, 255, 0.1);\n          backdrop-filter: blur(12px);\n          -webkit-backdrop-filter: blur(12px);\n          border: 1px solid rgba(255, 255, 255, 0.2);\n          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);\n          transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;\n        }\n\n        @supports not (backdrop-filter: blur(12px)) {\n          .glassmorphism {\n            background: rgba(255, 255, 255, 0.3);\n          }\n        }\n\n        .glassmorphism:hover {\n          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);\n        }\n\n        @media (max-width: 768px) {\n          .glassmorphism {\n            padding: 1rem;\n          }\n          .gradient-text {\n            font-size: 2.5rem;\n          }\n        }\n      "}</style>
+
+      <div className="w-full px-6 py-20 lg:px-12 lg:py-40 flex-grow relative z-10 container-padding bg-white">
+        <motion.h1 initial={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }} className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg main-heading pt-36 sm:pt-32">
+          {FAQ_PAGE.UI.MAIN_HEADING}
+        </motion.h1>
+
+        <motion.div variants={sectionVariants} initial="hidden" whileInView="visible" viewport={{ once: true, amount: 0.2 }} className="max-w-4xl mx-auto">
+          <Accordion type="single" collapsible className="w-full">
+            {faqs.map(function (faq, index) { return (<AccordionItem key={index} value={"item-".concat(index)} className="mb-6 border-none">
+                <AccordionTrigger className="text-left text-lg sm:text-xl lg:text-2xl font-extrabold uppercase tracking-tight text-gray-800 p-6 rounded-3xl glassmorphism hover:shadow-2xl transition-all duration-200" style={{
+                fontSize: "clamp(1.125rem, 4vw, 1.5rem)",
+            }}>
+                  {faq.question}
+                </AccordionTrigger>
+                <AccordionContent className="text-gray-800 text-base sm:text-lg leading-relaxed font-medium p-6 rounded-b-3xl glassmorphism" style={{
+                fontSize: "clamp(0.875rem, 3vw, 1.125rem)",
+            }}>
+                  {faq.answer}
+                </AccordionContent>
+              </AccordionItem>); })}
+          </Accordion>
+        </motion.div>
+      </div>
+    </div>);
+}

package/dist/app/gallery/page.jsx

@@ -0,0 +1,280 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { useState, useEffect, useCallback } from "react";
+import { GallerySection } from "@/components/addOns/functional/galleries/GalleryComplex";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { motion } from "framer-motion";
+import { useStrapiAuth } from "@/lib/auth-context";
+import { useAuth } from "@clerk/nextjs";
+import { GALLERY_PAGE } from "../constants/gallery";
+export default function GalleryPage() {
+    var _this = this;
+    var _a = useStrapiAuth(), user = _a.user, authLoading = _a.authLoading, checkSession = _a.checkSession;
+    var _b = useAuth(), isSignedIn = _b.isSignedIn, getToken = _b.getToken;
+    var _c = useState(true), isLoading = _c[0], setIsLoading = _c[1];
+    var _d = useState(null), error = _d[0], setError = _d[1];
+    var _e = useState([]), currentUploadedImages = _e[0], setUploadedImages = _e[1];
+    var _f = useState(null), galleryUser = _f[0], setUser = _f[1];
+    var isAdmin = isSignedIn && !!(user === null || user === void 0 ? void 0 : user.businessAdminId);
+    useEffect(function () {
+        setUser(user);
+    }, [user]);
+    useEffect(function () {
+        window.scrollTo(0, 0);
+    }, []);
+    useEffect(function () {
+        var handleLogin = function () { return checkSession(); };
+        var handleLogout = function () { return checkSession(); };
+        window.addEventListener("user-login", handleLogin);
+        window.addEventListener("user-logout", handleLogout);
+        return function () {
+            window.removeEventListener("user-login", handleLogin);
+            window.removeEventListener("user-logout", handleLogout);
+        };
+    }, [checkSession]);
+    var fetchInitialData = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        var headers, token, imagesResponse, errorText, _a, images, meta, err_1;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _c.trys.push([0, 7, 8, 9]);
+                    setIsLoading(true);
+                    headers = { "Content-Type": "application/json" };
+                    if (!isSignedIn) return [3 /*break*/, 2];
+                    return [4 /*yield*/, getToken()];
+                case 1:
+                    token = _c.sent();
+                    if (!token) {
+                        throw new Error(GALLERY_PAGE.ERRORS.NO_AUTH_TOKEN);
+                    }
+                    headers.Authorization = "Bearer ".concat(token);
+                    _c.label = 2;
+                case 2: return [4 /*yield*/, fetch("/api/gallery-data", {
+                        headers: headers,
+                    })];
+                case 3:
+                    imagesResponse = _c.sent();
+                    if (!!imagesResponse.ok) return [3 /*break*/, 5];
+                    return [4 /*yield*/, imagesResponse.text()];
+                case 4:
+                    errorText = _c.sent();
+                    console.error("GalleryPage: Fetch images failed", { status: imagesResponse.status, errorText: errorText });
+                    throw new Error(GALLERY_PAGE.ERRORS.FETCH_IMAGES_FAILED.replace("${errorText}", errorText));
+                case 5: return [4 /*yield*/, imagesResponse.json()];
+                case 6:
+                    _a = _c.sent(), images = _a.data, meta = _a.meta;
+                    if (((_b = meta === null || meta === void 0 ? void 0 : meta.pagination) === null || _b === void 0 ? void 0 : _b.total) > 100) {
+                        setError(GALLERY_PAGE.ERRORS.PAGINATION_WARNING);
+                    }
+                    setUploadedImages(images || []);
+                    return [3 /*break*/, 9];
+                case 7:
+                    err_1 = _c.sent();
+                    console.error("GalleryPage: Fetch error", err_1);
+                    setError(err_1 instanceof Error ? err_1.message : GALLERY_PAGE.ERRORS.FETCH_ERROR);
+                    return [3 /*break*/, 9];
+                case 8:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); }, [isSignedIn, getToken]);
+    useEffect(function () {
+        fetchInitialData();
+    }, [fetchInitialData]);
+    var handleImageUpload = function (e, file, title, description, category) { return __awaiter(_this, void 0, void 0, function () {
+        var token, formData, response, errorData, data, err_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    if (!file) {
+                        setError(GALLERY_PAGE.ERRORS.NO_FILE_SELECTED);
+                        return [2 /*return*/];
+                    }
+                    if (!["image/jpeg", "image/png", "image/gif"].includes(file.type)) {
+                        setError(GALLERY_PAGE.ERRORS.INVALID_FILE_TYPE);
+                        return [2 /*return*/];
+                    }
+                    if (!isAdmin) {
+                        console.error("GalleryPage: Unauthorized upload attempt", {
+                            isSignedIn: isSignedIn,
+                            businessAdminId: user === null || user === void 0 ? void 0 : user.businessAdminId,
+                        });
+                        setError(GALLERY_PAGE.ERRORS.UNAUTHORIZED_UPLOAD);
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 7, 8, 9]);
+                    setIsLoading(true);
+                    return [4 /*yield*/, getToken()];
+                case 2:
+                    token = _a.sent();
+                    if (!token) {
+                        setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
+                        return [2 /*return*/];
+                    }
+                    formData = new FormData();
+                    formData.append("file", file);
+                    formData.append("title", title || "Image ".concat(new Date().toISOString()));
+                    formData.append("description", description || "");
+                    formData.append("category", category);
+                    return [4 /*yield*/, fetch("/api/gallery-data", {
+                            method: "POST",
+                            headers: {
+                                Authorization: "Bearer ".concat(token),
+                            },
+                            body: formData,
+                        })];
+                case 3:
+                    response = _a.sent();
+                    if (!!response.ok) return [3 /*break*/, 5];
+                    return [4 /*yield*/, response.json()];
+                case 4:
+                    errorData = _a.sent();
+                    console.error("GalleryPage: Upload failed", { status: response.status, errorData: errorData });
+                    if (response.status === 401) {
+                        setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
+                        return [2 /*return*/];
+                    }
+                    throw new Error(errorData.error || GALLERY_PAGE.ERRORS.UPLOAD_IMAGE_FAILED.replace("${response.status}", response.status.toString()));
+                case 5: return [4 /*yield*/, response.json()];
+                case 6:
+                    data = (_a.sent()).data;
+                    setUploadedImages(data || []);
+                    setError(null);
+                    return [3 /*break*/, 9];
+                case 7:
+                    err_2 = _a.sent();
+                    console.error("GalleryPage: Upload Error", err_2);
+                    setError(err_2 instanceof Error ? err_2.message : GALLERY_PAGE.ERRORS.UPLOAD_IMAGE_ERROR);
+                    return [3 /*break*/, 9];
+                case 8:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleDeleteImage = function (documentId) { return __awaiter(_this, void 0, void 0, function () {
+        var token, response, errorData, data, err_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!isAdmin) {
+                        console.error("GalleryPage: Unauthorized delete attempt", {
+                            isSignedIn: isSignedIn,
+                            businessAdminId: user === null || user === void 0 ? void 0 : user.businessAdminId,
+                        });
+                        setError(GALLERY_PAGE.ERRORS.UNAUTHORIZED_DELETE);
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 7, 8, 9]);
+                    setIsLoading(true);
+                    return [4 /*yield*/, getToken()];
+                case 2:
+                    token = _a.sent();
+                    if (!token) {
+                        setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, fetch("/api/gallery-data", {
+                            method: "DELETE",
+                            headers: {
+                                "Content-Type": "application/json",
+                                Authorization: "Bearer ".concat(token),
+                            },
+                            body: JSON.stringify({ documentId: documentId }),
+                        })];
+                case 3:
+                    response = _a.sent();
+                    if (!!response.ok) return [3 /*break*/, 5];
+                    return [4 /*yield*/, response.json()];
+                case 4:
+                    errorData = _a.sent();
+                    console.error("GalleryPage: Delete failed", { status: response.status, errorData: errorData });
+                    if (response.status === 401) {
+                        setError(GALLERY_PAGE.ERRORS.AUTHENTICATION_ERROR);
+                        return [2 /*return*/];
+                    }
+                    throw new Error(errorData.error || GALLERY_PAGE.ERRORS.DELETE_IMAGE_FAILED.replace("${response.status}", response.status.toString()));
+                case 5: return [4 /*yield*/, response.json()];
+                case 6:
+                    data = (_a.sent()).data;
+                    setUploadedImages(data || []);
+                    setError(null);
+                    return [3 /*break*/, 9];
+                case 7:
+                    err_3 = _a.sent();
+                    console.error("GalleryPage: Delete Error", err_3);
+                    setError(err_3 instanceof Error ? err_3.message : GALLERY_PAGE.ERRORS.DELETE_IMAGE_ERROR);
+                    return [3 /*break*/, 9];
+                case 8:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); };
+    if (isLoading || authLoading) {
+        return <Spinner />;
+    }
+    return (<div className="min-h-screen w-full bg-[#F7F7F7] relative overflow-hidden flex flex-col">
+      {error && <div className="text-red-500 text-center p-4">{error}</div>}
+      <style jsx>{"\n        @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap\");\n\n        :root {\n          --jubilee: #F47C7C;\n          --natural-white: #F7F7F7;\n          --caviar: #2D2D2D;\n          --storm-cloud: #4A636E;\n          --exuberant-blue: #FF54B4;\n          --modern-purple: #D946EF;\n        }\n\n        * {\n          font-family: \"Inter\", system-ui, sans-serif;\n        }\n\n        .gradient-text {\n          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));\n          -webkit-background-clip: text;\n          background-clip: text;\n          color: transparent;\n          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n        }\n\n        @media (max-width: 1024px) {\n          .container-padding {\n            padding-left: 1.5rem;\n            padding-right: 1.5rem;\n            padding-top: 5rem;\n            padding-bottom: 5rem;\n          }\n\n          .main-heading {\n            font-size: 3rem;\n            margin-bottom: 3rem;\n          }\n\n          .content-text {\n            font-size: 1.25rem;\n          }\n        }\n\n        @media (max-width: 640px) {\n          .container-padding {\n            padding-left: 0.5rem;\n            padding-right: 0.5rem;\n            padding-top: 4rem;\n            padding-bottom: 4rem;\n          }\n\n          .main-heading {\n            font-size: 2.5rem;\n          }\n\n          .content-text {\n            font-size: 1rem;\n          }\n        }\n      "}</style>
+      <div className="w-full px-6 py-20 lg:px-12 lg:py-40 flex-grow relative z-10 container-padding bg-white">
+        <motion.h1 initial={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }} className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg main-heading pt-36 sm:pt-32">
+          {GALLERY_PAGE.UI.MAIN_HEADING}
+        </motion.h1>
+        {/* Admin Status Feedback, matching GallerySection */}
+        <div className="mb-4 text-center">
+          {authLoading || isLoading ? (<p className="text-gray-400 text-sm font-medium">{GALLERY_PAGE.UI.LOADING_TEXT}</p>) : isAdmin ? (<p className="text-gray-400 text-sm font-medium">
+              {GALLERY_PAGE.UI.ADMIN_LOGGED_IN_MESSAGE}
+            </p>) : user ? (<p className="text-gray-400 text-sm font-medium">
+            </p>) : (<p className="text-gray-400 text-sm font-medium">
+            </p>)}
+        </div>
+        <GallerySection user={galleryUser} setUser={setUser} authLoading={authLoading} uploadedImages={currentUploadedImages} setUploadedImages={setUploadedImages} error={error} setError={setError} isLoading={isLoading} setIsLoading={setIsLoading} handleImageUpload={handleImageUpload} handleDeleteImage={handleDeleteImage}/>
+      </div>
+    </div>);
+}

package/dist/app/layout.jsx

@@ -0,0 +1,45 @@
+import './globals.css';
+import { Inter } from 'next/font/google';
+import { ClerkProvider } from '@clerk/nextjs';
+import { ThemeProvider } from "@/components/theme-provider";
+import { AuthProvider } from "@/lib/auth-context";
+import Navbar from '@/components/navBars/navbar';
+import { Toaster } from "@/components/other/toaster";
+import Footer from '@/components/footers/footer';
+import IconBubble from '@/components/addOns/non-functional/IconBubble';
+var inter = Inter({ subsets: ['latin'], preload: true });
+export var metadata = {
+    metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'),
+    title: "DevVista Kit",
+    description: 'Your 24/7 fitness destination',
+    openGraph: {
+        title: "DevVista Kit",
+        description: '',
+        url: 'https://devvistatech.com/',
+        images: [{ url: '/images/FitStop.png' }],
+    },
+};
+export default function RootLayout(_a) {
+    var children = _a.children;
+    return (<ClerkProvider>
+      <html lang="en" className="h-full">
+        <head>
+          <script async src={"https://www.googletagmanager.com/gtag/js?id=".concat(process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID)}></script>
+          <script dangerouslySetInnerHTML={{
+            __html: "\n                window.dataLayer = window.dataLayer || [];\n                function gtag(){dataLayer.push(arguments);}\n                gtag('js', new Date());\n                gtag('config', '".concat(process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID, "');\n              "),
+        }}/>
+        </head>
+        <body className={"".concat(inter.className, " h-full bg-gray-900 text-gray-700 antialiased")}>
+          <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} disableTransitionOnChange>
+            <AuthProvider>
+              <Navbar />
+              <main className="min-h-screen w-full">{children}</main>
+              <Toaster />
+              <Footer />
+              <IconBubble />
+            </AuthProvider>
+          </ThemeProvider>
+        </body>
+      </html>
+    </ClerkProvider>);
+}