@devvistatech/devvista-kit 0.0.1

package/dist/components/addOns/functional/schedules/constants/ScheduleGridTwoBasic.js

@@ -0,0 +1,40 @@
+// components/addOns/functional/schedules/constants/scheduleGridTwoBasic.ts
+// Constants for hardcoded text in ScheduleGridTwoBasic.tsx, organized by purpose
+export var SCHEDULE_GRID_TWO_BASIC = {
+    // UI Text for ScheduleGridTwoBasic
+    UI: {
+        // Heading for schedule section
+        CLASS_SCHEDULE_HEADING: "Class Schedule",
+        // Text when no classes exist for a day
+        NO_CLASSES_MESSAGE: "No classes",
+        // Footer text before phone number
+        COMPLIMENTARY_CLASS_TEXT: "Your first class is complimentary! Questions? Call ",
+        // Phone number in footer link
+        PHONE_NUMBER: "315-415-4043",
+        // Footer disclaimer
+        SCHEDULE_DISCLAIMER: "*Management reserves the right to cancel or alter class schedules based on attendance.",
+        // Days of the week for headers
+        DAYS_OF_WEEK: [
+            "Monday",
+            "Tuesday",
+            "Wednesday",
+            "Thursday",
+            "Friday",
+            "Saturday",
+            "Sunday",
+        ],
+        // Hardcoded age group for popup
+        ALL_AGES_TEXT: "All Ages",
+        // DeleteIconButton aria-label template
+        DELETE_BUTTON_ARIA: "Delete ${cls.name} class",
+    },
+    // Button Text for ScheduleGridTwoBasic
+    BUTTONS: {
+        // AddButton text for adding new class
+        ADD_NEW_CLASS_BUTTON: "Add New Class",
+    },
+    // Error Messages for ScheduleGridTwoBasic
+    ERRORS: {
+    // No hardcoded errors
+    },
+};

package/dist/components/addOns/functional/schedules/constants/SchedulerForm.js

@@ -0,0 +1,65 @@
+// components/addOns/functional/schedules/constants/schedulerForm.ts
+// Constants for hardcoded text in Schedule.tsx (SchedulerForm), organized by purpose
+export var SCHEDULER_FORM = {
+    // UI Text for SchedulerForm
+    UI: {
+        // Heading for edit class modal
+        EDIT_CLASS_HEADING: "Edit Class",
+        // Heading for add new class modal
+        ADD_NEW_CLASS_HEADING: "Add New Class",
+        // Label for class name input
+        CLASS_NAME_LABEL: "Class Name",
+        // Placeholder for class name input
+        CLASS_NAME_PLACEHOLDER: "Enter class name",
+        // Label for start time inputs
+        START_TIME_LABEL: "Start Time",
+        // Default option for hour select
+        HOUR_OPTION: "Hour",
+        // Default option for minute select
+        MINUTE_OPTION: "Minute",
+        // Options for period select
+        AM_OPTION: "AM",
+        PM_OPTION: "PM",
+        // Label for end time inputs
+        END_TIME_LABEL: "End Time",
+        // Label for days of week checkboxes
+        DAYS_OF_WEEK_LABEL: "Days of the Week",
+        // Checkbox labels for days of the week
+        DAYS_OF_WEEK: [
+            { value: 1, label: "Monday" },
+            { value: 2, label: "Tuesday" },
+            { value: 3, label: "Wednesday" },
+            { value: 4, label: "Thursday" },
+            { value: 5, label: "Friday" },
+            { value: 6, label: "Saturday" },
+            { value: 7, label: "Sunday" },
+        ],
+        // Label for class description textarea
+        CLASS_DESCRIPTION_LABEL: "Class Description (optional)",
+        // Placeholder for class description textarea
+        CLASS_DESCRIPTION_PLACEHOLDER: "Enter class description",
+        // Heading for delete confirmation modal
+        DELETE_CONFIRMATION_HEADING: "Confirm Deletion",
+        // Text in delete confirmation modal
+        DELETE_CONFIRMATION_MESSAGE: "Are you sure you want to delete this class? This action cannot be undone.",
+    },
+    // Button Text for SchedulerForm
+    BUTTONS: {
+        // AddButton text when loading
+        SAVING_BUTTON: "Saving...",
+        // AddButton text when editing a class
+        UPDATE_BUTTON: "Update",
+        // AddButton text when adding a new class
+        ADD_BUTTON: "Add",
+        // DeleteButton text when loading
+        DELETING_BUTTON: "Deleting...",
+        // DeleteButton text for delete confirmation
+        DELETE_BUTTON: "Delete",
+        // CancelButton text for both modals
+        CANCEL_BUTTON: "Cancel",
+    },
+    // Error Messages for SchedulerForm
+    ERRORS: {
+    // No hardcoded errors
+    },
+};

package/dist/components/addOns/functional/schedules/constants/scheduleGridOne.js

@@ -0,0 +1,54 @@
+// components/addOns/functional/schedules/constants/scheduleGridOne.ts
+// Constants for hardcoded text in ScheduleGridOne.tsx, organized by purpose
+export var SCHEDULE_GRID_ONE = {
+    // UI Text for ScheduleGridOne
+    UI: {
+        // Label for search input
+        SEARCH_LABEL: "Search by Class Name",
+        // Placeholder for search input
+        SEARCH_PLACEHOLDER: "Search classes...",
+        // Label for time filter select
+        TIME_FILTER_LABEL: "Time of Day",
+        // Default option for time filter select
+        ALL_TIMES_OPTION: "All Times",
+        // Time filter options
+        MORNING_OPTION: "Morning (Before 12:00 PM)",
+        AFTERNOON_OPTION: "Afternoon (12:00 PM - 5:00 PM)",
+        EVENING_OPTION: "Evening (After 5:00 PM)",
+        // Heading for schedule section
+        CLASS_SCHEDULE_HEADING: "Class Schedule",
+        // Text when no classes exist for a day
+        NO_CLASSES_MESSAGE: "No classes",
+        // Footer text before phone number
+        COMPLIMENTARY_CLASS_TEXT: "Your first class is complimentary! Questions? Call ",
+        // Phone number in footer link
+        PHONE_NUMBER: "315-415-4043",
+        // Footer disclaimer
+        SCHEDULE_DISCLAIMER: "*Management reserves the right to cancel or alter class schedules based on attendance.",
+        // Days of the week for headers
+        DAYS_OF_WEEK: [
+            "Monday",
+            "Tuesday",
+            "Wednesday",
+            "Thursday",
+            "Friday",
+            "Saturday",
+            "Sunday",
+        ],
+        // Hardcoded age group for popup
+        ALL_AGES_TEXT: "All Ages",
+        // DeleteIconButton aria-label template
+        DELETE_BUTTON_ARIA: "Delete ${cls.name} class",
+    },
+    // Button Text for ScheduleGridOne
+    BUTTONS: {
+        // SubmitButton text for resetting filters
+        RESET_FILTERS_BUTTON: "Reset Filters",
+        // AddButton text for adding new class
+        ADD_NEW_CLASS_BUTTON: "Add New Class",
+    },
+    // Error Messages for ScheduleGridOne
+    ERRORS: {
+    // No hardcoded errors
+    },
+};

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

@@ -0,0 +1,24 @@
+"use client";
+import { motion } from "framer-motion";
+import { X } from "lucide-react";
+import { useState } from "react";
+export default function AnnouncementBanner() {
+    var _a = useState(true), isVisible = _a[0], setIsVisible = _a[1];
+    if (!isVisible)
+        return null;
+    return (<motion.div className="fixed top-0 left-0 right-0 bg-blue-500/80 backdrop-blur-sm text-white py-3 sm:py-6 px-4 sm:px-6 z-50 shadow-md" style={{
+            maskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%)",
+            WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%)",
+        }} initial={{ y: -100, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: -100, opacity: 0 }} transition={{ duration: 0.5, ease: "easeOut" }}>
+      <div className="max-w-7xl mx-auto flex items-center justify-between relative pr-10 sm:pr-14">
+        <p className="text-xs sm:text-sm md:text-base font-medium text-center flex-1">
+          We will be closed this Friday and Saturday (July 4–5) in observance of Independence Day.
+        </p>
+        <button onClick={function () { return setIsVisible(false); }} className="absolute right-2 sm:right-4 bg-blue-600/50 hover:bg-blue-700/70 text-white rounded-full p-1.5 sm:p-2 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-colors" aria-label="Close announcement">
+          <X className="w-5 h-5 sm:w-8 sm:h-8"/>
+        </button>
+      </div>
+
+      <style jsx>{"\n        .gradient-text {\n          background: linear-gradient(45deg, #80ff80 25%, #80ff80 50%, #00b7eb 85%, #00b7eb 75%);\n          -webkit-background-clip: text;\n          background-clip: text;\n          color: transparent;\n        }\n      "}</style>
+    </motion.div>);
+}

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

@@ -0,0 +1,38 @@
+// src/components/FeaturesSection.tsx
+"use client";
+import { ActionButton } from "@/components/other/button";
+import { CheckCircle, ArrowRight } from "lucide-react";
+import Link from "next/link";
+export function FeaturesSection(_a) {
+    var features = _a.features, title = _a.title, description = _a.description, ctaText = _a.ctaText, ctaLink = _a.ctaLink;
+    return (<section className="w-full py-16 sm:py-24 px-4 sm:px-8 bg-blue-200 z-0">
+      <div className="w-full pt-16 sm:pt-24 pb-16 sm:pb-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6">
+          <div className="flex flex-col md:flex-row gap-6 justify-center items-center">
+            <div className="w-full md:w-1/2 space-y-6 flex justify-center">
+              <ul className="space-y-4 text-2xl font-semibold">
+                {features.map(function (feature, index) { return (<li key={index} className="flex items-center justify-start">
+                    <CheckCircle className="mr-3 h-6 w-6 text-[#FF69B4] flex-shrink-0"/>
+                    <span>{feature.text}</span>
+                  </li>); })}
+              </ul>
+            </div>
+            <div className="w-full md:w-1/2 space-y-6 text-center pt-12">
+              <h4 className="text-4xl sm:text-5xl font-bold text-[#333] tracking-tight">
+                {title}
+              </h4>
+              <p className="text-xl sm:text-2xl font-semibold text-[#333]">
+                {description}
+              </p>
+              <ActionButton asChild>
+                <Link href={ctaLink} className="flex items-center justify-center">
+                  {ctaText}
+                  <ArrowRight className="ml-2 h-6 w-6"/>
+                </Link>
+              </ActionButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>);
+}

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

@@ -0,0 +1,71 @@
+"use client";
+import { useRef, useEffect, useState } from "react";
+import { HeroButton } from "@/components/other/button"; // Updated import
+import Link from "next/link";
+export function HeroSection(_a) {
+    var title = _a.title, subtitle = _a.subtitle, ctaText = _a.ctaText, ctaLink = _a.ctaLink, videoSrc = _a.videoSrc, videoAriaLabel = _a.videoAriaLabel, posterSrc = _a.posterSrc, onVideoReady = _a.onVideoReady;
+    var heroBackgroundRef = useRef(null);
+    var videoRef = useRef(null);
+    var _b = useState(true), isVideoLoading = _b[0], setIsVideoLoading = _b[1];
+    useEffect(function () {
+        var handleScroll = function () {
+            if (window.innerWidth <= 768)
+                return;
+            if (heroBackgroundRef.current) {
+                var scrollY_1 = window.scrollY;
+                var parallaxSpeed = 0.9;
+                heroBackgroundRef.current.style.transform = "translateY(".concat(scrollY_1 * parallaxSpeed, "px)");
+            }
+        };
+        window.addEventListener("scroll", handleScroll, { passive: true });
+        return function () { return window.removeEventListener("scroll", handleScroll); };
+    }, []);
+    useEffect(function () {
+        var video = videoRef.current;
+        if (!video)
+            return;
+        video.style.opacity = "0";
+        var handleCanPlay = function () {
+            setIsVideoLoading(false);
+            video.style.opacity = "1";
+            if (onVideoReady)
+                onVideoReady();
+        };
+        video.addEventListener("canplaythrough", handleCanPlay);
+        video.load();
+        return function () {
+            video.removeEventListener("canplaythrough", handleCanPlay);
+        };
+    }, [onVideoReady, videoSrc]);
+    return (<section className="relative h-screen w-full z-0 pt-12 sm:pt-12 overflow-hidden bg-[#1E2A44]">
+      <style jsx>{"\n        .bg-gradient-overlay {\n          position: absolute;\n          inset: 0;\n          background: linear-gradient(\n            to bottom,\n            var(--jubilee) / 0.6,\n            var(--jubilee) / 0.4\n          );\n        }\n        .video-fade-in {\n          opacity: 0;\n          transition: opacity 0.5s ease-in;\n        }\n      "}</style>
+      <div className="absolute inset-0 z-[-10] overflow-hidden" style={{ "--jubilee": "#F47C7C" }} ref={heroBackgroundRef}>
+        <video ref={videoRef} autoPlay loop muted playsInline preload="metadata" className="video-fade-in absolute inset-0 w-full h-screen object-cover filter brightness-75" aria-label={videoAriaLabel} poster={posterSrc || undefined}>
+          <source src={"".concat(videoSrc, "#t=0.1")} type="video/mp4"/>
+          Your browser does not support the video tag.
+        </video>
+        <div className="bg-gradient-overlay"/>
+      </div>
+      <div className="relative z-10 w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 text-center flex flex-col justify-center items-center h-screen">
+        <div className="relative flex items-center justify-center w-full max-w-full">
+          <h1 className="text-5xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-[#FF69B4] tracking-tight" style={{
+            textShadow: "\n                2px 2px 4px rgba(0, 0, 0, 0.5),\n                -2px -2px 4px rgba(0, 0, 0, 0.5)\n              ",
+            fontFamily: "'Inter', sans-serif",
+        }}>
+            {title}
+          </h1>
+        </div>
+        <h2 className="text-2xl sm:text-4xl md:text-5xl font-semibold text-white tracking-tight pt-4" style={{
+            textShadow: "\n              2px 2px 4px rgba(0, 0, 0, 0.5),\n              -2px -2px 4px rgba(0, 0, 0, 0.5)\n            ",
+        }}>
+          {subtitle}
+        </h2>
+        <HeroButton asChild size="hero" className="mt-8 text-white text-base sm:text-lg lg:text-xl">
+          <Link href={ctaLink}>{ctaText}</Link>
+        </HeroButton>
+      </div>
+      <div className="absolute bottom-4 left-4 z-10">
+        {/* <SocialIcons /> */}
+      </div>
+    </section>);
+}

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

@@ -0,0 +1,36 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { ScrollToTopButton, PhoneButton } from '@/components/other/button';
+export default function IconBubble() {
+    var _a = useState(false), isPhoneHovered = _a[0], setIsPhoneHovered = _a[1];
+    var _b = useState(false), showScrollButton = _b[0], setShowScrollButton = _b[1];
+    useEffect(function () {
+        var handleScroll = function () {
+            if (window.scrollY > 200) {
+                setShowScrollButton(true);
+            }
+            else {
+                setShowScrollButton(false);
+            }
+        };
+        window.addEventListener('scroll', handleScroll);
+        return function () { return window.removeEventListener('scroll', handleScroll); };
+    }, []);
+    var handleScrollToTop = function () {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+    return (<div className="fixed bottom-4 right-4 z-50 flex flex-col space-y-4">
+      {/* Scroll to Top Button */}
+      {showScrollButton && (<ScrollToTopButton onClick={handleScrollToTop}/>)}
+
+      {/* Phone Button */}
+      <div className="relative flex items-center" onMouseEnter={function () { return setIsPhoneHovered(true); }} onMouseLeave={function () { return setIsPhoneHovered(false); }}>
+        <a href="tel:3154154043" aria-label="Call us">
+          <PhoneButton />
+        </a>
+        {isPhoneHovered && (<div className="absolute right-20 bg-gray-900 text-white px-4 py-2 rounded-md text-base font-medium shadow-lg whitespace-nowrap">
+            (315) 415-4043
+          </div>)}
+      </div>
+    </div>);
+}

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

@@ -0,0 +1,114 @@
+'use client';
+import { useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+import { ChevronLeft, ChevronRight, X } from 'lucide-react';
+export default function SampleCarousel() {
+    var _a = useState(false), isModalOpen = _a[0], setIsModalOpen = _a[1];
+    var _b = useState(null), selectedSample = _b[0], setSelectedSample = _b[1];
+    var openModal = function (sample) {
+        setSelectedSample(sample);
+        setIsModalOpen(true);
+    };
+    var closeModal = function () {
+        setIsModalOpen(false);
+        setSelectedSample(null);
+    };
+    // Carousel ref for scrolling
+    var carouselRef = useRef(null);
+    var scrollLeft = function () {
+        if (carouselRef.current) {
+            carouselRef.current.scrollBy({ left: -300, behavior: 'smooth' });
+        }
+    };
+    var scrollRight = function () {
+        if (carouselRef.current) {
+            carouselRef.current.scrollBy({ left: 300, behavior: 'smooth' });
+        }
+    };
+    // Carpet examples data
+    var carpetExamples = [
+        {
+            brand: 'Lorem',
+            type: 'Ipsum Dolor',
+            src: '/images/carpet/samples/new-samples/Dreamweaver_Astounding_Color_Fine Details-min.jpg',
+            alt: '',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+        },
+        {
+            brand: 'Lorem',
+            type: 'Sit Amet',
+            src: '/images/carpet/samples/new-samples/Dreamweaver_Dublin II_Color_Dundrum-min.jpg',
+            alt: '',
+            description: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.',
+        },
+        {
+            brand: 'Lorem',
+            type: 'Consectetur',
+            src: '/images/carpet/samples/new-samples/Dreamweaver_Gold Standard_Color_Glitter-min.jpg',
+            alt: '',
+            description: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.',
+        }
+    ];
+    return (<section id="carpet-examples" className="relative w-full py-16 sm:py-24 md:py-32 bg-gradient-to-b from-blue-100/20 to-teal-100/20">
+      <div className="w-full px-4 sm:px-6 md:px-12">
+        <motion.div className="text-center" initial={{ opacity: 0, y: 50 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.8 }}>
+          <h2 className="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 md:mb-12 text-blue-900 tracking-tight">
+            Lorem Ipsum Samples
+          </h2>
+          <div className="relative">
+            <div ref={carouselRef} className="flex overflow-x-auto snap-x snap-mandatory scrollbar-hide space-x-6 py-4" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+              {carpetExamples.map(function (example, index) { return (<motion.div key={"".concat(example.brand, "-").concat(example.type, "-").concat(index)} className="flex-none w-64 md:w-80 snap-center relative group" initial={{ opacity: 0, scale: 0.8 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: index * 0.1 }}>
+                  <button onClick={function () { return openModal(example); }} className="w-full flex flex-col items-center justify-center rounded-3xl glassmorphic min-h-[300px] hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-2 focus:ring-teal-500">
+                    {example.src ? (<div className="w-full h-48 md:h-64 aspect-square relative">
+                        <img src={example.src} alt={example.alt || "".concat(example.brand, " ").concat(example.type, " sample")} className="w-full h-full object-cover rounded-2xl" title={"".concat(example.brand, " ").concat(example.type)} onError={function (e) {
+                    e.currentTarget.style.display = 'none';
+                    e.currentTarget.parentElement.innerHTML = "<div class=\"text-center h-48 md:h-64 flex flex-col items-center justify-center\"><span class=\"text-2xl md:text-3xl font-bold text-teal-600\">".concat(example.brand, "</span><span class=\"text-lg md:text-xl text-teal-600\">").concat(example.type, "</span></div>");
+                }}/>
+                        <div className="absolute inset-0 flex flex-col items-center justify-center bg-teal-600/50 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl p-4 text-center">
+                          <span className="text-lg md:text-xl font-bold">{example.brand}</span>
+                          <span className="text-sm md:text-base font-medium">{example.type}</span>
+                        </div>
+                      </div>) : (<div className="text-center h-48 md:h-64 flex flex-col items-center justify-center">
+                        <span className="text-2xl md:text-3xl font-bold text-teal-600">{example.brand}</span>
+                        <span className="text-lg md:text-xl text-teal-600">{example.type}</span>
+                      </div>)}
+                  </button>
+                </motion.div>); })}
+            </div>
+            <button onClick={scrollLeft} className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-teal-600/80 text-white p-3 rounded-full hover:bg-teal-500 transition-colors duration-300" aria-label="Scroll Left">
+              <ChevronLeft size={24}/>
+            </button>
+            <button onClick={scrollRight} className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-teal-600/80 text-white p-3 rounded-full hover:bg-teal-500 transition-colors duration-300" aria-label="Scroll Right">
+              <ChevronRight size={24}/>
+            </button>
+          </div>
+          <p className="mt-6 text-sm md:text-base text-gray-600 italic max-w-5xl mx-auto">
+            *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.*
+          </p>
+        </motion.div>
+      </div>
+
+      {/* Modal */}
+      {isModalOpen && selectedSample && (<motion.div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4 sm:p-6 md:p-8" onClick={closeModal} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.3 }}>
+          <motion.div className="bg-white rounded-3xl shadow-2xl w-full max-w-[90vw] sm:max-w-3xl md:max-w-4xl lg:max-w-5xl max-h-[90vh] overflow-y-auto p-6 sm:p-8 relative glassmorphic" onClick={function (e) { return e.stopPropagation(); }} initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 0.8, opacity: 0 }} transition={{ duration: 0.3 }}>
+            <button onClick={closeModal} className="absolute top-4 right-4 text-gray-600 hover:text-teal-600 focus:outline-none focus:ring-2 focus:ring-teal-500" aria-label="Close Modal">
+              <X size={28}/>
+            </button>
+            <div className="flex flex-col md:flex-row gap-6 sm:gap-8">
+              {selectedSample.src ? (<img src={selectedSample.src} alt={selectedSample.alt || "".concat(selectedSample.brand, " ").concat(selectedSample.type, " sample")} className="w-full md:w-1/2 h-64 sm:h-80 md:h-96 lg:h-[32rem] object-cover rounded-2xl" onError={function (e) {
+                    e.currentTarget.style.display = 'none';
+                    e.currentTarget.parentElement.innerHTML = "<div class=\"w-full md:w-1/2 h-64 sm:h-80 md:h-96 lg:h-[32rem] flex flex-col items-center justify-center bg-gray-100 rounded-2xl\"><span class=\"text-xl sm:text-2xl md:text-3xl font-bold text-teal-600\">".concat(selectedSample.brand, "</span><span class=\"text-base sm:text-lg md:text-xl text-teal-600\">").concat(selectedSample.type, "</span></div>");
+                }}/>) : (<div className="w-full md:w-1/2 h-64 sm:h-80 md:h-96 lg:h-[32rem] flex flex-col items-center justify-center bg-gray-100 rounded-2xl">
+                  <span className="text-xl sm:text-2xl md:text-3xl font-bold text-teal-600">{selectedSample.brand}</span>
+                  <span className="text-base sm:text-lg md:text-xl text-teal-600">{selectedSample.type}</span>
+                </div>)}
+              <div className="flex-1 flex flex-col justify-center">
+                <h3 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-teal-600 mb-2 sm:mb-3">{selectedSample.brand}</h3>
+                <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-800 mb-3 sm:mb-4">{selectedSample.type}</p>
+                <p className="text-sm sm:text-base md:text-lg lg:text-xl text-gray-600">{selectedSample.description}</p>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>)}
+    </section>);
+}

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

@@ -0,0 +1,177 @@
+"use client";
+import { motion } from "framer-motion";
+import { useRef, useState, useEffect } from "react";
+var TestimonialModal = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, quote = _a.quote, author = _a.author, isMobile = _a.isMobile;
+    var modalRef = useRef(null);
+    var handleClickOutside = function (event) {
+        if (modalRef.current && !modalRef.current.contains(event.target)) {
+            onClose();
+        }
+    };
+    useEffect(function () {
+        var _a;
+        if (isOpen) {
+            var firstFocusable = (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("button");
+            firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "auto";
+        }
+        return function () {
+            document.body.style.overflow = "auto";
+        };
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    return (<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[10000] p-4" onClick={handleClickOutside} aria-modal="true" role="dialog">
+      <motion.div ref={modalRef} initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} className="bg-white rounded-2xl p-6 sm:p-8 max-w-lg w-full overflow-y-auto relative glassmorphism" style={{ maxHeight: isMobile ? "50vh" : "80vh" }}>
+        <button onClick={onClose} className="absolute top-4 right-4 text-gray-500 hover:text-gray-700" aria-label="Close testimonial modal">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M18 6L6 18M6 6l12 12"/>
+          </svg>
+        </button>
+        <p className="text-[#2D2D2D] text-lg sm:text-xl font-medium italic mb-4">
+          “{quote}”
+        </p>
+        <p className="text-[#2D2D2D] text-base sm:text-lg font-medium text-right">
+          — {author}
+        </p>
+      </motion.div>
+    </div>);
+};
+var Testimonials = function (_a) {
+    var isMobile = _a.isMobile;
+    var _b = useState(null), selectedTestimonial = _b[0], setSelectedTestimonial = _b[1];
+    var testimonialRef = useRef(null);
+    useEffect(function () {
+        var event = new CustomEvent("modalStateChange", {
+            detail: { isOpen: !!selectedTestimonial },
+        });
+        window.dispatchEvent(event);
+    }, [selectedTestimonial]);
+    var sectionVariants = {
+        hidden: { opacity: 0, y: 20 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+        },
+    };
+    var 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" },
+        },
+    };
+    var itemVariants = {
+        hidden: { opacity: 0, y: 10 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+        },
+    };
+    var scrollToTestimonials = function () {
+        if (testimonialRef.current) {
+            var headerOffset = 290;
+            var elementPosition = testimonialRef.current.getBoundingClientRect().top + window.pageYOffset;
+            window.scrollTo({
+                top: elementPosition - headerOffset,
+                behavior: "smooth",
+            });
+        }
+    };
+    return (<div className={"pt-12 px-12 pb-24 bg-[#1B2743] ".concat(isMobile ? "pt-32" : "pt-12", " pb-12")}>
+      <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-pink: #FF69B4;\n          --modern-purple: #D946EF;\n        }\n\n        * {\n          font-family: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\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        .line-clamp-8 {\n          display: -webkit-box;\n          -webkit-line-clamp: 8;\n          -webkit-box-orient: vertical;\n          overflow: hidden;\n        }\n      "}</style>
+      {!isMobile && (<div className="flex justify-center">
+          <button onClick={scrollToTestimonials} className="relative mb-72 transition-all duration-300 hover:scale-110" style={{ top: "-20px" }} aria-label="Scroll down">
+            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-white transition-all duration-300">
+              <polyline points="4 8 12 16 20 8"/>
+            </svg>
+          </button>
+        </div>)}
+      <motion.div ref={testimonialRef} variants={sectionVariants} initial="hidden" animate="visible">
+        <motion.h2 variants={itemVariants} className="text-4xl sm:text-5xl font-extrabold mb-16 text-white/90 text-center tracking-tight drop-shadow-md uppercase">
+          Testimonials
+        </motion.h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10 lg:gap-12 min-h-fit items-stretch">
+          {[
+            {
+                quote: "I came to FitStop looking for consistent classes that I could take that would allow me to prioritize my own health, as a mom who wanted to keep up with her energetic young kids. What I found was a gem in Kathy and a tribe of amazing people alongside! In just a matter of months, I went from being the \"new girl\" to laughing and engaging with those who've been attending classes for the long haul! It is a joy to be \"in it\" on this quest for health, strength, confidence, and longevity with such a committed and authentic group of humans! Kathy cares about each of her members (and their loved ones) deeply and her approach to whole-body health (physical, emotional, nutrition, mental, rest, etc.) is unparalleled! She exudes warmth, encouragement, fun, and sets a positive tone for each class and training session. At the same time, she is a powerhouse \u2013 strong, smart, and energetic, but always humble and unpretentious. She excels at switching it up from week to week in classes and training sessions, keeping the motivation high and our bodies working hard! Strength training with Kathy has been one of the most impactful decisions of my adult life. She is a stellar coach with a commitment to constantly learning, growing, and challenging herself and her clients.",
+                author: "Susan H.",
+            },
+            {
+                quote: "Joining Fit Stop was life-changing. Kathy’s guidance is invaluable—thank you!",
+                author: "Pam S.",
+            },
+            {
+                quote: "Six years with Kathy transformed my health. Her tailored advice is a game-changer.",
+                author: "Stan Kaplan D.D.S.",
+            },
+            {
+                quote: "Modern, well-equipped, and friendly—Fit Stop is a fantastic place to train.",
+                author: "Vicki Meguid",
+            },
+            {
+                quote: "Kathy’s gym feels like home. Classes are fun, and the space is always clean and bright.",
+                author: "Deb G.",
+            },
+            {
+                quote: "From the moment I walked into FitStop and started training with Kathy, I knew I was in the right place. Coming off a health scare, I needed support—and Kathy provided that from day one. Her mix of expertise, kindness, and genuine care is unmatched. Her classes introduced me to a community of strong, supportive women, and I quickly felt right at home. FitStop isn’t just a gym—it’s a safe, welcoming space where I feel empowered and encouraged. Thanks to Kathy, I feel strong and confident again. I actually look forward to going to the gym now! If you’re looking for a place that prioritizes both wellness and community, FitStop is it.",
+                author: "Annie T.",
+            },
+            {
+                quote: "I lost 40 pounds with Kathy’s simple formula: eat right, exercise, and stay consistent.",
+                author: "Kristi K.",
+                image: "/images/kristiportrait.jpg",
+            },
+            {
+                quote: "I have been a member of FitStop since its opening in East Syracuse. I have followed Kathy for many years prior to her opening her own gym. The FitStop is very welcoming and a great place to work out. I especially enjoy her classes and my gym mates. We work hard but we have fun at the same time. Kathy is very knowledgeable and helpful ensuring everyone gets a safe, great workout.",
+                author: "Carol K.",
+            },
+            {
+                quote: "Kathy makes everyone feel welcome and ensures that the classes are inviting to all. I’ve been going to the Fitstop for fifteen years and it’s a positive, bright spot in my day. And I should mention that it is a great workout, emphasizing mobility and strength, keeping us active in our golden years.",
+                author: "Kate F.",
+            },
+            {
+                quote: "Kathy you are my North Star! Kathy has helped me to achieve the best decade of my life in spite of having the lingering effects of Lymes disease. Kathy keeps it real, no lame excuses accepted!! But also tailored to my level of ability She keeps me motivated to be active, eat healthy and best of all stay energy positive. Any day I see Kathy is the best day! I just love her.",
+                author: "Anita D.",
+            },
+        ].map(function (testimonial, index) { return (<motion.div key={index} variants={cardVariants} initial="hidden" animate="visible" whileHover="hover" className="flex">
+              <div className="mb-16 overflow-hidden bg-white/30 backdrop-blur-lg border border-white/10 shadow-lg rounded-2xl w-full h-[500px] flex flex-col items-center justify-between" style={{
+                backgroundImage: testimonial.image ? "url(".concat(testimonial.image, ")") : "none",
+                backgroundSize: "contain",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+            }} role="region" aria-label="Testimonial">
+                <div className={"flex-1 flex flex-col justify-center w-full bg-black/40 rounded-2xl ".concat(isMobile ? "p-4" : "p-12")}>
+                  <div className="flex flex-col items-center justify-center h-full">
+                    <p className="text-white text-base sm:text-lg font-medium italic mb-2 text-center content-text line-clamp-8">
+                      “{testimonial.quote}”
+                    </p>
+                    <p className="text-white/80 text-sm sm:text-base font-medium text-center content-text" style={{
+                textShadow: "\n                          -1px -1px 0 #000,\n                          1px -1px 0 #000,\n                          -1px 1px 0 #000,\n                          1px 1px 0 #000,\n                          0 2px 4px rgba(0, 0, 0, 0.4)\n                        ",
+            }}>
+                      — {testimonial.author}
+                    </p>
+                  </div>
+                  <button onClick={function () { return setSelectedTestimonial({ quote: testimonial.quote, author: testimonial.author }); }} className="mt-4 text-white bg-[#F47C7C] hover:bg-[#FF69B4] rounded-full px-4 py-2 text-sm font-semibold transition-colors duration-200 self-center">
+                    Read More
+                  </button>
+                </div>
+              </div>
+            </motion.div>); })}
+        </div>
+        <TestimonialModal isOpen={!!selectedTestimonial} onClose={function () { return setSelectedTestimonial(null); }} quote={(selectedTestimonial === null || selectedTestimonial === void 0 ? void 0 : selectedTestimonial.quote) || ""} author={(selectedTestimonial === null || selectedTestimonial === void 0 ? void 0 : selectedTestimonial.author) || ""} isMobile={isMobile}/>
+      </motion.div>
+    </div>);
+};
+export default Testimonials;