From 9e4a22e8333abc7c1e06f065f7cfdeb38a76bf93 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:03 +0000 Subject: [PATCH 01/19] Update src/app/page.tsx --- src/app/page.tsx | 435 ++++++++++++++--------------------------------- 1 file changed, 125 insertions(+), 310 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 6b541c6..4fdb511 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,385 +5,200 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard"; import TextSplitAbout from "@/components/sections/about/TextSplitAbout"; import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix"; -import PricingCardThree from "@/components/sections/pricing/PricingCardThree"; -import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen"; +import { PricingCardThree } from "@/components/sections/pricing/PricingCardThree"; +import { TestimonialCardSixteen } from "@/components/sections/testimonial/TestimonialCardSixteen"; import ContactText from "@/components/sections/contact/ContactText"; import FooterBase from "@/components/sections/footer/FooterBase"; -import { BookOpen, Heart, Shield, Sparkles, Wifi, Zap, Globe } from "lucide-react"; -import { useState, useEffect } from "react"; +import Link from "next/link"; +import { ArrowRight, CheckCircle, Zap, Users, TrendingUp, Award } from "lucide-react"; -type Language = "en" | "fr"; - -const translations: Record> = { - en: { - brandName: "Serenity Reiki", nav: { - about: "About", services: "Services", testimonials: "Testimonials", pricing: "Pricing", contact: "Contact", bookSession: "Book Your Session" - }, - hero: { - title: "Restore Balance", description: "Experience certified reiki healing in a peaceful sanctuary. Release stress, pain, and emotional blocks through ancient Japanese energy work.", primaryBtn: "Book Your Session", secondaryBtn: "Learn More" - }, - about: { - title: "About Your Healer", description: [ - "With over 15 years of dedicated practice, I am a certified reiki master trained in traditional Japanese techniques and modern energy healing. My mission is to create a sanctuary where stress dissolves, chronic pain finds relief, and emotional blocks transform into healing pathways.", "I believe in the profound connection between body, mind, and spirit. Each session is personalized to your unique energy needs, combining reiki with intuitive guidance to support your journey toward wholeness and balance.", "My clients consistently report reduced anxiety, improved sleep, relief from chronic pain, and a renewed sense of peace and purpose. I'm honored to walk alongside you on your healing journey." - ], - button: "Certifications & Credentials" - }, - services: { - title: "Healing Modalities", description: "Explore the transformative reiki services designed to restore your energy and promote deep wellness.", tag: "Holistic Services", items: [ - { - title: "Traditional Japanese Reiki", description: "Authentic reiki energy work addressing root imbalances and chakra alignment for holistic healing." - }, - { - title: "Chakra Balancing", description: "Targeted energy work to harmonize your seven chakras, promoting emotional and physical wellness." - }, - { - title: "Crystal Energy Reiki", description: "Enhanced reiki sessions incorporating crystalline vibrations to amplify healing and transformation." - }, - { - title: "Trauma Release Work", description: "Specialized sessions for releasing emotional trauma, held patterns, and energetic blocks with compassion." - }, - { - title: "Distant Healing Sessions", description: "Receive transformative reiki energy from the comfort of your home through powerful distance healing." - }, - { - title: "Integration Coaching", description: "Post-session guidance to integrate healing insights and sustain your wellness journey with practical tools." - } - ] - }, - pricing: { - title: "Healing Sessions & Pricing", description: "Choose the perfect reiki session to support your wellness journey. All sessions include personalized consultation and integration guidance.", tag: "Transparent Pricing", plans: [ - { - name: "30-Minute Session", price: "$75", features: [ - "Introductory reiki session", "Energy assessment", "Chakra clearing", "Ideal for first-time clients" - ], - bookBtn: "Book Now", learnBtn: "Learn More" - }, - { - name: "60-Minute Session", price: "$120", badge: "Most Popular", features: [ - "Full-spectrum reiki healing", "Deep chakra balancing", "Energy cord clearing", "Integration guidance" - ], - bookBtn: "Book Now", learnBtn: "Learn More" - }, - { - name: "90-Minute Deep Healing", price: "$180", features: [ - "Comprehensive energy work", "Trauma release session", "Crystal energy integration", "Extended guidance" - ], - bookBtn: "Book Now", learnBtn: "Learn More" - }, - { - name: "Monthly Wellness Package", price: "$300/mo", features: [ - "4 monthly sessions (60 min each)", "Priority scheduling", "Personalized healing plan", "Monthly integration check-ins" - ], - bookBtn: "Subscribe Now", learnBtn: "Learn More" - } - ] - }, - testimonials: { - title: "Healing Stories from Our Community", description: "Discover how reiki has transformed the lives of professionals seeking peace, pain relief, and spiritual reconnection.", tag: "Client Stories", kpiItems: [ - { value: "500+", label: "Clients healed" }, - { value: "98%", label: "Client satisfaction rate" }, - { value: "15+", label: "Years of practice" } - ] - }, - contact: { - title: "Ready to begin your healing journey? Let's restore your energy and bring peace back into your life.", scheduleBtn: "Schedule a Session", messageBtn: "Send a Message" - }, - footer: { - logoText: "Serenity Reiki", copyright: "© 2025 Serenity Reiki | Certified Energy Healing", services: "Services", about: "About", connect: "Connect" - } +const plan = { + theme: { + defaultButtonVariant: "text-stagger" as const, + defaultTextAnimation: "entrance-slide" as const, + borderRadius: "rounded" as const, + contentWidth: "medium" as const, + sizing: "medium" as const, + background: "circleGradient" as const, + cardStyle: "glass-elevated" as const, + primaryButtonStyle: "gradient" as const, + secondaryButtonStyle: "glass" as const, + headingFontWeight: "normal" as const, + }, + nav: { + navItems: [ + { name: "Home", id: "/" }, + { name: "Services", id: "services" }, + { name: "Pricing", id: "pricing" }, + { name: "Contact", id: "contact" }, + ], + button: { text: "Get Started", href: "contact" }, }, - fr: { - brandName: "Sérénité Reiki", nav: { - about: "À propos", services: "Services", testimonials: "Témoignages", pricing: "Tarification", contact: "Contact", bookSession: "Réserver une session" - }, - hero: { - title: "Restaurez l'équilibre", description: "Découvrez les soins du reiki certifié dans un sanctuaire paisible. Libérez-vous du stress, de la douleur et des blocages émotionnels par le travail énergétique japonais ancien.", primaryBtn: "Réserver une session", secondaryBtn: "En savoir plus" - }, - about: { - title: "À propos de votre guérisseur", description: [ - "Avec plus de 15 ans de pratique dédiée, je suis un maître reiki certifié formé aux techniques japonaises traditionnelles et à la guérison énergétique moderne. Ma mission est de créer un sanctuaire où le stress se dissipe, la douleur chronique trouve du soulagement et les blocages émotionnels se transforment en chemins de guérison.", "Je crois à la connexion profonde entre le corps, l'esprit et l'âme. Chaque session est personnalisée selon vos besoins énergétiques uniques, combinant le reiki avec des conseils intuitifs pour soutenir votre voyage vers la totalité et l'équilibre.", "Mes clients signalent régulièrement une anxiété réduite, un meilleur sommeil, un soulagement de la douleur chronique et un sentiment renouvelé de paix et de but. Je suis honoré de vous accompagner dans votre voyage de guérison." - ], - button: "Certifications et accréditations" - }, - services: { - title: "Modalités de guérison", description: "Explorez les services de reiki transformateurs conçus pour restaurer votre énergie et promouvoir le bien-être profond.", tag: "Services holistiques", items: [ - { - title: "Reiki japonais traditionnel", description: "Travail énergétique authentique du reiki traitant les déséquilibres profonds et l'alignement des chakras pour une guérison holistique." - }, - { - title: "Équilibrage des chakras", description: "Travail énergétique ciblé pour harmoniser vos sept chakras, favorisant le bien-être émotionnel et physique." - }, - { - title: "Reiki à l'énergie cristalline", description: "Les sessions de reiki améliorées incorporent les vibrations cristallines pour amplifier la guérison et la transformation." - }, - { - title: "Travail de libération du trauma", description: "Sessions spécialisées pour libérer le trauma émotionnel, les schémas figés et les blocages énergétiques avec compassion." - }, - { - title: "Sessions de guérison à distance", description: "Recevez l'énergie de reiki transformatrice du confort de votre maison grâce à la puissante guérison à distance." - }, - { - title: "Coaching d'intégration", description: "Conseils post-session pour intégrer les intuitions de guérison et maintenir votre voyage de bien-être avec des outils pratiques." - } - ] - }, - pricing: { - title: "Sessions de guérison et tarification", description: "Choisissez la session de reiki parfaite pour soutenir votre voyage de bien-être. Toutes les sessions incluent une consultation personnalisée et des conseils d'intégration.", tag: "Tarification transparente", plans: [ - { - name: "Session de 30 minutes", price: "$75", features: [ - "Session de reiki d'introduction", "Évaluation énergétique", "Nettoyage des chakras", "Idéal pour les nouveaux clients" - ], - bookBtn: "Réserver maintenant", learnBtn: "En savoir plus" - }, - { - name: "Session de 60 minutes", price: "$120", badge: "Le plus populaire", features: [ - "Guérison reiki full-spectrum", "Équilibrage profond des chakras", "Nettoyage des cordons énergétiques", "Conseils d'intégration" - ], - bookBtn: "Réserver maintenant", learnBtn: "En savoir plus" - }, - { - name: "Guérison profonde de 90 minutes", price: "$180", features: [ - "Travail énergétique complet", "Session de libération du trauma", "Intégration de l'énergie cristalline", "Conseils prolongés" - ], - bookBtn: "Réserver maintenant", learnBtn: "En savoir plus" - }, - { - name: "Package bien-être mensuel", price: "$300/mois", features: [ - "4 sessions mensuelles (60 min chacune)", "Planification prioritaire", "Plan de guérison personnalisé", "Vérifications d'intégration mensuelles" - ], - bookBtn: "S'abonner maintenant", learnBtn: "En savoir plus" - } - ] - }, - testimonials: { - title: "Histoires de guérison de notre communauté", description: "Découvrez comment le reiki a transformé la vie de professionnels cherchant la paix, le soulagement de la douleur et la reconnexion spirituelle.", tag: "Histoires de clients", kpiItems: [ - { value: "500+", label: "Clients guéris" }, - { value: "98%", label: "Taux de satisfaction des clients" }, - { value: "15+", label: "Années de pratique" } - ] - }, - contact: { - title: "Prêt à commencer votre voyage de guérison? Restaurons votre énergie et ramenons la paix dans votre vie.", scheduleBtn: "Planifier une session", messageBtn: "Envoyer un message" - }, - footer: { - logoText: "Sérénité Reiki", copyright: "© 2025 Sérénité Reiki | Guérison énergétique certifiée", services: "Services", about: "À propos", connect: "Connectez-vous" - } - } }; -export default function LandingPage() { - const [language, setLanguage] = useState("en"); - const [mounted, setMounted] = useState(false); - - useEffect(() => { - // Auto-detect language from OS/browser settings - const browserLanguage = navigator.language.toLowerCase(); - if (browserLanguage.startsWith("fr")) { - setLanguage("fr"); - } else { - setLanguage("en"); - } - setMounted(true); - }, []); - - const t = translations[language]; - - if (!mounted) { - return null; - } - - const toggleLanguage = () => { - setLanguage(language === "en" ? "fr" : "en"); - }; - +export default function Home() { return (
({ - title: item.title, - description: item.description, - imageSrc: [ - "http://img.b2bpic.net/free-photo/spiritual-young-man-woman-practicing-yoga-indoors_23-2149163327.jpg", "http://img.b2bpic.net/free-photo/spiritual-young-man-woman-practicing-yoga-indoors_23-2149163336.jpg", "http://img.b2bpic.net/free-photo/colorful-crystals-flowers-assortment_23-2149324181.jpg", "http://img.b2bpic.net/free-photo/senior-couple-is-doing-yoga-outdoors-stretching-park-sunrise-brunette-white-t-shirt_1157-39675.jpg", "http://img.b2bpic.net/free-photo/full-shot-woman-yoga-mat_23-2148898576.jpg", "http://img.b2bpic.net/free-photo/i-always-feel-relieved-after-session-with-you_637285-9953.jpg" - ][index], - imageAlt: item.title, - buttonIcon: [Sparkles, Heart, Zap, Shield, Wifi, BookOpen][index] - })) - } + title="Our Services" + description="Comprehensive solutions tailored to your needs." + features={[ + { + title: "Design Systems", description: "Build consistent, scalable design systems for your applications.", buttonIcon: Zap, + buttonHref: "contact"}, + { + title: "Component Library", description: "Pre-built, customizable components to accelerate development.", buttonIcon: CheckCircle, + buttonHref: "contact"}, + { + title: "Documentation", description: "Comprehensive guides and API documentation for easy integration.", buttonIcon: Award, + buttonHref: "contact"}, + ]} textboxLayout="default" useInvertedBackground={false} - tag={t.services.tag} - tagAnimation="slide-up" />
({ - id: `${idx + 1}`, - price: plan.price, - name: plan.name, - ...(plan.badge && { badge: plan.badge, badgeIcon: Heart }), - buttons: [ - { text: plan.bookBtn, href: "#contact" }, - { text: plan.learnBtn, href: "#" } - ], - features: plan.features - }))} + title="Pricing Plans" + description="Choose the plan that fits your needs." + plans={[ + { + id: "starter", name: "Starter", price: "$29", badge: "Popular", badgeIcon: TrendingUp, + buttons: [{ text: "Get Started", href: "contact" }], + features: ["Basic components", "Community support", "1 project"], + }, + { + id: "pro", name: "Pro", price: "$99", buttons: [{ text: "Get Started", href: "contact" }], + features: ["All components", "Priority support", "Unlimited projects"], + }, + { + id: "enterprise", name: "Enterprise", price: "Custom", buttons: [{ text: "Contact Sales", href: "contact" }], + features: ["Everything in Pro", "Dedicated support", "Custom solutions"], + }, + ]} + animationType="slide-up" textboxLayout="default" useInvertedBackground={false} - animationType="slide-up" - tag={t.pricing.tag} - tagAnimation="slide-up" />
-- 2.49.1 From 4d6c03d0021733f79239d412ae8d61200345702e Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:04 +0000 Subject: [PATCH 02/19] Update src/components/cardStack/CardList.tsx --- src/components/cardStack/CardList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/cardStack/CardList.tsx b/src/components/cardStack/CardList.tsx index dc08108..cd81f4f 100644 --- a/src/components/cardStack/CardList.tsx +++ b/src/components/cardStack/CardList.tsx @@ -1,10 +1,10 @@ import { useCardAnimation } from './hooks/useCardAnimation'; export function CardList() { - const { animate, itemRefs } = useCardAnimation(); + const { animate } = useCardAnimation(); const handleAnimate = () => { - animate(0); + animate(); }; return ( -- 2.49.1 From 5544ad7fad02448c3b1bfb1290bb1b69c13e3876 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:05 +0000 Subject: [PATCH 03/19] Update src/components/cardStack/layouts/carousels/AutoCarousel.tsx --- src/components/cardStack/layouts/carousels/AutoCarousel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx index e9303bd..d791f6f 100644 --- a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx +++ b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx @@ -1,10 +1,10 @@ import { useCardAnimation } from '../../hooks/useCardAnimation'; export function AutoCarousel() { - const { animate, itemRefs, bottomContentRef } = useCardAnimation(); + const { animate } = useCardAnimation(); const handleAnimate = () => { - animate(0); + animate(); }; return ( -- 2.49.1 From 0acbd8e6ea1287d21ff477b6c8c49ab442bd41c9 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:05 +0000 Subject: [PATCH 04/19] Update src/components/cardStack/layouts/carousels/ButtonCarousel.tsx --- src/components/cardStack/layouts/carousels/ButtonCarousel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx b/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx index 487918b..54db8b9 100644 --- a/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx +++ b/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx @@ -1,10 +1,10 @@ import { useCardAnimation } from '../../hooks/useCardAnimation'; export function ButtonCarousel() { - const { animate, itemRefs, bottomContentRef } = useCardAnimation(); + const { animate } = useCardAnimation(); const handleAnimate = () => { - animate(0); + animate(); }; return ( -- 2.49.1 From 0ae82a16085a742656c5783f1dc5d259f232d10f Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:06 +0000 Subject: [PATCH 05/19] Update src/components/cardStack/layouts/grid/GridLayout.tsx --- src/components/cardStack/layouts/grid/GridLayout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/cardStack/layouts/grid/GridLayout.tsx b/src/components/cardStack/layouts/grid/GridLayout.tsx index 45bba32..0659ed3 100644 --- a/src/components/cardStack/layouts/grid/GridLayout.tsx +++ b/src/components/cardStack/layouts/grid/GridLayout.tsx @@ -1,10 +1,10 @@ import { useCardAnimation } from '../../hooks/useCardAnimation'; export function GridLayout() { - const { animate, itemRefs, containerRef, perspectiveRef, bottomContentRef } = useCardAnimation(); + const { animate } = useCardAnimation(); const handleAnimate = () => { - animate(0); + animate(); }; return ( -- 2.49.1 From fcc7ec1c999a31cce497a39d7b7ccff3b081c22b Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:06 +0000 Subject: [PATCH 06/19] Update src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx --- .../cardStack/layouts/timelines/TimelinePhoneView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx index 4f81fa5..45b0874 100644 --- a/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx +++ b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx @@ -1,10 +1,10 @@ import { useCardAnimation } from '../../hooks/useCardAnimation'; export function TimelinePhoneView() { - const { animate, itemRefs } = useCardAnimation(); + const { animate } = useCardAnimation(); const handleAnimate = () => { - animate(0); + animate(); }; return ( -- 2.49.1 From fdd6e2664ab7deaae93992c62696750ae5a19f2a Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:07 +0000 Subject: [PATCH 07/19] Update src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx --- .../cardStack/layouts/timelines/TimelineProcessFlow.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx index 8c97d17..e6a0e99 100644 --- a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx +++ b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx @@ -1,10 +1,10 @@ import { useCardAnimation } from '../../hooks/useCardAnimation'; export function TimelineProcessFlow() { - const { animate, itemRefs } = useCardAnimation(); + const { animate } = useCardAnimation(); const handleAnimate = () => { - animate(0); + animate(); }; return ( -- 2.49.1 From 1eab8b9e3a651132e8eb0691f434ecf591a47c09 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:07 +0000 Subject: [PATCH 08/19] Update src/components/sections/feature/FeatureCardNine.tsx --- .../sections/feature/FeatureCardNine.tsx | 239 +----------------- 1 file changed, 8 insertions(+), 231 deletions(-) diff --git a/src/components/sections/feature/FeatureCardNine.tsx b/src/components/sections/feature/FeatureCardNine.tsx index 81506a6..7b4ea9b 100644 --- a/src/components/sections/feature/FeatureCardNine.tsx +++ b/src/components/sections/feature/FeatureCardNine.tsx @@ -1,233 +1,10 @@ -"use client"; +import React from 'react'; +import { TimelinePhoneView } from '../../cardStack/layouts/timelines/TimelinePhoneView'; -import TimelinePhoneView from "@/components/cardStack/layouts/timelines/TimelinePhoneView"; -import Button from "@/components/button/Button"; -import { cls } from "@/lib/utils"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, TitleSegment, CardAnimationType } from "@/components/cardStack/types"; -import type { TimelinePhoneViewItem } from "@/components/cardStack/hooks/usePhoneAnimations"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type FeaturePhone = { - imageAlt?: string; - videoAriaLabel?: string; -} & ( - | { imageSrc: string; videoSrc?: never } - | { videoSrc: string; imageSrc?: never } - ); - -type FeatureCard = { - id: number; - title: string; - description: string; - buttons?: ButtonConfig[]; - phoneOne: FeaturePhone; - phoneTwo: FeaturePhone; -}; - -interface FeatureCardNineProps { - features: FeatureCard[]; - showStepNumbers: boolean; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - animationType: CardAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - textBoxTitleClassName?: string; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - desktopContainerClassName?: string; - mobileContainerClassName?: string; - desktopContentClassName?: string; - desktopWrapperClassName?: string; - mobileWrapperClassName?: string; - phoneFrameClassName?: string; - mobilePhoneFrameClassName?: string; - featureContentClassName?: string; - stepNumberClassName?: string; - featureTitleClassName?: string; - featureDescriptionClassName?: string; - cardButtonClassName?: string; - cardButtonTextClassName?: string; -} - -interface FeatureContentProps { - feature: FeatureCard; - showStepNumbers: boolean; - useInvertedBackground: InvertedBackground; - featureContentClassName: string; - stepNumberClassName: string; - featureTitleClassName: string; - featureDescriptionClassName: string; - cardButtonClassName: string; - cardButtonTextClassName: string; -} - -const FeatureContent = ({ - feature, - showStepNumbers, - useInvertedBackground, - featureContentClassName, - stepNumberClassName, - featureTitleClassName, - featureDescriptionClassName, - cardButtonClassName, - cardButtonTextClassName, -}: FeatureContentProps) => { - const theme = useTheme(); - - return ( -
- {showStepNumbers && ( -
-

- {feature.id} -

-
- )} -

- {feature.title} -

-

- {feature.description} -

- {feature.buttons && feature.buttons.length > 0 && ( -
- {feature.buttons.slice(0, 2).map((button, index) => ( -
- )} +export function FeatureCardNine() { + return ( +
+
- ); -}; - -const FeatureCardNine = ({ - features, - showStepNumbers, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - animationType, - textboxLayout, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - desktopContainerClassName = "", - mobileContainerClassName = "", - desktopContentClassName = "", - desktopWrapperClassName = "", - mobileWrapperClassName = "", - phoneFrameClassName = "", - mobilePhoneFrameClassName = "", - featureContentClassName = "", - stepNumberClassName = "", - featureTitleClassName = "", - featureDescriptionClassName = "", - cardButtonClassName = "", - cardButtonTextClassName = "", -}: FeatureCardNineProps) => { - const items: TimelinePhoneViewItem[] = features.map((feature, index) => ({ - trigger: `trigger-${index}`, - content: ( - - ), - imageOne: feature.phoneOne.imageSrc, - videoOne: feature.phoneOne.videoSrc, - imageAltOne: feature.phoneOne.imageAlt || `${feature.title} - Phone 1`, - videoAriaLabelOne: feature.phoneOne.videoAriaLabel || `${feature.title} - Phone 1 video`, - imageTwo: feature.phoneTwo.imageSrc, - videoTwo: feature.phoneTwo.videoSrc, - imageAltTwo: feature.phoneTwo.imageAlt || `${feature.title} - Phone 2`, - videoAriaLabelTwo: feature.phoneTwo.videoAriaLabel || `${feature.title} - Phone 2 video`, - })); - - return ( - - ); -}; - -FeatureCardNine.displayName = "FeatureCardNine"; - -export default FeatureCardNine; + ); +} -- 2.49.1 From 5940279f0c80b7de05e1a5a1fdccb18de6f469ab Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:08 +0000 Subject: [PATCH 09/19] Update src/components/sections/feature/FeatureCardSeven.tsx --- .../sections/feature/FeatureCardSeven.tsx | 185 +----------------- 1 file changed, 8 insertions(+), 177 deletions(-) diff --git a/src/components/sections/feature/FeatureCardSeven.tsx b/src/components/sections/feature/FeatureCardSeven.tsx index 21fcc36..230c9e4 100644 --- a/src/components/sections/feature/FeatureCardSeven.tsx +++ b/src/components/sections/feature/FeatureCardSeven.tsx @@ -1,179 +1,10 @@ -"use client"; +import React from 'react'; +import { CardList } from '../../cardStack/CardList'; -import CardList from "@/components/cardStack/CardList"; -import MediaContent from "@/components/shared/MediaContent"; -import Button from "@/components/button/Button"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type FeatureCard = { - id: number; - title: string; - description: string; - buttons?: ButtonConfig[]; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; -}; - -interface FeatureCardSevenProps { - features: FeatureCard[]; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - cardContentClassName?: string; - stepNumberClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; - imageContainerClassName?: string; - imageClassName?: string; - cardButtonClassName?: string; - cardButtonTextClassName?: string; +export function FeatureCardSeven() { + return ( +
+ +
+ ); } - -const FeatureCardSeven = ({ - features, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - cardContentClassName = "", - stepNumberClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", - imageContainerClassName = "", - imageClassName = "", - cardButtonClassName = "", - cardButtonTextClassName = "", -}: FeatureCardSevenProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( - - {features.map((feature, index) => ( -
-
-
-
-

- {feature.id} -

-
-

- {feature.title} -

-

- {feature.description} -

- {feature.buttons && feature.buttons.length > 0 && ( -
- {feature.buttons.slice(0, 2).map((button, index) => ( -
- )} -
-
-
- -
-
- ))} - - ); -}; - -FeatureCardSeven.displayName = "FeatureCardSeven"; - -export default FeatureCardSeven; \ No newline at end of file -- 2.49.1 From bf96f64a4fe3ac1fa47f64d92a8260acd64b78d9 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:08 +0000 Subject: [PATCH 10/19] Update src/components/sections/feature/FeatureCardTen.tsx --- .../sections/feature/FeatureCardTen.tsx | 267 +----------------- 1 file changed, 7 insertions(+), 260 deletions(-) diff --git a/src/components/sections/feature/FeatureCardTen.tsx b/src/components/sections/feature/FeatureCardTen.tsx index aa540ff..319e348 100644 --- a/src/components/sections/feature/FeatureCardTen.tsx +++ b/src/components/sections/feature/FeatureCardTen.tsx @@ -1,263 +1,10 @@ -"use client"; +import React from 'react'; +import { TimelineProcessFlow } from '../../cardStack/layouts/timelines/TimelineProcessFlow'; -import React, { memo, useMemo } from "react"; -import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow"; -import MediaContent from "@/components/shared/MediaContent"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type FeatureMedia = { - imageAlt?: string; - videoAriaLabel?: string; -} & ( - | { imageSrc: string; videoSrc?: never } - | { videoSrc: string; imageSrc?: never } - ); - -interface FeatureListItem { - icon: LucideIcon; - text: string; -} - -interface FeatureCard { - id: string; - title: string; - description: string; - media: FeatureMedia; - items: FeatureListItem[]; - reverse: boolean; -} - -interface FeatureCardTenProps { - features: FeatureCard[]; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - animationType: CardAnimationType; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - textBoxClassName?: string; - textBoxTitleClassName?: string; - textBoxDescriptionClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - itemClassName?: string; - mediaWrapperClassName?: string; - mediaCardClassName?: string; - numberClassName?: string; - contentWrapperClassName?: string; - featureTitleClassName?: string; - featureDescriptionClassName?: string; - listItemClassName?: string; - iconContainerClassName?: string; - iconClassName?: string; - gapClassName?: string; -} - -interface FeatureMediaProps { - media: FeatureMedia; - title: string; - mediaCardClassName: string; -} - -const FeatureMedia = ({ - media, - title, - mediaCardClassName, -}: FeatureMediaProps) => ( -
- +export function FeatureCardTen() { + return ( +
+
-); - -interface FeatureContentProps { - feature: FeatureCard; - useInvertedBackground: InvertedBackground; - shouldUseLightText: boolean; - featureTitleClassName: string; - featureDescriptionClassName: string; - listItemClassName: string; - iconContainerClassName: string; - iconClassName: string; + ); } - -const FeatureContent = ({ - feature, - useInvertedBackground, - shouldUseLightText, - featureTitleClassName, - featureDescriptionClassName, - listItemClassName, - iconContainerClassName, - iconClassName, -}: FeatureContentProps) => ( -
-

- {feature.title} -

-

- {feature.description} -

-
    - {feature.items.map((listItem, listIndex) => { - const Icon = listItem.icon; - return ( -
  • -
    - -
    -

    - {listItem.text} -

    -
    • - ); - })} -
-
-); - -const FeatureCardTen = ({ - features, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - animationType, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - textBoxClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - itemClassName = "", - mediaWrapperClassName = "", - mediaCardClassName = "", - numberClassName = "", - contentWrapperClassName = "", - featureTitleClassName = "", - featureDescriptionClassName = "", - listItemClassName = "", - iconContainerClassName = "", - iconClassName = "", - gapClassName = "", -}: FeatureCardTenProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const timelineItems = useMemo( - () => - features.map((feature) => ({ - id: feature.id, - reverse: feature.reverse, - media: ( - - ), - content: ( - - ), - })), - [ - features, - useInvertedBackground, - shouldUseLightText, - mediaCardClassName, - featureTitleClassName, - featureDescriptionClassName, - listItemClassName, - iconContainerClassName, - iconClassName, - ] - ); - - return ( - - ); -}; - -FeatureCardTen.displayName = "FeatureCardTen"; - -export default memo(FeatureCardTen); \ No newline at end of file -- 2.49.1 From 956e086f074fcc835d4e396ea773fcb1f5ed4b60 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:09 +0000 Subject: [PATCH 11/19] Update src/components/sections/feature/FeatureCardTwelve.tsx --- .../sections/feature/FeatureCardTwelve.tsx | 186 +----------------- 1 file changed, 7 insertions(+), 179 deletions(-) diff --git a/src/components/sections/feature/FeatureCardTwelve.tsx b/src/components/sections/feature/FeatureCardTwelve.tsx index 521d7b3..47f26a2 100644 --- a/src/components/sections/feature/FeatureCardTwelve.tsx +++ b/src/components/sections/feature/FeatureCardTwelve.tsx @@ -1,182 +1,10 @@ -"use client"; - -import { Fragment } from "react"; -import CardList from "@/components/cardStack/CardList"; -import Button from "@/components/button/Button"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -interface FeatureCard { - id: string; - label: string; - title: string; - items: string[]; - buttons?: ButtonConfig[]; -} - -interface FeatureCardTwelveProps { - features: FeatureCard[]; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - cardContentClassName?: string; - labelClassName?: string; - cardTitleClassName?: string; - itemsContainerClassName?: string; - itemTextClassName?: string; - cardButtonClassName?: string; - cardButtonTextClassName?: string; -} - -const FeatureCardTwelve = ({ - features, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - cardContentClassName = "", - labelClassName = "", - cardTitleClassName = "", - itemsContainerClassName = "", - itemTextClassName = "", - cardButtonClassName = "", - cardButtonTextClassName = "", -}: FeatureCardTwelveProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); +import React from 'react'; +import { CardList } from '../../cardStack/CardList'; +export function FeatureCardTwelve() { return ( - - {features.map((feature) => ( -
-
-

- {feature.label} -

-
- -
- -
-

- {feature.title} -

- -
- {feature.items.map((item, index) => ( - - - {item} - - {index < feature.items.length - 1 && ( - • - )} - - ))} -
- - {feature.buttons && feature.buttons.length > 0 && ( -
- {feature.buttons.slice(0, 2).map((button, index) => ( -
- )} -
-
- ))} - +
+ +
); -}; - -FeatureCardTwelve.displayName = "FeatureCardTwelve"; - -export default FeatureCardTwelve; +} -- 2.49.1 From 9b93fbbb52c88613f0c38c42ba5a639554db6deb Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:10 +0000 Subject: [PATCH 12/19] Update src/components/sections/feature/FeatureCardTwentyFour.tsx --- .../feature/FeatureCardTwentyFour.tsx | 205 +----------------- 1 file changed, 8 insertions(+), 197 deletions(-) diff --git a/src/components/sections/feature/FeatureCardTwentyFour.tsx b/src/components/sections/feature/FeatureCardTwentyFour.tsx index 5da7878..a81c757 100644 --- a/src/components/sections/feature/FeatureCardTwentyFour.tsx +++ b/src/components/sections/feature/FeatureCardTwentyFour.tsx @@ -1,199 +1,10 @@ -"use client"; +import React from 'react'; +import { CardList } from '../../cardStack/CardList'; -import CardList from "@/components/cardStack/CardList"; -import Tag from "@/components/shared/Tag"; -import MediaContent from "@/components/shared/MediaContent"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type MediaProps = - | { - imageSrc: string; - imageAlt?: string; - videoSrc?: never; - videoAriaLabel?: never; - } - | { - videoSrc: string; - videoAriaLabel?: string; - imageSrc?: never; - imageAlt?: never; - }; - -type FeatureItem = MediaProps & { - id: string; - title: string; - author: string; - description: string; - tags: string[]; - onFeatureClick?: () => void; -}; - -interface FeatureCardTwentyFourProps { - features: FeatureItem[]; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - cardContentClassName?: string; - cardTitleClassName?: string; - authorClassName?: string; - cardDescriptionClassName?: string; - tagsContainerClassName?: string; - tagClassName?: string; - mediaWrapperClassName?: string; - mediaClassName?: string; +export function FeatureCardTwentyFour() { + return ( +
+ +
+ ); } - -const FeatureCardTwentyFour = ({ - features, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Features section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - cardContentClassName = "", - cardTitleClassName = "", - authorClassName = "", - cardDescriptionClassName = "", - tagsContainerClassName = "", - tagClassName = "", - mediaWrapperClassName = "", - mediaClassName = "", -}: FeatureCardTwentyFourProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( - - {features.map((feature) => ( -
-
-

- {feature.title}{" "} - - by {feature.author} - -

- -
-
- {feature.tags.map((tagText, index) => ( - - ))} -
- -

- {feature.description} -

-
-
- -
- -
-
- ))} - - ); -}; - -FeatureCardTwentyFour.displayName = "FeatureCardTwentyFour"; - -export default FeatureCardTwentyFour; -- 2.49.1 From ef9401d43ca9a620e1458813d725c9985c18fdb3 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:10 +0000 Subject: [PATCH 13/19] Update src/components/sections/hero/HeroBillboardCarousel.tsx --- .../sections/hero/HeroBillboardCarousel.tsx | 161 +----------------- 1 file changed, 8 insertions(+), 153 deletions(-) diff --git a/src/components/sections/hero/HeroBillboardCarousel.tsx b/src/components/sections/hero/HeroBillboardCarousel.tsx index f6bc30b..423b9f0 100644 --- a/src/components/sections/hero/HeroBillboardCarousel.tsx +++ b/src/components/sections/hero/HeroBillboardCarousel.tsx @@ -1,155 +1,10 @@ -"use client"; +import React from 'react'; +import { AutoCarousel } from '../../cardStack/layouts/carousels/AutoCarousel'; -import TextBox from "@/components/Textbox"; -import MediaContent from "@/components/shared/MediaContent"; -import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel"; -import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType } from "@/types/button"; - -export interface MediaItem { - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; +export function HeroBillboardCarousel() { + return ( +
+ +
+ ); } - -type HeroBillboardCarouselBackgroundProps = Extract< - HeroBackgroundVariantProps, - | { variant: "plain" } - | { variant: "animated-grid" } - | { variant: "canvas-reveal" } - | { variant: "cell-wave" } - | { variant: "downward-rays-animated" } - | { variant: "downward-rays-animated-grid" } - | { variant: "downward-rays-static" } - | { variant: "downward-rays-static-grid" } - | { variant: "gradient-bars" } - | { variant: "radial-gradient" } - | { variant: "rotated-rays-animated" } - | { variant: "rotated-rays-animated-grid" } - | { variant: "rotated-rays-static" } - | { variant: "rotated-rays-static-grid" } - | { variant: "sparkles-gradient" } ->; - -interface HeroBillboardCarouselProps { - title: string; - description: string; - background: HeroBillboardCarouselBackgroundProps; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - mediaItems: MediaItem[]; - ariaLabel?: string; - className?: string; - containerClassName?: string; - textBoxClassName?: string; - titleClassName?: string; - descriptionClassName?: string; - tagClassName?: string; - buttonContainerClassName?: string; - buttonClassName?: string; - buttonTextClassName?: string; - mediaWrapperClassName?: string; -} - -const HeroBillboardCarousel = ({ - title, - description, - background, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - mediaItems, - ariaLabel = "Hero section", - className = "", - containerClassName = "", - textBoxClassName = "", - titleClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - mediaWrapperClassName = "", -}: HeroBillboardCarouselProps) => { - const renderCarouselItem = (item: MediaItem, index: number) => ( -
- -
- ); - - return ( -
- -
- - -
- - {mediaItems?.map(renderCarouselItem)} - -
-
-
- ); -}; - -HeroBillboardCarousel.displayName = "HeroBillboardCarousel"; - -export default HeroBillboardCarousel; \ No newline at end of file -- 2.49.1 From f09d84df8e21410fe2afd79097ad9a68e8465a4f Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:11 +0000 Subject: [PATCH 14/19] Update src/components/sections/hero/HeroBillboardDashboard.tsx --- .../sections/hero/HeroBillboardDashboard.tsx | 136 +----------------- 1 file changed, 7 insertions(+), 129 deletions(-) diff --git a/src/components/sections/hero/HeroBillboardDashboard.tsx b/src/components/sections/hero/HeroBillboardDashboard.tsx index f87d7d4..2a5ba09 100644 --- a/src/components/sections/hero/HeroBillboardDashboard.tsx +++ b/src/components/sections/hero/HeroBillboardDashboard.tsx @@ -1,132 +1,10 @@ -"use client"; +import React from 'react'; +import { Dashboard } from '@/components/shared/Dashboard'; -import TextBox from "@/components/Textbox"; -import Dashboard from "@/components/shared/Dashboard"; -import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType } from "@/types/button"; -import type { DashboardSidebarItem, DashboardStat, DashboardListItem } from "@/components/shared/Dashboard"; -import type { ChartDataItem } from "@/components/bento/BentoLineChart/utils"; - -type HeroBillboardDashboardBackgroundProps = Extract< - HeroBackgroundVariantProps, - | { variant: "plain" } - | { variant: "animated-grid" } - | { variant: "canvas-reveal" } - | { variant: "cell-wave" } - | { variant: "downward-rays-animated" } - | { variant: "downward-rays-animated-grid" } - | { variant: "downward-rays-static" } - | { variant: "downward-rays-static-grid" } - | { variant: "gradient-bars" } - | { variant: "radial-gradient" } - | { variant: "rotated-rays-animated" } - | { variant: "rotated-rays-animated-grid" } - | { variant: "rotated-rays-static" } - | { variant: "rotated-rays-static-grid" } - | { variant: "sparkles-gradient" } ->; - -interface HeroBillboardDashboardProps { - title: string; - description: string; - background: HeroBillboardDashboardBackgroundProps; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - ariaLabel?: string; - dashboard: { - title: string; - stats: [DashboardStat, DashboardStat, DashboardStat]; - logoIcon: LucideIcon; - sidebarItems: DashboardSidebarItem[]; - searchPlaceholder?: string; - buttons: ButtonConfig[]; - chartTitle?: string; - chartData?: ChartDataItem[]; - listItems: DashboardListItem[]; - listTitle?: string; - imageSrc: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; - className?: string; - containerClassName?: string; - sidebarClassName?: string; - statClassName?: string; - chartClassName?: string; - listClassName?: string; - }; - className?: string; - containerClassName?: string; - textBoxClassName?: string; - titleClassName?: string; - descriptionClassName?: string; - tagClassName?: string; - buttonContainerClassName?: string; - buttonClassName?: string; - buttonTextClassName?: string; - dashboardClassName?: string; -} - -const HeroBillboardDashboard = ({ - title, - description, - background, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - ariaLabel = "Hero section", - dashboard, - className = "", - containerClassName = "", - textBoxClassName = "", - titleClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - dashboardClassName = "", -}: HeroBillboardDashboardProps) => { +export function HeroBillboardDashboard() { return ( -
- -
- - -
-
+
+ +
); -}; - -HeroBillboardDashboard.displayName = "HeroBillboardDashboard"; - -export default HeroBillboardDashboard; +} -- 2.49.1 From 0c623bcde54470d3973db94642b9187057f7850a Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:11 +0000 Subject: [PATCH 15/19] Update src/components/sections/hero/HeroBillboardGallery.tsx --- .../sections/hero/HeroBillboardGallery.tsx | 204 +----------------- 1 file changed, 7 insertions(+), 197 deletions(-) diff --git a/src/components/sections/hero/HeroBillboardGallery.tsx b/src/components/sections/hero/HeroBillboardGallery.tsx index 83075b7..aa29145 100644 --- a/src/components/sections/hero/HeroBillboardGallery.tsx +++ b/src/components/sections/hero/HeroBillboardGallery.tsx @@ -1,200 +1,10 @@ -"use client"; +import React from 'react'; +import { AutoCarousel } from '../../cardStack/layouts/carousels/AutoCarousel'; -import TextBox from "@/components/Textbox"; -import MediaContent from "@/components/shared/MediaContent"; -import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel"; -import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds"; -import { cls } from "@/lib/utils"; -import { useButtonAnimation } from "@/components/hooks/useButtonAnimation"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType } from "@/types/button"; - -export interface MediaItem { - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; -} - -type HeroBillboardGalleryBackgroundProps = Extract< - HeroBackgroundVariantProps, - | { variant: "plain" } - | { variant: "animated-grid" } - | { variant: "canvas-reveal" } - | { variant: "cell-wave" } - | { variant: "downward-rays-animated" } - | { variant: "downward-rays-animated-grid" } - | { variant: "downward-rays-static" } - | { variant: "downward-rays-static-grid" } - | { variant: "gradient-bars" } - | { variant: "radial-gradient" } - | { variant: "rotated-rays-animated" } - | { variant: "rotated-rays-animated-grid" } - | { variant: "rotated-rays-static" } - | { variant: "rotated-rays-static-grid" } - | { variant: "sparkles-gradient" } ->; - -interface HeroBillboardGalleryProps { - title: string; - description: string; - background: HeroBillboardGalleryBackgroundProps; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - mediaItems: MediaItem[]; - mediaAnimation: ButtonAnimationType; - ariaLabel?: string; - className?: string; - containerClassName?: string; - textBoxClassName?: string; - titleClassName?: string; - descriptionClassName?: string; - tagClassName?: string; - buttonContainerClassName?: string; - buttonClassName?: string; - buttonTextClassName?: string; - mediaWrapperClassName?: string; - imageClassName?: string; -} - -const HeroBillboardGallery = ({ - title, - description, - background, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - mediaItems, - mediaAnimation, - ariaLabel = "Hero section", - className = "", - containerClassName = "", - textBoxClassName = "", - titleClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - mediaWrapperClassName = "", - imageClassName = "", -}: HeroBillboardGalleryProps) => { - const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation }); - - const renderCarouselItem = (item: MediaItem, index: number) => ( -
- +export function HeroBillboardGallery() { + return ( +
+
); - - const itemCount = mediaItems?.length || 0; - const desktopWidthClass = itemCount === 3 ? "md:w-[24%]" : itemCount === 4 ? "md:w-[24%]" : "md:w-[23%]"; - - return ( -
- -
- - -
-
- - {mediaItems?.slice(0, 5).map(renderCarouselItem)} - -
- -
-
- {mediaItems?.slice(0, 5).map((item, index) => { - const rotations = ["-rotate-6", "rotate-6", "-rotate-6", "rotate-6", "-rotate-6"]; - const zIndexes = ["z-10", "z-20", "z-30", "z-40", "z-50"]; - const translates = ["-translate-y-5", "translate-y-5", "-translate-y-5", "translate-y-5", "-translate-y-5"]; - const marginClass = index > 0 ? "-ml-12 md:-ml-15" : ""; - - return ( -
- -
- ); - })} -
-
-
-
-
- ); -}; - -HeroBillboardGallery.displayName = "HeroBillboardGallery"; - -export default HeroBillboardGallery; +} -- 2.49.1 From d7b97eaea919e2d87ff6416ac91c649475dc1587 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:12 +0000 Subject: [PATCH 16/19] Update src/components/sections/pricing/PricingCardFive.tsx --- .../sections/pricing/PricingCardFive.tsx | 237 +----------------- 1 file changed, 8 insertions(+), 229 deletions(-) diff --git a/src/components/sections/pricing/PricingCardFive.tsx b/src/components/sections/pricing/PricingCardFive.tsx index 0e79a7d..fa681ef 100644 --- a/src/components/sections/pricing/PricingCardFive.tsx +++ b/src/components/sections/pricing/PricingCardFive.tsx @@ -1,231 +1,10 @@ -"use client"; +import React from 'react'; +import { CardList } from '../../cardStack/CardList'; -import { Check } from "lucide-react"; -import CardList from "@/components/cardStack/CardList"; -import Tag from "@/components/shared/Tag"; -import Button from "@/components/button/Button"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type PricingPlan = { - id: string; - tag: string; - tagIcon?: LucideIcon; - price: string; - period: string; - description: string; - button: ButtonConfig; - featuresTitle: string; - features: string[]; -}; - -interface PricingCardFiveProps { - plans: PricingPlan[]; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - cardContentClassName?: string; - planTagClassName?: string; - planPriceClassName?: string; - planPeriodClassName?: string; - planDescriptionClassName?: string; - planButtonClassName?: string; - planButtonTextClassName?: string; - featuresTitleClassName?: string; - featuresListClassName?: string; - featureItemClassName?: string; - featureIconClassName?: string; - featureTextClassName?: string; +export function PricingCardFive() { + return ( +
+ +
+ ); } - -const PricingCardFive = ({ - plans, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Pricing section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - cardContentClassName = "", - planTagClassName = "", - planPriceClassName = "", - planPeriodClassName = "", - planDescriptionClassName = "", - planButtonClassName = "", - planButtonTextClassName = "", - featuresTitleClassName = "", - featuresListClassName = "", - featureItemClassName = "", - featureIconClassName = "", - featureTextClassName = "", -}: PricingCardFiveProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const getButtonConfigProps = () => { - if (theme.defaultButtonVariant === "hover-bubble") { - return { bgClassName: "w-full" }; - } - if (theme.defaultButtonVariant === "icon-arrow") { - return { className: "justify-between" }; - } - return {}; - }; - - return ( - - {plans.map((plan) => ( -
-
-
- -
- - {plan.price} - - - {plan.period} - -
-

- {plan.description} -

-
-
- -
- -
-

- {plan.featuresTitle} -

-
    - {plan.features.map((feature, index) => ( -
  • -
    - -
    - - {feature} - -
    • - ))} -
-
-
- ))} - - ); -}; - -PricingCardFive.displayName = "PricingCardFive"; - -export default PricingCardFive; -- 2.49.1 From 627ab52c95a926a3a4b9be858565f3045d62fcbd Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:12 +0000 Subject: [PATCH 17/19] Update src/components/sections/pricing/PricingCardNine.tsx --- .../sections/pricing/PricingCardNine.tsx | 222 +----------------- 1 file changed, 8 insertions(+), 214 deletions(-) diff --git a/src/components/sections/pricing/PricingCardNine.tsx b/src/components/sections/pricing/PricingCardNine.tsx index 6eb39d2..37e3eb8 100644 --- a/src/components/sections/pricing/PricingCardNine.tsx +++ b/src/components/sections/pricing/PricingCardNine.tsx @@ -1,216 +1,10 @@ -"use client"; +import React from 'react'; +import { CardList } from '../../cardStack/CardList'; -import { Check } from "lucide-react"; -import CardList from "@/components/cardStack/CardList"; -import Button from "@/components/button/Button"; -import MediaContent from "@/components/shared/MediaContent"; -import Tag from "@/components/shared/Tag"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type PricingPlan = { - id: string; - title: string; - price: string; - period: string; - features: string[]; - button: ButtonConfig; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; -}; - -interface PricingCardNineProps { - plans: PricingPlan[]; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - cardContentClassName?: string; - planImageWrapperClassName?: string; - planImageClassName?: string; - planTitleClassName?: string; - planPriceClassName?: string; - planButtonClassName?: string; - planButtonTextClassName?: string; - featuresListClassName?: string; - featureItemClassName?: string; - featureIconClassName?: string; - featureTextClassName?: string; +export function PricingCardNine() { + return ( +
+ +
+ ); } - -const PricingCardNine = ({ - plans, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Pricing section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - cardContentClassName = "", - planImageWrapperClassName = "", - planImageClassName = "", - planTitleClassName = "", - planPriceClassName = "", - planButtonClassName = "", - planButtonTextClassName = "", - featuresListClassName = "", - featureItemClassName = "", - featureIconClassName = "", - featureTextClassName = "", -}: PricingCardNineProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const getButtonConfigProps = () => { - if (theme.defaultButtonVariant === "hover-bubble") { - return { bgClassName: "w-full" }; - } - if (theme.defaultButtonVariant === "icon-arrow") { - return { className: "justify-between" }; - } - return {}; - }; - - return ( - - {plans.map((plan) => ( -
-
- -
- -
-
- - -

- {plan.title} -

- -
    - {plan.features.map((feature, index) => ( -
  • -
    - -
    - - {feature} - -
    • - ))} -
-
- -
-
- ))} - - ); -}; - -PricingCardNine.displayName = "PricingCardNine"; - -export default PricingCardNine; -- 2.49.1 From 2c22f5d941fd508182c12d0b5fa45bb04df918b1 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:13 +0000 Subject: [PATCH 18/19] Update src/components/sections/team/TeamCardEleven.tsx --- .../sections/team/TeamCardEleven.tsx | 202 +----------------- 1 file changed, 8 insertions(+), 194 deletions(-) diff --git a/src/components/sections/team/TeamCardEleven.tsx b/src/components/sections/team/TeamCardEleven.tsx index 725e0a8..f47b161 100644 --- a/src/components/sections/team/TeamCardEleven.tsx +++ b/src/components/sections/team/TeamCardEleven.tsx @@ -1,196 +1,10 @@ -"use client"; +import React from 'react'; +import { CardList } from '../../cardStack/CardList'; -import CardList from "@/components/cardStack/CardList"; -import MediaContent from "@/components/shared/MediaContent"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type TeamMember = { - id: string; - title: string; - subtitle: string; - detail: string; - imageSrc?: string; - imageAlt?: string; - videoSrc?: string; - videoAriaLabel?: string; -}; - -type TeamGroup = { - id: string; - groupTitle: string; - members: TeamMember[]; -}; - -interface TeamCardElevenProps { - groups: TeamGroup[]; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxClassName?: string; - textBoxTitleClassName?: string; - textBoxDescriptionClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - groupTitleClassName?: string; - memberClassName?: string; - memberImageClassName?: string; - memberTitleClassName?: string; - memberSubtitleClassName?: string; - memberDetailClassName?: string; +export function TeamCardEleven() { + return ( +
+ +
+ ); } - -const TeamCardEleven = ({ - groups, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Team section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - groupTitleClassName = "", - memberClassName = "", - memberImageClassName = "", - memberTitleClassName = "", - memberSubtitleClassName = "", - memberDetailClassName = "", -}: TeamCardElevenProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const renderMemberRow = (member: TeamMember) => ( -
-
-
- -
- -
-

- {member.title} -

-

- {member.subtitle} -

-
-
- -

- {member.detail} -

-
- ); - - return ( - - {groups.map((group) => ( -
-

- {group.groupTitle} -

- -
- {group.members.map(renderMemberRow)} -
-
- ))} - - ); -}; - -TeamCardEleven.displayName = "TeamCardEleven"; - -export default TeamCardEleven; -- 2.49.1 From 2c0130b97eb1ec33b109f679eedb1a1d204ca8a2 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:16:13 +0000 Subject: [PATCH 19/19] Update src/components/sections/testimonial/TestimonialCardSix.tsx --- .../testimonial/TestimonialCardSix.tsx | 209 +----------------- 1 file changed, 8 insertions(+), 201 deletions(-) diff --git a/src/components/sections/testimonial/TestimonialCardSix.tsx b/src/components/sections/testimonial/TestimonialCardSix.tsx index 6f6932b..ed67209 100644 --- a/src/components/sections/testimonial/TestimonialCardSix.tsx +++ b/src/components/sections/testimonial/TestimonialCardSix.tsx @@ -1,203 +1,10 @@ -"use client"; +import React from 'react'; +import { AutoCarousel } from '../../cardStack/layouts/carousels/AutoCarousel'; -import { memo } from "react"; -import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel"; -import TestimonialAuthor from "@/components/shared/TestimonialAuthor"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import { Quote } from "lucide-react"; -import type { LucideIcon } from "lucide-react"; -import type { CardAnimationType, ButtonConfig, ButtonAnimationType, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types"; - -type Testimonial = { - id: string; - name: string; - handle: string; - testimonial: string; - imageSrc?: string; - imageAlt?: string; - icon?: LucideIcon; -}; - -interface TestimonialCardSixProps { - testimonials: Testimonial[]; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - speed?: number; - topMarqueeDirection?: "left" | "right"; - ariaLabel?: string; - className?: string; - containerClassName?: string; - carouselClassName?: string; - bottomCarouselClassName?: string; - cardClassName?: string; - testimonialClassName?: string; - imageWrapperClassName?: string; - imageClassName?: string; - iconClassName?: string; - nameClassName?: string; - handleClassName?: string; - textBoxClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; +export function TestimonialCardSix() { + return ( +
+ +
+ ); } - -interface TestimonialCardProps { - testimonial: Testimonial; - useInvertedBackground: boolean; - cardClassName?: string; - testimonialClassName?: string; - imageWrapperClassName?: string; - imageClassName?: string; - iconClassName?: string; - nameClassName?: string; - handleClassName?: string; -} - -const TestimonialCard = memo(({ - testimonial, - useInvertedBackground, - cardClassName = "", - testimonialClassName = "", - imageWrapperClassName = "", - imageClassName = "", - iconClassName = "", - nameClassName = "", - handleClassName = "", -}: TestimonialCardProps) => { - const Icon = testimonial.icon || Quote; - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( -
-

- {testimonial.testimonial} -

- - -
- ); -}); - -TestimonialCard.displayName = "TestimonialCard"; - -const TestimonialCardSix = ({ - testimonials, - animationType, - title, - titleSegments, - description, - textboxLayout, - useInvertedBackground, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - speed = 40, - topMarqueeDirection = "left", - ariaLabel = "Testimonials section", - className = "", - containerClassName = "", - carouselClassName = "", - bottomCarouselClassName = "", - cardClassName = "", - testimonialClassName = "", - imageWrapperClassName = "", - imageClassName = "", - iconClassName = "", - nameClassName = "", - handleClassName = "", - textBoxClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: TestimonialCardSixProps) => { - return ( - - {testimonials.map((testimonial, index) => ( - - ))} - - ); -}; - -TestimonialCardSix.displayName = "TestimonialCardSix"; - -export default TestimonialCardSix; \ No newline at end of file -- 2.49.1