@devvistatech/devvista-kit 0.0.1

package/dist/components/addOns/non-functional/ThreeSetGallery.jsx

@@ -0,0 +1,40 @@
+var ThreeSetGallery = function (_a) {
+    var _b = _a.images, images = _b === void 0 ? [
+        {
+            src: '/images/gallery/placeholder1.jpg',
+            alt: 'Gallery Image 1',
+            title: 'Image One',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+        {
+            src: '/images/gallery/placeholder2.jpg',
+            alt: 'Gallery Image 2',
+            title: 'Image Two',
+            description: 'Sed do eiusmod tempor incididunt ut labore et dolore.',
+        },
+        {
+            src: '/images/gallery/placeholder3.jpg',
+            alt: 'Gallery Image 3',
+            title: 'Image Three',
+            description: 'Ut enim ad minim veniam, quis nostrud exercitation.',
+        },
+    ] : _b, _c = _a.columns, columns = _c === void 0 ? '3' : _c;
+    var gridCols = {
+        '1': 'grid-cols-1',
+        '2': 'grid-cols-2',
+        '3': 'grid-cols-3',
+        '4': 'grid-cols-4',
+    };
+    return (<section className="w-full h-full">
+      <div className={"grid ".concat(gridCols[columns], " gap-0")}>
+        {images.map(function (image, index) { return (<div key={index} className="relative overflow-hidden group">
+            <img src={image.src} alt={image.alt} className="w-full h-[400px] sm:h-[900px] object-cover object-top transform transition-all duration-300 group-hover:scale-105 group-hover:blur-sm"/>
+            <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+              <h3 className="text-2xl font-bold">{image.title}</h3>
+              <p className="text-lg">{image.description}</p>
+            </div>
+          </div>); })}
+      </div>
+    </section>);
+};
+export default ThreeSetGallery;

package/dist/components/addOns/non-functional/aboutSections/AboutSection.jsx

@@ -0,0 +1,35 @@
+// src/components/AboutSection.tsx
+"use client";
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { EditToggleButton } from '@/components/other/button';
+import { ABOUT_SECTION } from './constants/aboutSection';
+export default function AboutSection() {
+    var _a = useState(false), isReadMore = _a[0], setIsReadMore = _a[1];
+    var toggleReadMore = function () {
+        setIsReadMore(!isReadMore);
+    };
+    return (<section className="relative py-16 sm:py-24 md:py-32 bg-white w-full flex justify-center">
+      <div className="w-full px-4 sm:px-6 md:px-12 text-center">
+        <motion.h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-8 md:mb-16 text-blue-900" initial={{ opacity: 0, y: 40 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 1.2, ease: 'easeOut' }} viewport={{ once: true }}>
+          {ABOUT_SECTION.UI.LOREM_IPSUM_DOLOR}
+        </motion.h2>
+        <div className="max-w-4xl mx-auto space-y-6 md:space-y-8">
+          <p className="text-base sm:text-lg md:text-xl max-w-3xl mx-auto mb-8 md:mb-12 text-gray-700">
+            {ABOUT_SECTION.UI.LOREM_IPSUM_PARAGRAPH}
+          </p>
+          {isReadMore && (<>
+              <motion.p className="text-base sm:text-lg md:text-xl max-w-3xl mx-auto mb-8 md:mb-12 text-gray-700" initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} transition={{ duration: 0.5, ease: 'easeOut' }}>
+                {ABOUT_SECTION.UI.AT_VERO_PARAGRAPH}
+              </motion.p>
+              <motion.p className="text-base sm:text-lg md:text-xl max-w-3xl mx-auto mb-8 md:mb-12 text-gray-700" initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} transition={{ duration: 0.5, ease: 'easeOut', delay: 0.2 }}>
+                {ABOUT_SECTION.UI.LOREM_IPSUM_PARAGRAPH}
+              </motion.p>
+            </>)}
+          <EditToggleButton onClick={toggleReadMore} size="lg" className="mt-4 bg-teal-600 hover:bg-teal-700 text-white rounded-full text-base sm:text-lg md:text-xl shadow-xl transform active:scale-95 transition-transform">
+            {isReadMore ? ABOUT_SECTION.BUTTONS.MINUS_LEGERE_BUTTON : ABOUT_SECTION.BUTTONS.PLUS_LEGERE_BUTTON}
+          </EditToggleButton>
+        </div>
+      </div>
+    </section>);
+}

package/dist/components/addOns/non-functional/aboutSections/constants/aboutSection.js

@@ -0,0 +1,24 @@
+// components/addOns/non-functional/aboutSections/constants/aboutSection.ts
+// Constants for hardcoded text in AboutSection.tsx, organized by purpose
+export var ABOUT_SECTION = {
+    // UI Text for AboutSection
+    UI: {
+        // Heading for the section
+        LOREM_IPSUM_DOLOR: "Lorem Ipsum Dolor",
+        // Paragraph text (used for first and third paragraphs)
+        LOREM_IPSUM_PARAGRAPH: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+        // Second paragraph text (shown when read more is toggled)
+        AT_VERO_PARAGRAPH: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate.",
+    },
+    // Button Text for AboutSection
+    BUTTONS: {
+        // EditToggleButton text when read more is active
+        MINUS_LEGERE_BUTTON: "Minus Legere",
+        // EditToggleButton text when read more is inactive
+        PLUS_LEGERE_BUTTON: "Plus Legere",
+    },
+    // Error Messages for AboutSection
+    ERRORS: {
+    // No hardcoded errors
+    },
+};

package/dist/components/addOns/non-functional/imageCarousels/ProductSlider.jsx

@@ -0,0 +1,80 @@
+// src/components/ProductSlider.tsx
+'use client';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { PROGRAM_SLIDER } from './constants/programSlider';
+var ProductSlider = function (_a) {
+    var _b = _a.products, products = _b === void 0 ? [
+        {
+            id: '1',
+            name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[0],
+            description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[0],
+            image: '/images/products/placeholder1.jpg',
+        },
+        {
+            id: '2',
+            name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[1],
+            description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[1],
+            image: '/images/products/placeholder2.jpg',
+        },
+        {
+            id: '3',
+            name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[2],
+            description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[2],
+            image: '/images/products/placeholder3.jpg',
+        },
+        {
+            id: '4',
+            name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[3],
+            description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[3],
+            image: '/images/products/placeholder4.jpg',
+        },
+        {
+            id: '5',
+            name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[4],
+            description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[4],
+            image: '/images/products/placeholder5.jpg',
+        },
+        {
+            id: '6',
+            name: PROGRAM_SLIDER.UI.PRODUCT_NAMES[5],
+            description: PROGRAM_SLIDER.UI.PRODUCT_DESCRIPTIONS[5],
+            image: '/images/products/placeholder6.jpg',
+        },
+    ] : _b;
+    var scrollLeft = function () {
+        var _a;
+        (_a = document.getElementById('scroll-container')) === null || _a === void 0 ? void 0 : _a.scrollBy({ left: -300, behavior: 'smooth' });
+    };
+    var scrollRight = function () {
+        var _a;
+        (_a = document.getElementById('scroll-container')) === null || _a === void 0 ? void 0 : _a.scrollBy({ left: 300, behavior: 'smooth' });
+    };
+    return (<section className="bg-white">
+      <div className="w-full px-0">
+        <div className="relative w-full">
+          <button onClick={scrollLeft} className="absolute left-4 top-1/2 -translate-y-1/2 z-10 hover:bg-black/70 text-white bg-black/40 w-12 h-12 flex items-center justify-center rounded-full shadow-lg transition-all duration-300" aria-label={PROGRAM_SLIDER.BUTTONS.PREVIOUS_PRODUCT_ARIA}>
+            <ChevronLeft size={24}/>
+          </button>
+          <div id="scroll-container" className="flex overflow-x-scroll scroll-smooth snap-x snap-mandatory scrollbar-hide" style={{
+            scrollSnapType: 'x mandatory',
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
+        }}>
+            {products.map(function (product) { return (<div key={product.id} className="min-w-full md:min-w-[50%] lg:min-w-[33.3333%] snap-start relative">
+                <div className="relative w-full h-[500px] sm:h-[600px] md:h-[800px] lg:h-[1200px]">
+                  <img src={product.image} alt={product.name} className="w-full h-full object-cover"/>
+                  <div className="absolute bottom-0 w-full bg-black/50 text-white text-center py-4">
+                    <h3 className="text-2xl font-bold">{product.name}</h3>
+                    <p className="text-lg">{product.description}</p>
+                  </div>
+                </div>
+              </div>); })}
+          </div>
+          <button onClick={scrollRight} className="absolute right-4 top-1/2 -translate-y-1/2 z-10 hover:bg-black/70 text-white bg-black/40 w-12 h-12 flex items-center justify-center rounded-full shadow-lg transition-all duration-300" aria-label={PROGRAM_SLIDER.BUTTONS.NEXT_PRODUCT_ARIA}>
+            <ChevronRight size={24}/>
+          </button>
+        </div>
+      </div>
+    </section>);
+};
+export default ProductSlider;

package/dist/components/addOns/non-functional/imageCarousels/ProgramCarousel.jsx

@@ -0,0 +1,155 @@
+// src/components/ProgramsCarousel.tsx
+"use client";
+import Link from 'next/link';
+import { PrevButton, NextButton, ActionButton } from "@/components/other/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/other/card';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { PROGRAM_CAROUSEL } from './constants/programCarousel';
+var staggerChildren = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.2,
+            delayChildren: 0.3,
+        },
+    },
+};
+var childVariant = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+        opacity: 1,
+        y: 0,
+        transition: { duration: 0.5, ease: 'easeOut' },
+    },
+};
+// Separate component for each slide
+var ProgramSlide = function (_a) {
+    var program = _a.program;
+    var videoRef = useRef(null);
+    var handleMouseEnter = function () {
+        if (videoRef.current) {
+            videoRef.current.play().catch(function (error) { return console.error(PROGRAM_CAROUSEL.ERRORS.VIDEO_PLAY_ERROR, error); });
+        }
+    };
+    var handleMouseLeave = function () {
+        if (videoRef.current) {
+            videoRef.current.pause();
+            videoRef.current.currentTime = 0;
+        }
+    };
+    return (<motion.div className="embla__slide flex-[0_0_100%] max-[640px]:h-[400px] sm:flex-[0_0_33.333333%] sm:h-[900px] w-full flex items-center justify-center" variants={childVariant} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      <Card className="bg-white/90 w-full max-[640px]:h-[400px] sm:h-[900px] flex flex-col border-none pb-6 sm:pb-12 shadow-lg hover:shadow-xl transition-shadow duration-300">
+        <div className="relative w-full max-[640px]:h-[280px] sm:h-[800px]">
+          <video ref={videoRef} src={program.video} poster={program.poster} className="w-full h-full object-cover" muted playsInline loop/>
+        </div>
+        <CardHeader className="flex-shrink-0 max-[640px]">
+          <CardTitle className="max-[640px]:text-xl sm:text-3xl font-bold text-center">
+            {program.title}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="flex-grow flex items-center justify-center max-[640px]">
+          <CardDescription className="max-[640px]:text-lg sm:text-lg text-gray-800 text-center line-clamp-3">
+            {program.description}
+          </CardDescription>
+        </CardContent>
+      </Card>
+    </motion.div>);
+};
+var ProgramsCarousel = function (_a) {
+    var _b = _a.programs, programs = _b === void 0 ? [
+        {
+            title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[0],
+            video: '/videos/placeholder1.mp4',
+            poster: '/images/placeholder1.jpg',
+            description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[0],
+            link: '/',
+        },
+        {
+            title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[1],
+            video: '/videos/placeholder2.mp4',
+            poster: '/images/placeholder2.jpg',
+            description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[1],
+            link: '/',
+        },
+        {
+            title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[2],
+            video: '/videos/placeholder3.mp4',
+            poster: '/images/placeholder3.jpg',
+            description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[2],
+            link: '/',
+        },
+        {
+            title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[3],
+            video: '/videos/placeholder4.mp4',
+            poster: '/images/placeholder4.jpg',
+            description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[3],
+            link: '/',
+        },
+        {
+            title: PROGRAM_CAROUSEL.UI.PROGRAM_TITLES[4],
+            video: '/videos/placeholder5.mp4',
+            poster: '/images/placeholder5.jpg',
+            description: PROGRAM_CAROUSEL.UI.PROGRAM_DESCRIPTIONS[4],
+            link: '/',
+        },
+    ] : _b, _c = _a.sectionTitle, sectionTitle = _c === void 0 ? PROGRAM_CAROUSEL.UI.SECTION_TITLE : _c, _d = _a.buttonText, buttonText = _d === void 0 ? PROGRAM_CAROUSEL.UI.VIEW_ALL_BUTTON_TEXT : _d, _e = _a.buttonLink, buttonLink = _e === void 0 ? '/' : _e;
+    var _f = useEmblaCarousel({ loop: true, align: 'start', containScroll: 'trimSnaps', slidesToScroll: 1 }), emblaRef = _f[0], emblaApi = _f[1];
+    var _g = useState(false), canPrev = _g[0], setCanPrev = _g[1];
+    var _h = useState(true), canNext = _h[0], setCanNext = _h[1];
+    var scrollPrev = useCallback(function () {
+        if (emblaApi)
+            emblaApi.scrollPrev();
+    }, [emblaApi]);
+    var scrollNext = useCallback(function () {
+        if (emblaApi)
+            emblaApi.scrollNext();
+    }, [emblaApi]);
+    var onSelect = useCallback(function () {
+        if (!emblaApi)
+            return;
+        setCanPrev(emblaApi.canScrollPrev());
+        setCanNext(emblaApi.canScrollNext());
+    }, [emblaApi]);
+    useEffect(function () {
+        if (!emblaApi)
+            return;
+        emblaApi.on('select', onSelect);
+        emblaApi.on('reInit', onSelect);
+        onSelect();
+        emblaApi.reInit();
+        emblaApi.scrollTo(0, false);
+        var handleResize = function () { return emblaApi.reInit(); };
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, [emblaApi, onSelect]);
+    return (<motion.section className="w-full bg-white/80 relative overflow-hidden p-0 m-0" initial="hidden" whileInView="visible">
+      <div className="w-full py-12 sm:py-24 m-0">
+        <motion.h2 className="text-4xl sm:text-6xl font-bold text-center mb-8">
+          {sectionTitle}
+        </motion.h2>
+        <div className="embla relative border-none outline-none w-full" ref={emblaRef}>
+          <motion.div className="embla__container flex gap-0 w-full" variants={staggerChildren} initial="hidden" whileInView="visible" viewport={{ once: true }}>
+            {programs.map(function (program, index) { return (<ProgramSlide key={index} program={program}/>); })}
+          </motion.div>
+          <PrevButton className="absolute left-0 top-1/2 transform -translate-y-1/2 p-2 rounded-r-full" onClick={scrollPrev} disabled={!canPrev} aria-label={PROGRAM_CAROUSEL.BUTTONS.PREVIOUS_SLIDE_ARIA}>
+            <ChevronLeft size={24}/>
+          </PrevButton>
+          <NextButton className="absolute right-0 top-1/2 transform -translate-y-1/2 p-2 rounded-l-full" onClick={scrollNext} disabled={!canNext} aria-label={PROGRAM_CAROUSEL.BUTTONS.NEXT_SLIDE_ARIA}>
+            <ChevronRight size={24}/>
+          </NextButton>
+        </div>
+        <motion.div className="mt-8 text-center" initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.6, ease: 'easeOut' }}>
+          <Link href={buttonLink}>
+            <ActionButton className="hover:scale-110 hover:shadow-lg hover:shadow-gray-800" aria-label={buttonText}>
+              {buttonText}
+            </ActionButton>
+          </Link>
+        </motion.div>
+      </div>
+    </motion.section>);
+};
+export default ProgramsCarousel;

package/dist/components/addOns/non-functional/imageCarousels/constants/programCarousel.js

@@ -0,0 +1,39 @@
+// components/addOns/non-functional/imageCarousels/constants/programCarousel.ts
+// Constants for hardcoded text in ProgramsCarousel.tsx, organized by purpose
+export var PROGRAM_CAROUSEL = {
+    // UI Text for ProgramsCarousel
+    UI: {
+        // Default program titles
+        PROGRAM_TITLES: [
+            "Program One",
+            "Program Two",
+            "Program Three",
+            "Program Four",
+            "Program Five",
+        ],
+        // Default program descriptions
+        PROGRAM_DESCRIPTIONS: [
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+            "Ut enim ad minim veniam, quis nostrud exercitation ullamco.",
+            "Duis aute irure dolor in reprehenderit in voluptate velit.",
+            "Excepteur sint occaecat cupidatat non proident.",
+        ],
+        // Default section title
+        SECTION_TITLE: "Our Programs",
+        // Default button text (also used as aria-label)
+        VIEW_ALL_BUTTON_TEXT: "View All Programs",
+    },
+    // Button Text for ProgramsCarousel
+    BUTTONS: {
+        // Aria-label for previous button
+        PREVIOUS_SLIDE_ARIA: "Previous slide",
+        // Aria-label for next button
+        NEXT_SLIDE_ARIA: "Next slide",
+    },
+    // Error Messages for ProgramsCarousel
+    ERRORS: {
+        // Console error message for video playback failure
+        VIDEO_PLAY_ERROR: "Video play error:",
+    },
+};

package/dist/components/addOns/non-functional/imageCarousels/constants/programSlider.js

@@ -0,0 +1,36 @@
+// components/addOns/non-functional/imageCarousels/constants/programSlider.ts
+// Constants for hardcoded text in ProductSlider.tsx, organized by purpose
+export var PROGRAM_SLIDER = {
+    // UI Text for ProductSlider
+    UI: {
+        // Default product names
+        PRODUCT_NAMES: [
+            "Product One",
+            "Product Two",
+            "Product Three",
+            "Product Four",
+            "Product Five",
+            "Product Six",
+        ],
+        // Default product descriptions
+        PRODUCT_DESCRIPTIONS: [
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            "Sed do eiusmod tempor incididunt ut labore et dolore.",
+            "Ut enim ad minim veniam, quis nostrud exercitation.",
+            "Duis aute irure dolor in reprehenderit in voluptate velit.",
+            "Excepteur sint occaecat cupidatat non proident.",
+            "Sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        ],
+    },
+    // Button Text for ProductSlider
+    BUTTONS: {
+        // Aria-label for previous button
+        PREVIOUS_PRODUCT_ARIA: "Previous product",
+        // Aria-label for next button
+        NEXT_PRODUCT_ARIA: "Next product",
+    },
+    // Error Messages for ProductSlider
+    ERRORS: {
+    // No hardcoded errors
+    },
+};

package/dist/components/addOns/non-functional/spinner.jsx

@@ -0,0 +1,13 @@
+"use client";
+import { motion } from "framer-motion";
+var spinnerVariants = {
+    animate: {
+        rotate: 360,
+        transition: { duration: 1, repeat: Infinity, ease: "linear" },
+    },
+};
+export default function Spinner() {
+    return (<div className="fixed inset-0 flex items-center justify-center bg-gray-900/80 z-50">
+      <motion.div variants={spinnerVariants} animate="animate" className="w-12 h-12 border-4 border-t-4 border-gray-300 border-t-blue-500 rounded-full"/>
+    </div>);
+}

package/dist/components/footers/footer.jsx

@@ -0,0 +1,219 @@
+"use client";
+import Link from "next/link";
+import Image from "next/image";
+import { Mail, Phone, MapPin, Facebook, X } from "lucide-react";
+import { useState, useEffect } from "react";
+import { SignIn, SignUp, SignedIn, SignedOut, SignOutButton as ClerkSignOutButton, useAuth } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth-context";
+import { motion, AnimatePresence } from "framer-motion";
+import AdminMenu from "../other/admin-menu";
+import { SignInButton, SignUpButton, SignOutButton, SettingsButton } from "../other/button";
+var baseLinks = [
+    { href: "/", label: "Home" },
+    { href: "/about", label: "About" },
+    { href: "/contact", label: "Contact" },
+    { href: "/gallery", label: "Gallery" },
+    { href: "/schedule", label: "Schedule & Rates" },
+    { href: "/faq", label: "FAQ" },
+];
+export default function Footer() {
+    var isSignedIn = useAuth().isSignedIn;
+    var _a = useStrapiAuth(), user = _a.user, authLoading = _a.authLoading, checkSession = _a.checkSession;
+    var _b = useState(false), isLoginOpen = _b[0], setIsLoginOpen = _b[1];
+    var _c = useState(false), isSignupOpen = _c[0], setIsSignupOpen = _c[1];
+    var _d = useState(false), isAdminMenuOpen = _d[0], setIsAdminMenuOpen = _d[1];
+    var _e = useState(null), error = _e[0], setError = _e[1];
+    useEffect(function () {
+        if (isSignedIn) {
+            setIsLoginOpen(false);
+            setIsSignupOpen(false);
+            setIsAdminMenuOpen(false);
+        }
+    }, [isSignedIn]);
+    useEffect(function () {
+        if (isLoginOpen || isSignupOpen || isAdminMenuOpen) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "auto";
+        }
+        return function () {
+            document.body.style.overflow = "auto";
+        };
+    }, [isLoginOpen, isSignupOpen, isAdminMenuOpen]);
+    useEffect(function () {
+        var event = new CustomEvent("modalStateChange", {
+            detail: { isOpen: isLoginOpen || isSignupOpen || isAdminMenuOpen },
+        });
+        window.dispatchEvent(event);
+    }, [isLoginOpen, isSignupOpen, isAdminMenuOpen]);
+    useEffect(function () {
+        if (!authLoading) {
+            if (isSignedIn && !user) {
+                checkSession().catch(function (err) {
+                    console.error("Footer: Failed to sync user data", err);
+                    setError("Failed to load user data. Please try logging out and back in.");
+                });
+            }
+            else {
+                setError(null);
+            }
+        }
+    }, [isSignedIn, user, authLoading, checkSession]);
+    var isAdmin = isSignedIn && !!(user === null || user === void 0 ? void 0 : user.businessAdminId) && (user === null || user === void 0 ? void 0 : user.userRole) === "admin";
+    if (authLoading) {
+        return <div>Loading...</div>;
+    }
+    if (error) {
+        return <div className="text-red-500">Error: {error}</div>;
+    }
+    return (<footer className="w-full bg-[#2D2D2D] text-gray-300 border-t border-gray-700">
+      <style jsx>{"\n        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');\n\n        :root {\n          --caviar: #2D2D2D;\n          --natural-white: #F7F7F7;\n          --blue-500: #3B82F6;\n          --blue-600: #2563EB;\n          --blue-700: #1D4ED8;\n        }\n\n        * {\n          font-family: 'Inter', sans-serif;\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: 1px solid rgba(255, 255, 255, 0.2);\n          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n        }\n\n        .modal-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(--blue-500), var(--blue-600), var(--blue-700)) 1;\n          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);\n          border-radius: 2rem;\n          max-height: 90vh;\n          overflow: hidden;\n        }\n\n        .gradient-text {\n          background: linear-gradient(90deg, var(--blue-500), var(--blue-600));\n          -webkit-background-clip: text;\n          background-clip: text;\n          color: transparent;\n        }\n\n        .contact-icon {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          padding: 0.75rem;\n          border-radius: 0.5rem;\n          background: rgba(255, 255, 255, 0.1);\n          transition: color 0.2s ease, transform 0.2s ease;\n        }\n\n        .contact-icon:hover {\n          color: var(--blue-500);\n          transform: scale(1.1);\n        }\n\n        .cl-signIn-root,\n        .cl-signUp-root {\n          background: rgba(17, 24, 39, 0.95);\n          border: 1px solid #374151;\n          border-radius: 0.5rem;\n          color: white;\n          font-family: 'Inter', sans-serif;\n          max-height: 80vh;\n          overflow-y: auto;\n          max-width: 90vw;\n          box-sizing: border-box;\n        }\n\n        .cl-button {\n          background: var(--blue-500);\n        }\n\n        .cl-button:hover {\n          background: var(--blue-600);\n        }\n\n        .admin-menu-container {\n          position: relative;\n        }\n\n        @media (max-width: 640px) {\n          .cl-signIn-root,\n          .cl-signUp-root {\n            max-width: 95vw;\n            max-height: 80vh;\n            overflow-y: auto;\n            padding: 0.5rem;\n          }\n\n          .cl-signIn-root .cl-main,\n          .cl-signUp-root .cl-main {\n            font-size: 0.9rem;\n          }\n\n          .cl-signIn-root .cl-headerTitle,\n          .cl-signUp-root .cl-headerTitle {\n            font-size: 1.25rem;\n          }\n\n          .cl-signIn-root .cl-formFieldInput,\n          .cl-signUp-root .cl-formFieldInput {\n            padding: 0.5rem;\n            font-size: 0.9rem;\n            background: #1f2937;\n            color: #ffffff;\n            border: 1px solid #4b5563;\n          }\n\n          .cl-button {\n            padding: 0.5rem;\n            font-size: 0.9rem;\n          }\n\n          .modal-glassmorphism {\n            backdrop-filter: none;\n            background: rgba(255, 255, 255, 0.2);\n            padding: 1rem;\n            max-height: 85vh;\n          }\n        }\n\n        @supports not (backdrop-filter: blur(10px)) {\n          .glassmorphism,\n          .modal-glassmorphism {\n            background: rgba(255, 255, 255, 0.2);\n          }\n        }\n      "}</style>
+
+      <div className="w-full px-4 sm:px-6 lg:px-8 2xl:px-24 py-12 sm:py-16 glassmorphism">
+        <div className="grid grid-cols-1 2xl:grid-cols-3 gap-8 sm:gap-12">
+          <div className="flex flex-col items-center 2xl:items-start">
+            <Link href="/" className="flex items-center space-x-4 mb-6">
+              <Image src="/images/FitStop.png" alt="DevVista Kit Logo" width={64} height={64} className="h-20 w-20 rounded-full shadow-md transition-transform duration-300 ease-in-out transform hover:scale-105" quality={80} loading="lazy"/>
+              <div>
+                <span className="text-lg sm:text-xl 2xl:text-2xl font-extrabold text-blue-500 uppercase tracking-tight">
+                  DevVista's
+                </span>
+                <br />
+                <span className="text-2xl sm:text-3xl 2xl:text-4xl font-extrabold text-blue-500 uppercase tracking-tight">
+                  Kit
+                </span>
+              </div>
+            </Link>
+            <p className="text-sm sm:text-base 2xl:text-lg text-gray-400 text-center 2xl:text-left font-medium">
+              24/7 Fitness Access & Diverse Classes
+            </p>
+          </div>
+
+          <div className="flex flex-col items-center">
+            <h3 className="text-lg sm:text-xl 2xl:text-2xl font-bold gradient-text mb-6 uppercase tracking-tight">
+              Quick Links
+            </h3>
+            <ul className="grid grid-cols-2 gap-x-4 gap-y-3 text-center">
+              {baseLinks.map(function (link) { return (<li key={link.href}>
+                  <Link href={link.href} className="text-sm sm:text-base 2xl:text-lg font-medium uppercase text-gray-300 hover:text-blue-400 transition-all">
+                    {link.label}
+                  </Link>
+                </li>); })}
+            </ul>
+          </div>
+
+          <div className="flex flex-col items-center 2xl:items-end">
+            <h3 className="text-lg sm:text-xl 2xl:text-2xl font-bold gradient-text mb-6 uppercase tracking-tight">
+              Reach Out
+            </h3>
+            <ul className="flex space-x-4 2xl:hidden">
+              <li>
+                <a href="tel:3154154043" className="contact-icon text-gray-300" aria-label="Call 315-415-4043">
+                  <Phone className="h-6 w-6 sm:h-8 sm:w-8 text-blue-500"/>
+                </a>
+              </li>
+              <li>
+                <a href="mailto:devvistainfo@gmail.com" className="contact-icon text-gray-300" aria-label="Email devvistainfo@gmail.com">
+                  <Mail className="h-6 w-6 sm:h-8 sm:w-8 text-blue-500"/>
+                </a>
+              </li>
+              <li>
+                <a href="https://www.google.com/maps/place/215+W+Manlius+St,+East+Syracuse,+NY+13057" className="contact-icon text-gray-300" aria-label="View 215 W. Manlius St, East Syracuse, NY 13057 on Google Maps" target="_blank" rel="noopener noreferrer">
+                  <MapPin className="h-6 w-6 sm:h-8 sm:w-8 text-blue-500"/>
+                </a>
+              </li>
+              <li>
+                <a href="https://www.facebook.com/KathyCaiellosFitStop" className="contact-icon text-gray-300" aria-label="Visit our Facebook page" target="_blank" rel="noopener noreferrer">
+                  <Facebook className="h-6 w-6 sm:h-8 sm:w-8 text-blue-500"/>
+                </a>
+              </li>
+            </ul>
+            <ul className="space-y-3 text-center 2xl:text-right hidden 2xl:block">
+              <li className="text-sm sm:text-base 2xl:text-lg text-gray-300 font-medium">
+                215 W. Manlius St, East Syracuse, NY 13057
+              </li>
+              <li className="flex items-center justify-center 2xl:justify-end space-x-3">
+                <Phone className="h-4 w-4 sm:h-5 sm:w-5 text-blue-500"/>
+                <a href="tel:3152145466" className="text-sm sm:text-base 2xl:text-lg text-gray-300 font-medium hover:text-blue-400 transition-all">
+                  315-214-5466
+                </a>
+              </li>
+              <li className="flex items-center justify-center 2xl:justify-end space-x-3">
+                <Phone className="h-4 w-4 sm:h-5 sm:w-5 text-blue-500"/>
+                <a href="tel:3154154043" className="text-sm sm:text-base 2xl:text-lg text-gray-300 font-medium hover:text-blue-400 transition-all">
+                  315-415-4043
+                </a>
+              </li>
+              <li className="flex items-center justify-center 2xl:justify-end space-x-3">
+                <Mail className="h-4 w-4 sm:h-5 sm:w-5 text-blue-500"/>
+                <a href="mailto:devvistainfo@gmail.com" className="text-sm sm:text-base 2xl:text-lg text-gray-300 font-medium hover:text-blue-400 transition-all">
+                  devvistainfo@gmail.com
+                </a>
+              </li>
+              <li className="flex items-center justify-center 2xl:justify-end space-x-3">
+                <Facebook className="h-4 w-4 sm:h-5 sm:w-5 text-blue-500"/>
+                <a href="https://www.facebook.com/KathyCaiellosFitStop" className="text-sm sm:text-base 2xl:text-lg text-gray-300 font-medium hover:text-blue-400 transition-all" target="_blank" rel="noopener noreferrer">
+                  Facebook
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Authentication Buttons Moved Above the Bordered Div */}
+        <div className="flex justify-center 2xl:justify-start mt-8 space-x-4 admin-menu-container">
+          {!authLoading && (<SignedIn>
+              <div className="flex items-center space-x-2">
+                <ClerkSignOutButton redirectUrl="/">
+                  <SignOutButton size="sm" aria-label="Logout">
+                    Logout
+                  </SignOutButton>
+                </ClerkSignOutButton>
+                {isAdmin && (<SettingsButton size="sm" onClick={function () { return setIsAdminMenuOpen(true); }} aria-label="Admin Menu">
+                  </SettingsButton>)}
+              </div>
+            </SignedIn>)}
+          {!authLoading && (<SignedOut>
+              <SignInButton size="sm" onClick={function () { return setIsLoginOpen(true); }} aria-label="Login">
+                Login
+              </SignInButton>
+              <SignUpButton size="sm" onClick={function () { return setIsSignupOpen(true); }} aria-label="Sign Up">
+                Sign Up
+              </SignUpButton>
+            </SignedOut>)}
+        </div>
+
+        {/* Bordered Div Now Only Contains Copyright Text */}
+        <div className="mt-8 pt-6 border-t border-gray-700 relative">
+          <div className="flex justify-center items-center w-full mx-auto max-w-full">
+            <p className="text-sm sm:text-base 2xl:text-lg text-gray-400 font-medium text-center">
+              © {new Date().getFullYear()} DevVista Kit. All rights reserved.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <AnimatePresence>
+        {isLoginOpen && (<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate" onClick={function () { return setIsLoginOpen(false); }}>
+            <motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.9, y: 20 }} transition={{ type: "spring", damping: 25, stiffness: 300 }} className="relative max-w-md w-full mx-4 modal-glassmorphism" onClick={function (e) { return e.stopPropagation(); }}>
+              <button onClick={function () { return setIsLoginOpen(false); }} className="absolute right-2 md:right-14 top-2 z-50 text-gray-600 hover:text-white hover:bg-gray-700/50 rounded-full p-3 transition-all duration-200
+
+ w-12 h-12 flex items-center justify-center" aria-label="Close login modal">
+                <X className="h-6 w-6"/>
+              </button>
+              <SignIn routing="hash"/>
+            </motion.div>
+          </motion.div>)}
+        {isSignupOpen && (<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate" onClick={function () { return setIsSignupOpen(false); }}>
+            <motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.9, y: 20 }} transition={{ type: "spring", damping: 25, stiffness: 300 }} className="relative max-w-md w-full mx-4 modal-glassmorphism" onClick={function (e) { return e.stopPropagation(); }}>
+              <button onClick={function () { return setIsSignupOpen(false); }} className="absolute right-2 md:right-14 top-2 z-50 text-gray-600 hover:text-white hover:bg-gray-700/50 rounded-full p-3 transition-all duration-200 w-12 h-12 flex items-center justify-center" aria-label="Close signup modal">
+                <X className="h-6 w-6"/>
+              </button>
+              <SignUp routing="hash"/>
+            </motion.div>
+          </motion.div>)}
+        {isAdminMenuOpen && isAdmin && (<AdminMenu onClose={function () { return setIsAdminMenuOpen(false); }}/>)}
+      </AnimatePresence>
+    </footer>);
+}