@devvistatech/devvista-kit 0.0.10 → 0.0.13

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

@@ -1,40 +0,0 @@
-// 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

@@ -1,65 +0,0 @@
-// 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

@@ -1,54 +0,0 @@
-// 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

@@ -1,24 +0,0 @@
-"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

@@ -1,38 +0,0 @@
-// 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

@@ -1,71 +0,0 @@
-"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/Heros/HeroSection.jsx

@@ -1,71 +0,0 @@
-"use client";
-import { useRef, useEffect, useState } from "react";
-import { HeroButton } from "@/components/other/button";
-import Link from "next/link";
-export function GalleryHero(_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

@@ -1,36 +0,0 @@
-'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

@@ -1,114 +0,0 @@
-'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>);
-}