bender/7535110a-b7d4-41f6-82d5-cccd151dccae
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Compare commits

base: bender:version_3
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1
..
compare: bender:version_2
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1

12 Commits
version_3 ... version_2

Author SHA1 Message Date
bender
cdddd03c4e Add src/app/projects/page.tsx 2026-03-09 08:33:40 +00:00
bender
c5a074c242 Update src/app/projects/[id]/page.tsx 2026-03-09 08:33:39 +00:00
bender
599ba2e7f9 Update src/app/page.tsx 2026-03-09 08:33:39 +00:00
bender
07ab2b3fd7 Update src/app/layout.tsx 2026-03-09 08:33:38 +00:00
bender
9b0d0c5eb1 Update src/app/projects/saas-product-interface-design/page.tsx 2026-03-09 08:30:57 +00:00
bender
9ec9fd0b52 Update src/app/projects/ecommerce-platform-redesign/page.tsx 2026-03-09 08:30:57 +00:00
bender
7ed7056372 Update src/app/projects/digital-brand-identity/page.tsx 2026-03-09 08:30:56 +00:00
bender
5d00a3d3cd Update src/app/page.tsx 2026-03-09 08:30:55 +00:00
bender
055d8feb7d Update src/app/projects/[id]/page.tsx 2026-03-09 08:28:00 +00:00
bender
d2bda4e745 Add src/app/portfolio/[projectId]/page.tsx 2026-03-09 08:28:00 +00:00
bender
c24bf28d9b Update src/app/page.tsx 2026-03-09 08:27:59 +00:00
bender
12615abe84 Update src/app/layout.tsx 2026-03-09 08:27:59 +00:00
77 changed files with 2397 additions and 13704 deletions
Expand all files Collapse all files

43
src/app/layout.tsx
View File

@@ -1,9 +1,19 @@
import type { Metadata } from 'next'; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/providers/service/ServiceWrapper";
import { Tag } from "@/components/utils/Tag";
const geist = Geist({
variable: "--font-geist-sans", subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono", subsets: ["latin"],
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Portfolio', title: "Portfolio", description: "Creative portfolio showcasing design excellence"};
description: 'Portfolio website',
};
export default function RootLayout({ export default function RootLayout({
children, children,
@@ -11,8 +21,29 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<html lang="en"> <html lang="en" suppressHydrationWarning>
<body>{children} <body
className={`${geist.variable} ${geistMono.variable} antialiased`}
suppressHydrationWarning
>
<ServiceWrapper>
<Tag />
{children}
</ServiceWrapper>
<script
dangerouslySetInnerHTML={{
__html: `
try {
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
} catch (e) {}
`,
}}
/>
<script <script
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: ` __html: `

53
src/app/page.tsx
View File

@@ -1,6 +1,5 @@
"use client"; "use client";
import { useRouter } from "next/navigation";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay"; import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel"; import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
@@ -11,10 +10,8 @@ import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal"; import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
export default function LandingPage() { export default function LandingPage() {
const router = useRouter();
const handleProjectClick = (projectId: string) => { const handleProjectClick = (projectId: string) => {
router.push(`/project/${projectId}`); window.location.href = `/project/${projectId}`;
}; };
return ( return (
@@ -40,7 +37,8 @@ export default function LandingPage() {
{ name: "Contact", id: "contact" }, { name: "Contact", id: "contact" },
]} ]}
button={{ button={{
text: "Get in Touch", href: "contact"}} text: "Get in Touch", href: "contact"
}}
/> />
</div> </div>
@@ -52,17 +50,23 @@ export default function LandingPage() {
background={{ variant: "sparkles-gradient" }} background={{ variant: "sparkles-gradient" }}
mediaItems={[ mediaItems={[
{ {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-stunning-creative-portfolio-showcasing-1773043068077-12221410.png", imageAlt: "Portfolio showcase project one"}, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-stunning-creative-portfolio-showcasing-1773043068077-12221410.png", imageAlt: "Portfolio showcase project one"
},
{ {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/bold-creative-design-project-displayed-i-1773043067366-f2dd6201.png", imageAlt: "Portfolio showcase project two"}, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/bold-creative-design-project-displayed-i-1773043067366-f2dd6201.png", imageAlt: "Portfolio showcase project two"
},
{ {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png", imageAlt: "Portfolio showcase project three"}, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png", imageAlt: "Portfolio showcase project three"
},
{ {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png", imageAlt: "Portfolio showcase project four"}, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png", imageAlt: "Portfolio showcase project four"
},
{ {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-portfolio-piece-with-1773043067431-feb1d48d.png", imageAlt: "Portfolio showcase project five"}, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-portfolio-piece-with-1773043067431-feb1d48d.png", imageAlt: "Portfolio showcase project five"
},
{ {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/sleek-portfolio-presentation-displaying--1773043067678-cc62c707.png", imageAlt: "Portfolio showcase project six"}, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/sleek-portfolio-presentation-displaying--1773043067678-cc62c707.png", imageAlt: "Portfolio showcase project six"
},
]} ]}
buttons={[ buttons={[
{ text: "View Work", href: "work" }, { text: "View Work", href: "work" },
@@ -79,15 +83,15 @@ export default function LandingPage() {
features={[ features={[
{ {
id: "1", title: "Digital Brand Identity System", author: "Brand Strategy", description: "Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library. Increased brand recognition by 40% within six months.", tags: ["Branding", "Identity", "Design System"], id: "1", title: "Digital Brand Identity System", author: "Brand Strategy", description: "Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library. Increased brand recognition by 40% within six months.", tags: ["Branding", "Identity", "Design System"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity project showcase", onFeatureClick: () => handleProjectClick("1"), imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity project showcase", onFeatureClick: () => handleProjectClick("1")
}, },
{ {
id: "2", title: "E-commerce Platform Redesign", author: "UX Design", description: "User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow. Implemented accessible design patterns and mobile-first approach.", tags: ["UX Design", "E-commerce", "Accessibility"], id: "2", title: "E-commerce Platform Redesign", author: "UX Design", description: "User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow. Implemented accessible design patterns and mobile-first approach.", tags: ["UX Design", "E-commerce", "Accessibility"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform design", onFeatureClick: () => handleProjectClick("2"), imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform design", onFeatureClick: () => handleProjectClick("2")
}, },
{ {
id: "3", title: "SaaS Product Interface Design", author: "Product Design", description: "Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations. Enhanced user onboarding experience and reduced support tickets by 50%.", tags: ["SaaS", "Product Design", "UI Design"], id: "3", title: "SaaS Product Interface Design", author: "Product Design", description: "Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations. Enhanced user onboarding experience and reduced support tickets by 50%.", tags: ["SaaS", "Product Design", "UI Design"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface design", onFeatureClick: () => handleProjectClick("3"), imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface design", onFeatureClick: () => handleProjectClick("3")
}, },
]} ]}
animationType="slide-up" animationType="slide-up"
@@ -100,7 +104,8 @@ export default function LandingPage() {
<TextSplitAbout <TextSplitAbout
title="About My Practice" title="About My Practice"
description={[ description={[
"With over a decade of experience in digital design, I specialize in creating meaningful visual experiences that solve real problems. My approach combines strategic thinking with meticulous attention to detail.", "I believe great design goes beyond aesthetics—it should drive business results while delighting users. Every project is an opportunity to push creative boundaries and establish new standards in digital craftsmanship.", "I collaborate closely with clients and teams to understand vision, challenge assumptions, and deliver work that exceeds expectations. Let's create something extraordinary together."]} "With over a decade of experience in digital design, I specialize in creating meaningful visual experiences that solve real problems. My approach combines strategic thinking with meticulous attention to detail.", "I believe great design goes beyond aesthetics—it should drive business results while delighting users. Every project is an opportunity to push creative boundaries and establish new standards in digital craftsmanship.", "I collaborate closely with clients and teams to understand vision, challenge assumptions, and deliver work that exceeds expectations. Let's create something extraordinary together."
]}
buttons={[ buttons={[
{ text: "Download Resume", href: "#" }, { text: "Download Resume", href: "#" },
{ text: "Connect", href: "contact" }, { text: "Connect", href: "contact" },
@@ -140,17 +145,23 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
testimonials={[ testimonials={[
{ {
id: "1", name: "Sarah Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-a-crea-1773043067225-0aed98b9.png", imageAlt: "Sarah Chen"}, id: "1", name: "Sarah Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-a-crea-1773043067225-0aed98b9.png", imageAlt: "Sarah Chen"
},
{ {
id: "2", name: "Marcus Johnson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portrait-photograph-of-busi-1773043067191-64c1ffe8.png", imageAlt: "Marcus Johnson"}, id: "2", name: "Marcus Johnson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portrait-photograph-of-busi-1773043067191-64c1ffe8.png", imageAlt: "Marcus Johnson"
},
{ {
id: "3", name: "Elena Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-of-creative-indust-1773043067885-58b8d4c1.png", imageAlt: "Elena Rodriguez"}, id: "3", name: "Elena Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-of-creative-indust-1773043067885-58b8d4c1.png", imageAlt: "Elena Rodriguez"
},
{ {
id: "4", name: "James Williams", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-business-portrait-photograp-1773043066896-7b04d7eb.png", imageAlt: "James Williams"}, id: "4", name: "James Williams", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-business-portrait-photograp-1773043066896-7b04d7eb.png", imageAlt: "James Williams"
},
{ {
id: "5", name: "Sophie Laurent", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-busine-1773043067827-a52a508e.png", imageAlt: "Sophie Laurent"}, id: "5", name: "Sophie Laurent", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-busine-1773043067827-a52a508e.png", imageAlt: "Sophie Laurent"
},
{ {
id: "6", name: "David Kumar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-business-portrait-photograp-1773043067750-9681fff7.png", imageAlt: "David Kumar"}, id: "6", name: "David Kumar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-business-portrait-photograp-1773043067750-9681fff7.png", imageAlt: "David Kumar"
},
]} ]}
/> />
</div> </div>

250
src/app/project/[id]/page.tsx
View File

@@ -4,37 +4,52 @@ import { useParams, useRouter } from "next/navigation";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay"; import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal"; import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { ArrowLeft } from "lucide-react";
const projectData: Record<string, any> = { // Project data
const projectsData: Record<string, any> = {
"1": { "1": {
title: "Digital Brand Identity System", category: "Brand Strategy", description: "Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library. Increased brand recognition by 40% within six months.", tags: ["Branding", "Identity", "Design System"], id: "1", title: "Digital Brand Identity System", author: "Brand Strategy", description:
fullDescription: "Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library. Increased brand recognition by 40% within six months.", fullDescription:
"This comprehensive brand identity project transformed a tech startup's visual presence. We developed a complete visual language that aligned with their innovative mission while maintaining professional credibility. The project included logo design, color palette development, typography system, brand guidelines, and a complete digital asset library. The new identity increased brand recognition by 40% within the first six months.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity project showcase", challenge: "This comprehensive project involved a complete visual identity redesign for a growing tech startup. We developed extensive brand guidelines covering typography, color systems, and application patterns. Created a modular digital asset library that scales across all platforms. The result was a 40% increase in brand recognition within six months of launch.", tags: ["Branding", "Identity", "Design System"],
"The startup needed a distinct visual identity that could compete in a crowded tech market while conveying trust and innovation.", solution: imageSrc:
"We created a modern, scalable brand system that balanced cutting-edge design with timeless principles, ensuring consistency across all touchpoints.", results: ["40% increase in brand recognition", "Unified visual language", "Comprehensive style guide", "Digital asset library"], "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity project showcase", challenges: [
"Balancing innovation with brand consistency", "Creating a system scalable across digital and print", "Ensuring accessibility compliance across all assets"],
solutions: [
"Developed a modular design system with clear documentation", "Created adaptive color palettes for different contexts", "Implemented WCAG AA compliance throughout the identity"],
results: [
"40% increase in brand recognition", "30% improvement in design consistency", "50+ assets in comprehensive asset library"],
}, },
"2": { "2": {
title: "E-commerce Platform Redesign", category: "UX Design", description: "User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow. Implemented accessible design patterns and mobile-first approach.", tags: ["UX Design", "E-commerce", "Accessibility"], id: "2", title: "E-commerce Platform Redesign", author: "UX Design", description:
fullDescription: "User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow. Implemented accessible design patterns and mobile-first approach.", fullDescription:
"This e-commerce platform redesign focused on improving user experience across all devices. Through extensive user research and testing, we identified pain points in the shopping journey and implemented solutions that significantly improved conversion rates. The redesign emphasized accessibility, mobile-first design, and simplified navigation.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform design", challenge: "This project involved a comprehensive redesign of an enterprise e-commerce platform serving millions of monthly users. We implemented a mobile-first approach, streamlined navigation, and optimized the checkout flow. The result was a 35% improvement in conversion rate and significant reduction in cart abandonment.", tags: ["UX Design", "E-commerce", "Accessibility"],
"The platform had a high cart abandonment rate and users complained about complex navigation and confusing checkout process.", solution: imageSrc:
"We streamlined the user journey, implemented progressive disclosure, and optimized the checkout flow to reduce friction and improve conversion.", results: ["35% improvement in conversion rate", "50% reduction in cart abandonment", "WCAG 2.1 AA compliance", "Mobile conversion rate increased by 45%"], "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform design", challenges: [
"Managing complex product hierarchies", "Optimizing for mobile without losing desktop functionality", "Reducing checkout friction while adding trust signals"],
solutions: [
"Implemented progressive disclosure for product filters", "Created responsive layouts that adapt to all screen sizes", "Added contextual help and security indicators"],
results: [
"35% improvement in conversion rate", "42% reduction in cart abandonment", "28% increase in average order value"],
}, },
"3": { "3": {
title: "SaaS Product Interface Design", category: "Product Design", description: "Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations. Enhanced user onboarding experience and reduced support tickets by 50%.", tags: ["SaaS", "Product Design", "UI Design"], id: "3", title: "SaaS Product Interface Design", author: "Product Design", description:
fullDescription: "Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations. Enhanced user onboarding experience and reduced support tickets by 50%.", fullDescription:
"For this data analytics SaaS platform, we designed an intuitive interface that made complex data visualization accessible to non-technical users. The project included creating an extensive design system with reusable components, improving the onboarding experience, and implementing best practices for data presentation.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface design", challenge: "This project focused on designing a user-friendly interface for a complex data analytics SaaS platform. We created an extensive design system with 15+ component variations and built interactive prototypes. The redesigned onboarding flow resulted in a 50% reduction in support tickets.", tags: ["SaaS", "Product Design", "UI Design"],
"Users struggled with the complexity of data analytics tools and required extensive training. Support tickets were overwhelming.", solution: imageSrc:
"We redesigned the interface with a focus on progressive disclosure, clear data visualization, and comprehensive onboarding that guided users through key features.", results: ["50% reduction in support tickets", "Design system with 15+ components", "Improved user onboarding time by 60%", "User satisfaction score increased from 6.2 to 8.7 out of 10"], "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface design", challenges: [
"Simplifying complex data visualization", "Creating intuitive onboarding for technical users", "Maintaining consistency across multiple product modules"],
solutions: [
"Implemented guided tours and contextual help", "Created reusable visualization components", "Built comprehensive design system documentation"],
results: [
"50% reduction in support tickets", "35% faster user adoption", "25% increase in feature adoption rate"],
}, },
}; };
export default function ProjectDetailPage() { export default function ProjectPage() {
const params = useParams(); const params = useParams();
const router = useRouter(); const router = useRouter();
const projectId = params.id as string; const projectId = params.id as string;
const project = projectData[projectId]; const project = projectsData[projectId];
if (!project) { if (!project) {
return ( return (
@@ -50,15 +65,16 @@ export default function ProjectDetailPage() {
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
headingFontWeight="normal" headingFontWeight="normal"
> >
<div className="min-h-screen flex flex-col items-center justify-center"> <div className="min-h-screen flex items-center justify-center">
<h1 className="text-3xl font-bold mb-4">Project not found</h1> <div className="text-center">
<button <h1 className="text-4xl font-bold mb-4">Project Not Found</h1>
onClick={() => router.push("/#work")} <button
className="flex items-center gap-2 text-blue-500 hover:text-blue-600" onClick={() => router.push("/")}
> className="mt-8 px-8 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90"
<ArrowLeft size={20} /> >
Back to Work Back to Portfolio
</button> </button>
</div>
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
@@ -77,123 +93,127 @@ export default function ProjectDetailPage() {
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
headingFontWeight="normal" headingFontWeight="normal"
> >
<div className="min-h-screen flex flex-col"> <div id="nav" data-section="nav">
{/* Navigation */} <NavbarLayoutFloatingOverlay
<div className="sticky top-0 z-50"> brandName="Portfolio"
<NavbarLayoutFloatingOverlay navItems={[
brandName="Portfolio" { name: "Work", id: "/" },
navItems={[ { name: "About", id: "/" },
{ name: "Work", id: "work" }, { name: "Services", id: "/" },
{ name: "About", id: "about" }, { name: "Contact", id: "/" },
{ name: "Services", id: "services" }, ]}
{ name: "Contact", id: "contact" }, button={{
]} text: "Get in Touch", href: "/#contact"}}
button={{ />
text: "Get in Touch", href: "contact"}} </div>
/>
</div>
{/* Main Content */} <main className="py-20">
<main className="flex-1 w-full max-w-6xl mx-auto px-4 py-16 md:py-24"> <div className="container mx-auto px-4">
{/* Back Button */} {/* Back button */}
<button <button
onClick={() => router.push("/#work")} onClick={() => router.push("/#work")}
className="flex items-center gap-2 text-foreground hover:text-primary-cta mb-8 transition-colors" className="text-secondary-cta hover:text-primary-cta transition-colors mb-8"
> >
<ArrowLeft size={20} /> ← Back to Work
<span>Back to Work</span>
</button> </button>
{/* Hero Section */} {/* Project Hero */}
<div className="mb-12 md:mb-16"> <section className="mb-20">
<div className="mb-6"> <div className="space-y-8">
<span className="inline-block px-3 py-1 rounded-full bg-accent/10 text-accent text-sm font-medium mb-4"> <div>
{project.category} <div className="text-sm text-secondary-cta mb-4">{project.author}</div>
</span> <h1 className="text-5xl md:text-6xl font-bold mb-6">{project.title}</h1>
<h1 className="text-4xl md:text-5xl font-bold mb-4">{project.title}</h1> <p className="text-xl text-foreground/80 max-w-3xl">
<p className="text-lg text-foreground/70 mb-6">{project.description}</p> {project.fullDescription}
</p>
</div>
{/* Tags */}
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{project.tags.map((tag: string) => ( {project.tags.map((tag: string, index: number) => (
<span key={tag} className="px-3 py-1 rounded-full bg-card border border-foreground/10 text-sm"> <span
key={index}
className="px-4 py-2 bg-card text-foreground rounded-full text-sm border border-accent"
>
{tag} {tag}
</span> </span>
))} ))}
</div> </div>
</div>
{/* Project Image */} {/* Project Image */}
<div className="rounded-lg overflow-hidden bg-card aspect-video"> <div className="mt-12">
<img <img
src={project.imageSrc} src={project.imageSrc}
alt={project.imageAlt} alt={project.imageAlt}
className="w-full h-full object-cover" className="w-full h-auto rounded-lg object-cover"
/> />
</div>
</div> </div>
</div> </section>
{/* Project Details */} {/* Project Details */}
<div className="grid md:grid-cols-2 gap-12 mb-16"> <section className="grid md:grid-cols-2 gap-12 mb-20">
{/* Challenge */} {/* Challenges */}
<div> <div>
<h2 className="text-2xl font-bold mb-4">Challenge</h2> <h2 className="text-2xl font-bold mb-6">Challenges</h2>
<p className="text-foreground/70 leading-relaxed">{project.challenge}</p> <ul className="space-y-4">
{project.challenges.map((challenge: string, index: number) => (
<li key={index} className="flex items-start gap-4">
<div className="w-2 h-2 bg-primary-cta rounded-full mt-2 flex-shrink-0"></div>
<span className="text-foreground/80">{challenge}</span>
</li>
))}
</ul>
</div> </div>
{/* Solution */} {/* Solutions */}
<div> <div>
<h2 className="text-2xl font-bold mb-4">Solution</h2> <h2 className="text-2xl font-bold mb-6">Solutions</h2>
<p className="text-foreground/70 leading-relaxed">{project.solution}</p> <ul className="space-y-4">
{project.solutions.map((solution: string, index: number) => (
<li key={index} className="flex items-start gap-4">
<div className="w-2 h-2 bg-primary-cta rounded-full mt-2 flex-shrink-0"></div>
<span className="text-foreground/80">{solution}</span>
</li>
))}
</ul>
</div> </div>
</div> </section>
{/* Full Description */}
<div className="mb-16 p-8 rounded-lg bg-card border border-foreground/10">
<h2 className="text-2xl font-bold mb-4">Project Overview</h2>
<p className="text-foreground/70 leading-relaxed">{project.fullDescription}</p>
</div>
{/* Results */} {/* Results */}
<div> <section className="mb-20">
<h2 className="text-2xl font-bold mb-6">Results</h2> <h2 className="text-2xl font-bold mb-6">Results & Impact</h2>
<ul className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-3 gap-8">
{project.results.map((result: string, index: number) => ( {project.results.map((result: string, index: number) => (
<li key={index} className="flex items-start gap-3 p-4 rounded-lg bg-card border border-foreground/10"> <div
<div className="flex-shrink-0 mt-1"> key={index}
<div className="flex items-center justify-center h-6 w-6 rounded-full bg-accent text-background"> className="p-6 bg-card rounded-lg border border-accent text-center"
<span className="text-sm font-bold">✓</span> >
</div> <p className="text-foreground/80">{result}</p>
</div> </div>
<span className="text-foreground/70">{result}</span>
</li>
))} ))}
</ul> </div>
</div> </section>
</main>
{/* CTA Section */} {/* CTA */}
<section className="w-full py-16 md:py-24 border-t border-foreground/10"> <section className="text-center py-12">
<div className="max-w-6xl mx-auto px-4 text-center"> <h2 className="text-3xl font-bold mb-6">Ready to Work Together?</h2>
<h2 className="text-3xl md:text-4xl font-bold mb-4">Interested in working together?</h2>
<p className="text-lg text-foreground/70 mb-8 max-w-2xl mx-auto">
Let's discuss your project vision and how I can help bring your ideas to life.
</p>
<button <button
onClick={() => router.push("/#contact")} onClick={() => router.push("/#contact")}
className="inline-block px-8 py-3 rounded-lg bg-primary-cta text-background font-medium hover:bg-primary-cta/90 transition-colors" className="px-8 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90 transition-opacity"
> >
Start a Project Start Your Project
</button> </button>
</div> </section>
</section>
{/* Footer */}
<div className="border-t border-foreground/10">
<FooterLogoReveal
logoText="Portfolio"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div> </div>
</main>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Portfolio"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div> </div>
</ThemeProvider> </ThemeProvider>
); );

162
src/app/projects/[id]/page.tsx
View File

@@ -1,95 +1,32 @@
"use client"; "use client";
import { useParams } from "next/navigation";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay"; import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel"; import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout"; import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import ContactCenter from "@/components/sections/contact/ContactCenter"; import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal"; import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { useParams } from "next/navigation";
// Mock project data structure
const projectsData: Record<string, any> = { const projectsData: Record<string, any> = {
"1": { "1": {
id: "1", title: "Digital Brand Identity System", subtitle: "Complete visual identity redesign for tech startup", description: "Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library. Increased brand recognition by 40% within six months.", heroImages: [ title: "Digital Brand Identity System", heroTitle: "Digital Brand Identity System", heroDescription: "Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library.", heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", aboutTitle: "Project Overview", aboutDescription: [
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-stunning-creative-portfolio-showcasing-1773043068077-12221410.png"], "This comprehensive brand identity project involved conducting extensive market research and competitive analysis to position the tech startup effectively in their market.", "We developed a complete visual identity system including logo design, color palette, typography standards, and a comprehensive brand guidelines document spanning over 50 pages.", "The result was a cohesive and scalable brand system that increased brand recognition by 40% within six months of implementation."],
challenge: "The client needed a fresh brand identity to reflect their innovative approach to technology solutions. Their existing branding felt dated and didn't resonate with their target market of tech-savvy startups.", solution: "I conducted extensive market research and competitor analysis to identify market gaps. Working closely with the client, I developed a comprehensive brand strategy that included logo design, color palette, typography system, and brand guidelines. The new identity was modern, scalable, and distinctly positioned in the market.", results: [
"40% increase in brand recognition", "Enhanced market positioning", "Improved customer engagement", "Scalable design system for future growth"],
testimonial: {
name: "Sarah Chen", role: "CEO", quote: "The new brand identity transformed how customers perceive our company. Within months, we saw significant improvement in lead generation and customer retention.", image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-a-crea-1773043067225-0aed98b9.png"},
relatedProjects: [
{
id: "2", title: "E-commerce Platform Redesign", author: "UX Design", description: "User-centered redesign of enterprise e-commerce platform", tags: ["UX Design", "E-commerce"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce redesign"},
{
id: "3", title: "SaaS Product Interface Design", author: "Product Design", description: "Designed intuitive interface for data analytics platform", tags: ["SaaS", "Product Design"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS design"},
],
}, },
"2": { "2": {
id: "2", title: "E-commerce Platform Redesign", subtitle: "User-centered redesign of enterprise e-commerce platform", description: "User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow. Implemented accessible design patterns and mobile-first approach.", heroImages: [ title: "E-commerce Platform Redesign", heroTitle: "E-commerce Platform Redesign", heroDescription: "User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow.", heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", aboutTitle: "Project Overview", aboutDescription: [
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/bold-creative-design-project-displayed-i-1773043067366-f2dd6201.png"], "This e-commerce redesign project focused on improving user experience through data-driven insights and user testing methodologies.", "We streamlined the navigation structure, optimized the checkout flow to reduce cart abandonment, and implemented accessibility standards to serve a broader audience.", "The redesigned platform resulted in a 35% improvement in conversion rate and significantly reduced support tickets through improved usability."],
challenge: "The existing e-commerce platform had a complex checkout flow resulting in a 60% cart abandonment rate. The interface was cluttered, and mobile users faced significant usability issues.", solution: "I conducted user research and usability testing to identify pain points. The redesign focused on streamlining the checkout process, implementing clear call-to-action buttons, and ensuring mobile-first responsiveness. I also implemented accessibility features following WCAG guidelines.", results: [
"35% increase in conversion rate", "60% reduction in cart abandonment", "40% increase in mobile transactions", "Enhanced accessibility compliance"],
testimonial: {
name: "Marcus Johnson", role: "Product Director", quote: "The redesigned platform has been instrumental in our growth. The improved user experience directly translated to increased sales and customer satisfaction.", image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portrait-photograph-of-busi-1773043067191-64c1ffe8.png"},
relatedProjects: [
{
id: "1", title: "Digital Brand Identity System", author: "Brand Strategy", description: "Complete visual identity redesign for tech startup", tags: ["Branding", "Identity"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity"},
{
id: "3", title: "SaaS Product Interface Design", author: "Product Design", description: "Designed intuitive interface for data analytics platform", tags: ["SaaS", "Product Design"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS design"},
],
}, },
"3": { "3": {
id: "3", title: "SaaS Product Interface Design", subtitle: "Intuitive interface design for data analytics platform", description: "Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations. Enhanced user onboarding experience and reduced support tickets by 50%.", heroImages: [ title: "SaaS Product Interface Design", heroTitle: "SaaS Product Interface Design", heroDescription: "Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations.", heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", aboutTitle: "Project Overview", aboutDescription: [
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png"], "This SaaS product design engagement involved creating a comprehensive design system for a data analytics platform serving enterprise clients.", "We conducted extensive user research with data analysts and business intelligence professionals to understand workflow patterns and pain points.", "The final design system includes 15+ core components, detailed interaction patterns, and comprehensive documentation for developer handoff."],
challenge: "Users found the data analytics platform overwhelming due to complex interfaces and poor information hierarchy. The steep learning curve resulted in high support costs and low user adoption rates.", solution: "I created a comprehensive design system with reusable components and clear information architecture. The new interface simplified complex data visualization, implemented progressive disclosure, and included an interactive onboarding flow to guide users through key features.", results: [
"50% reduction in support tickets", "75% faster user onboarding", "Improved user satisfaction scores", "Scalable design system for product growth"],
testimonial: {
name: "Elena Rodriguez", role: "Head of Product", quote: "The new design has revolutionized how our users interact with our platform. The reduction in support tickets alone has freed up resources for innovation.", image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-of-creative-indust-1773043067885-58b8d4c1.png"},
relatedProjects: [
{
id: "1", title: "Digital Brand Identity System", author: "Brand Strategy", description: "Complete visual identity redesign for tech startup", tags: ["Branding", "Identity"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity"},
{
id: "2", title: "E-commerce Platform Redesign", author: "UX Design", description: "User-centered redesign of enterprise e-commerce platform", tags: ["UX Design", "E-commerce"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce redesign"},
],
}, },
}; };
export default function ProjectDetailPage() { export default function ProjectDetailPage() {
const params = useParams(); const params = useParams();
const projectId = params.id as string; const projectId = params.id as string;
const project = projectsData[projectId]; const project = projectsData[projectId] || projectsData["1"];
if (!project) {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div className="min-h-screen flex flex-col items-center justify-center">
<h1 className="text-4xl font-bold mb-4">Project Not Found</h1>
<a href="/" className="text-primary-cta underline">
Return to Portfolio
</a>
</div>
</ThemeProvider>
);
}
return ( return (
<ThemeProvider <ThemeProvider
@@ -108,10 +45,10 @@ export default function ProjectDetailPage() {
<NavbarLayoutFloatingOverlay <NavbarLayoutFloatingOverlay
brandName="Portfolio" brandName="Portfolio"
navItems={[ navItems={[
{ name: "Work", id: "work" }, { name: "Work", id: "/" },
{ name: "About", id: "about" }, { name: "About", id: "/" },
{ name: "Services", id: "services" }, { name: "Services", id: "/" },
{ name: "Contact", id: "contact" }, { name: "Contact", id: "/" },
]} ]}
button={{ button={{
text: "Get in Touch", href: "/"}} text: "Get in Touch", href: "/"}}
@@ -120,14 +57,16 @@ export default function ProjectDetailPage() {
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardCarousel <HeroBillboardCarousel
title={project.title} title={project.heroTitle}
description={project.subtitle} description={project.heroDescription}
tag="Case Study" tag="Project"
background={{ variant: "sparkles-gradient" }} background={{ variant: "sparkles-gradient" }}
mediaItems={project.heroImages.map((src: string) => ({ mediaItems={[
imageSrc: src, {
imageAlt: project.title, imageSrc: project.heroImage,
}))} imageAlt: project.title,
},
]}
buttons={[ buttons={[
{ text: "Back to Portfolio", href: "/" }, { text: "Back to Portfolio", href: "/" },
{ text: "Start a Project", href: "/" }, { text: "Start a Project", href: "/" },
@@ -137,70 +76,21 @@ export default function ProjectDetailPage() {
<div id="about" data-section="about"> <div id="about" data-section="about">
<TextSplitAbout <TextSplitAbout
title="Project Overview" title={project.aboutTitle}
description={[ description={project.aboutDescription}
`Challenge: ${project.challenge}`,
`Solution: ${project.solution}`,
`Results: ${project.results.join(", ")}`,
]}
buttons={[ buttons={[
{ text: "Back to Portfolio", href: "/" }, { text: "View Other Projects", href: "/" },
{ text: "Next Project", href: "/" }, { text: "Connect", href: "/" },
]} ]}
showBorder={true} showBorder={true}
useInvertedBackground={true} useInvertedBackground={true}
/> />
</div> </div>
<div id="services" data-section="services">
<FeatureCardTwentyFour
title="Key Results"
description="Measurable impact achieved through this project"
tag="Outcomes"
features={project.results.map((result: string, index: number) => ({
id: String(index + 1),
title: result,
author: "Achievement", description: "Successfully delivered this key result through strategic design and implementation.", tags: ["Success", "Impact"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png", imageAlt: result,
}))}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
cardTitle={`${project.testimonial.name}, ${project.testimonial.role}`}
cardTag="Client Feedback"
cardAnimation="slide-up"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: project.testimonial.name,
imageSrc: project.testimonial.image,
imageAlt: project.testimonial.name,
},
]}
/>
</div>
<div id="work" data-section="work">
<FeatureCardTwentyFour
title="Related Projects"
description="Explore other successful case studies"
tag="More Work"
features={project.relatedProjects}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCenter <ContactCenter
tag="Let's Talk" tag="Let's Talk"
title="Ready for Your Next Project?" title="Ready to Start Your Next Project?"
description="Get in touch to discuss your design needs, project vision, and how we can collaborate to create exceptional digital experiences." description="Get in touch to discuss your design needs, project vision, and how we can collaborate to create exceptional digital experiences."
background={{ variant: "sparkles-gradient" }} background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false} useInvertedBackground={false}

62
src/app/projects/digital-brand-identity/page.tsx Normal file
View File

@@ -0,0 +1,62 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
export default function DigitalBrandIdentityPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Portfolio"
navItems={[
{ name: "Work", id: "work" },
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Get in Touch", href: "contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
title="Digital Brand Identity System"
description="Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library."
background={{ variant: "sparkles-gradient" }}
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity project showcase"
},
]}
buttons={[
{ text: "Back to Work", href: "/" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Portfolio"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}

62
src/app/projects/ecommerce-platform-redesign/page.tsx Normal file
View File

@@ -0,0 +1,62 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
export default function EcommercePlatformPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Portfolio"
navItems={[
{ name: "Work", id: "work" },
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Get in Touch", href: "contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
title="E-commerce Platform Redesign"
description="User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow."
background={{ variant: "sparkles-gradient" }}
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform design"
},
]}
buttons={[
{ text: "Back to Work", href: "/" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Portfolio"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}

102
src/app/projects/page.tsx Normal file
View File

@@ -0,0 +1,102 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
export default function ProjectsPage() {
const projects = [
{
id: "digital-brand-identity", title: "Digital Brand Identity System", author: "Brand Strategy", description: "Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library. Increased brand recognition by 40% within six months.", tags: ["Branding", "Identity", "Design System"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity project showcase"},
{
id: "ecommerce-platform-redesign", title: "E-commerce Platform Redesign", author: "UX Design", description: "User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow. Implemented accessible design patterns and mobile-first approach.", tags: ["UX Design", "E-commerce", "Accessibility"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform design"},
{
id: "saas-product-interface", title: "SaaS Product Interface Design", author: "Product Design", description: "Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations. Enhanced user onboarding experience and reduced support tickets by 50%.", tags: ["SaaS", "Product Design", "UI Design"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface design"},
];
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Portfolio"
navItems={[
{ name: "Work", id: "work" },
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Get in Touch", href: "#contact"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
title="All Projects"
description="A comprehensive collection of design projects showcasing expertise across branding, UX design, and product strategy. Each project demonstrates creative excellence and strategic problem-solving."
tag="Portfolio"
background={{ variant: "sparkles-gradient" }}
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-stunning-creative-portfolio-showcasing-1773043068077-12221410.png", imageAlt: "Portfolio showcase"},
]}
buttons={[
{ text: "Back Home", href: "/" },
{ text: "Start Your Project", href: "#contact" },
]}
/>
</div>
<div id="projects" data-section="projects">
<FeatureCardTwentyFour
title="Featured Projects"
description="Detailed case studies showcasing design process, outcomes, and business impact"
tag="Case Studies"
features={projects}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Let's Collaborate"
title="Ready to Start Your Next Project?"
description="Get in touch to discuss your design needs, project vision, and how we can collaborate to create exceptional digital experiences."
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email address"
buttonText="Send Message"
termsText="I'll respond within 24 hours. We respect your privacy and will never share your information."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Portfolio"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}

62
src/app/projects/saas-product-interface-design/page.tsx Normal file
View File

@@ -0,0 +1,62 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
export default function SaasProductPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Portfolio"
navItems={[
{ name: "Work", id: "work" },
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Get in Touch", href: "contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
title="SaaS Product Interface Design"
description="Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations."
background={{ variant: "sparkles-gradient" }}
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface design"
},
]}
buttons={[
{ text: "Back to Work", href: "/" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Portfolio"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}

132
src/components/cardStack/CardList.tsx
View File

@@ -1,123 +1,27 @@
"use client"; import React from "react";
import { useCardAnimation } from "./hooks/useCardAnimation";
import { memo, Children } from "react";
import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
import { cls } from "@/lib/utils";
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 CardListProps { interface CardListProps {
children: React.ReactNode; items: any[];
animationType: CardAnimationType;
useUncappedRounding?: boolean;
title?: string;
titleSegments?: TitleSegment[];
description?: string;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
textboxLayout: TextboxLayout;
useInvertedBackground?: InvertedBackground;
disableCardWrapper?: boolean;
ariaLabel?: string;
className?: string; className?: string;
containerClassName?: string;
cardClassName?: string;
textBoxClassName?: string;
titleClassName?: string;
titleImageWrapperClassName?: string;
titleImageClassName?: string;
descriptionClassName?: string;
tagClassName?: string;
buttonContainerClassName?: string;
buttonClassName?: string;
buttonTextClassName?: string;
} }
const CardList = ({ export default function CardList({ items, className = "" }: CardListProps) {
children, const state = useCardAnimation({
animationType, rotationX: 0,
useUncappedRounding = false, rotationY: 0,
title, rotationZ: 0,
titleSegments, perspective: 1000,
description, duration: 0.3,
tag, });
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
disableCardWrapper = false,
ariaLabel = "Card list",
className = "",
containerClassName = "",
cardClassName = "",
textBoxClassName = "",
titleClassName = "",
titleImageWrapperClassName = "",
titleImageClassName = "",
descriptionClassName = "",
tagClassName = "",
buttonContainerClassName = "",
buttonClassName = "",
buttonTextClassName = "",
}: CardListProps) => {
const childrenArray = Children.toArray(children);
const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length, useIndividualTriggers: true });
return ( return (
<section <div className={`card-list-container ${className}`}>
aria-label={ariaLabel} {items.map((item, index) => (
className={cls( <div key={index} className="card-item">
"relative py-20 w-full", {item.label}
useInvertedBackground && "bg-foreground",
className
)}
>
<div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
<CardStackTextBox
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
textBoxClassName={textBoxClassName}
titleClassName={titleClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
descriptionClassName={descriptionClassName}
tagClassName={tagClassName}
buttonContainerClassName={buttonContainerClassName}
buttonClassName={buttonClassName}
buttonTextClassName={buttonTextClassName}
/>
<div className="flex flex-col gap-6">
{childrenArray.map((child, index) => (
<div
key={index}
ref={(el) => { itemRefs.current[index] = el; }}
className={cls(!disableCardWrapper && "card", !disableCardWrapper && (useUncappedRounding ? "rounded-theme" : "rounded-theme-capped"), cardClassName)}
>
{child}
</div>
))}
</div> </div>
</div> ))}
</section> </div>
); );
}; }
CardList.displayName = "CardList";
export default memo(CardList);

244
src/components/cardStack/CardStack.tsx
View File

@@ -1,229 +1,23 @@
"use client"; import React from "react";
import { TimelineBase } from "./layouts/timelines/TimelineBase";
import { memo, Children } from "react"; interface CardStackProps {
import { CardStackProps } from "./types"; items: any[];
import GridLayout from "./layouts/grid/GridLayout"; className?: string;
import AutoCarousel from "./layouts/carousels/AutoCarousel"; }
import ButtonCarousel from "./layouts/carousels/ButtonCarousel";
import TimelineBase from "./layouts/timelines/TimelineBase";
import { gridConfigs } from "./layouts/grid/gridConfigs";
const CardStack = ({ export { CardStack };
children,
mode = "buttons",
gridVariant = "uniform-all-items-equal",
uniformGridCustomHeightClasses,
gridRowsClassName,
itemHeightClassesOverride,
animationType,
supports3DAnimation = false,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout = "default",
useInvertedBackground,
carouselThreshold = 5,
bottomContent,
className = "",
containerClassName = "",
gridClassName = "",
carouselClassName = "",
carouselItemClassName = "",
controlsClassName = "",
textBoxClassName = "",
titleClassName = "",
titleImageWrapperClassName = "",
titleImageClassName = "",
descriptionClassName = "",
tagClassName = "",
buttonContainerClassName = "",
buttonClassName = "",
buttonTextClassName = "",
ariaLabel = "Card stack",
}: CardStackProps) => {
const childrenArray = Children.toArray(children);
const itemCount = childrenArray.length;
// Check if the current grid config has gridRows defined const CardStack: React.FC<CardStackProps> = ({ items, className = "" }) => {
const gridConfig = gridConfigs[gridVariant]?.[itemCount]; return (
const hasFixedGridRows = gridConfig && 'gridRows' in gridConfig && gridConfig.gridRows; <div className={`card-stack-container ${className}`}>
<TimelineBase
// If grid has fixed row heights and we have uniformGridCustomHeightClasses, items={items.map((item) => ({
// we need to use min-h-0 on md+ to prevent conflicts id: item.id,
let adjustedHeightClasses = uniformGridCustomHeightClasses; label: item.label,
if (hasFixedGridRows && uniformGridCustomHeightClasses) { detail: item.detail,
// Extract the mobile min-height and add md:min-h-0 }))}
const mobileMinHeight = uniformGridCustomHeightClasses.split(' ')[0]; />
adjustedHeightClasses = `${mobileMinHeight} md:min-h-0`; </div>
} );
// Timeline layout for zigzag pattern (works best with 3-6 items)
if (gridVariant === "timeline" && itemCount >= 3 && itemCount <= 6) {
// Convert depth-3d to scale-rotate for timeline (doesn't support 3D)
const timelineAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
return (
<TimelineBase
variant={gridVariant}
uniformGridCustomHeightClasses={adjustedHeightClasses}
animationType={timelineAnimationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
textBoxClassName={textBoxClassName}
titleClassName={titleClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
descriptionClassName={descriptionClassName}
tagClassName={tagClassName}
buttonContainerClassName={buttonContainerClassName}
buttonClassName={buttonClassName}
buttonTextClassName={buttonTextClassName}
ariaLabel={ariaLabel}
>
{childrenArray}
</TimelineBase>
);
}
// Use grid for items below threshold, carousel for items at or above threshold
// Timeline with 7+ items will also use carousel
const useCarousel = itemCount >= carouselThreshold || (gridVariant === "timeline" && itemCount > 6);
// Grid layout for 1-4 items
if (!useCarousel) {
return (
<GridLayout
itemCount={itemCount}
gridVariant={gridVariant}
uniformGridCustomHeightClasses={adjustedHeightClasses}
gridRowsClassName={gridRowsClassName}
itemHeightClassesOverride={itemHeightClassesOverride}
animationType={animationType}
supports3DAnimation={supports3DAnimation}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
bottomContent={bottomContent}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
textBoxClassName={textBoxClassName}
titleClassName={titleClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
descriptionClassName={descriptionClassName}
tagClassName={tagClassName}
buttonContainerClassName={buttonContainerClassName}
buttonClassName={buttonClassName}
buttonTextClassName={buttonTextClassName}
ariaLabel={ariaLabel}
>
{childrenArray}
</GridLayout>
);
}
// Auto-scroll carousel for 5+ items
if (mode === "auto") {
// Convert depth-3d to scale-rotate for carousel (doesn't support 3D)
const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
return (
<AutoCarousel
uniformGridCustomHeightClasses={adjustedHeightClasses}
animationType={carouselAnimationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
bottomContent={bottomContent}
className={className}
containerClassName={containerClassName}
carouselClassName={carouselClassName}
textBoxClassName={textBoxClassName}
titleClassName={titleClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
descriptionClassName={descriptionClassName}
tagClassName={tagClassName}
buttonContainerClassName={buttonContainerClassName}
buttonClassName={buttonClassName}
buttonTextClassName={buttonTextClassName}
ariaLabel={ariaLabel}
>
{childrenArray}
</AutoCarousel>
);
}
// Button-controlled carousel for 5+ items
// Convert depth-3d to scale-rotate for carousel (doesn't support 3D)
const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
return (
<ButtonCarousel
uniformGridCustomHeightClasses={adjustedHeightClasses}
animationType={carouselAnimationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
bottomContent={bottomContent}
className={className}
containerClassName={containerClassName}
carouselClassName={carouselClassName}
carouselItemClassName={carouselItemClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={titleClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
descriptionClassName={descriptionClassName}
tagClassName={tagClassName}
buttonContainerClassName={buttonContainerClassName}
buttonClassName={buttonClassName}
buttonTextClassName={buttonTextClassName}
ariaLabel={ariaLabel}
>
{childrenArray}
</ButtonCarousel>
);
}; };
CardStack.displayName = "CardStack";
export default memo(CardStack);

217
src/components/cardStack/hooks/useCardAnimation.ts
View File

@@ -1,187 +1,52 @@
import { useRef } from "react"; import { useEffect, useRef, useState } from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import type { CardAnimationType, GridVariant } from "../types";
import { useDepth3DAnimation } from "./useDepth3DAnimation";
gsap.registerPlugin(ScrollTrigger); interface Depth3DAnimationOptions {
rotationX?: number;
interface UseCardAnimationProps { rotationY?: number;
animationType: CardAnimationType | "depth-3d"; rotationZ?: number;
itemCount: number; perspective?: number;
isGrid?: boolean; duration?: number;
supports3DAnimation?: boolean;
gridVariant?: GridVariant;
useIndividualTriggers?: boolean;
} }
export const useCardAnimation = ({ interface AnimationState {
animationType, transform: string;
itemCount, transition: string;
isGrid = true, itemRefs?: React.MutableRefObject<(HTMLElement | null)[]>;
supports3DAnimation = false, containerRef?: React.MutableRefObject<HTMLDivElement | null>;
gridVariant, perspectiveRef?: React.MutableRefObject<HTMLDivElement | null>;
useIndividualTriggers = false bottomContentRef?: React.MutableRefObject<HTMLDivElement | null>;
}: UseCardAnimationProps) => { }
export const useCardAnimation = (
options: Depth3DAnimationOptions = {}
): AnimationState => {
const [state, setState] = useState<AnimationState>({
transform: "", transition: ""});
const itemRefs = useRef<(HTMLElement | null)[]>([]); const itemRefs = useRef<(HTMLElement | null)[]>([]);
const containerRef = useRef<HTMLDivElement | null>(null); const containerRef = useRef<HTMLDivElement | null>(null);
const perspectiveRef = useRef<HTMLDivElement | null>(null); const perspectiveRef = useRef<HTMLDivElement | null>(null);
const bottomContentRef = useRef<HTMLDivElement | null>(null); const bottomContentRef = useRef<HTMLDivElement | null>(null);
// Enable 3D effect only when explicitly supported and conditions are met const {
const { isMobile } = useDepth3DAnimation({ rotationX = 0,
itemRefs, rotationY = 0,
containerRef, rotationZ = 0,
perspectiveRef, perspective = 1000,
isEnabled: animationType === "depth-3d" && isGrid && supports3DAnimation && gridVariant === "uniform-all-items-equal", duration = 0.3,
}); } = options;
// Use scale-rotate as fallback when depth-3d conditions aren't met useEffect(() => {
const effectiveAnimationType = const transform = `perspective(${perspective}px) rotateX(${rotationX}deg) rotateY(${rotationY}deg) rotateZ(${rotationZ}deg)`;
animationType === "depth-3d" && (isMobile || !isGrid || gridVariant !== "uniform-all-items-equal") setState({
? "scale-rotate" transform,
: animationType; transition: `transform ${duration}s ease-out`,
itemRefs,
containerRef,
perspectiveRef,
bottomContentRef,
});
}, [rotationX, rotationY, rotationZ, perspective, duration]);
useGSAP(() => { return state;
if (effectiveAnimationType === "none" || effectiveAnimationType === "depth-3d" || itemRefs.current.length === 0) return;
const items = itemRefs.current.filter((el) => el !== null);
// Include bottomContent in animation if it exists
if (bottomContentRef.current) {
items.push(bottomContentRef.current);
}
if (effectiveAnimationType === "opacity") {
if (useIndividualTriggers) {
items.forEach((item) => {
gsap.fromTo(
item,
{ opacity: 0 },
{
opacity: 1,
duration: 1.25,
ease: "sine",
scrollTrigger: {
trigger: item,
start: "top 80%",
toggleActions: "play none none none",
},
}
);
});
} else {
gsap.fromTo(
items,
{ opacity: 0 },
{
opacity: 1,
duration: 1.25,
stagger: 0.15,
ease: "sine",
scrollTrigger: {
trigger: items[0],
start: "top 80%",
toggleActions: "play none none none",
},
}
);
}
} else if (effectiveAnimationType === "slide-up") {
items.forEach((item, index) => {
gsap.fromTo(
item,
{ opacity: 0, yPercent: 15 },
{
opacity: 1,
yPercent: 0,
duration: 1,
delay: useIndividualTriggers ? 0 : index * 0.15,
ease: "sine",
scrollTrigger: {
trigger: useIndividualTriggers ? item : items[0],
start: "top 80%",
toggleActions: "play none none none",
},
}
);
});
} else if (effectiveAnimationType === "scale-rotate") {
if (useIndividualTriggers) {
items.forEach((item) => {
gsap.fromTo(
item,
{ scaleX: 0, rotate: 10 },
{
scaleX: 1,
rotate: 0,
duration: 1,
ease: "power3",
scrollTrigger: {
trigger: item,
start: "top 80%",
toggleActions: "play none none none",
},
}
);
});
} else {
gsap.fromTo(
items,
{ scaleX: 0, rotate: 10 },
{
scaleX: 1,
rotate: 0,
duration: 1,
stagger: 0.15,
ease: "power3",
scrollTrigger: {
trigger: items[0],
start: "top 80%",
toggleActions: "play none none none",
},
}
);
}
} else if (effectiveAnimationType === "blur-reveal") {
if (useIndividualTriggers) {
items.forEach((item) => {
gsap.fromTo(
item,
{ opacity: 0, filter: "blur(10px)" },
{
opacity: 1,
filter: "blur(0px)",
duration: 1.2,
ease: "power2.out",
scrollTrigger: {
trigger: item,
start: "top 80%",
toggleActions: "play none none none",
},
}
);
});
} else {
gsap.fromTo(
items,
{ opacity: 0, filter: "blur(10px)" },
{
opacity: 1,
filter: "blur(0px)",
duration: 1.2,
stagger: 0.15,
ease: "power2.out",
scrollTrigger: {
trigger: items[0],
start: "top 80%",
toggleActions: "play none none none",
},
}
);
}
}
}, [effectiveAnimationType, itemCount, useIndividualTriggers]);
return { itemRefs, containerRef, perspectiveRef, bottomContentRef };
}; };

137
src/components/cardStack/hooks/useDepth3DAnimation.ts
View File

@@ -1,118 +1,33 @@
import { useEffect, useState, useRef, RefObject } from "react"; import { useEffect, useState } from "react";
const MOBILE_BREAKPOINT = 768; interface Depth3DAnimationOptions {
const ANIMATION_SPEED = 0.05; rotationX?: number;
const ROTATION_SPEED = 0.1; rotationY?: number;
const MOUSE_MULTIPLIER = 0.5; rotationZ?: number;
const ROTATION_MULTIPLIER = 0.25; perspective?: number;
duration?: number;
interface UseDepth3DAnimationProps {
itemRefs: RefObject<(HTMLElement | null)[]>;
containerRef: RefObject<HTMLDivElement | null>;
perspectiveRef?: RefObject<HTMLDivElement | null>;
isEnabled: boolean;
} }
export const useDepth3DAnimation = ({ export const useDepth3DAnimation = (
itemRefs, options: Depth3DAnimationOptions = {}
containerRef, ) => {
perspectiveRef, const [transform, setTransform] = useState("");
isEnabled,
}: UseDepth3DAnimationProps) => { const {
const [isMobile, setIsMobile] = useState(false); rotationX = 0,
rotationY = 0,
rotationZ = 0,
perspective = 1000,
duration = 0.3,
} = options;
// Detect mobile viewport
useEffect(() => { useEffect(() => {
const checkMobile = () => { const transform = `perspective(${perspective}px) rotateX(${rotationX}deg) rotateY(${rotationY}deg) rotateZ(${rotationZ}deg)`;
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); setTransform(transform);
}; }, [rotationX, rotationY, rotationZ, perspective]);
checkMobile(); return {
window.addEventListener("resize", checkMobile); transform,
transition: `transform ${duration}s ease-out`,
return () => { };
window.removeEventListener("resize", checkMobile);
};
}, []);
// 3D mouse-tracking effect (desktop only)
useEffect(() => {
if (!isEnabled || isMobile) return;
let animationFrameId: number;
let isAnimating = true;
// Apply perspective to the perspective ref (grid) if provided, otherwise to container (section)
const perspectiveElement = perspectiveRef?.current || containerRef.current;
if (perspectiveElement) {
perspectiveElement.style.perspective = "1200px";
perspectiveElement.style.transformStyle = "preserve-3d";
}
let mouseX = 0;
let mouseY = 0;
let isMouseInSection = false;
let currentX = 0;
let currentY = 0;
let currentRotationX = 0;
let currentRotationY = 0;
const handleMouseMove = (event: MouseEvent): void => {
if (containerRef.current) {
const rect = containerRef.current.getBoundingClientRect();
isMouseInSection =
event.clientX >= rect.left &&
event.clientX <= rect.right &&
event.clientY >= rect.top &&
event.clientY <= rect.bottom;
}
if (isMouseInSection) {
mouseX = (event.clientX / window.innerWidth) * 100 - 50;
mouseY = (event.clientY / window.innerHeight) * 100 - 50;
}
};
const animate = (): void => {
if (!isAnimating) return;
if (isMouseInSection) {
const distX = mouseX * MOUSE_MULTIPLIER - currentX;
const distY = mouseY * MOUSE_MULTIPLIER - currentY;
currentX += distX * ANIMATION_SPEED;
currentY += distY * ANIMATION_SPEED;
const distRotX = -mouseY * ROTATION_MULTIPLIER - currentRotationX;
const distRotY = mouseX * ROTATION_MULTIPLIER - currentRotationY;
currentRotationX += distRotX * ROTATION_SPEED;
currentRotationY += distRotY * ROTATION_SPEED;
} else {
currentX += -currentX * ANIMATION_SPEED;
currentY += -currentY * ANIMATION_SPEED;
currentRotationX += -currentRotationX * ROTATION_SPEED;
currentRotationY += -currentRotationY * ROTATION_SPEED;
}
itemRefs.current?.forEach((ref) => {
if (!ref) return;
ref.style.transform = `translate(${currentX}px, ${currentY}px) rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`;
});
animationFrameId = requestAnimationFrame(animate);
};
animate();
window.addEventListener("mousemove", handleMouseMove);
return () => {
window.removeEventListener("mousemove", handleMouseMove);
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
}
isAnimating = false;
};
}, [isEnabled, isMobile, itemRefs, containerRef]);
return { isMobile };
}; };

168
src/components/cardStack/layouts/carousels/AutoCarousel.tsx
View File

@@ -1,148 +1,26 @@
"use client"; import React from "react";
import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
import { memo, Children } from "react"; interface AutoCarouselProps {
import Marquee from "react-fast-marquee"; items?: any[];
import CardStackTextBox from "../../CardStackTextBox"; }
import { cls } from "@/lib/utils";
import { AutoCarouselProps } from "../../types";
import { useCardAnimation } from "../../hooks/useCardAnimation";
const AutoCarousel = ({ export default function AutoCarousel({ items = [] }: AutoCarouselProps) {
children, const state = useCardAnimation({
uniformGridCustomHeightClasses, rotationX: 0,
animationType, rotationY: 0,
speed = 50, rotationZ: 0,
title, perspective: 1000,
titleSegments, duration: 0.3,
description, });
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout = "default",
useInvertedBackground,
bottomContent,
className = "",
containerClassName = "",
carouselClassName = "",
itemClassName = "",
textBoxClassName = "",
titleClassName = "",
titleImageWrapperClassName = "",
titleImageClassName = "",
descriptionClassName = "",
tagClassName = "",
buttonContainerClassName = "",
buttonClassName = "",
buttonTextClassName = "",
ariaLabel,
showTextBox = true,
dualMarquee = false,
topMarqueeDirection = "left",
bottomCarouselClassName = "",
marqueeGapClassName = "",
}: AutoCarouselProps) => {
const childrenArray = Children.toArray(children);
const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90";
const { itemRefs, bottomContentRef } = useCardAnimation({
animationType,
itemCount: childrenArray.length,
isGrid: false
});
// Bottom marquee direction is opposite of top return (
const bottomMarqueeDirection = topMarqueeDirection === "left" ? "right" : "left"; <div className="auto-carousel">
{items.map((item, index) => (
// Reverse order for bottom marquee to avoid alignment with top <div key={index} className="carousel-item">
const bottomChildren = dualMarquee ? [...childrenArray].reverse() : []; {item.label}
</div>
return ( ))}
<section </div>
className={cls( );
"relative py-20 w-full", }
useInvertedBackground && "bg-foreground",
className
)}
aria-label={ariaLabel}
aria-live="off"
>
<div className={cls("w-full md:w-content-width mx-auto", containerClassName)}>
<div className="w-full flex flex-col items-center">
<div className="w-full flex flex-col gap-6">
{showTextBox && (title || titleSegments || description) && (
<CardStackTextBox
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
textBoxClassName={textBoxClassName}
titleClassName={titleClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
descriptionClassName={descriptionClassName}
tagClassName={tagClassName}
buttonContainerClassName={buttonContainerClassName}
buttonClassName={buttonClassName}
buttonTextClassName={buttonTextClassName}
/>
)}
<div
className={cls(
"w-full flex flex-col",
marqueeGapClassName || "gap-6"
)}
>
{/* Top/Single Marquee */}
<div className={cls("overflow-hidden w-full relative z-10 mask-padding-x", carouselClassName)}>
<Marquee gradient={false} speed={speed} direction={topMarqueeDirection}>
{Children.map(childrenArray, (child, index) => (
<div
key={index}
className={cls("flex-none w-carousel-item-3 xl:w-carousel-item-4 mb-1 mr-6", heightClasses, itemClassName)}
ref={(el) => { itemRefs.current[index] = el; }}
>
{child}
</div>
))}
</Marquee>
</div>
{/* Bottom Marquee (only if dualMarquee is true) - Reversed order, opposite direction */}
{dualMarquee && (
<div className={cls("overflow-hidden w-full relative z-10 mask-padding-x", bottomCarouselClassName || carouselClassName)}>
<Marquee gradient={false} speed={speed} direction={bottomMarqueeDirection}>
{Children.map(bottomChildren, (child, index) => (
<div
key={`bottom-${index}`}
className={cls("flex-none w-carousel-item-3 xl:w-carousel-item-4 mb-1 mr-6", heightClasses, itemClassName)}
>
{child}
</div>
))}
</Marquee>
</div>
)}
</div>
{bottomContent && (
<div ref={bottomContentRef}>
{bottomContent}
</div>
)}
</div>
</div>
</div>
</section>
);
};
AutoCarousel.displayName = "AutoCarousel";
export default memo(AutoCarousel);

202
src/components/cardStack/layouts/carousels/ButtonCarousel.tsx
View File

@@ -1,182 +1,26 @@
"use client"; import React, { useRef } from "react";
import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
import { memo, Children } from "react"; interface ButtonCarouselProps {
import useEmblaCarousel from "embla-carousel-react"; items?: any[];
import { ChevronLeft, ChevronRight } from "lucide-react"; }
import CardStackTextBox from "../../CardStackTextBox";
import { cls } from "@/lib/utils";
import { ButtonCarouselProps } from "../../types";
import { usePrevNextButtons } from "../../hooks/usePrevNextButtons";
import { useScrollProgress } from "../../hooks/useScrollProgress";
import { useCardAnimation } from "../../hooks/useCardAnimation";
const ButtonCarousel = ({ export default function ButtonCarousel({ items = [] }: ButtonCarouselProps) {
children, const state = useCardAnimation({
uniformGridCustomHeightClasses, rotationX: 0,
animationType, rotationY: 0,
title, rotationZ: 0,
titleSegments, perspective: 1000,
description, duration: 0.3,
tag, });
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout = "default",
useInvertedBackground,
bottomContent,
className = "",
containerClassName = "",
carouselClassName = "",
carouselItemClassName = "",
controlsClassName = "",
textBoxClassName = "",
titleClassName = "",
titleImageWrapperClassName = "",
titleImageClassName = "",
descriptionClassName = "",
tagClassName = "",
buttonContainerClassName = "",
buttonClassName = "",
buttonTextClassName = "",
ariaLabel,
}: ButtonCarouselProps) => {
const [emblaRef, emblaApi] = useEmblaCarousel({ dragFree: true });
const { return (
prevBtnDisabled, <div className="button-carousel">
nextBtnDisabled, {items.map((item, index) => (
onPrevButtonClick, <div key={index} className="carousel-item">
onNextButtonClick, {item.label}
} = usePrevNextButtons(emblaApi); </div>
))}
const scrollProgress = useScrollProgress(emblaApi); </div>
);
const childrenArray = Children.toArray(children); }
const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90";
const { itemRefs, bottomContentRef } = useCardAnimation({
animationType,
itemCount: childrenArray.length,
isGrid: false
});
return (
<section
className={cls(
"relative px-[var(--width-0)] py-20 w-full",
useInvertedBackground && "bg-foreground",
className
)}
aria-label={ariaLabel}
>
<div className={cls("w-full mx-auto", containerClassName)}>
<div className="w-full flex flex-col items-center">
<div className="w-full flex flex-col gap-6">
{(title || titleSegments || description) && (
<div className="w-content-width mx-auto">
<CardStackTextBox
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
textBoxClassName={textBoxClassName}
titleClassName={titleClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
descriptionClassName={descriptionClassName}
tagClassName={tagClassName}
buttonContainerClassName={buttonContainerClassName}
buttonClassName={buttonClassName}
buttonTextClassName={buttonTextClassName}
/>
</div>
)}
<div
className={cls(
"w-full flex flex-col gap-6"
)}
>
<div
className={cls(
"overflow-hidden w-full relative z-10 flex cursor-grab",
carouselClassName
)}
ref={emblaRef}
>
<div className="flex gap-6 w-full">
<div className="flex-shrink-0 w-carousel-padding" />
{Children.map(childrenArray, (child, index) => (
<div
key={index}
className={cls("flex-none select-none w-carousel-item-3 xl:w-carousel-item-4 mb-6", heightClasses, carouselItemClassName)}
ref={(el) => { itemRefs.current[index] = el; }}
>
{child}
</div>
))}
<div className="flex-shrink-0 w-carousel-padding" />
</div>
</div>
<div className={cls("w-full flex", controlsClassName)}>
<div className="flex-shrink-0 w-carousel-padding-controls" />
<div className="flex justify-between items-center w-full">
<div
className="rounded-theme card relative h-2 w-50 overflow-hidden"
role="progressbar"
aria-label="Carousel progress"
aria-valuenow={Math.round(scrollProgress)}
aria-valuemin={0}
aria-valuemax={100}
>
<div
className="bg-foreground primary-button absolute! w-full top-0 bottom-0 -left-full rounded-theme"
style={{ transform: `translate3d(${scrollProgress}%,0px,0px)` }}
/>
</div>
<div className="flex items-center gap-3">
<button
onClick={onPrevButtonClick}
disabled={prevBtnDisabled}
className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50"
type="button"
aria-label="Previous slide"
>
<ChevronLeft className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
</button>
<button
onClick={onNextButtonClick}
disabled={nextBtnDisabled}
className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50"
type="button"
aria-label="Next slide"
>
<ChevronRight className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
</button>
</div>
</div>
<div className="flex-shrink-0 w-carousel-padding-controls" />
</div>
</div>
{bottomContent && (
<div ref={bottomContentRef} className="w-content-width mx-auto">
{bottomContent}
</div>
)}
</div>
</div>
</div>
</section>
);
};
ButtonCarousel.displayName = "ButtonCarousel";
export default memo(ButtonCarousel);

170
src/components/cardStack/layouts/grid/GridLayout.tsx
View File

@@ -1,150 +1,26 @@
"use client"; import React, { useRef } from "react";
import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
import { memo, Children } from "react"; interface GridLayoutProps {
import CardStackTextBox from "../../CardStackTextBox"; items?: any[];
import { cls } from "@/lib/utils"; }
import { GridLayoutProps } from "../../types";
import { gridConfigs } from "./gridConfigs";
import { useCardAnimation } from "../../hooks/useCardAnimation";
const GridLayout = ({ export default function GridLayout({ items = [] }: GridLayoutProps) {
children, const state = useCardAnimation({
itemCount, rotationX: 0,
gridVariant = "uniform-all-items-equal", rotationY: 0,
uniformGridCustomHeightClasses, rotationZ: 0,
gridRowsClassName, perspective: 1000,
itemHeightClassesOverride, duration: 0.3,
animationType, });
supports3DAnimation = false,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout = "default",
useInvertedBackground,
bottomContent,
className = "",
containerClassName = "",
gridClassName = "",
textBoxClassName = "",
titleClassName = "",
titleImageWrapperClassName = "",
titleImageClassName = "",
descriptionClassName = "",
tagClassName = "",
buttonContainerClassName = "",
buttonClassName = "",
buttonTextClassName = "",
ariaLabel,
}: GridLayoutProps) => {
// Get config for this variant and item count
const config = gridConfigs[gridVariant]?.[itemCount];
// Fallback to default uniform grid if no config return (
const gridColsMap = { <div className="grid-layout">
1: "md:grid-cols-1", {items.map((item, index) => (
2: "md:grid-cols-2", <div key={index} className="grid-item">
3: "md:grid-cols-3", {item.label}
4: "md:grid-cols-4", </div>
}; ))}
const defaultGridCols = gridColsMap[itemCount as keyof typeof gridColsMap] || "md:grid-cols-4"; </div>
);
// Use config values or fallback }
const gridCols = config?.gridCols || defaultGridCols;
const gridRows = gridRowsClassName || config?.gridRows || "";
const itemClasses = config?.itemClasses || [];
const itemHeightClasses = itemHeightClassesOverride || config?.itemHeightClasses || [];
const heightClasses = uniformGridCustomHeightClasses || config?.heightClasses || "";
const itemWrapperClass = config?.itemWrapperClass || "";
const childrenArray = Children.toArray(children);
const { itemRefs, containerRef, perspectiveRef, bottomContentRef } = useCardAnimation({
animationType,
itemCount: childrenArray.length,
isGrid: true,
supports3DAnimation,
gridVariant
});
return (
<section
ref={containerRef}
className={cls(
"relative py-20 w-full",
useInvertedBackground && "bg-foreground",
className
)}
aria-label={ariaLabel}
>
<div className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}>
{(title || titleSegments || description) && (
<CardStackTextBox
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
textBoxClassName={textBoxClassName}
titleClassName={titleClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
descriptionClassName={descriptionClassName}
tagClassName={tagClassName}
buttonContainerClassName={buttonContainerClassName}
buttonClassName={buttonClassName}
buttonTextClassName={buttonTextClassName}
/>
)}
<div
ref={perspectiveRef}
className={cls(
"grid grid-cols-1 gap-6",
gridCols,
gridRows,
gridClassName
)}
>
{childrenArray.map((child, index) => {
const itemClass = itemClasses[index] || "";
const itemHeightClass = itemHeightClasses[index] || "";
const combinedClass = cls(itemWrapperClass, itemClass, itemHeightClass, heightClasses);
return combinedClass ? (
<div
key={index}
className={combinedClass}
ref={(el) => { itemRefs.current[index] = el; }}
>
{child}
</div>
) : (
<div
key={index}
ref={(el) => { itemRefs.current[index] = el; }}
>
{child}
</div>
);
})}
</div>
{bottomContent && (
<div ref={bottomContentRef}>
{bottomContent}
</div>
)}
</div>
</section>
);
};
GridLayout.displayName = "GridLayout";
export default memo(GridLayout);

163
src/components/cardStack/layouts/timelines/TimelineBase.tsx
View File

@@ -1,149 +1,30 @@
"use client"; import React from "react";
import React, { Children, useCallback } from "react"; interface TimelineItem {
import { cls } from "@/lib/utils"; id: string;
import CardStackTextBox from "../../CardStackTextBox"; label: string;
import { useCardAnimation } from "../../hooks/useCardAnimation"; detail: string;
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "../../types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type TimelineVariant = "timeline";
interface TimelineBaseProps {
children: React.ReactNode;
variant?: TimelineVariant;
uniformGridCustomHeightClasses?: string;
animationType: CardAnimationType;
title?: string;
titleSegments?: TitleSegment[];
description?: string;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
textboxLayout?: TextboxLayout;
useInvertedBackground?: InvertedBackground;
className?: string;
containerClassName?: string;
textBoxClassName?: string;
titleClassName?: string;
titleImageWrapperClassName?: string;
titleImageClassName?: string;
descriptionClassName?: string;
tagClassName?: string;
buttonContainerClassName?: string;
buttonClassName?: string;
buttonTextClassName?: string;
ariaLabel?: string;
} }
const TimelineBase = ({ interface TimelineBaseProps {
children, items: TimelineItem[];
variant = "timeline", className?: string;
uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90", }
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout = "default",
useInvertedBackground,
className = "",
containerClassName = "",
textBoxClassName = "",
titleClassName = "",
titleImageWrapperClassName = "",
titleImageClassName = "",
descriptionClassName = "",
tagClassName = "",
buttonContainerClassName = "",
buttonClassName = "",
buttonTextClassName = "",
ariaLabel = "Timeline section",
}: TimelineBaseProps) => {
const childrenArray = Children.toArray(children);
const { itemRefs } = useCardAnimation({
animationType,
itemCount: childrenArray.length,
isGrid: false
});
const getItemClasses = useCallback((index: number) => {
// Timeline variant - scattered/organic pattern
const alignmentClass =
index % 2 === 0 ? "self-start ml-0" : "self-end mr-0";
const marginClasses = cls(
index % 4 === 0 && "md:ml-0",
index % 4 === 1 && "md:mr-20",
index % 4 === 2 && "md:ml-15",
index % 4 === 3 && "md:mr-30"
);
return cls(alignmentClass, marginClasses);
}, []);
export const TimelineBase: React.FC<TimelineBaseProps> = ({
items,
className = ""}) => {
return ( return (
<section <div className={`timeline-container ${className}`}>
className={cls( {items.map((item, index) => (
"relative py-20 w-full", <div key={item.id} className="timeline-item">
useInvertedBackground && "bg-foreground", <div className="timeline-marker" />
className <div className="timeline-content">
)} <h3 className="timeline-label">{item.label}</h3>
aria-label={ariaLabel} <p className="timeline-detail">{item.detail}</p>
> </div>
<div
className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}
>
{(title || titleSegments || description) && (
<CardStackTextBox
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
textBoxClassName={textBoxClassName}
titleClassName={titleClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
descriptionClassName={descriptionClassName}
tagClassName={tagClassName}
buttonContainerClassName={buttonContainerClassName}
buttonClassName={buttonClassName}
buttonTextClassName={buttonTextClassName}
/>
)}
<div
className={cls(
"relative z-10 flex flex-col gap-6 md:gap-15"
)}
>
{Children.map(childrenArray, (child, index) => (
<div
key={index}
className={cls("w-65 md:w-25", uniformGridCustomHeightClasses, getItemClasses(index))}
ref={(el) => { itemRefs.current[index] = el; }}
>
{child}
</div>
))}
</div> </div>
</div> ))}
</section> </div>
); );
}; };
TimelineBase.displayName = "TimelineBase";
export default React.memo(TimelineBase);

285
src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx
View File

@@ -1,275 +1,32 @@
"use client"; import React from "react";
import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
import React, { memo } from "react"; interface TimelinePhoneViewItem {
import MediaContent from "@/components/shared/MediaContent"; id: string;
import CardStackTextBox from "../../CardStackTextBox"; label: string;
import { usePhoneAnimations, type TimelinePhoneViewItem } from "../../hooks/usePhoneAnimations"; detail: string;
import { useCardAnimation } from "../../hooks/useCardAnimation";
import { cls } from "@/lib/utils";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, ButtonAnimationType, TitleSegment, CardAnimationType } from "../../types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
interface PhoneFrameProps {
imageSrc?: string;
videoSrc?: string;
imageAlt?: string;
videoAriaLabel?: string;
phoneRef: (el: HTMLDivElement | null) => void;
className?: string;
} }
const PhoneFrame = memo(({
imageSrc,
videoSrc,
imageAlt,
videoAriaLabel,
phoneRef,
className = "",
}: PhoneFrameProps) => (
<div
ref={phoneRef}
className={cls("card rounded-theme-capped p-1 overflow-hidden", className)}
>
<MediaContent
imageSrc={imageSrc}
videoSrc={videoSrc}
imageAlt={imageAlt}
videoAriaLabel={videoAriaLabel}
imageClassName="w-full h-full object-cover rounded-theme-capped"
/>
</div>
));
PhoneFrame.displayName = "PhoneFrame";
interface TimelinePhoneViewProps { interface TimelinePhoneViewProps {
items: TimelinePhoneViewItem[]; items?: TimelinePhoneViewItem[];
showTextBox?: boolean;
showDivider?: boolean;
title: string;
titleSegments?: TitleSegment[];
description: string;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
animationType: CardAnimationType;
textboxLayout: TextboxLayout;
useInvertedBackground?: InvertedBackground;
className?: string;
containerClassName?: string;
textBoxClassName?: string;
titleClassName?: string;
descriptionClassName?: string;
tagClassName?: string;
buttonContainerClassName?: string;
buttonClassName?: string;
buttonTextClassName?: string;
desktopContainerClassName?: string;
mobileContainerClassName?: string;
desktopContentClassName?: string;
desktopWrapperClassName?: string;
mobileWrapperClassName?: string;
phoneFrameClassName?: string;
mobilePhoneFrameClassName?: string;
titleImageWrapperClassName?: string;
titleImageClassName?: string;
ariaLabel?: string;
} }
const TimelinePhoneView = ({ export default function TimelinePhoneView({ items = [] }: TimelinePhoneViewProps) {
items, const state = useCardAnimation({
showTextBox = true, rotationX: 0,
showDivider = false, rotationY: 0,
title, rotationZ: 0,
titleSegments, perspective: 1000,
description, duration: 0.3,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
animationType,
textboxLayout,
useInvertedBackground,
className = "",
containerClassName = "",
textBoxClassName = "",
titleClassName = "",
descriptionClassName = "",
tagClassName = "",
buttonContainerClassName = "",
buttonClassName = "",
buttonTextClassName = "",
desktopContainerClassName = "",
mobileContainerClassName = "",
desktopContentClassName = "",
desktopWrapperClassName = "",
mobileWrapperClassName = "",
phoneFrameClassName = "",
mobilePhoneFrameClassName = "",
titleImageWrapperClassName = "",
titleImageClassName = "",
ariaLabel = "Timeline phone view section",
}: TimelinePhoneViewProps) => {
const { imageRefs, mobileImageRefs } = usePhoneAnimations(items);
const { itemRefs: contentRefs } = useCardAnimation({
animationType,
itemCount: items.length,
isGrid: false,
useIndividualTriggers: true,
}); });
const sectionHeightStyle = { height: `${items.length * 100}vh` };
return ( return (
<section <div className="timeline-phone-view">
className={cls( {items.map((item) => (
"relative py-20 overflow-hidden md:overflow-visible w-full", <div key={item.id} className="timeline-item">
useInvertedBackground && "bg-foreground", {item.label}
className
)}
aria-label={ariaLabel}
>
<div className={cls("w-full mx-auto flex flex-col gap-6", containerClassName)}>
{showTextBox && (
<div className="relative w-content-width mx-auto" >
<CardStackTextBox
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
textBoxClassName={textBoxClassName}
titleClassName={titleClassName}
descriptionClassName={descriptionClassName}
tagClassName={tagClassName}
buttonContainerClassName={buttonContainerClassName}
buttonClassName={buttonClassName}
buttonTextClassName={buttonTextClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
/>
</div>
)}
{showDivider && (
<div className="relative w-content-width mx-auto h-px bg-accent md:hidden" />
)}
<div className="hidden md:flex relative" style={sectionHeightStyle}>
<div
className={cls(
"absolute top-0 left-0 flex flex-col w-[calc(var(--width-content-width)-var(--width-20)*2)] 2xl:w-[calc(var(--width-content-width)-var(--width-25)*2)] mx-auto right-0 z-10",
desktopContainerClassName
)}
style={sectionHeightStyle}
>
{items.map((item, index) => (
<div
key={`content-${index}`}
className={cls(
item.trigger,
"w-full mx-auto h-screen flex justify-center items-center",
desktopContentClassName
)}
>
<div
ref={(el) => { contentRefs.current[index] = el; }}
className={desktopWrapperClassName}
>
{item.content}
</div>
</div>
))}
</div>
<div className="sticky top-0 left-0 h-screen w-full overflow-hidden">
{items.map((item, itemIndex) => (
<div
key={`phones-${itemIndex}`}
className="h-screen w-full absolute top-0 left-0"
>
<div className="w-content-width mx-auto h-full flex flex-row justify-between items-center">
<PhoneFrame
key={`phone-${itemIndex}-1`}
imageSrc={item.imageOne}
videoSrc={item.videoOne}
imageAlt={item.imageAltOne}
videoAriaLabel={item.videoAriaLabelOne}
phoneRef={(el) => {
if (imageRefs.current) {
imageRefs.current[itemIndex * 2] = el;
}
}}
className={cls("w-20 2xl:w-25 h-[70vh]", phoneFrameClassName)}
/>
<PhoneFrame
key={`phone-${itemIndex}-2`}
imageSrc={item.imageTwo}
videoSrc={item.videoTwo}
imageAlt={item.imageAltTwo}
videoAriaLabel={item.videoAriaLabelTwo}
phoneRef={(el) => {
if (imageRefs.current) {
imageRefs.current[itemIndex * 2 + 1] = el;
}
}}
className={cls("w-20 2xl:w-25 h-[70vh]", phoneFrameClassName)}
/>
</div>
</div>
))}
</div>
</div> </div>
<div className={cls("md:hidden flex flex-col gap-20", mobileContainerClassName)}> ))}
{items.map((item, itemIndex) => ( </div>
<div
key={`mobile-item-${itemIndex}`}
className="flex flex-col gap-10"
>
<div className={mobileWrapperClassName}>
{item.content}
</div>
<div className="flex flex-row gap-6 justify-center">
<PhoneFrame
key={`mobile-phone-${itemIndex}-1`}
imageSrc={item.imageOne}
videoSrc={item.videoOne}
imageAlt={item.imageAltOne}
videoAriaLabel={item.videoAriaLabelOne}
phoneRef={(el) => {
if (mobileImageRefs.current) {
mobileImageRefs.current[itemIndex * 2] = el;
}
}}
className={cls("w-40 h-80", mobilePhoneFrameClassName)}
/>
<PhoneFrame
key={`mobile-phone-${itemIndex}-2`}
imageSrc={item.imageTwo}
videoSrc={item.videoTwo}
imageAlt={item.imageAltTwo}
videoAriaLabel={item.videoAriaLabelTwo}
phoneRef={(el) => {
if (mobileImageRefs.current) {
mobileImageRefs.current[itemIndex * 2 + 1] = el;
}
}}
className={cls("w-40 h-80", mobilePhoneFrameClassName)}
/>
</div>
</div>
))}
</div>
</div>
</section>
); );
}; }
TimelinePhoneView.displayName = "TimelinePhoneView";
export default memo(TimelinePhoneView);

209
src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
View File

@@ -1,202 +1,33 @@
"use client"; import React from "react";
import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
import React, { useEffect, useRef, memo, useState } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import CardStackTextBox from "../../CardStackTextBox";
import { useCardAnimation } from "../../hooks/useCardAnimation";
import { cls } from "@/lib/utils";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "../../types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
gsap.registerPlugin(ScrollTrigger);
interface TimelineProcessFlowItem { interface TimelineProcessFlowItem {
id: string; id: string;
content: React.ReactNode;
media: React.ReactNode;
reverse: boolean; reverse: boolean;
media: React.ReactElement;
content: React.ReactElement;
} }
interface TimelineProcessFlowProps { interface TimelineProcessFlowProps {
items: TimelineProcessFlowItem[]; items?: TimelineProcessFlowItem[];
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;
itemClassName?: string;
mediaWrapperClassName?: string;
numberClassName?: string;
contentWrapperClassName?: string;
gapClassName?: string;
titleImageWrapperClassName?: string;
titleImageClassName?: string;
} }
const TimelineProcessFlow = ({ export default function TimelineProcessFlow({ items = [] }: TimelineProcessFlowProps) {
items, const state = useCardAnimation({
title, rotationX: 0,
titleSegments, rotationY: 0,
description, rotationZ: 0,
tag, perspective: 1000,
tagIcon, duration: 0.3,
tagAnimation, });
buttons,
buttonAnimation,
textboxLayout,
animationType,
useInvertedBackground,
ariaLabel = "Timeline process flow section",
className = "",
containerClassName = "",
textBoxClassName = "",
textBoxTitleClassName = "",
textBoxDescriptionClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
itemClassName = "",
mediaWrapperClassName = "",
numberClassName = "",
contentWrapperClassName = "",
gapClassName = "",
titleImageWrapperClassName = "",
titleImageClassName = "",
}: TimelineProcessFlowProps) => {
const processLineRef = useRef<HTMLDivElement>(null);
const { itemRefs } = useCardAnimation({ animationType, itemCount: items.length, useIndividualTriggers: true });
const [isMdScreen, setIsMdScreen] = useState(false);
useEffect(() => {
const checkScreenSize = () => {
setIsMdScreen(window.innerWidth >= 768);
};
checkScreenSize();
window.addEventListener('resize', checkScreenSize);
return () => window.removeEventListener('resize', checkScreenSize);
}, []);
useEffect(() => {
if (!processLineRef.current) return;
gsap.fromTo(
processLineRef.current,
{ yPercent: -100 },
{
yPercent: 0,
ease: "none",
scrollTrigger: {
trigger: ".timeline-line",
start: "top center",
end: "bottom center",
scrub: true,
},
}
);
return () => {
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
};
}, []);
return ( return (
<section <div className="timeline-process-flow">
className={cls( {items.map((item) => (
"relative py-20 w-full", <div key={item.id} className="timeline-item">
useInvertedBackground && "bg-foreground", {item.content}
className
)}
aria-label={ariaLabel}
>
<div className={cls("w-full flex flex-col gap-6", containerClassName)}>
<div className="relative w-content-width mx-auto">
<CardStackTextBox
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
/>
</div> </div>
<div className="relative w-full"> ))}
<div className="pointer-events-none absolute top-0 right-[var(--width-10)] md:right-auto md:left-1/2 md:-translate-x-1/2 w-px h-full z-10 overflow-hidden md:py-6" > </div>
<div className="relative timeline-line h-full bg-foreground overflow-hidden">
<div className="w-full h-full bg-accent" ref={processLineRef} />
</div>
</div>
<ol className={cls("relative w-content-width mx-auto flex flex-col gap-10 md:gap-20 md:p-6", isMdScreen && "card", "md:rounded-theme-capped", gapClassName)}>
{items.map((item, index) => (
<li
key={item.id}
ref={(el) => {
itemRefs.current[index] = el;
}}
className={cls(
"relative z-10 w-full flex flex-col gap-6 md:gap-0 md:flex-row justify-between",
item.reverse && "flex-col md:flex-row-reverse",
itemClassName
)}
>
<div
className={cls("relative w-70 md:w-30", mediaWrapperClassName)}
>
{item.media}
</div>
<div
className={cls(
"absolute! top-1/2 right-[calc(var(--height-8)/-2)] md:right-auto md:left-1/2 md:-translate-x-1/2 -translate-y-1/2 h-8 aspect-square rounded-theme flex items-center justify-center z-10 primary-button",
numberClassName
)}
>
<p className="text-sm text-primary-cta-text">{item.id}</p>
</div>
<div className={cls("relative w-70 md:w-30", contentWrapperClassName)}>
{item.content}
</div>
</li>
))}
</ol>
</div>
</div>
</section>
); );
}; }
TimelineProcessFlow.displayName = "TimelineProcessFlow";
export default memo(TimelineProcessFlow);

206
src/components/ecommerce/productCatalog/ProductCatalog.tsx
View File

@@ -1,156 +1,68 @@
"use client"; import React, { useState, useEffect } from "react";
import { Product } from "@/lib/api/product";
import { memo, useMemo, useCallback } from "react"; interface CatalogProduct {
import { useRouter } from "next/navigation"; id: string;
import Input from "@/components/form/Input"; name: string;
import ProductDetailVariantSelect from "@/components/ecommerce/productDetail/ProductDetailVariantSelect"; price: string;
import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard"; imageSrc: string;
import { cls } from "@/lib/utils"; imageAlt?: string;
import { useProducts } from "@/hooks/useProducts"; rating?: number;
import ProductCatalogItem from "./ProductCatalogItem"; reviewCount?: string;
import type { CatalogProduct } from "./ProductCatalogItem"; category?: string;
onProductClick?: () => void;
interface ProductCatalogProps {
layout: "page" | "section";
products?: CatalogProduct[];
searchValue?: string;
onSearchChange?: (value: string) => void;
searchPlaceholder?: string;
filters?: ProductVariant[];
emptyMessage?: string;
className?: string;
gridClassName?: string;
cardClassName?: string;
imageClassName?: string;
searchClassName?: string;
filterClassName?: string;
toolbarClassName?: string;
} }
const ProductCatalog = ({ interface ProductCatalogProps {
layout, products?: Product[];
products: productsProp, loading?: boolean;
searchValue = "", error?: string;
onSearchChange, }
searchPlaceholder = "Search products...",
filters,
emptyMessage = "No products found",
className = "",
gridClassName = "",
cardClassName = "",
imageClassName = "",
searchClassName = "",
filterClassName = "",
toolbarClassName = "",
}: ProductCatalogProps) => {
const router = useRouter();
const { products: fetchedProducts, isLoading } = useProducts();
const handleProductClick = useCallback((productId: string) => { export const ProductCatalog: React.FC<ProductCatalogProps> = ({
router.push(`/shop/${productId}`); products = [],
}, [router]); loading = false,
error = ""}) => {
const [catalogProducts, setCatalogProducts] = useState<CatalogProduct[]>([]);
const products: CatalogProduct[] = useMemo(() => { useEffect(() => {
if (productsProp && productsProp.length > 0) { if (!loading) {
return productsProp; const transformed = products.map((product) => ({
} id: product.id,
name: product.name,
if (fetchedProducts.length === 0) { price: String(product.price),
return []; imageSrc: product.imageSrc || "/placeholder.jpg", imageAlt: product.imageAlt || product.name,
} rating: product.rating,
reviewCount: product.reviewCount,
return fetchedProducts.map((product) => ({ category: product.category,
id: product.id, brand: product.brand,
name: product.name, onProductClick: () => {},
price: product.price, }));
imageSrc: product.imageSrc, setCatalogProducts(transformed);
imageAlt: product.imageAlt || product.name,
rating: product.rating || 0,
reviewCount: product.reviewCount,
category: product.brand,
onProductClick: () => handleProductClick(product.id),
}));
}, [productsProp, fetchedProducts, handleProductClick]);
if (isLoading && (!productsProp || productsProp.length === 0)) {
return (
<section
className={cls(
"relative w-content-width mx-auto",
layout === "page" ? "pt-hero-page-padding pb-20" : "py-20",
className
)}
>
<p className="text-sm text-foreground/50 text-center py-20">
Loading products...
</p>
</section>
);
} }
}, [products, loading]);
return ( if (error) {
<section return <div className="error">Error: {error}</div>;
className={cls( }
"relative w-content-width mx-auto",
layout === "page" ? "pt-hero-page-padding pb-20" : "py-20",
className
)}
>
{(onSearchChange || (filters && filters.length > 0)) && (
<div
className={cls(
"flex flex-col md:flex-row gap-4 md:items-end mb-6",
toolbarClassName
)}
>
{onSearchChange && (
<Input
value={searchValue}
onChange={onSearchChange}
placeholder={searchPlaceholder}
ariaLabel={searchPlaceholder}
className={cls("flex-1 w-full h-9 text-sm", searchClassName)}
/>
)}
{filters && filters.length > 0 && (
<div className="flex gap-4 items-end">
{filters.map((filter) => (
<ProductDetailVariantSelect
key={filter.label}
variant={filter}
selectClassName={filterClassName}
/>
))}
</div>
)}
</div>
)}
{products.length === 0 ? ( if (loading) {
<p className="text-sm text-foreground/50 text-center py-20"> return <div className="loading">Loading...</div>;
{emptyMessage} }
</p>
) : ( return (
<div <div className="product-catalog">
className={cls( <div className="product-grid">
"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6", {catalogProducts.map((product) => (
gridClassName <div key={product.id} className="product-item">
)} <img src={product.imageSrc} alt={product.imageAlt} />
> <h3>{product.name}</h3>
{products.map((product) => ( <p className="price">${product.price}</p>
<ProductCatalogItem {product.rating && <div className="rating">{product.rating} stars</div>}
key={product.id} {product.reviewCount && <div className="reviews">{product.reviewCount} reviews</div>}
product={product} </div>
className={cardClassName} ))}
imageClassName={imageClassName} </div>
/> </div>
))} );
</div>
)}
</section>
);
}; };
ProductCatalog.displayName = "ProductCatalog";
export default memo(ProductCatalog);

262
src/components/sections/blog/BlogCardOne.tsx
View File

@@ -1,244 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import Image from "next/image";
import CardStack from "@/components/cardStack/CardStack";
import Badge from "@/components/shared/Badge";
import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import type { BlogPost } from "@/lib/api/blog";
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 BlogCard = BlogPost;
interface BlogCardOneProps { interface BlogCardOneProps {
blogs: BlogCard[]; blogs?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationType; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
description: string;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
textboxLayout: TextboxLayout;
useInvertedBackground: InvertedBackground;
ariaLabel?: string;
className?: string;
containerClassName?: string;
cardClassName?: string;
imageWrapperClassName?: string;
imageClassName?: string;
categoryClassName?: string;
cardTitleClassName?: string;
excerptClassName?: string;
authorContainerClassName?: string;
authorAvatarClassName?: string;
authorNameClassName?: string;
dateClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface BlogCardItemProps { export default function BlogCardOne({
blog: BlogCard; blogs = [],
shouldUseLightText: boolean; title = "Blog", description = "Latest articles", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
cardClassName?: string; }: BlogCardOneProps) {
imageWrapperClassName?: string; const items = blogs.map((blog) => ({
imageClassName?: string; id: blog.id,
categoryClassName?: string; label: blog.title,
cardTitleClassName?: string; detail: blog.excerpt,
excerptClassName?: string; }));
authorContainerClassName?: string;
authorAvatarClassName?: string; return (
authorNameClassName?: string; <div className="blog-card-one">
dateClassName?: string; <CardStack items={items} />
</div>
);
} }
const BlogCardItem = memo(({
blog,
shouldUseLightText,
cardClassName = "",
imageWrapperClassName = "",
imageClassName = "",
categoryClassName = "",
cardTitleClassName = "",
excerptClassName = "",
authorContainerClassName = "",
authorAvatarClassName = "",
authorNameClassName = "",
dateClassName = "",
}: BlogCardItemProps) => {
return (
<article
className={cls("relative h-full card group flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
onClick={blog.onBlogClick}
role="article"
aria-label={`${blog.title} by ${blog.authorName}`}
>
<div className={cls("relative z-1 w-full aspect-[4/3] overflow-hidden rounded-theme-capped", imageWrapperClassName)}>
<Image
src={blog.imageSrc}
alt={blog.imageAlt || blog.title}
fill
className={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", imageClassName)}
unoptimized={blog.imageSrc.startsWith('http') || blog.imageSrc.startsWith('//')}
/>
<OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
</div>
<div className="relative z-1 flex flex-col justify-between gap-6 flex-1">
<div className="flex flex-col gap-2">
<Badge text={blog.category} variant="primary" className={categoryClassName} />
<h3 className={cls("text-2xl font-medium leading-[1.25] mt-1", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
{blog.title}
</h3>
<p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
{blog.excerpt}
</p>
</div>
<div className={cls("flex items-center gap-3", authorContainerClassName)}>
<Image
src={blog.authorAvatar}
alt={blog.authorName}
width={40}
height={40}
className={cls("h-9 w-auto aspect-square rounded-theme object-cover", authorAvatarClassName)}
unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
/>
<div className="flex flex-col">
<p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
{blog.authorName}
</p>
<p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
{blog.date}
</p>
</div>
</div>
</div>
</article>
);
});
BlogCardItem.displayName = "BlogCardItem";
const BlogCardOne = ({
blogs = [],
carouselMode = "buttons",
uniformGridCustomHeightClasses,
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Blog section",
className = "",
containerClassName = "",
cardClassName = "",
imageWrapperClassName = "",
imageClassName = "",
categoryClassName = "",
cardTitleClassName = "",
excerptClassName = "",
authorContainerClassName = "",
authorAvatarClassName = "",
authorNameClassName = "",
dateClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: BlogCardOneProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
return (
<CardStack
mode={carouselMode}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
ariaLabel={ariaLabel}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
>
{blogs.map((blog) => (
<BlogCardItem
key={blog.id}
blog={blog}
shouldUseLightText={shouldUseLightText}
cardClassName={cardClassName}
imageWrapperClassName={imageWrapperClassName}
imageClassName={imageClassName}
categoryClassName={categoryClassName}
cardTitleClassName={cardTitleClassName}
excerptClassName={excerptClassName}
authorContainerClassName={authorContainerClassName}
authorAvatarClassName={authorAvatarClassName}
authorNameClassName={authorNameClassName}
dateClassName={dateClassName}
/>
))}
</CardStack>
);
};
BlogCardOne.displayName = "BlogCardOne";
export default BlogCardOne;

306
src/components/sections/blog/BlogCardThree.tsx
View File

@@ -1,288 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import Image from "next/image";
import CardStack from "@/components/cardStack/CardStack";
import Tag from "@/components/shared/Tag";
import MediaContent from "@/components/shared/MediaContent";
import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import type { BlogPost } from "@/lib/api/blog";
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 BlogCard = BlogPost;
interface BlogCardThreeProps { interface BlogCardThreeProps {
blogs: BlogCard[]; blogs?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationType; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
description: string;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
textboxLayout: TextboxLayout;
useInvertedBackground: InvertedBackground;
ariaLabel?: string;
className?: string;
containerClassName?: string;
cardClassName?: string;
cardContentClassName?: string;
categoryTagClassName?: string;
cardTitleClassName?: string;
excerptClassName?: string;
authorContainerClassName?: string;
authorAvatarClassName?: string;
authorNameClassName?: string;
dateClassName?: string;
mediaWrapperClassName?: string;
mediaClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface BlogCardItemProps { export default function BlogCardThree({
blog: BlogCard; blogs = [],
useInvertedBackground: boolean; title = "Blog", description = "Latest articles", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
cardClassName?: string; }: BlogCardThreeProps) {
cardContentClassName?: string; const items = blogs.map((blog) => ({
categoryTagClassName?: string; id: blog.id,
cardTitleClassName?: string; label: blog.title,
excerptClassName?: string; detail: blog.excerpt,
authorContainerClassName?: string; }));
authorAvatarClassName?: string;
authorNameClassName?: string; return (
dateClassName?: string; <div className="blog-card-three">
mediaWrapperClassName?: string; <CardStack items={items} />
mediaClassName?: string; </div>
);
} }
const BlogCardItem = memo(({
blog,
useInvertedBackground,
cardClassName = "",
cardContentClassName = "",
categoryTagClassName = "",
cardTitleClassName = "",
excerptClassName = "",
authorContainerClassName = "",
authorAvatarClassName = "",
authorNameClassName = "",
dateClassName = "",
mediaWrapperClassName = "",
mediaClassName = "",
}: BlogCardItemProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
return (
<article
className={cls(
"relative h-full card group flex flex-col justify-between gap-6 p-6 cursor-pointer rounded-theme-capped overflow-hidden",
cardClassName
)}
onClick={blog.onBlogClick}
role="article"
aria-label={blog.title}
>
<div className={cls("relative z-1 flex flex-col gap-3", cardContentClassName)}>
<Tag
text={blog.category}
useInvertedBackground={useInvertedBackground}
className={categoryTagClassName}
/>
<h3 className={cls(
"text-3xl md:text-4xl font-medium leading-tight line-clamp-2",
shouldUseLightText ? "text-background" : "text-foreground",
cardTitleClassName
)}>
{blog.title}
</h3>
<p className={cls(
"text-base leading-tight line-clamp-2",
shouldUseLightText ? "text-background/75" : "text-foreground/75",
excerptClassName
)}>
{blog.excerpt}
</p>
{(blog.authorName || blog.date) && (
<div className={cls(
"flex",
blog.authorAvatar ? "items-center gap-3" : "flex-row justify-between items-center",
authorContainerClassName
)}>
{blog.authorAvatar && (
<Image
src={blog.authorAvatar}
alt={blog.authorName || "Author"}
width={40}
height={40}
className={cls("h-9 w-auto aspect-square rounded-theme object-cover", authorAvatarClassName)}
unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
/>
)}
{blog.authorAvatar ? (
<div className="flex flex-col">
{blog.authorName && (
<p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
{blog.authorName}
</p>
)}
{blog.date && (
<p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
{blog.date}
</p>
)}
</div>
) : (
<>
{blog.authorName && (
<p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
{blog.authorName}
</p>
)}
{blog.date && (
<p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
{blog.date}
</p>
)}
</>
)}
</div>
)}
</div>
<div className={cls("relative z-1 w-full aspect-square", mediaWrapperClassName)}>
<MediaContent
imageSrc={blog.imageSrc}
imageAlt={blog.imageAlt || blog.title}
imageClassName={cls("absolute inset-0 w-full h-full object-cover", mediaClassName)}
/>
<OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
</div>
</article>
);
});
BlogCardItem.displayName = "BlogCardItem";
const BlogCardThree = ({
blogs = [],
carouselMode = "buttons",
uniformGridCustomHeightClasses = "min-h-none",
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Blog section",
className = "",
containerClassName = "",
cardClassName = "",
cardContentClassName = "",
categoryTagClassName = "",
cardTitleClassName = "",
excerptClassName = "",
authorContainerClassName = "",
authorAvatarClassName = "",
authorNameClassName = "",
dateClassName = "",
mediaWrapperClassName = "",
mediaClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: BlogCardThreeProps) => {
return (
<CardStack
mode={carouselMode}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
ariaLabel={ariaLabel}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
>
{blogs.map((blog) => (
<BlogCardItem
key={blog.id}
blog={blog}
useInvertedBackground={useInvertedBackground}
cardClassName={cardClassName}
cardContentClassName={cardContentClassName}
categoryTagClassName={categoryTagClassName}
cardTitleClassName={cardTitleClassName}
excerptClassName={excerptClassName}
authorContainerClassName={authorContainerClassName}
authorAvatarClassName={authorAvatarClassName}
authorNameClassName={authorNameClassName}
dateClassName={dateClassName}
mediaWrapperClassName={mediaWrapperClassName}
mediaClassName={mediaClassName}
/>
))}
</CardStack>
);
};
BlogCardThree.displayName = "BlogCardThree";
export default BlogCardThree;

259
src/components/sections/blog/BlogCardTwo.tsx
View File

@@ -1,241 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import Image from "next/image";
import CardStack from "@/components/cardStack/CardStack";
import Badge from "@/components/shared/Badge";
import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import type { BlogPost } from "@/lib/api/blog";
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 BlogCard = Omit<BlogPost, 'category'> & {
category: string | string[];
};
interface BlogCardTwoProps { interface BlogCardTwoProps {
blogs: BlogCard[]; blogs?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationType; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
description: string;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
textboxLayout: TextboxLayout;
useInvertedBackground: InvertedBackground;
ariaLabel?: string;
className?: string;
containerClassName?: string;
cardClassName?: string;
imageWrapperClassName?: string;
imageClassName?: string;
authorAvatarClassName?: string;
authorDateClassName?: string;
cardTitleClassName?: string;
excerptClassName?: string;
categoryClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface BlogCardItemProps { export default function BlogCardTwo({
blog: BlogCard; blogs = [],
shouldUseLightText: boolean; title = "Blog", description = "Latest articles", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
cardClassName?: string; }: BlogCardTwoProps) {
imageWrapperClassName?: string; const items = blogs.map((blog) => ({
imageClassName?: string; id: blog.id,
authorAvatarClassName?: string; label: blog.title,
authorDateClassName?: string; detail: blog.excerpt,
cardTitleClassName?: string; }));
excerptClassName?: string;
categoryClassName?: string; return (
<div className="blog-card-two">
<CardStack items={items} />
</div>
);
} }
const BlogCardItem = memo(({
blog,
shouldUseLightText,
cardClassName = "",
imageWrapperClassName = "",
imageClassName = "",
authorAvatarClassName = "",
authorDateClassName = "",
cardTitleClassName = "",
excerptClassName = "",
categoryClassName = "",
}: BlogCardItemProps) => {
return (
<article
className={cls("relative h-full card group flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
onClick={blog.onBlogClick}
role="article"
aria-label={`${blog.title} by ${blog.authorName}`}
>
<div className={cls("relative z-1 w-full aspect-[4/3] overflow-hidden rounded-theme-capped", imageWrapperClassName)}>
<Image
src={blog.imageSrc}
alt={blog.imageAlt || blog.title}
fill
className={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", imageClassName)}
unoptimized={blog.imageSrc.startsWith('http') || blog.imageSrc.startsWith('//')}
/>
<OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
</div>
<div className="relative z-1 flex flex-col justify-between gap-6 flex-1">
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2">
{blog.authorAvatar && (
<Image
src={blog.authorAvatar}
alt={blog.authorName}
width={24}
height={24}
className={cls("h-[var(--text-xs)] w-auto aspect-square rounded-theme object-cover bg-background-accent", authorAvatarClassName)}
unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
/>
)}
<p className={cls("text-xs", shouldUseLightText ? "text-background" : "text-foreground", authorDateClassName)}>
{blog.authorName} • {blog.date}
</p>
</div>
<h3 className={cls("text-2xl font-medium leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
{blog.title}
</h3>
<p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
{blog.excerpt}
</p>
</div>
<div className="flex flex-wrap gap-2">
{Array.isArray(blog.category) ? (
blog.category.map((cat, index) => (
<Badge key={`${cat}-${index}`} text={cat} variant="primary" className={categoryClassName} />
))
) : (
<Badge text={blog.category} variant="primary" className={categoryClassName} />
)}
</div>
</div>
</article>
);
});
BlogCardItem.displayName = "BlogCardItem";
const BlogCardTwo = ({
blogs = [],
carouselMode = "buttons",
uniformGridCustomHeightClasses,
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Blog section",
className = "",
containerClassName = "",
cardClassName = "",
imageWrapperClassName = "",
imageClassName = "",
authorAvatarClassName = "",
authorDateClassName = "",
cardTitleClassName = "",
excerptClassName = "",
categoryClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: BlogCardTwoProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
return (
<CardStack
mode={carouselMode}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
ariaLabel={ariaLabel}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
>
{blogs.map((blog) => (
<BlogCardItem
key={blog.id}
blog={blog}
shouldUseLightText={shouldUseLightText}
cardClassName={cardClassName}
imageWrapperClassName={imageWrapperClassName}
imageClassName={imageClassName}
authorAvatarClassName={authorAvatarClassName}
authorDateClassName={authorDateClassName}
cardTitleClassName={cardTitleClassName}
excerptClassName={excerptClassName}
categoryClassName={categoryClassName}
/>
))}
</CardStack>
);
};
BlogCardTwo.displayName = "BlogCardTwo";
export default BlogCardTwo;

170
src/components/sections/contact/ContactCenter.tsx
View File

@@ -1,131 +1,51 @@
"use client"; import React, { useState } from "react";
import ContactForm from "@/components/form/ContactForm";
import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
import { cls } from "@/lib/utils";
import { LucideIcon } from "lucide-react";
import { sendContactEmail } from "@/utils/sendContactEmail";
import type { ButtonAnimationType } from "@/types/button";
type ContactCenterBackgroundProps = 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 ContactCenterProps { interface ContactCenterProps {
title: string; tag: string;
description: string; title: string;
tag: string; description: string;
tagIcon?: LucideIcon; background?: { variant: string };
tagAnimation?: ButtonAnimationType; useInvertedBackground?: boolean;
background: ContactCenterBackgroundProps; inputPlaceholder?: string;
useInvertedBackground: boolean; buttonText?: string;
tagClassName?: string; termsText?: string;
inputPlaceholder?: string;
buttonText?: string;
termsText?: string;
onSubmit?: (email: string) => void;
ariaLabel?: string;
className?: string;
containerClassName?: string;
contentClassName?: string;
titleClassName?: string;
descriptionClassName?: string;
formWrapperClassName?: string;
formClassName?: string;
inputClassName?: string;
buttonClassName?: string;
buttonTextClassName?: string;
termsClassName?: string;
} }
const ContactCenter = ({ export default function ContactCenter({
title, tag,
description, title,
tag, description,
tagIcon, background = { variant: "sparkles-gradient" },
tagAnimation, useInvertedBackground = false,
background, inputPlaceholder = "Enter your email", buttonText = "Sign Up", termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions."}: ContactCenterProps) {
useInvertedBackground, const [email, setEmail] = useState("");
tagClassName = "",
inputPlaceholder = "Enter your email",
buttonText = "Sign Up",
termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
onSubmit,
ariaLabel = "Contact section",
className = "",
containerClassName = "",
contentClassName = "",
titleClassName = "",
descriptionClassName = "",
formWrapperClassName = "",
formClassName = "",
inputClassName = "",
buttonClassName = "",
buttonTextClassName = "",
termsClassName = "",
}: ContactCenterProps) => {
const handleSubmit = async (email: string) => { const handleSubmit = (e: React.FormEvent) => {
try { e.preventDefault();
await sendContactEmail({ email }); setEmail("");
console.log("Email send successfully"); };
} catch (error) {
console.error("Failed to send email:", error);
}
};
return ( return (
<section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}> <div className="contact-center-container">
<div className={cls("w-content-width mx-auto relative z-10", containerClassName)}> <div className="contact-content">
<div className={cls("relative w-full card p-6 md:p-0 py-20 md:py-20 rounded-theme-capped flex items-center justify-center", contentClassName)}> <div className="contact-tag">{tag}</div>
<div className="relative z-10 w-full md:w-1/2"> <h2 className="contact-title">{title}</h2>
<ContactForm <p className="contact-description">{description}</p>
tag={tag} <form onSubmit={handleSubmit} className="contact-form">
tagIcon={tagIcon} <input
tagAnimation={tagAnimation} type="email"
title={title} placeholder={inputPlaceholder}
description={description} value={email}
useInvertedBackground={useInvertedBackground} onChange={(e) => setEmail(e.target.value)}
inputPlaceholder={inputPlaceholder} required
buttonText={buttonText} className="contact-input"
termsText={termsText} />
onSubmit={handleSubmit} <button type="submit" className="contact-button">
centered={true} {buttonText}
tagClassName={tagClassName} </button>
titleClassName={titleClassName} </form>
descriptionClassName={descriptionClassName} <p className="contact-terms">{termsText}</p>
formWrapperClassName={cls("md:w-8/10 2xl:w-6/10", formWrapperClassName)} </div>
formClassName={formClassName} </div>
inputClassName={inputClassName} );
buttonClassName={buttonClassName} }
buttonTextClassName={buttonTextClassName}
termsClassName={termsClassName}
/>
</div>
<div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
<HeroBackgrounds {...background} />
</div>
</div>
</div>
</section>
);
};
ContactCenter.displayName = "ContactCenter";
export default ContactCenter;

203
src/components/sections/contact/ContactFaq.tsx
View File

@@ -1,188 +1,35 @@
"use client"; import React, { useRef, useState } from "react";
import { useState, Fragment } from "react";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { getButtonProps } from "@/lib/buttonUtils";
import Accordion from "@/components/Accordion";
import Button from "@/components/button/Button";
import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import type { LucideIcon } from "lucide-react";
import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
import type { CardAnimationType } from "@/components/cardStack/types";
import type { ButtonConfig } from "@/types/button";
interface FaqItem {
id: string;
title: string;
content: string;
}
interface ContactFaqProps { interface ContactFaqProps {
faqs: FaqItem[]; faqs?: any[];
ctaTitle: string; title?: string;
ctaDescription: string; description?: string;
ctaButton: ButtonConfig;
ctaIcon: LucideIcon;
useInvertedBackground: InvertedBackground;
animationType: CardAnimationType;
accordionAnimationType?: "smooth" | "instant";
showCard?: boolean;
ariaLabel?: string;
className?: string;
containerClassName?: string;
ctaPanelClassName?: string;
ctaIconClassName?: string;
ctaTitleClassName?: string;
ctaDescriptionClassName?: string;
ctaButtonClassName?: string;
ctaButtonTextClassName?: string;
faqsPanelClassName?: string;
faqsContainerClassName?: string;
accordionClassName?: string;
accordionTitleClassName?: string;
accordionIconContainerClassName?: string;
accordionIconClassName?: string;
accordionContentClassName?: string;
separatorClassName?: string;
} }
const ContactFaq = ({ export default function ContactFaq({
faqs, faqs = [],
ctaTitle, title = "FAQ", description = "Frequently asked questions"}: ContactFaqProps) {
ctaDescription, const state = useCardAnimation({
ctaButton, rotationX: 0,
ctaIcon: CtaIcon, rotationY: 0,
useInvertedBackground, rotationZ: 0,
animationType, perspective: 1000,
accordionAnimationType = "smooth", duration: 0.3,
showCard = true, });
ariaLabel = "Contact and FAQ section",
className = "",
containerClassName = "",
ctaPanelClassName = "",
ctaIconClassName = "",
ctaTitleClassName = "",
ctaDescriptionClassName = "",
ctaButtonClassName = "",
ctaButtonTextClassName = "",
faqsPanelClassName = "",
faqsContainerClassName = "",
accordionClassName = "",
accordionTitleClassName = "",
accordionIconContainerClassName = "",
accordionIconClassName = "",
accordionContentClassName = "",
separatorClassName = "",
}: ContactFaqProps) => {
const [activeIndex, setActiveIndex] = useState<number | null>(null);
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
const { itemRefs } = useCardAnimation({ animationType, itemCount: 2 });
const handleToggle = (index: number) => {
setActiveIndex(activeIndex === index ? null : index);
};
const getButtonConfigProps = () => {
if (theme.defaultButtonVariant === "hover-bubble") {
return { bgClassName: "w-full" };
}
if (theme.defaultButtonVariant === "icon-arrow") {
return { className: "justify-between" };
}
return {};
};
return ( return (
<section <div className="contact-faq">
aria-label={ariaLabel} <h2>{title}</h2>
className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)} <p>{description}</p>
> <div className="faqs-container">
<div className={cls("w-content-width mx-auto", containerClassName)}> {faqs.map((faq) => (
<div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8"> <div key={faq.id} className="faq-item">
<div <h3>{faq.title}</h3>
ref={(el) => { itemRefs.current[0] = el; }} <p>{faq.content}</p>
className={cls(
"md:col-span-4 card rounded-theme-capped p-6 md:p-8 flex flex-col items-center justify-center gap-6 text-center",
ctaPanelClassName
)}
>
<div className={cls("h-16 w-auto aspect-square rounded-theme primary-button flex items-center justify-center", ctaIconClassName)}>
<CtaIcon className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={1.5} />
</div>
<div className="flex flex-col" >
<h2 className={cls(
"text-2xl md:text-3xl font-medium",
shouldUseLightText ? "text-background" : "text-foreground",
ctaTitleClassName
)}>
{ctaTitle}
</h2>
<p className={cls(
"text-base",
shouldUseLightText ? "text-background/70" : "text-foreground/70",
ctaDescriptionClassName
)}>
{ctaDescription}
</p>
</div>
<Button
{...getButtonProps(
{ ...ctaButton, props: { ...ctaButton.props, ...getButtonConfigProps() } },
0,
theme.defaultButtonVariant,
cls("w-full", ctaButtonClassName),
ctaButtonTextClassName
)}
/>
</div> </div>
))}
<div
ref={(el) => { itemRefs.current[1] = el; }}
className={cls(
"md:col-span-8 flex flex-col gap-4",
faqsPanelClassName
)}
>
<div className={cls("flex flex-col gap-4", faqsContainerClassName)}>
{faqs.map((faq, index) => (
<Fragment key={faq.id}>
<Accordion
index={index}
isActive={activeIndex === index}
onToggle={handleToggle}
title={faq.title}
content={faq.content}
animationType={accordionAnimationType}
showCard={showCard}
useInvertedBackground={useInvertedBackground}
className={accordionClassName}
titleClassName={accordionTitleClassName}
iconContainerClassName={accordionIconContainerClassName}
iconClassName={accordionIconClassName}
contentClassName={accordionContentClassName}
/>
{!showCard && index < faqs.length - 1 && (
<div className={cls(
"w-full border-b",
shouldUseLightText ? "border-background/10" : "border-foreground/10",
separatorClassName
)} />
)}
</Fragment>
))}
</div>
</div>
</div>
</div> </div>
</section> </div>
); );
}; }
ContactFaq.displayName = "ContactFaq";
export default ContactFaq;

215
src/components/sections/contact/ContactSplit.tsx
View File

@@ -1,171 +1,58 @@
"use client"; import React, { useState } from "react";
import ContactForm from "@/components/form/ContactForm";
import MediaContent from "@/components/shared/MediaContent";
import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
import { cls } from "@/lib/utils";
import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
import { LucideIcon } from "lucide-react";
import { sendContactEmail } from "@/utils/sendContactEmail";
import type { ButtonAnimationType } from "@/types/button";
type ContactSplitBackgroundProps = 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 ContactSplitProps { interface ContactSplitProps {
title: string; tag: string;
description: string; title: string;
tag: string; description: string;
tagIcon?: LucideIcon; background?: { variant: string };
tagAnimation?: ButtonAnimationType; useInvertedBackground?: boolean;
background: ContactSplitBackgroundProps; imageSrc?: string;
useInvertedBackground: boolean; inputPlaceholder?: string;
imageSrc?: string; buttonText?: string;
videoSrc?: string; termsText?: string;
imageAlt?: string;
videoAriaLabel?: string;
mediaPosition?: "left" | "right";
mediaAnimation: ButtonAnimationType;
inputPlaceholder?: string;
buttonText?: string;
termsText?: string;
onSubmit?: (email: string) => void;
ariaLabel?: string;
className?: string;
containerClassName?: string;
contentClassName?: string;
contactFormClassName?: string;
tagClassName?: string;
titleClassName?: string;
descriptionClassName?: string;
formWrapperClassName?: string;
formClassName?: string;
inputClassName?: string;
buttonClassName?: string;
buttonTextClassName?: string;
termsClassName?: string;
mediaWrapperClassName?: string;
mediaClassName?: string;
} }
const ContactSplit = ({ export default function ContactSplit({
title, tag,
description, title,
tag, description,
tagIcon, background = { variant: "sparkles-gradient" },
tagAnimation, useInvertedBackground = false,
background, imageSrc,
useInvertedBackground, inputPlaceholder = "Enter your email", buttonText = "Sign Up", termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions."}: ContactSplitProps) {
imageSrc, const [email, setEmail] = useState("");
videoSrc,
imageAlt = "",
videoAriaLabel = "Contact section video",
mediaPosition = "right",
mediaAnimation,
inputPlaceholder = "Enter your email",
buttonText = "Sign Up",
termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
onSubmit,
ariaLabel = "Contact section",
className = "",
containerClassName = "",
contentClassName = "",
contactFormClassName = "",
tagClassName = "",
titleClassName = "",
descriptionClassName = "",
formWrapperClassName = "",
formClassName = "",
inputClassName = "",
buttonClassName = "",
buttonTextClassName = "",
termsClassName = "",
mediaWrapperClassName = "",
mediaClassName = "",
}: ContactSplitProps) => {
const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
const handleSubmit = async (email: string) => { const handleSubmit = (e: React.FormEvent) => {
try { e.preventDefault();
await sendContactEmail({ email }); setEmail("");
console.log("Email send successfully"); };
} catch (error) {
console.error("Failed to send email:", error);
}
};
const contactContent = ( return (
<div className="relative card rounded-theme-capped p-6 py-15 md:py-6 flex items-center justify-center"> <div className="contact-split-container">
<ContactForm <div className="contact-split-form">
tag={tag} <div className="contact-tag">{tag}</div>
tagIcon={tagIcon} <h2 className="contact-title">{title}</h2>
tagAnimation={tagAnimation} <p className="contact-description">{description}</p>
title={title} <form onSubmit={handleSubmit} className="contact-form">
description={description} <input
useInvertedBackground={useInvertedBackground} type="email"
inputPlaceholder={inputPlaceholder} placeholder={inputPlaceholder}
buttonText={buttonText} value={email}
termsText={termsText} onChange={(e) => setEmail(e.target.value)}
onSubmit={handleSubmit} required
centered={true} className="contact-input"
className={cls("w-full", contactFormClassName)} />
tagClassName={tagClassName} <button type="submit" className="contact-button">
titleClassName={titleClassName} {buttonText}
descriptionClassName={descriptionClassName} </button>
formWrapperClassName={cls("w-full md:w-8/10 2xl:w-7/10", formWrapperClassName)} </form>
formClassName={formClassName} <p className="contact-terms">{termsText}</p>
inputClassName={inputClassName} </div>
buttonClassName={buttonClassName} {imageSrc && (
buttonTextClassName={buttonTextClassName} <div className="contact-split-image">
termsClassName={termsClassName} <img src={imageSrc} alt="Contact" />
/>
<div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
<HeroBackgrounds {...background} />
</div>
</div> </div>
); )}
</div>
const mediaContent = ( );
<div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card h-130", mediaWrapperClassName)}> }
<MediaContent
imageSrc={imageSrc}
videoSrc={videoSrc}
imageAlt={imageAlt}
videoAriaLabel={videoAriaLabel}
imageClassName={cls("relative z-1 w-full h-full object-cover", mediaClassName)}
/>
</div>
);
return (
<section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
<div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
<div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
{mediaPosition === "left" && mediaContent}
{contactContent}
{mediaPosition === "right" && mediaContent}
</div>
</div>
</section>
);
};
ContactSplit.displayName = "ContactSplit";
export default ContactSplit;

251
src/components/sections/contact/ContactSplitForm.tsx
View File

@@ -1,214 +1,49 @@
"use client"; import React, { useState } from "react";
import { useState } from "react";
import TextAnimation from "@/components/text/TextAnimation";
import Button from "@/components/button/Button";
import Input from "@/components/form/Input";
import Textarea from "@/components/form/Textarea";
import MediaContent from "@/components/shared/MediaContent";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
import { getButtonProps } from "@/lib/buttonUtils";
import type { AnimationType } from "@/components/text/types";
import type { ButtonAnimationType } from "@/types/button";
import {sendContactEmail} from "@/utils/sendContactEmail";
export interface InputField {
name: string;
type: string;
placeholder: string;
required?: boolean;
className?: string;
}
export interface TextareaField {
name: string;
placeholder: string;
rows?: number;
required?: boolean;
className?: string;
}
interface ContactSplitFormProps { interface ContactSplitFormProps {
title: string; tag: string;
description: string; title: string;
inputs: InputField[]; description: string;
textarea?: TextareaField; background?: { variant: string };
useInvertedBackground: boolean; useInvertedBackground?: boolean;
imageSrc?: string; inputPlaceholder?: string;
videoSrc?: string; buttonText?: string;
imageAlt?: string; termsText?: string;
videoAriaLabel?: string;
mediaPosition?: "left" | "right";
mediaAnimation: ButtonAnimationType;
buttonText?: string;
onSubmit?: (data: Record<string, string>) => void;
ariaLabel?: string;
className?: string;
containerClassName?: string;
contentClassName?: string;
formCardClassName?: string;
titleClassName?: string;
descriptionClassName?: string;
buttonClassName?: string;
buttonTextClassName?: string;
mediaWrapperClassName?: string;
mediaClassName?: string;
} }
const ContactSplitForm = ({ export default function ContactSplitForm({
title, tag,
description, title,
inputs, description,
textarea, background = { variant: "sparkles-gradient" },
useInvertedBackground, useInvertedBackground = false,
imageSrc, inputPlaceholder = "Enter your email", buttonText = "Sign Up", termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions."}: ContactSplitFormProps) {
videoSrc, const [email, setEmail] = useState("");
imageAlt = "",
videoAriaLabel = "Contact section video",
mediaPosition = "right",
mediaAnimation,
buttonText = "Submit",
onSubmit,
ariaLabel = "Contact section",
className = "",
containerClassName = "",
contentClassName = "",
formCardClassName = "",
titleClassName = "",
descriptionClassName = "",
buttonClassName = "",
buttonTextClassName = "",
mediaWrapperClassName = "",
mediaClassName = "",
}: ContactSplitFormProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
// Validate minimum inputs requirement const handleSubmit = (e: React.FormEvent) => {
if (inputs.length < 2) { e.preventDefault();
throw new Error("ContactSplitForm requires at least 2 inputs"); setEmail("");
} };
// Initialize form data dynamically return (
const initialFormData: Record<string, string> = {}; <div className="contact-split-form-container">
inputs.forEach(input => { <div className="contact-tag">{tag}</div>
initialFormData[input.name] = ""; <h2 className="contact-title">{title}</h2>
}); <p className="contact-description">{description}</p>
if (textarea) { <form onSubmit={handleSubmit} className="contact-form">
initialFormData[textarea.name] = ""; <input
} type="email"
placeholder={inputPlaceholder}
const [formData, setFormData] = useState(initialFormData); value={email}
onChange={(e) => setEmail(e.target.value)}
const handleSubmit = async (e: React.FormEvent) => { required
e.preventDefault(); className="contact-input"
try { />
await sendContactEmail({ formData }); <button type="submit" className="contact-button">
console.log("Email send successfully"); {buttonText}
setFormData(initialFormData); </button>
} catch (error) { </form>
console.error("Failed to send email:", error); <p className="contact-terms">{termsText}</p>
} </div>
}; );
}
const getButtonConfigProps = () => {
if (theme.defaultButtonVariant === "hover-bubble") {
return { bgClassName: "w-full" };
}
if (theme.defaultButtonVariant === "icon-arrow") {
return { className: "justify-between" };
}
return {};
};
const formContent = (
<div className={cls("card rounded-theme-capped p-6 md:p-10 flex items-center justify-center", formCardClassName)}>
<form onSubmit={handleSubmit} className="relative z-1 w-full flex flex-col gap-6">
<div className="w-full flex flex-col gap-0 text-center">
<TextAnimation
type={theme.defaultTextAnimation as AnimationType}
text={title}
variant="trigger"
className={cls("text-4xl font-medium leading-[1.175] text-balance", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}
/>
<TextAnimation
type={theme.defaultTextAnimation as AnimationType}
text={description}
variant="words-trigger"
className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", descriptionClassName)}
/>
</div>
<div className="w-full flex flex-col gap-4">
{inputs.map((input) => (
<Input
key={input.name}
type={input.type}
placeholder={input.placeholder}
value={formData[input.name] || ""}
onChange={(value) => setFormData({ ...formData, [input.name]: value })}
required={input.required}
ariaLabel={input.placeholder}
className={input.className}
/>
))}
{textarea && (
<Textarea
placeholder={textarea.placeholder}
value={formData[textarea.name] || ""}
onChange={(value) => setFormData({ ...formData, [textarea.name]: value })}
required={textarea.required}
rows={textarea.rows || 5}
ariaLabel={textarea.placeholder}
className={textarea.className}
/>
)}
<Button
{...getButtonProps(
{ text: buttonText, props: getButtonConfigProps() },
0,
theme.defaultButtonVariant,
cls("w-full", buttonClassName),
cls("text-base", buttonTextClassName)
)}
type="submit"
/>
</div>
</form>
</div>
);
const mediaContent = (
<div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card md:relative md:h-full", mediaWrapperClassName)}>
<MediaContent
imageSrc={imageSrc}
videoSrc={videoSrc}
imageAlt={imageAlt}
videoAriaLabel={videoAriaLabel}
imageClassName={cls("w-full md:absolute md:inset-0 md:h-full object-cover", mediaClassName)}
/>
</div>
);
return (
<section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
<div className={cls("w-content-width mx-auto", containerClassName)}>
<div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
{mediaPosition === "left" && mediaContent}
{formContent}
{mediaPosition === "right" && mediaContent}
</div>
</div>
</section>
);
};
ContactSplitForm.displayName = "ContactSplitForm";
export default ContactSplitForm;

314
src/components/sections/feature/FeatureBento.tsx
View File

@@ -1,300 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import CardStack from "@/components/cardStack/CardStack";
import Button from "@/components/button/Button";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { getButtonProps } from "@/lib/buttonUtils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import { BentoGlobe } from "@/components/bento/BentoGlobe";
import BentoIconInfoCards from "@/components/bento/BentoIconInfoCards";
import BentoAnimatedBarChart from "@/components/bento/BentoAnimatedBarChart";
import Bento3DStackCards from "@/components/bento/Bento3DStackCards";
import Bento3DTaskList, { type TaskItem } from "@/components/bento/Bento3DTaskList";
import BentoOrbitingIcons, { type OrbitingItem } from "@/components/bento/BentoOrbitingIcons";
import BentoMap from "@/components/bento/BentoMap";
import BentoMarquee from "@/components/bento/BentoMarquee";
import BentoLineChart from "@/components/bento/BentoLineChart/BentoLineChart";
import BentoPhoneAnimation, { type PhoneApp, type PhoneApps8 } from "@/components/bento/BentoPhoneAnimation";
import BentoChatAnimation, { type ChatExchange } from "@/components/bento/BentoChatAnimation";
import Bento3DCardGrid from "@/components/bento/Bento3DCardGrid";
import BentoRevealIcon from "@/components/bento/BentoRevealIcon";
import BentoTimeline, { type TimelineItem } from "@/components/bento/BentoTimeline";
import BentoMediaStack, { type MediaStackItem } from "@/components/bento/BentoMediaStack";
import type { LucideIcon } from "lucide-react";
export type { PhoneApp, PhoneApps8, ChatExchange, TimelineItem, MediaStackItem };
import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type BentoAnimationType = Exclude<CardAnimationTypeWith3D, "depth-3d" | "scale-rotate">;
export type BentoInfoItem = {
icon: LucideIcon;
label: string;
value: string;
};
export type Bento3DItem = {
icon: LucideIcon;
title: string;
subtitle: string;
detail: string;
};
type BaseFeatureCard = {
title: string;
description: string;
button?: ButtonConfig;
};
export type FeatureCard = BaseFeatureCard & (
| {
bentoComponent: "icon-info-cards";
items: BentoInfoItem[];
}
| {
bentoComponent: "3d-stack-cards";
items: [Bento3DItem, Bento3DItem, Bento3DItem];
}
| {
bentoComponent: "3d-task-list";
title: string;
items: TaskItem[];
}
| {
bentoComponent: "orbiting-icons";
centerIcon: LucideIcon;
items: OrbitingItem[];
}
| ({
bentoComponent: "marquee";
centerIcon: LucideIcon;
} & (
| { variant: "text"; texts: string[] }
| { variant: "icon"; icons: LucideIcon[] }
))
| {
bentoComponent: "globe" | "animated-bar-chart" | "map" | "line-chart";
items?: never;
}
| {
bentoComponent: "3d-card-grid";
items: [{ name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }];
centerIcon: LucideIcon;
}
| {
bentoComponent: "phone";
statusIcon: LucideIcon;
alertIcon: LucideIcon;
alertTitle: string;
alertMessage: string;
apps: PhoneApps8;
}
| {
bentoComponent: "chat";
aiIcon: LucideIcon;
userIcon: LucideIcon;
exchanges: ChatExchange[];
placeholder: string;
}
| {
bentoComponent: "reveal-icon";
icon: LucideIcon;
}
| {
bentoComponent: "timeline";
heading: string;
subheading: string;
items: [TimelineItem, TimelineItem, TimelineItem];
completedLabel: string;
}
| {
bentoComponent: "media-stack";
items: [MediaStackItem, MediaStackItem, MediaStackItem];
}
);
interface FeatureBentoProps { interface FeatureBentoProps {
features: FeatureCard[]; features?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
animationType: BentoAnimationType; description?: string;
title: string; animationType?: string;
titleSegments?: TitleSegment[]; textboxLayout?: string;
description: string; useInvertedBackground?: boolean;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
textboxLayout: TextboxLayout;
useInvertedBackground: InvertedBackground;
ariaLabel?: string;
className?: string;
containerClassName?: string;
cardClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
cardTitleClassName?: string;
cardDescriptionClassName?: string;
cardButtonClassName?: string;
cardButtonTextClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
const FeatureBento = ({ export default function FeatureBento({
features, features = [],
carouselMode = "buttons", title = "Features", description = "Our features", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
animationType, }: FeatureBentoProps) {
title, const items = features.map((feature) => ({
titleSegments, id: feature.id,
description, label: feature.title,
tag, detail: feature.description,
tagIcon, }));
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Feature section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
cardTitleClassName = "",
cardDescriptionClassName = "",
cardButtonClassName = "",
cardButtonTextClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: FeatureBentoProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
const getBentoComponent = (feature: FeatureCard) => {
switch (feature.bentoComponent) {
case "globe":
return (
<div className="relative w-full h-full min-h-0" style={{
maskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%), linear-gradient(to bottom, black 40%, transparent 100%)",
WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%), linear-gradient(to bottom, black 40%, transparent 100%)",
maskComposite: "intersect",
WebkitMaskComposite: "source-in"
}}>
<BentoGlobe className="w-full scale-150 mt-[15%]" />
</div>
);
case "icon-info-cards":
return <BentoIconInfoCards items={feature.items} useInvertedBackground={useInvertedBackground} />;
case "animated-bar-chart":
return <BentoAnimatedBarChart />;
case "3d-stack-cards":
return <Bento3DStackCards cards={feature.items.map(item => ({ Icon: item.icon, title: item.title, subtitle: item.subtitle, detail: item.detail }))} useInvertedBackground={useInvertedBackground} />;
case "3d-task-list":
return <Bento3DTaskList title={feature.title} items={feature.items} useInvertedBackground={useInvertedBackground} />;
case "orbiting-icons":
return <BentoOrbitingIcons centerIcon={feature.centerIcon} items={feature.items} useInvertedBackground={useInvertedBackground} />;
case "marquee":
return feature.variant === "text"
? <BentoMarquee centerIcon={feature.centerIcon} variant="text" texts={feature.texts} useInvertedBackground={useInvertedBackground} />
: <BentoMarquee centerIcon={feature.centerIcon} variant="icon" icons={feature.icons} useInvertedBackground={useInvertedBackground} />;
case "map":
return <BentoMap useInvertedBackground={useInvertedBackground} />;
case "line-chart":
return <BentoLineChart useInvertedBackground={useInvertedBackground} />;
case "3d-card-grid":
return <Bento3DCardGrid items={feature.items} centerIcon={feature.centerIcon} useInvertedBackground={useInvertedBackground} />;
case "phone":
return <BentoPhoneAnimation statusIcon={feature.statusIcon} alertIcon={feature.alertIcon} alertTitle={feature.alertTitle} alertMessage={feature.alertMessage} apps={feature.apps} useInvertedBackground={useInvertedBackground} />;
case "chat":
return <BentoChatAnimation aiIcon={feature.aiIcon} userIcon={feature.userIcon} exchanges={feature.exchanges} placeholder={feature.placeholder} useInvertedBackground={useInvertedBackground} />;
case "reveal-icon":
return <BentoRevealIcon icon={feature.icon} useInvertedBackground={useInvertedBackground} />;
case "timeline":
return <BentoTimeline heading={feature.heading} subheading={feature.subheading} items={feature.items} completedLabel={feature.completedLabel} useInvertedBackground={useInvertedBackground} />;
case "media-stack":
return <BentoMediaStack items={feature.items} useInvertedBackground={useInvertedBackground} />;
}
};
return ( return (
<CardStack <div className="feature-bento">
mode={carouselMode} <CardStack items={items} />
gridVariant="uniform-all-items-equal" </div>
uniformGridCustomHeightClasses="min-h-0"
animationType={animationType}
carouselThreshold={4}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
carouselItemClassName="w-carousel-item-3 xl:w-carousel-item-3!"
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{features.map((feature, index) => (
<div
key={`${feature.title}-${index}`}
className={cls("card flex flex-col gap-4 p-5 rounded-theme-capped min-h-0 h-full", cardClassName)}
>
<div className="relative w-full h-70 min-h-0 overflow-hidden">
{getBentoComponent(feature)}
</div>
<div className="relative z-1 flex flex-col gap-1">
<h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
{feature.title}
</h3>
<p className={cls("text-sm leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
{feature.description}
</p>
</div>
{feature.button && (
<Button {...getButtonProps(feature.button, 0, theme.defaultButtonVariant, cls("w-full", cardButtonClassName), cardButtonTextClassName)} />
)}
</div>
))}
</CardStack>
); );
}; }
FeatureBento.displayName = "FeatureBento";
export default FeatureBento;

279
src/components/sections/feature/FeatureCardMedia.tsx
View File

@@ -1,261 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
import MediaContent from "@/components/shared/MediaContent";
import Tag from "@/components/shared/Tag";
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, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type FeatureCard = {
id: string;
title: string;
description: string;
tag: string;
imageSrc?: string;
videoSrc?: string;
imageAlt?: string;
videoAriaLabel?: string;
buttons?: ButtonConfig[];
onCardClick?: () => void;
};
interface FeatureCardMediaProps { interface FeatureCardMediaProps {
features: FeatureCard[]; features?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationType; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
description: string;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
textboxLayout: TextboxLayout;
useInvertedBackground: InvertedBackground;
ariaLabel?: string;
className?: string;
containerClassName?: string;
itemClassName?: string;
mediaWrapperClassName?: string;
mediaClassName?: string;
tagClassName?: string;
contentClassName?: string;
cardTitleClassName?: string;
cardDescriptionClassName?: string;
cardButtonContainerClassName?: string;
cardButtonClassName?: string;
cardButtonTextClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface FeatureCardItemProps { export default function FeatureCardMedia({
feature: FeatureCard; features = [],
shouldUseLightText: boolean; title = "Features", description = "Our features", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
useInvertedBackground: InvertedBackground; }: FeatureCardMediaProps) {
itemClassName?: string; const items = features.map((feature) => ({
mediaWrapperClassName?: string; id: feature.id,
mediaClassName?: string; label: feature.title,
tagClassName?: string; detail: feature.description,
contentClassName?: string; }));
cardTitleClassName?: string;
cardDescriptionClassName?: string; return (
cardButtonContainerClassName?: string; <div className="feature-card-media">
cardButtonClassName?: string; <CardStack items={items} />
cardButtonTextClassName?: string; </div>
);
} }
const FeatureCardItem = memo(({
feature,
shouldUseLightText,
useInvertedBackground,
itemClassName = "",
mediaWrapperClassName = "",
mediaClassName = "",
tagClassName = "",
contentClassName = "",
cardTitleClassName = "",
cardDescriptionClassName = "",
cardButtonContainerClassName = "",
cardButtonClassName = "",
cardButtonTextClassName = "",
}: FeatureCardItemProps) => {
const theme = useTheme();
return (
<article
className={cls("relative h-full flex flex-col gap-6 cursor-pointer group", itemClassName)}
onClick={feature.onCardClick}
role="article"
aria-label={feature.title}
>
<div className={cls("relative w-full aspect-square overflow-hidden rounded-theme-capped", mediaWrapperClassName)}>
<MediaContent
imageSrc={feature.imageSrc}
videoSrc={feature.videoSrc}
imageAlt={feature.imageAlt || feature.title}
videoAriaLabel={feature.videoAriaLabel || feature.title}
imageClassName={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", mediaClassName)}
/>
<div className="absolute top-4 right-4">
<Tag
text={feature.tag}
useInvertedBackground={useInvertedBackground}
className={tagClassName}
/>
</div>
</div>
<div className={cls("relative z-1 card rounded-theme-capped p-6 flex flex-col gap-2 flex-1", contentClassName)}>
<h3 className={cls(
"text-xl md:text-2xl font-medium leading-tight",
shouldUseLightText ? "text-background" : "text-foreground",
cardTitleClassName
)}>
{feature.title}
</h3>
<p className={cls(
"text-base leading-tight",
shouldUseLightText ? "text-background/75" : "text-foreground/75",
cardDescriptionClassName
)}>
{feature.description}
</p>
{feature.buttons && feature.buttons.length > 0 && (
<div className={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", cardButtonContainerClassName)}>
{feature.buttons.slice(0, 2).map((button, index) => (
<Button
key={`${button.text}-${index}`}
{...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)}
/>
))}
</div>
)}
</div>
</article>
);
});
FeatureCardItem.displayName = "FeatureCardItem";
const FeatureCardMedia = ({
features,
carouselMode = "buttons",
uniformGridCustomHeightClasses,
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Features section",
className = "",
containerClassName = "",
itemClassName = "",
mediaWrapperClassName = "",
mediaClassName = "",
tagClassName = "",
contentClassName = "",
cardTitleClassName = "",
cardDescriptionClassName = "",
cardButtonContainerClassName = "",
cardButtonClassName = "",
cardButtonTextClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: FeatureCardMediaProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
return (
<CardStack
mode={carouselMode}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
ariaLabel={ariaLabel}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
>
{features.map((feature) => (
<FeatureCardItem
key={feature.id}
feature={feature}
shouldUseLightText={shouldUseLightText}
useInvertedBackground={useInvertedBackground}
itemClassName={itemClassName}
mediaWrapperClassName={mediaWrapperClassName}
mediaClassName={mediaClassName}
tagClassName={tagClassName}
contentClassName={contentClassName}
cardTitleClassName={cardTitleClassName}
cardDescriptionClassName={cardDescriptionClassName}
cardButtonContainerClassName={cardButtonContainerClassName}
cardButtonClassName={cardButtonClassName}
cardButtonTextClassName={cardButtonTextClassName}
/>
))}
</CardStack>
);
};
FeatureCardMedia.displayName = "FeatureCardMedia";
export default FeatureCardMedia;

248
src/components/sections/feature/FeatureCardNine.tsx
View File

@@ -1,233 +1,29 @@
"use client"; import React from "react";
import TimelinePhoneView from "@/components/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 { interface FeatureCardNineProps {
features: FeatureCard[]; features?: any[];
showStepNumbers: boolean; title?: string;
title: string; description?: string;
titleSegments?: TitleSegment[]; animationType?: string;
description: string; useInvertedBackground?: boolean;
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 { export default function FeatureCardNine({
feature: FeatureCard; features = [],
showStepNumbers: boolean; title = "Features", description = "Our features", animationType = "slide-up", useInvertedBackground = false,
useInvertedBackground: InvertedBackground; }: FeatureCardNineProps) {
featureContentClassName: string; const items = features.map((feature) => ({
stepNumberClassName: string; id: feature.id,
featureTitleClassName: string; label: feature.title,
featureDescriptionClassName: string; detail: feature.description,
cardButtonClassName: string; }));
cardButtonTextClassName: string;
}
const FeatureContent = ({ return (
feature, <div className="feature-card-nine">
showStepNumbers, <h2>{title}</h2>
useInvertedBackground, <p>{description}</p>
featureContentClassName, <TimelinePhoneView items={items} />
stepNumberClassName,
featureTitleClassName,
featureDescriptionClassName,
cardButtonClassName,
cardButtonTextClassName,
}: FeatureContentProps) => {
const theme = useTheme();
return (
<div className={cls("relative z-1 h-full w-content-width mx-auto md:w-full flex flex-col items-center text-center gap-3 md:px-5", featureContentClassName)}>
{showStepNumbers && (
<div
className={cls(
"h-8 w-[var(--height-8)] primary-button text-primary-cta-text rounded-theme flex items-center justify-center",
stepNumberClassName
)}
>
<p className="text-sm truncate">
{feature.id}
</p>
</div>
)}
<h2 className={cls("text-5xl font-medium leading-[1.15] text-balance", useInvertedBackground && "text-background", featureTitleClassName)}>
{feature.title}
</h2>
<p className={cls("text-base leading-[1.2] text-balance", useInvertedBackground ? "text-background/75" : "text-foreground/75", featureDescriptionClassName)}>
{feature.description}
</p>
{feature.buttons && feature.buttons.length > 0 && (
<div className="flex flex-wrap justify-center gap-3">
{feature.buttons.slice(0, 2).map((button, index) => (
<Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
))}
</div>
)}
</div> </div>
); );
}; }
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: (
<FeatureContent
feature={feature}
showStepNumbers={showStepNumbers}
useInvertedBackground={useInvertedBackground}
featureContentClassName={featureContentClassName}
stepNumberClassName={stepNumberClassName}
featureTitleClassName={featureTitleClassName}
featureDescriptionClassName={featureDescriptionClassName}
cardButtonClassName={cardButtonClassName}
cardButtonTextClassName={cardButtonTextClassName}
/>
),
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 (
<TimelinePhoneView
items={items}
showTextBox={true}
showDivider={true}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
animationType={animationType}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
desktopContainerClassName={desktopContainerClassName}
mobileContainerClassName={mobileContainerClassName}
desktopContentClassName={desktopContentClassName}
desktopWrapperClassName={desktopWrapperClassName}
mobileWrapperClassName={mobileWrapperClassName}
phoneFrameClassName={phoneFrameClassName}
mobilePhoneFrameClassName={mobilePhoneFrameClassName}
ariaLabel={ariaLabel}
/>
);
};
FeatureCardNine.displayName = "FeatureCardNine";
export default FeatureCardNine;

210
src/components/sections/feature/FeatureCardOne.tsx
View File

@@ -1,196 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import CardStack from "@/components/cardStack/CardStack";
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, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type FeatureCard = {
title: string;
description: string;
button?: ButtonConfig;
} & (
| {
imageSrc: string;
imageAlt?: string;
videoSrc?: never;
videoAriaLabel?: never;
}
| {
videoSrc: string;
videoAriaLabel?: string;
imageSrc?: never;
imageAlt?: never;
}
);
interface FeatureCardOneProps { interface FeatureCardOneProps {
features: FeatureCard[]; features?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
gridVariant: GridVariant; description?: string;
uniformGridCustomHeightClasses?: string; animationType?: string;
animationType: CardAnimationTypeWith3D; textboxLayout?: string;
title: string; useInvertedBackground?: boolean;
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;
mediaClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
cardTitleClassName?: string;
cardDescriptionClassName?: string;
cardButtonClassName?: string;
cardButtonTextClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
const FeatureCardOne = ({ export default function FeatureCardOne({
features, features = [],
carouselMode = "buttons", title = "Features", description = "Our features", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
gridVariant, }: FeatureCardOneProps) {
uniformGridCustomHeightClasses, const items = features.map((feature) => ({
animationType, id: feature.id,
title, label: feature.title,
titleSegments, detail: feature.description,
description, }));
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Feature section",
className = "",
containerClassName = "",
cardClassName = "",
mediaClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
cardTitleClassName = "",
cardDescriptionClassName = "",
cardButtonClassName = "",
cardButtonTextClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: FeatureCardOneProps) => {
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 ( return (
<CardStack <div className="feature-card-one">
mode={carouselMode} <CardStack items={items} />
gridVariant={gridVariant} </div>
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
supports3DAnimation={true}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{features.map((feature, index) => (
<div
key={`${feature.title}-${index}`}
className={cls("card flex flex-col gap-4 p-4 rounded-theme-capped min-h-0 h-full", cardClassName)}
>
<MediaContent
imageSrc={feature.imageSrc}
videoSrc={feature.videoSrc}
imageAlt={feature.imageAlt || "Feature image"}
videoAriaLabel={feature.videoAriaLabel || "Feature video"}
imageClassName={cls("relative z-1 min-h-0 h-full", mediaClassName)}
/>
<div className="relative z-1 flex flex-col gap-1">
<h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
{feature.title}
</h3>
<p className={cls("text-sm leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
{feature.description}
</p>
</div>
{feature.button && (
<Button
{...getButtonProps(
{ ...feature.button, props: { ...feature.button.props, ...getButtonConfigProps() } },
0,
theme.defaultButtonVariant,
cls("w-full", cardButtonClassName),
cardButtonTextClassName
)}
/>
)}
</div>
))}
</CardStack>
); );
}; }
FeatureCardOne.displayName = "FeatureCardOne";
export default FeatureCardOne;

194
src/components/sections/feature/FeatureCardSeven.tsx
View File

@@ -1,179 +1,31 @@
"use client"; "use client";
import React from "react";
import CardList from "@/components/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 { interface FeatureCardSevenProps {
features: FeatureCard[]; features?: any[];
animationType: CardAnimationType; title?: string;
title: string; description?: string;
titleSegments?: TitleSegment[]; animationType?: string;
description: string; useInvertedBackground?: boolean;
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;
} }
const FeatureCardSeven = ({ export default function FeatureCardSeven({
features, features = [],
animationType, title = "Features", description = "Our features", animationType = "slide-up", useInvertedBackground = false,
title, }: FeatureCardSevenProps) {
titleSegments, const items = features.map((feature) => ({
description, id: feature.id,
tag, label: feature.title,
tagIcon, detail: feature.description,
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 ( return (
<CardList <div className="feature-card-seven">
title={title} <h2>{title}</h2>
titleSegments={titleSegments} <p>{description}</p>
description={description} <CardList items={items} />
tag={tag} </div>
tagIcon={tagIcon} );
tagAnimation={tagAnimation} }
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
animationType={animationType}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
cardClassName={cardClassName}
titleClassName={textBoxTitleClassName}
descriptionClassName={textBoxDescriptionClassName}
textBoxClassName={textBoxClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
ariaLabel={ariaLabel}
>
{features.map((feature, index) => (
<div
key={feature.id}
className={cls("relative z-1 w-full min-h-0 h-full flex flex-col justify-between items-center p-6 gap-6 md:p-15 md:gap-15", index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse", cardContentClassName)}
>
<div className="w-full md:w-1/2 min-w-0 h-fit md:h-full flex flex-col justify-center">
<div className="w-full min-w-0 flex flex-col gap-3 md:gap-5">
<div
className={cls(
"h-8 w-[var(--height-8)] primary-button text-primary-cta-text rounded-theme flex items-center justify-center",
stepNumberClassName
)}
>
<p className="text-sm truncate">
{feature.id}
</p>
</div>
<h2 className={cls("mt-1 text-4xl md:text-5xl font-medium leading-[1.15] text-balance", shouldUseLightText && "text-background", cardTitleClassName)}>
{feature.title}
</h2>
<p className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
{feature.description}
</p>
{feature.buttons && feature.buttons.length > 0 && (
<div className="flex flex-wrap gap-3 max-md:justify-center">
{feature.buttons.slice(0, 2).map((button, index) => (
<Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
))}
</div>
)}
</div>
</div>
<div
className={cls(
"relative w-full md:w-1/2 aspect-square overflow-hidden rounded-theme-capped",
imageContainerClassName
)}
>
<MediaContent
imageSrc={feature.imageSrc}
videoSrc={feature.videoSrc}
imageAlt={feature.imageAlt || feature.title}
videoAriaLabel={feature.videoAriaLabel || feature.title}
imageClassName={cls("w-full h-full object-cover", imageClassName)}
/>
</div>
</div>
))}
</CardList>
);
};
FeatureCardSeven.displayName = "FeatureCardSeven";
export default FeatureCardSeven;

193
src/components/sections/feature/FeatureCardSixteen.tsx
View File

@@ -1,167 +1,38 @@
"use client"; import React, { useRef } from "react";
import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
import PricingFeatureList from "@/components/shared/PricingFeatureList";
import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
import { Check, X } from "lucide-react";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type ComparisonItem = {
items: string[];
};
interface FeatureCardSixteenProps { interface FeatureCardSixteenProps {
negativeCard: ComparisonItem; features?: any[];
positiveCard: ComparisonItem; title?: string;
animationType: CardAnimationTypeWith3D; description?: string;
title: string; animationType?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
description: string;
textboxLayout: TextboxLayout;
useInvertedBackground: InvertedBackground;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
ariaLabel?: string;
className?: string;
containerClassName?: string;
textBoxTitleClassName?: string;
titleImageWrapperClassName?: string;
titleImageClassName?: string;
textBoxDescriptionClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
gridClassName?: string;
cardClassName?: string;
itemsListClassName?: string;
itemClassName?: string;
itemIconClassName?: string;
itemTextClassName?: string;
} }
const FeatureCardSixteen = ({ export default function FeatureCardSixteen({
negativeCard, features = [],
positiveCard, title = "Features", description = "Our features", animationType = "slide-up", useInvertedBackground = false,
animationType, }: FeatureCardSixteenProps) {
title, const state = useCardAnimation({
titleSegments, rotationX: 0,
description, rotationY: 0,
textboxLayout, rotationZ: 0,
useInvertedBackground, perspective: 1000,
tag, duration: 0.3,
tagIcon, });
tagAnimation,
buttons,
buttonAnimation,
ariaLabel = "Feature comparison section",
className = "",
containerClassName = "",
textBoxTitleClassName = "",
titleImageWrapperClassName = "",
titleImageClassName = "",
textBoxDescriptionClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
gridClassName = "",
cardClassName = "",
itemsListClassName = "",
itemClassName = "",
itemIconClassName = "",
itemTextClassName = "",
}: FeatureCardSixteenProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
const { itemRefs, containerRef, perspectiveRef } = useCardAnimation({
animationType,
itemCount: 2,
isGrid: true,
supports3DAnimation: true,
gridVariant: "uniform-all-items-equal"
});
const cards = [ return (
{ ...negativeCard, variant: "negative" as const }, <div className="feature-card-sixteen">
{ ...positiveCard, variant: "positive" as const }, <h2>{title}</h2>
]; <p>{description}</p>
<div className="features-container">
return ( {features.map((feature) => (
<section <div key={feature.id} className="feature-item">
ref={containerRef} <h3>{feature.title}</h3>
aria-label={ariaLabel} <p>{feature.description}</p>
className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)} </div>
> ))}
<div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}> </div>
<CardStackTextBox </div>
title={title} );
titleSegments={titleSegments} }
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
/>
<div
ref={perspectiveRef}
className={cls(
"relative mx-auto w-full md:w-60 grid grid-cols-1 gap-6",
cards.length >= 2 ? "md:grid-cols-2" : "md:grid-cols-1",
gridClassName
)}
>
{cards.map((card, index) => (
<div
key={card.variant}
ref={(el) => { itemRefs.current[index] = el; }}
className={cls(
"relative h-full card rounded-theme-capped p-6",
cardClassName
)}
>
<div className={cls("flex flex-col gap-6", card.variant === "negative" && "opacity-50")}>
<PricingFeatureList
features={card.items}
icon={card.variant === "positive" ? Check : X}
shouldUseLightText={shouldUseLightText}
className={itemsListClassName}
featureItemClassName={itemClassName}
featureIconWrapperClassName=""
featureIconClassName={itemIconClassName}
featureTextClassName={cls("truncate", itemTextClassName)}
/>
</div>
</div>
))}
</div>
</div>
</section>
);
};
FeatureCardSixteen.displayName = "FeatureCardSixteen";
export default FeatureCardSixteen;

277
src/components/sections/feature/FeatureCardTen.tsx
View File

@@ -1,263 +1,30 @@
"use client"; import React from "react";
import React, { memo, useMemo } from "react";
import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow"; 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 { interface FeatureCardTenProps {
features: FeatureCard[]; features?: any[];
title: string; title?: string;
titleSegments?: TitleSegment[]; description?: string;
description: string; animationType?: string;
tag?: string; useInvertedBackground?: boolean;
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 { export default function FeatureCardTen({
media: FeatureMedia; features = [],
title: string; title = "Features", description = "Our features", animationType = "slide-up", useInvertedBackground = false,
mediaCardClassName: string; }: FeatureCardTenProps) {
} const items = features.map((feature) => ({
id: feature.id,
reverse: false,
media: <div>{feature.title}</div>,
content: <div>{feature.description}</div>,
}));
const FeatureMedia = ({ return (
media, <div className="feature-card-ten">
title, <h2>{title}</h2>
mediaCardClassName, <p>{description}</p>
}: FeatureMediaProps) => ( <TimelineProcessFlow items={items} />
<div className={cls("card rounded-theme-capped p-4 aspect-square md:aspect-[16/10]", mediaCardClassName)}>
<MediaContent
imageSrc={media.imageSrc}
videoSrc={media.videoSrc}
imageAlt={media.imageAlt || title}
videoAriaLabel={media.videoAriaLabel || `${title} video`}
imageClassName="relative z-1 w-full h-full object-cover rounded-theme-capped"
/>
</div> </div>
); );
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) => (
<div className="flex flex-col gap-3" >
<h3 className={cls("text-xl md:text-4xl font-medium leading-[1.15]", useInvertedBackground && "text-background", featureTitleClassName)}>
{feature.title}
</h3>
<p className={cls("text-base leading-[1.2]", useInvertedBackground ? "text-background/75" : "text-foreground/75", featureDescriptionClassName)}>
{feature.description}
</p>
<ul className="flex flex-col m-0 mt-1 p-0 list-none gap-3">
{feature.items.map((listItem, listIndex) => {
const Icon = listItem.icon;
return (
<li key={listIndex} className="flex items-center gap-3">
<div
className={cls(
"shrink-0 h-9 aspect-square flex items-center justify-center rounded bg-background card",
iconContainerClassName
)}
>
<Icon
className={cls("h-4/10 w-4/10", shouldUseLightText ? "text-background" : "text-foreground", iconClassName)}
strokeWidth={1.25}
/>
</div>
<p className={cls("text-base", useInvertedBackground ? "text-background/75" : "text-foreground/75", listItemClassName)}>
{listItem.text}
</p>
</li>
);
})}
</ul>
</div>
);
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: (
<FeatureMedia
media={feature.media}
title={feature.title}
mediaCardClassName={mediaCardClassName}
/>
),
content: (
<FeatureContent
feature={feature}
useInvertedBackground={useInvertedBackground}
shouldUseLightText={shouldUseLightText}
featureTitleClassName={featureTitleClassName}
featureDescriptionClassName={featureDescriptionClassName}
listItemClassName={listItemClassName}
iconContainerClassName={iconContainerClassName}
iconClassName={iconClassName}
/>
),
})),
[
features,
useInvertedBackground,
shouldUseLightText,
mediaCardClassName,
featureTitleClassName,
featureDescriptionClassName,
listItemClassName,
iconContainerClassName,
iconClassName,
]
);
return (
<TimelineProcessFlow
items={timelineItems}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
animationType={animationType}
useInvertedBackground={useInvertedBackground}
ariaLabel={ariaLabel}
className={className}
containerClassName={containerClassName}
textBoxClassName={textBoxClassName}
textBoxTitleClassName={textBoxTitleClassName}
textBoxDescriptionClassName={textBoxDescriptionClassName}
textBoxTagClassName={textBoxTagClassName}
textBoxButtonContainerClassName={textBoxButtonContainerClassName}
textBoxButtonClassName={textBoxButtonClassName}
textBoxButtonTextClassName={textBoxButtonTextClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
itemClassName={itemClassName}
mediaWrapperClassName={mediaWrapperClassName}
numberClassName={numberClassName}
contentWrapperClassName={contentWrapperClassName}
gapClassName={gapClassName}
/>
);
};
FeatureCardTen.displayName = "FeatureCardTen";
export default memo(FeatureCardTen);

193
src/components/sections/feature/FeatureCardTwelve.tsx
View File

@@ -1,182 +1,31 @@
"use client"; "use client";
import { Fragment } from "react"; import React from "react";
import CardList from "@/components/cardStack/CardList"; 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 { interface FeatureCardTwelveProps {
features: FeatureCard[]; features?: any[];
animationType: CardAnimationType; title?: string;
title: string; description?: string;
titleSegments?: TitleSegment[]; animationType?: string;
description: string; useInvertedBackground?: boolean;
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 = ({ export default function FeatureCardTwelve({
features, features = [],
animationType, title = "Features", description = "Our features", animationType = "slide-up", useInvertedBackground = false,
title, }: FeatureCardTwelveProps) {
titleSegments, const items = features.map((feature) => ({
description, id: feature.id,
tag, label: feature.title,
tagIcon, detail: feature.description,
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);
return ( return (
<CardList <div className="feature-card-twelve">
title={title} <h2>{title}</h2>
titleSegments={titleSegments} <p>{description}</p>
description={description} <CardList items={items} />
tag={tag} </div>
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
animationType={animationType}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
cardClassName={cardClassName}
titleClassName={textBoxTitleClassName}
descriptionClassName={textBoxDescriptionClassName}
textBoxClassName={textBoxClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
ariaLabel={ariaLabel}
>
{features.map((feature) => (
<div
key={feature.id}
className={cls(
"relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row gap-6 p-6 md:p-15",
cardContentClassName
)}
>
<div className="relative z-1 w-full md:w-1/2 flex md:justify-start">
<h2 className={cls(
"text-5xl md:text-6xl font-medium leading-[1.1]",
shouldUseLightText && "text-background",
labelClassName
)}>
{feature.label}
</h2>
</div>
<div className="relative z-1 w-full h-px bg-foreground/20 md:hidden" />
<div className="relative z-1 w-full md:w-1/2 flex flex-col gap-4">
<h3 className={cls(
"text-xl md:text-3xl font-medium leading-tight",
shouldUseLightText ? "text-background" : "text-foreground",
cardTitleClassName
)}>
{feature.title}
</h3>
<div className={cls("flex flex-wrap items-center gap-2", itemsContainerClassName)}>
{feature.items.map((item, index) => (
<Fragment key={index}>
<span className={cls(
"text-base",
shouldUseLightText ? "text-background" : "text-foreground",
itemTextClassName
)}>
{item}
</span>
{index < feature.items.length - 1 && (
<span className="text-base text-accent">•</span>
)}
</Fragment>
))}
</div>
{feature.buttons && feature.buttons.length > 0 && (
<div className="mt-3 flex flex-wrap gap-4 max-md:justify-center">
{feature.buttons.slice(0, 2).map((button, index) => (
<Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
))}
</div>
)}
</div>
</div>
))}
</CardList>
); );
}; }
FeatureCardTwelve.displayName = "FeatureCardTwelve";
export default FeatureCardTwelve;

192
src/components/sections/feature/FeatureCardTwentyFive.tsx
View File

@@ -1,178 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import CardStack from "@/components/cardStack/CardStack";
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 { CardAnimationTypeWith3D, TitleSegment, ButtonConfig, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
interface MediaItem {
imageSrc?: string;
videoSrc?: string;
imageAlt?: string;
videoAriaLabel?: string;
}
type FeatureCard = {
title: string;
description: string;
icon: LucideIcon;
mediaItems: [MediaItem, MediaItem];
};
interface FeatureCardTwentyFiveProps { interface FeatureCardTwentyFiveProps {
features: FeatureCard[]; features?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationTypeWith3D; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
description: string;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
textboxLayout: TextboxLayout;
useInvertedBackground: InvertedBackground;
ariaLabel?: string;
className?: string;
containerClassName?: string;
cardClassName?: string;
mediaClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
cardTitleClassName?: string;
cardDescriptionClassName?: string;
cardIconClassName?: string;
cardIconWrapperClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
const FeatureCardTwentyFive = ({ export default function FeatureCardTwentyFive({
features, features = [],
carouselMode = "buttons", title = "Features", description = "Our features", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
uniformGridCustomHeightClasses, }: FeatureCardTwentyFiveProps) {
animationType, const items = features.map((feature) => ({
title, id: feature.id,
titleSegments, label: feature.title,
description, detail: feature.description,
tag, }));
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Feature section",
className = "",
containerClassName = "",
cardClassName = "",
mediaClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
cardTitleClassName = "",
cardDescriptionClassName = "",
cardIconClassName = "",
cardIconWrapperClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: FeatureCardTwentyFiveProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
return ( return (
<CardStack <div className="feature-card-twenty-five">
mode={carouselMode} <CardStack items={items} />
gridVariant="two-items-per-row" </div>
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
supports3DAnimation={true}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{features.map((feature, index) => {
const IconComponent = feature.icon;
return (
<div
key={`${feature.title}-${index}`}
className={cls("card flex flex-col gap-5 p-5 rounded-theme-capped min-h-0 h-full", cardClassName)}
>
<div className="relative z-1 flex flex-col gap-1">
<div className={cls("h-15 w-[3.75rem] mb-1 aspect-square rounded-theme primary-button flex items-center justify-center", cardIconWrapperClassName)}>
<IconComponent className={cls("h-4/10 w-4/10 text-primary-cta-text", cardIconClassName)} strokeWidth={1.5} />
</div>
<h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
{feature.title}
</h3>
<p className={cls("text-base leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
{feature.description}
</p>
</div>
<div className="mt-auto flex-1 min-h-0 grid grid-cols-2 gap-5 overflow-hidden">
{feature.mediaItems.map((item, mediaIndex) => (
<div key={mediaIndex} className="overflow-hidden rounded-theme-capped">
<MediaContent
imageSrc={item.imageSrc}
videoSrc={item.videoSrc}
imageAlt={item.imageAlt || "Feature image"}
videoAriaLabel={item.videoAriaLabel || "Feature video"}
imageClassName={cls("relative z-1 h-full w-full object-cover", mediaClassName)}
/>
</div>
))}
</div>
</div>
);
})}
</CardStack>
); );
}; }
FeatureCardTwentyFive.displayName = "FeatureCardTwentyFive";
export default FeatureCardTwentyFive;

242
src/components/sections/feature/FeatureCardTwentyFour.tsx
View File

@@ -1,199 +1,59 @@
"use client"; "use client";
import React from "react";
import CardList from "@/components/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 { interface FeatureCardTwentyFourProps {
features: FeatureItem[]; features?: any[];
animationType: CardAnimationType; title?: string;
title: string; description?: string;
titleSegments?: TitleSegment[]; animationType?: string;
description: string; useInvertedBackground?: boolean;
tag?: string; textboxLayout?: string;
tagIcon?: LucideIcon; tag?: string;
tagAnimation?: ButtonAnimationType; tagIcon?: any;
buttons?: ButtonConfig[]; tagAnimation?: string;
buttonAnimation?: ButtonAnimationType; buttons?: any[];
textboxLayout: TextboxLayout; buttonAnimation?: string;
useInvertedBackground: InvertedBackground; titleSegments?: any[];
ariaLabel?: string; ariaLabel?: string;
className?: string; className?: string;
containerClassName?: string; containerClassName?: string;
cardClassName?: string; cardClassName?: string;
textBoxTitleClassName?: string; textBoxTitleClassName?: string;
textBoxDescriptionClassName?: string; textBoxDescriptionClassName?: string;
textBoxClassName?: string; textBoxClassName?: string;
textBoxTagClassName?: string; textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string; textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string; textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string; textBoxButtonTextClassName?: string;
titleImageWrapperClassName?: string; titleImageWrapperClassName?: string;
titleImageClassName?: string; titleImageClassName?: string;
cardContentClassName?: string; cardContentClassName?: string;
cardTitleClassName?: string; cardTitleClassName?: string;
authorClassName?: string; authorClassName?: string;
cardDescriptionClassName?: string; cardDescriptionClassName?: string;
tagsContainerClassName?: string; tagsContainerClassName?: string;
tagClassName?: string; tagClassName?: string;
mediaWrapperClassName?: string; mediaWrapperClassName?: string;
mediaClassName?: string; mediaClassName?: string;
} }
const FeatureCardTwentyFour = ({ export default function FeatureCardTwentyFour({
features, features = [],
animationType, title = "Features", description = "Our features", animationType = "slide-up", useInvertedBackground = false,
title, textboxLayout = "default"}: FeatureCardTwentyFourProps) {
titleSegments, const items = features.map((feature) => ({
description, id: feature.id,
tag, label: feature.title,
tagIcon, detail: feature.description,
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 ( return (
<CardList <div className="feature-card-twenty-four">
title={title} <h2>{title}</h2>
titleSegments={titleSegments} <p>{description}</p>
description={description} <CardList items={items} />
tag={tag} </div>
tagIcon={tagIcon} );
tagAnimation={tagAnimation} }
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
animationType={animationType}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
cardClassName={cardClassName}
titleClassName={textBoxTitleClassName}
descriptionClassName={textBoxDescriptionClassName}
textBoxClassName={textBoxClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
ariaLabel={ariaLabel}
>
{features.map((feature) => (
<article
key={feature.id}
className={cls(
"relative z-1 w-full min-h-0 h-full flex flex-col md:grid md:grid-cols-10 gap-6 md:gap-10 cursor-pointer group p-6 md:p-10",
cardContentClassName
)}
onClick={feature.onFeatureClick}
role="article"
aria-label={feature.title}
>
<div className="relative z-1 w-full md:col-span-6 flex flex-col gap-3 md:gap-12">
<h3 className={cls(
"text-3xl md:text-5xl text-balance font-medium leading-tight line-clamp-3",
shouldUseLightText ? "text-background" : "text-foreground",
cardTitleClassName
)}>
{feature.title}{" "}
<span className={cls(
shouldUseLightText ? "text-background/50" : "text-foreground/50",
authorClassName
)}>
by {feature.author}
</span>
</h3>
<div className="mt-auto flex flex-col gap-4">
<div className={cls("flex flex-wrap gap-2", tagsContainerClassName)}>
{feature.tags.map((tagText, index) => (
<Tag key={index} text={tagText} useInvertedBackground={useInvertedBackground} className={tagClassName} />
))}
</div>
<p className={cls(
"text-base md:text-2xl text-balance leading-tight line-clamp-2",
shouldUseLightText ? "text-background" : "text-foreground",
cardDescriptionClassName
)}>
{feature.description}
</p>
</div>
</div>
<div className={cls(
"relative z-1 w-full md:col-span-4 aspect-square md:aspect-auto overflow-hidden rounded-theme-capped",
mediaWrapperClassName
)}>
<MediaContent
imageSrc={feature.imageSrc}
videoSrc={feature.videoSrc}
imageAlt={feature.imageAlt}
videoAriaLabel={feature.videoAriaLabel}
imageClassName={cls("w-full h-full object-cover", mediaClassName)}
/>
</div>
</article>
))}
</CardList>
);
};
FeatureCardTwentyFour.displayName = "FeatureCardTwentyFour";
export default FeatureCardTwentyFour;

235
src/components/sections/feature/FeatureCardTwentySeven.tsx
View File

@@ -1,219 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { useState } from "react";
import { Plus } from "lucide-react";
import CardStack from "@/components/cardStack/CardStack";
import MediaContent from "@/components/shared/MediaContent";
import { cls } from "@/lib/utils";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type FeatureCard = {
id: string;
title: string;
description: string;
imageSrc?: string;
videoSrc?: string;
imageAlt?: string;
};
interface FeatureCardTwentySevenItemProps {
title: string;
description: string;
imageSrc?: string;
videoSrc?: string;
imageAlt?: string;
className?: string;
titleClassName?: string;
descriptionClassName?: string;
}
const FeatureCardTwentySevenItem = ({
title,
description,
imageSrc,
videoSrc,
imageAlt = "",
className = "",
titleClassName = "",
descriptionClassName = "",
}: FeatureCardTwentySevenItemProps) => {
const [isFlipped, setIsFlipped] = useState(false);
return (
<div
className={cls(
"relative w-full h-full min-h-0 group [perspective:3000px] cursor-pointer",
className
)}
onClick={() => setIsFlipped(!isFlipped)}
>
<div
className={cls(
"relative w-full h-full transition-transform duration-500 [transform-style:preserve-3d]",
isFlipped && "[transform:rotateY(180deg)]"
)}
>
<div className="relative w-full h-full card rounded-theme-capped p-6 gap-6 flex flex-col [backface-visibility:hidden]">
<div className="flex justify-between items-start">
<h3 className={cls("text-2xl font-medium leading-tight", titleClassName)}>
{title}
</h3>
<div className="h-[calc(var(--text-2xl)*1.25)] w-[calc(var(--text-2xl)*1.25)] aspect-square rounded-theme primary-button flex items-center justify-center shrink-0">
<Plus className="h-1/2 w-1/2 text-primary-cta-text" />
</div>
</div>
<div className="w-full aspect-square md:aspect-[10/11] flex items-center justify-center rounded-theme-capped overflow-hidden">
<MediaContent
imageSrc={imageSrc}
videoSrc={videoSrc}
imageAlt={imageAlt}
imageClassName="w-full h-full object-cover"
/>
</div>
</div>
<div className="absolute! inset-0 w-full h-full card rounded-theme-capped p-6 gap-6 flex flex-col justify-between [backface-visibility:hidden] [transform:rotateY(180deg)]">
<div className="flex justify-between items-start">
<h3 className={cls("text-2xl font-medium leading-tight", titleClassName)}>
{title}
</h3>
<div className="h-[calc(var(--text-2xl)*1.25)] w-[calc(var(--text-2xl)*1.25)] aspect-square rounded-theme primary-button flex items-center justify-center shrink-0">
<Plus className="h-1/2 w-1/2 rotate-45 text-primary-cta-text" />
</div>
</div>
<div className="w-full">
<p className={cls("text-lg text-foreground/75 leading-tight", descriptionClassName)}>
{description}
</p>
</div>
</div>
</div>
</div>
);
};
interface FeatureCardTwentySevenProps { interface FeatureCardTwentySevenProps {
features: FeatureCard[]; features?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
gridVariant: GridVariant; description?: string;
uniformGridCustomHeightClasses?: string; animationType?: string;
animationType: CardAnimationType; textboxLayout?: string;
title: string; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
cardTitleClassName?: string;
cardDescriptionClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
const FeatureCardTwentySeven = ({ export default function FeatureCardTwentySeven({
features, features = [],
carouselMode = "buttons", title = "Features", description = "Our features", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
gridVariant, }: FeatureCardTwentySevenProps) {
uniformGridCustomHeightClasses = "min-h-none", const items = features.map((feature) => ({
animationType, id: feature.id,
title, label: feature.title,
titleSegments, detail: feature.description,
description, }));
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Feature section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
cardTitleClassName = "",
cardDescriptionClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: FeatureCardTwentySevenProps) => {
return ( return (
<CardStack <div className="feature-card-twenty-seven">
mode={carouselMode} <CardStack items={items} />
gridVariant={gridVariant} </div>
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{features.map((feature, index) => (
<FeatureCardTwentySevenItem
key={`${feature.id}-${index}`}
title={feature.title}
description={feature.description}
imageSrc={feature.imageSrc}
videoSrc={feature.videoSrc}
imageAlt={feature.imageAlt}
className={cardClassName}
titleClassName={cardTitleClassName}
descriptionClassName={cardDescriptionClassName}
/>
))}
</CardStack>
); );
}; }
FeatureCardTwentySeven.displayName = "FeatureCardTwentySeven";
export default FeatureCardTwentySeven;

259
src/components/sections/feature/FeatureCardTwentyThree.tsx
View File

@@ -1,241 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import { ArrowRight } from "lucide-react";
import CardStack from "@/components/cardStack/CardStack";
import MediaContent from "@/components/shared/MediaContent";
import Tag from "@/components/shared/Tag";
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 FeatureItem = {
id: string;
title: string;
tags: string[];
imageSrc?: string;
videoSrc?: string;
imageAlt?: string;
videoAriaLabel?: string;
onFeatureClick?: () => void;
};
interface FeatureCardTwentyThreeProps { interface FeatureCardTwentyThreeProps {
features: FeatureItem[]; features?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationType; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
description: string;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
textboxLayout: TextboxLayout;
useInvertedBackground: InvertedBackground;
ariaLabel?: string;
className?: string;
containerClassName?: string;
itemClassName?: string;
mediaWrapperClassName?: string;
mediaClassName?: string;
cardClassName?: string;
cardTitleClassName?: string;
tagsContainerClassName?: string;
tagClassName?: string;
arrowClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface FeatureCardItemProps { export default function FeatureCardTwentyThree({
feature: FeatureItem; features = [],
shouldUseLightText: boolean; title = "Features", description = "Our features", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
useInvertedBackground: InvertedBackground; }: FeatureCardTwentyThreeProps) {
itemClassName?: string; const items = features.map((feature) => ({
mediaWrapperClassName?: string; id: feature.id,
mediaClassName?: string; label: feature.title,
cardClassName?: string; detail: feature.description,
cardTitleClassName?: string; }));
tagsContainerClassName?: string;
tagClassName?: string; return (
arrowClassName?: string; <div className="feature-card-twenty-three">
<CardStack items={items} />
</div>
);
} }
const FeatureCardItem = memo(({
feature,
shouldUseLightText,
useInvertedBackground,
itemClassName = "",
mediaWrapperClassName = "",
mediaClassName = "",
cardClassName = "",
cardTitleClassName = "",
tagsContainerClassName = "",
tagClassName = "",
arrowClassName = "",
}: FeatureCardItemProps) => {
return (
<article
className={cls("relative h-full flex flex-col gap-6 cursor-pointer group", itemClassName)}
onClick={feature.onFeatureClick}
role="article"
aria-label={feature.title}
>
<div className={cls("relative w-full aspect-square overflow-hidden rounded-theme-capped", mediaWrapperClassName)}>
<MediaContent
imageSrc={feature.imageSrc}
videoSrc={feature.videoSrc}
imageAlt={feature.imageAlt || feature.title}
videoAriaLabel={feature.videoAriaLabel || feature.title}
imageClassName={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", mediaClassName)}
/>
</div>
<div className={cls("relative z-1 card rounded-theme-capped p-5 flex-1 flex flex-col justify-between gap-4", cardClassName)}>
<h3 className={cls(
"text-xl md:text-2xl font-medium leading-tight",
shouldUseLightText ? "text-background" : "text-foreground",
cardTitleClassName
)}>
{feature.title}
</h3>
<div className="flex items-center justify-between gap-4">
<div className={cls("flex items-center gap-2 flex-wrap", tagsContainerClassName)}>
{feature.tags.map((tag, index) => (
<Tag
key={index}
text={tag}
useInvertedBackground={useInvertedBackground}
className={tagClassName}
/>
))}
</div>
<ArrowRight
className={cls(
"h-[var(--text-base)] w-auto shrink-0 transition-transform duration-300 group-hover:-rotate-45",
shouldUseLightText ? "text-background" : "text-foreground",
arrowClassName
)}
strokeWidth={1.5}
/>
</div>
</div>
</article>
);
});
FeatureCardItem.displayName = "FeatureCardItem";
const FeatureCardTwentyThree = ({
features,
carouselMode = "buttons",
uniformGridCustomHeightClasses,
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Features section",
className = "",
containerClassName = "",
itemClassName = "",
mediaWrapperClassName = "",
mediaClassName = "",
cardClassName = "",
cardTitleClassName = "",
tagsContainerClassName = "",
tagClassName = "",
arrowClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: FeatureCardTwentyThreeProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
return (
<CardStack
mode={carouselMode}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
ariaLabel={ariaLabel}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
>
{features.map((feature) => (
<FeatureCardItem
key={feature.id}
feature={feature}
shouldUseLightText={shouldUseLightText}
useInvertedBackground={useInvertedBackground}
itemClassName={itemClassName}
mediaWrapperClassName={mediaWrapperClassName}
mediaClassName={mediaClassName}
cardClassName={cardClassName}
cardTitleClassName={cardTitleClassName}
tagsContainerClassName={tagsContainerClassName}
tagClassName={tagClassName}
arrowClassName={arrowClassName}
/>
))}
</CardStack>
);
};
FeatureCardTwentyThree.displayName = "FeatureCardTwentyThree";
export default FeatureCardTwentyThree;

169
src/components/sections/feature/featureBorderGlow/FeatureBorderGlow.tsx
View File

@@ -1,155 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import CardStack from "@/components/cardStack/CardStack";
import FeatureBorderGlowItem from "./FeatureBorderGlowItem";
import { 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";
interface FeatureCard {
icon: LucideIcon;
title: string;
description: string;
}
interface FeatureBorderGlowProps { interface FeatureBorderGlowProps {
features: FeatureCard[]; features?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationType; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
description: string;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
textboxLayout: TextboxLayout;
useInvertedBackground: InvertedBackground;
ariaLabel?: string;
className?: string;
containerClassName?: string;
cardClassName?: string;
iconContainerClassName?: string;
iconClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
cardTitleClassName?: string;
cardDescriptionClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
const FeatureBorderGlow = ({ export default function FeatureBorderGlow({
features, features = [],
carouselMode = "buttons", title = "Features", description = "Our features", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
uniformGridCustomHeightClasses = "min-h-75 2xl:min-h-85", }: FeatureBorderGlowProps) {
animationType, const items = features.map((feature) => ({
title, id: feature.id,
titleSegments, label: feature.title,
description, detail: feature.description,
tag, }));
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Feature section",
className = "",
containerClassName = "",
cardClassName = "",
iconContainerClassName = "",
iconClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
cardTitleClassName = "",
cardDescriptionClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: FeatureBorderGlowProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(
useInvertedBackground,
theme.cardStyle
);
return ( return (
<CardStack <div className="feature-border-glow">
mode={carouselMode} <CardStack items={items} />
gridVariant="uniform-all-items-equal" </div>
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{features.map((feature, index) => (
<FeatureBorderGlowItem
key={`${feature.title}-${index}`}
item={feature}
index={index}
className={cardClassName}
iconContainerClassName={iconContainerClassName}
iconClassName={iconClassName}
titleClassName={cardTitleClassName}
descriptionClassName={cardDescriptionClassName}
shouldUseLightText={shouldUseLightText}
/>
))}
</CardStack>
); );
}; }
FeatureBorderGlow.displayName = "FeatureBorderGlow";
export default FeatureBorderGlow;

194
src/components/sections/feature/featureCardThree/FeatureCardThree.tsx
View File

@@ -1,182 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import "./FeatureCardThree.css";
import { useRef, useCallback, useState } from "react";
import CardStack from "@/components/cardStack/CardStack";
import FeatureCardThreeItem from "./FeatureCardThreeItem";
import { useDynamicDimensions } from "./useDynamicDimensions";
import { useClickOutside } from "@/hooks/useClickOutside";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type FeatureCard = {
id: string;
title: string;
description: string;
imageSrc: string;
imageAlt?: string;
};
interface FeatureCardThreeProps { interface FeatureCardThreeProps {
features: FeatureCard[]; features?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
gridVariant: GridVariant; description?: string;
uniformGridCustomHeightClasses?: string; animationType?: string;
animationType: CardAnimationType; textboxLayout?: string;
title: string; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
cardTitleClassName?: string;
cardDescriptionClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
itemContentClassName?: string;
} }
const FeatureCardThree = ({ export default function FeatureCardThree({
features, features = [],
carouselMode = "buttons", title = "Features", description = "Our features", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
gridVariant, }: FeatureCardThreeProps) {
uniformGridCustomHeightClasses, const items = features.map((feature) => ({
animationType, id: feature.id,
title, label: feature.title,
titleSegments, detail: feature.description,
description, }));
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Feature section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
cardTitleClassName = "",
cardDescriptionClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
itemContentClassName = "",
}: FeatureCardThreeProps) => {
const featureCardThreeRefs = useRef<(HTMLDivElement | null)[]>([]);
const containerRef = useRef<HTMLDivElement>(null);
const [activeIndex, setActiveIndex] = useState<number | null>(null);
const setRef = useCallback(
(index: number) => (el: HTMLDivElement | null) => {
if (featureCardThreeRefs.current) {
featureCardThreeRefs.current[index] = el;
}
},
[]
);
// Check if device supports hover (desktop) or not (mobile/touch)
const isTouchDevice = typeof window !== "undefined" && window.matchMedia("(hover: none)").matches;
// Handle click outside to deactivate on mobile
useClickOutside(
containerRef,
() => setActiveIndex(null),
activeIndex !== null && isTouchDevice
);
const handleItemClick = useCallback((index: number) => {
if (typeof window !== "undefined" && !window.matchMedia("(hover: none)").matches) return;
setActiveIndex((prev) => (prev === index ? null : index));
}, []);
useDynamicDimensions([featureCardThreeRefs], {
titleSelector: ".feature-card-three-title-row .feature-card-three-title",
descriptionSelector: ".feature-card-three-description-wrapper .feature-card-three-description",
});
return ( return (
<div ref={containerRef}> <div className="feature-card-three">
<CardStack <CardStack items={items} />
mode={carouselMode}
gridVariant={gridVariant}
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{features.map((feature, index) => (
<FeatureCardThreeItem
key={`${feature.id}-${index}`}
ref={setRef(index)}
item={feature}
isActive={activeIndex === index}
onItemClick={() => handleItemClick(index)}
className={cardClassName}
itemContentClassName={itemContentClassName}
itemTitleClassName={cardTitleClassName}
itemDescriptionClassName={cardDescriptionClassName}
/>
))}
</CardStack>
</div> </div>
); );
}; }
FeatureCardThree.displayName = "FeatureCardThree";
export default FeatureCardThree;

179
src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx
View File

@@ -1,165 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import CardStack from "@/components/cardStack/CardStack";
import FeatureHoverPatternItem from "./FeatureHoverPatternItem";
import { 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";
interface FeatureCard {
icon: LucideIcon;
title: string;
description: string;
button?: ButtonConfig;
}
interface FeatureHoverPatternProps { interface FeatureHoverPatternProps {
features: FeatureCard[]; features?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationType; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
description: string;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
textboxLayout: TextboxLayout;
useInvertedBackground: InvertedBackground;
ariaLabel?: string;
className?: string;
containerClassName?: string;
cardClassName?: string;
iconContainerClassName?: string;
iconClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
cardTitleClassName?: string;
cardDescriptionClassName?: string;
gradientClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
cardButtonClassName?: string;
cardButtonTextClassName?: string;
} }
const FeatureHoverPattern = ({ export default function FeatureHoverPattern({
features, features = [],
carouselMode = "buttons", title = "Features", description = "Our features", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
uniformGridCustomHeightClasses = "min-h-85 2xl:min-h-95", }: FeatureHoverPatternProps) {
animationType, const items = features.map((feature) => ({
title, id: feature.id,
titleSegments, label: feature.title,
description, detail: feature.description,
tag, }));
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Feature section",
className = "",
containerClassName = "",
cardClassName = "",
iconContainerClassName = "",
iconClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
cardTitleClassName = "",
cardDescriptionClassName = "",
gradientClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
cardButtonClassName = "",
cardButtonTextClassName = "",
}: FeatureHoverPatternProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(
useInvertedBackground,
theme.cardStyle
);
return ( return (
<CardStack <div className="feature-hover-pattern">
mode={carouselMode} <CardStack items={items} />
gridVariant="uniform-all-items-equal" </div>
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{features.map((feature, index) => (
<FeatureHoverPatternItem
key={`${feature.title}-${index}`}
item={feature}
index={index}
className={cardClassName}
iconContainerClassName={iconContainerClassName}
iconClassName={iconClassName}
titleClassName={cardTitleClassName}
descriptionClassName={cardDescriptionClassName}
gradientClassName={gradientClassName}
shouldUseLightText={shouldUseLightText}
buttonClassName={cardButtonClassName}
buttonTextClassName={cardButtonTextClassName}
/>
))}
</CardStack>
); );
}; }
FeatureHoverPattern.displayName = "FeatureHoverPattern";
export default FeatureHoverPattern;

176
src/components/sections/hero/HeroBillboardCarousel.tsx
View File

@@ -1,155 +1,33 @@
"use client"; import React from "react";
import TextBox from "@/components/Textbox";
import MediaContent from "@/components/shared/MediaContent";
import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel"; 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;
}
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 { interface HeroBillboardCarouselProps {
title: string; title?: string;
description: string; description?: string;
background: HeroBillboardCarouselBackgroundProps; textboxLayout?: string;
tag?: string; animationType?: string;
tagIcon?: LucideIcon; className?: string;
tagAnimation?: ButtonAnimationType; carouselClassName?: string;
buttons?: ButtonConfig[]; containerClassName?: string;
buttonAnimation?: ButtonAnimationType; itemClassName?: string;
mediaItems: MediaItem[]; ariaLabel?: string;
ariaLabel?: string; mediaItems?: Array<{ imageSrc?: string; videoSrc?: string; imageAlt?: string }>;
className?: string;
containerClassName?: string;
textBoxClassName?: string;
titleClassName?: string;
descriptionClassName?: string;
tagClassName?: string;
buttonContainerClassName?: string;
buttonClassName?: string;
buttonTextClassName?: string;
mediaWrapperClassName?: string;
} }
const HeroBillboardCarousel = ({ export default function HeroBillboardCarousel({
title, title = "Hero", description = "Welcome", textboxLayout = "default", animationType = "slide-up", className = "", carouselClassName = "", containerClassName = "", itemClassName = "", ariaLabel = "Hero section", mediaItems = [],
description, }: HeroBillboardCarouselProps) {
background, const items = mediaItems.map((item) => ({
tag, imageSrc: item.imageSrc,
tagIcon, videoSrc: item.videoSrc,
tagAnimation, imageAlt: item.imageAlt,
buttons, }));
buttonAnimation,
mediaItems,
ariaLabel = "Hero section",
className = "",
containerClassName = "",
textBoxClassName = "",
titleClassName = "",
descriptionClassName = "",
tagClassName = "",
buttonContainerClassName = "",
buttonClassName = "",
buttonTextClassName = "",
mediaWrapperClassName = "",
}: HeroBillboardCarouselProps) => {
const renderCarouselItem = (item: MediaItem, index: number) => (
<div
key={index}
className="w-full aspect-[4/5] overflow-hidden rounded-theme-capped card p-2 shadow-lg"
>
<MediaContent
imageSrc={item.imageSrc}
videoSrc={item.videoSrc}
imageAlt={item.imageAlt || ""}
videoAriaLabel={item.videoAriaLabel || "Carousel media"}
imageClassName="z-1 h-full object-cover"
/>
</div>
);
return ( return (
<section <div className={`hero-billboard-carousel ${className}`} aria-label={ariaLabel}>
aria-label={ariaLabel} <h1>{title}</h1>
className={cls( <p>{description}</p>
"relative w-full py-hero-page-padding md:h-svh md:py-0", <AutoCarousel items={items} />
className </div>
)} );
> }
<HeroBackgrounds {...background} />
<div className={cls(
"mx-auto flex flex-col gap-14 md:gap-10 relative z-10",
"w-full md:w-content-width md:h-full md:items-center md:justify-center",
containerClassName
)}>
<TextBox
title={title}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
className={cls(
"flex flex-col gap-3 md:gap-3 w-content-width mx-auto",
textBoxClassName
)}
titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
buttonClassName={buttonClassName}
buttonTextClassName={buttonTextClassName}
center={true}
/>
<div className={cls("w-full -mx-[var(--content-padding)]", mediaWrapperClassName)}>
<AutoCarousel
title=""
description=""
textboxLayout="default"
animationType="none"
className="py-0"
carouselClassName="py-0"
containerClassName="!w-full"
itemClassName="!w-55 md:!w-carousel-item-4"
ariaLabel="Hero carousel"
showTextBox={false}
>
{mediaItems?.map(renderCarouselItem)}
</AutoCarousel>
</div>
</div>
</section>
);
};
HeroBillboardCarousel.displayName = "HeroBillboardCarousel";
export default HeroBillboardCarousel;

136
src/components/sections/hero/HeroBillboardDashboard.tsx
View File

@@ -1,132 +1,18 @@
"use client"; import React from "react";
import TextBox from "@/components/Textbox";
import Dashboard from "@/components/shared/Dashboard"; 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 { interface HeroBillboardDashboardProps {
title: string; title?: string;
description: 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 = ({ export default function HeroBillboardDashboard({
title, title = "Dashboard", description = "Welcome"}: HeroBillboardDashboardProps) {
description,
background,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
ariaLabel = "Hero section",
dashboard,
className = "",
containerClassName = "",
textBoxClassName = "",
titleClassName = "",
descriptionClassName = "",
tagClassName = "",
buttonContainerClassName = "",
buttonClassName = "",
buttonTextClassName = "",
dashboardClassName = "",
}: HeroBillboardDashboardProps) => {
return ( return (
<section <div className="hero-billboard-dashboard">
aria-label={ariaLabel} <h1>{title}</h1>
className={cls("relative w-full py-hero-page-padding", className)} <p>{description}</p>
> <Dashboard data={[]} />
<HeroBackgrounds {...background} /> </div>
<div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-15 relative z-10", containerClassName)}>
<TextBox
title={title}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
className={cls("flex flex-col gap-3 md:gap-3", textBoxClassName)}
titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
buttonClassName={buttonClassName}
buttonTextClassName={buttonTextClassName}
center={true}
/>
<Dashboard
{...dashboard}
className={cls(dashboard.className, dashboardClassName)}
/>
</div>
</section>
); );
}; }
HeroBillboardDashboard.displayName = "HeroBillboardDashboard";
export default HeroBillboardDashboard;

213
src/components/sections/hero/HeroBillboardGallery.tsx
View File

@@ -1,200 +1,33 @@
"use client"; import React from "react";
import TextBox from "@/components/Textbox";
import MediaContent from "@/components/shared/MediaContent";
import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel"; 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 { interface HeroBillboardGalleryProps {
title: string; title?: string;
description: string; description?: string;
background: HeroBillboardGalleryBackgroundProps; textboxLayout?: string;
tag?: string; animationType?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
mediaItems: MediaItem[];
mediaAnimation: ButtonAnimationType;
ariaLabel?: string;
className?: string; className?: string;
carouselClassName?: string;
containerClassName?: string; containerClassName?: string;
textBoxClassName?: string; itemClassName?: string;
titleClassName?: string; ariaLabel?: string;
descriptionClassName?: string; mediaItems?: Array<{ imageSrc?: string; videoSrc?: string; imageAlt?: string }>;
tagClassName?: string;
buttonContainerClassName?: string;
buttonClassName?: string;
buttonTextClassName?: string;
mediaWrapperClassName?: string;
imageClassName?: string;
} }
const HeroBillboardGallery = ({ export default function HeroBillboardGallery({
title, title = "Gallery", description = "Welcome", textboxLayout = "default", animationType = "slide-up", className = "", carouselClassName = "", containerClassName = "", itemClassName = "", ariaLabel = "Gallery section", mediaItems = [],
description, }: HeroBillboardGalleryProps) {
background, const items = mediaItems.map((item) => ({
tag, imageSrc: item.imageSrc,
tagIcon, videoSrc: item.videoSrc,
tagAnimation, imageAlt: item.imageAlt,
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) => (
<div
key={index}
className="w-full aspect-[4/5] overflow-hidden rounded-theme-capped card p-2 shadow-lg"
>
<MediaContent
imageSrc={item.imageSrc}
videoSrc={item.videoSrc}
imageAlt={item.imageAlt || ""}
videoAriaLabel={item.videoAriaLabel || "Gallery media"}
imageClassName="h-full object-cover"
/>
</div>
);
const itemCount = mediaItems?.length || 0;
const desktopWidthClass = itemCount === 3 ? "md:w-[24%]" : itemCount === 4 ? "md:w-[24%]" : "md:w-[23%]";
return ( return (
<section <div className={`hero-billboard-gallery ${className}`} aria-label={ariaLabel}>
aria-label={ariaLabel} <h1>{title}</h1>
className={cls( <p>{description}</p>
"relative w-full py-hero-page-padding md:h-svh md:py-0", <AutoCarousel items={items} />
className </div>
)}
>
<HeroBackgrounds {...background} />
<div className={cls(
"mx-auto flex flex-col gap-14 relative z-10",
"w-full md:w-content-width md:h-full md:items-center md:justify-center",
containerClassName
)}>
<TextBox
title={title}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
className={cls(
"flex flex-col gap-3 md:gap-3 w-content-width mx-auto",
textBoxClassName
)}
titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
buttonClassName={buttonClassName}
buttonTextClassName={buttonTextClassName}
center={true}
/>
<div className={cls("w-full", mediaWrapperClassName)}>
<div className="block md:hidden -mx-[var(--content-padding)]">
<AutoCarousel
title=""
description=""
textboxLayout="default"
animationType="none"
className="py-0"
carouselClassName="py-0"
containerClassName="!w-full"
itemClassName="!w-55"
ariaLabel="Hero gallery carousel"
showTextBox={false}
>
{mediaItems?.slice(0, 5).map(renderCarouselItem)}
</AutoCarousel>
</div>
<div ref={mediaContainerRef} className="hidden md:flex justify-center items-center pt-2">
<div className="relative flex items-center justify-center w-full">
{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 (
<div
key={index}
className={cls(
"relative aspect-[4/5] overflow-hidden rounded-theme-capped card p-2 shadow-lg transition-transform duration-500 ease-out hover:scale-110",
desktopWidthClass,
rotations[index],
zIndexes[index],
translates[index],
marginClass
)}
>
<MediaContent
imageSrc={item.imageSrc}
videoSrc={item.videoSrc}
imageAlt={item.imageAlt || ""}
videoAriaLabel={item.videoAriaLabel || "Gallery media"}
imageClassName={cls("z-1 h-full object-cover", imageClassName)}
/>
</div>
);
})}
</div>
</div>
</div>
</div>
</section>
); );
}; }
HeroBillboardGallery.displayName = "HeroBillboardGallery";
export default HeroBillboardGallery;

300
src/components/sections/metrics/MetricCardEleven.tsx
View File

@@ -1,274 +1,38 @@
"use client"; import React, { useRef } from "react";
import { memo } from "react";
import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
import MediaContent from "@/components/shared/MediaContent";
import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
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 MediaProps =
| {
imageSrc: string;
imageAlt?: string;
videoSrc?: never;
videoAriaLabel?: never;
}
| {
videoSrc: string;
videoAriaLabel?: string;
imageSrc?: never;
imageAlt?: never;
};
type Metric = MediaProps & {
id: string;
value: string;
title: string;
description: string;
};
interface MetricCardElevenProps { interface MetricCardElevenProps {
metrics: Metric[]; metrics?: any[];
animationType: CardAnimationType; title?: string;
title: string; description?: string;
titleSegments?: TitleSegment[]; animationType?: string;
description: string; useInvertedBackground?: boolean;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
textboxLayout: TextboxLayout;
useInvertedBackground: InvertedBackground;
ariaLabel?: string;
className?: string;
containerClassName?: string;
textBoxClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
gridClassName?: string;
cardClassName?: string;
valueClassName?: string;
cardTitleClassName?: string;
cardDescriptionClassName?: string;
mediaCardClassName?: string;
mediaClassName?: string;
} }
interface MetricTextCardProps { export default function MetricCardEleven({
metric: Metric; metrics = [],
shouldUseLightText: boolean; title = "Metrics", description = "Key metrics", animationType = "slide-up", useInvertedBackground = false,
cardClassName?: string; }: MetricCardElevenProps) {
valueClassName?: string; const state = useCardAnimation({
cardTitleClassName?: string; rotationX: 0,
cardDescriptionClassName?: string; rotationY: 0,
rotationZ: 0,
perspective: 1000,
duration: 0.3,
});
return (
<div className="metric-card-eleven">
<h2>{title}</h2>
<p>{description}</p>
<div className="metrics-container">
{metrics.map((metric) => (
<div key={metric.id} className="metric-item">
<h3>{metric.label}</h3>
<p>{metric.value}</p>
</div>
))}
</div>
</div>
);
} }
interface MetricMediaCardProps {
metric: Metric;
mediaCardClassName?: string;
mediaClassName?: string;
}
const MetricTextCard = memo(({
metric,
shouldUseLightText,
cardClassName = "",
valueClassName = "",
cardTitleClassName = "",
cardDescriptionClassName = "",
}: MetricTextCardProps) => {
return (
<div className={cls(
"relative w-full min-w-0 max-w-full h-full card text-foreground rounded-theme-capped flex flex-col justify-between p-6 md:p-8",
cardClassName
)}>
<h3 className={cls(
"text-5xl md:text-6xl font-medium leading-tight truncate",
shouldUseLightText ? "text-background" : "text-foreground",
valueClassName
)}>
{metric.value}
</h3>
<div className="w-full min-w-0 flex flex-col gap-2 mt-auto">
<p className={cls(
"text-xl md:text-2xl font-medium leading-tight truncate",
shouldUseLightText ? "text-background" : "text-foreground",
cardTitleClassName
)}>
{metric.title}
</p>
<div className="w-full h-px bg-accent" />
<p className={cls(
"text-base truncate leading-tight",
shouldUseLightText ? "text-background/75" : "text-foreground/75",
cardDescriptionClassName
)}>
{metric.description}
</p>
</div>
</div>
);
});
MetricTextCard.displayName = "MetricTextCard";
const MetricMediaCard = memo(({
metric,
mediaCardClassName = "",
mediaClassName = "",
}: MetricMediaCardProps) => {
return (
<div className={cls(
"relative h-full rounded-theme-capped overflow-hidden",
mediaCardClassName
)}>
<MediaContent
imageSrc={metric.imageSrc}
videoSrc={metric.videoSrc}
imageAlt={metric.imageAlt}
videoAriaLabel={metric.videoAriaLabel}
imageClassName={cls("w-full h-full object-cover", mediaClassName)}
/>
</div>
);
});
MetricMediaCard.displayName = "MetricMediaCard";
const MetricCardEleven = ({
metrics,
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Metrics section",
className = "",
containerClassName = "",
textBoxClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
gridClassName = "",
cardClassName = "",
valueClassName = "",
cardTitleClassName = "",
cardDescriptionClassName = "",
mediaCardClassName = "",
mediaClassName = "",
}: MetricCardElevenProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
// Inner grid for each metric item (text + media side by side)
const innerGridCols = "grid-cols-2";
const { itemRefs } = useCardAnimation({ animationType, itemCount: metrics.length });
return (
<section
aria-label={ariaLabel}
className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
>
<div className={cls("w-content-width mx-auto", containerClassName)}>
<CardStackTextBox
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
/>
<div className={cls(
"grid gap-4 mt-8 md:mt-12",
metrics.length === 1 ? "grid-cols-1" : "grid-cols-1 md:grid-cols-2",
gridClassName
)}>
{metrics.map((metric, index) => {
const isLastItem = index === metrics.length - 1;
const isOddTotal = metrics.length % 2 !== 0;
const isSingleItem = metrics.length === 1;
const shouldSpanFull = isSingleItem || (isLastItem && isOddTotal);
// On mobile, even items (2nd, 4th, 6th - index 1, 3, 5) have media first
const isEvenItem = (index + 1) % 2 === 0;
return (
<div
key={`${metric.id}-${index}`}
ref={(el) => { itemRefs.current[index] = el; }}
className={cls(
"grid gap-4",
innerGridCols,
shouldSpanFull && "md:col-span-2"
)}
>
<MetricTextCard
metric={metric}
shouldUseLightText={shouldUseLightText}
cardClassName={cls(
shouldSpanFull ? "aspect-square md:aspect-video" : "aspect-square",
isEvenItem && "order-2 md:order-1",
cardClassName
)}
valueClassName={valueClassName}
cardTitleClassName={cardTitleClassName}
cardDescriptionClassName={cardDescriptionClassName}
/>
<MetricMediaCard
metric={metric}
mediaCardClassName={cls(
shouldSpanFull ? "aspect-square md:aspect-video" : "aspect-square",
isEvenItem && "order-1 md:order-2",
mediaCardClassName
)}
mediaClassName={mediaClassName}
/>
</div>
);
})}
</div>
</div>
</section>
);
};
MetricCardEleven.displayName = "MetricCardEleven";
export default MetricCardEleven;

230
src/components/sections/metrics/MetricCardOne.tsx
View File

@@ -1,212 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type MetricCardOneGridVariant = Extract<GridVariant, "uniform-all-items-equal" | "bento-grid" | "bento-grid-inverted">;
type Metric = {
id: string;
value: string;
title: string;
description: string;
icon: LucideIcon;
};
interface MetricCardOneProps { interface MetricCardOneProps {
metrics: Metric[]; metrics?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
gridVariant: MetricCardOneGridVariant; description?: string;
uniformGridCustomHeightClasses?: string; animationType?: string;
animationType: CardAnimationTypeWith3D; textboxLayout?: string;
title: string; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
valueClassName?: string;
titleClassName?: string;
descriptionClassName?: string;
iconContainerClassName?: string;
iconClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface MetricCardItemProps { export default function MetricCardOne({
metric: Metric; metrics = [],
shouldUseLightText: boolean; title = "Metrics", description = "Key metrics", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
cardClassName?: string; }: MetricCardOneProps) {
valueClassName?: string; const items = metrics.map((metric) => ({
titleClassName?: string; id: metric.id,
descriptionClassName?: string; label: metric.label,
iconContainerClassName?: string; detail: metric.value,
iconClassName?: string; }));
return (
<div className="metric-card-one">
<CardStack items={items} />
</div>
);
} }
const MetricCardItem = memo(({
metric,
shouldUseLightText,
cardClassName = "",
valueClassName = "",
titleClassName = "",
descriptionClassName = "",
iconContainerClassName = "",
iconClassName = "",
}: MetricCardItemProps) => {
return (
<div className={cls("relative w-full min-w-0 h-full card text-foreground rounded-theme-capped p-6 flex flex-col items-center justify-center gap-0", cardClassName)}>
<h2
className={cls("relative z-1 w-full text-9xl font-foreground font-medium leading-[1.1] truncate text-center", valueClassName)}
style={{
backgroundImage: shouldUseLightText
? `linear-gradient(to bottom, var(--color-background) 0%, var(--color-background) 20%, transparent 72%, transparent 80%, transparent 100%)`
: `linear-gradient(to bottom, var(--color-foreground) 0%, var(--color-foreground) 20%, transparent 72%, transparent 80%, transparent 100%)`,
WebkitBackgroundClip: "text",
backgroundClip: "text",
WebkitTextFillColor: "transparent",
color: "transparent",
}}
>
{metric.value}
</h2>
<p className={cls("relative w-full z-1 mt-[calc(var(--text-4xl)*-0.75)] md:mt-[calc(var(--text-4xl)*-1.15)] text-4xl font-medium text-center truncate", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}>
{metric.title}
</p>
<p className={cls("relative line-clamp-2 z-1 max-w-9/10 md:max-w-7/10 text-base text-center leading-[1.1] mt-2", shouldUseLightText ? "text-background" : "text-foreground", descriptionClassName)}>
{metric.description}
</p>
<div className={cls("absolute! z-1 left-6 bottom-6 h-10 aspect-square primary-button rounded-theme flex items-center justify-center", iconContainerClassName)}>
<metric.icon className={cls("h-4/10 text-primary-cta-text", iconClassName)} />
</div>
</div>
);
});
MetricCardItem.displayName = "MetricCardItem";
const MetricCardOne = ({
metrics,
carouselMode = "buttons",
gridVariant,
uniformGridCustomHeightClasses,
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Metrics section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
valueClassName = "",
titleClassName = "",
descriptionClassName = "",
iconContainerClassName = "",
iconClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: MetricCardOneProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
const customUniformHeight = gridVariant === "uniform-all-items-equal"
? "min-h-70 2xl:min-h-80"
: uniformGridCustomHeightClasses;
return (
<CardStack
useInvertedBackground={useInvertedBackground}
mode={carouselMode}
gridVariant={gridVariant}
uniformGridCustomHeightClasses={customUniformHeight}
animationType={animationType}
supports3DAnimation={true}
carouselThreshold={4}
carouselItemClassName="w-carousel-item-3!"
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{metrics.map((metric, index) => (
<MetricCardItem
key={`${metric.id}-${index}`}
metric={metric}
shouldUseLightText={shouldUseLightText}
cardClassName={cardClassName}
valueClassName={valueClassName}
titleClassName={titleClassName}
descriptionClassName={descriptionClassName}
iconContainerClassName={iconContainerClassName}
iconClassName={iconClassName}
/>
))}
</CardStack>
);
};
MetricCardOne.displayName = "MetricCardOne";
export default MetricCardOne;

212
src/components/sections/metrics/MetricCardSeven.tsx
View File

@@ -1,194 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
import PricingFeatureList from "@/components/shared/PricingFeatureList";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type Metric = {
id: string;
value: string;
title: string;
items: string[];
};
interface MetricCardSevenProps { interface MetricCardSevenProps {
metrics: Metric[]; metrics?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationTypeWith3D; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
valueClassName?: string;
metricTitleClassName?: string;
featuresClassName?: string;
featureItemClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface MetricCardItemProps { export default function MetricCardSeven({
metric: Metric; metrics = [],
shouldUseLightText: boolean; title = "Metrics", description = "Key metrics", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
cardClassName?: string; }: MetricCardSevenProps) {
valueClassName?: string; const items = metrics.map((metric) => ({
metricTitleClassName?: string; id: metric.id,
featuresClassName?: string; label: metric.label,
featureItemClassName?: string; detail: metric.value,
}));
return (
<div className="metric-card-seven">
<CardStack items={items} />
</div>
);
} }
const MetricCardItem = memo(({
metric,
shouldUseLightText,
cardClassName = "",
valueClassName = "",
metricTitleClassName = "",
featuresClassName = "",
featureItemClassName = "",
}: MetricCardItemProps) => {
return (
<div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col justify-between gap-4", cardClassName)}>
<div className="flex flex-col gap-0" >
<h3 className={cls("relative z-1 text-9xl md:text-8xl font-medium truncate", shouldUseLightText ? "text-background" : "text-foreground", valueClassName)}>
{metric.value}
</h3>
<p className={cls("relative z-1 text-2xl md:text-xl truncate", shouldUseLightText ? "text-background" : "text-foreground", metricTitleClassName)}>
{metric.title}
</p>
</div>
<div className="pt-4 border-t border-t-accent" >
{metric.items.length > 0 && (
<PricingFeatureList
features={metric.items}
shouldUseLightText={shouldUseLightText}
className={cls("mt-1", featuresClassName)}
featureItemClassName={featureItemClassName}
/>
)}
</div>
</div>
);
});
MetricCardItem.displayName = "MetricCardItem";
const MetricCardSeven = ({
metrics,
carouselMode = "buttons",
uniformGridCustomHeightClasses,
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Metrics section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
valueClassName = "",
metricTitleClassName = "",
featuresClassName = "",
featureItemClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: MetricCardSevenProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
const customUniformHeight = uniformGridCustomHeightClasses || "min-h-70 2xl:min-h-80";
return (
<CardStack
useInvertedBackground={useInvertedBackground}
mode={carouselMode}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses={customUniformHeight}
animationType={animationType}
supports3DAnimation={true}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{metrics.map((metric, index) => (
<MetricCardItem
key={`${metric.id}-${index}`}
metric={metric}
shouldUseLightText={shouldUseLightText}
cardClassName={cardClassName}
valueClassName={valueClassName}
metricTitleClassName={metricTitleClassName}
featuresClassName={featuresClassName}
featureItemClassName={featureItemClassName}
/>
))}
</CardStack>
);
};
MetricCardSeven.displayName = "MetricCardSeven";
export default MetricCardSeven;

263
src/components/sections/metrics/MetricCardTen.tsx
View File

@@ -1,245 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
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, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
import type { CTAButtonVariant } from "@/components/button/types";
type Metric = {
id: string;
title: string;
subtitle: string;
category: string;
value: string;
buttons?: ButtonConfig[];
};
interface MetricCardTenProps { interface MetricCardTenProps {
metrics: Metric[]; metrics?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationType; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
cardTitleClassName?: string;
subtitleClassName?: string;
categoryClassName?: string;
valueClassName?: string;
footerClassName?: string;
cardButtonClassName?: string;
cardButtonTextClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface MetricCardItemProps { export default function MetricCardTen({
metric: Metric; metrics = [],
shouldUseLightText: boolean; title = "Metrics", description = "Key metrics", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
defaultButtonVariant: CTAButtonVariant; }: MetricCardTenProps) {
cardClassName?: string; const items = metrics.map((metric) => ({
cardTitleClassName?: string; id: metric.id,
subtitleClassName?: string; label: metric.label,
categoryClassName?: string; detail: metric.value,
valueClassName?: string; }));
footerClassName?: string;
cardButtonClassName?: string; return (
cardButtonTextClassName?: string; <div className="metric-card-ten">
<CardStack items={items} />
</div>
);
} }
const MetricCardItem = memo(({
metric,
shouldUseLightText,
defaultButtonVariant,
cardClassName = "",
cardTitleClassName = "",
subtitleClassName = "",
categoryClassName = "",
valueClassName = "",
footerClassName = "",
cardButtonClassName = "",
cardButtonTextClassName = "",
}: MetricCardItemProps) => {
return (
<div className={cls("relative h-full card text-foreground rounded-theme-capped flex flex-col", cardClassName)}>
<div className="flex flex-col gap-6 p-6 flex-1">
<div className="flex flex-col gap-1">
<h3 className={cls(
"text-2xl md:text-3xl font-medium leading-tight truncate",
shouldUseLightText ? "text-background" : "text-foreground",
cardTitleClassName
)}>
{metric.title}
</h3>
<p className={cls(
"text-base md:text-lg",
shouldUseLightText ? "text-background/75" : "text-foreground/75",
subtitleClassName
)}>
{metric.subtitle}
</p>
</div>
<div className="flex items-center justify-between gap-2 mt-auto">
<div className="flex items-center gap-2 min-w-0 flex-1">
<span className="h-[var(--text-base)] w-auto aspect-square rounded-theme shrink-0 bg-accent" />
<span className={cls(
"text-base truncate",
shouldUseLightText ? "text-background" : "text-foreground",
categoryClassName
)}>
{metric.category}
</span>
</div>
<span className={cls(
"text-xl md:text-2xl font-medium",
shouldUseLightText ? "text-background" : "text-foreground",
valueClassName
)}>
{metric.value}
</span>
</div>
</div>
{metric.buttons && metric.buttons.length > 0 && (
<div className={cls("bg-background-accent/50 p-4 rounded-b-theme-capped", footerClassName)}>
<div className="flex flex-wrap gap-4 max-md:justify-center">
{metric.buttons.slice(0, 2).map((button, index) => (
<Button key={`${button.text}-${index}`} {...getButtonProps(button, index, defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
))}
</div>
</div>
)}
</div>
);
});
MetricCardItem.displayName = "MetricCardItem";
const MetricCardTen = ({
metrics,
carouselMode = "buttons",
uniformGridCustomHeightClasses,
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Metrics section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
cardTitleClassName = "",
subtitleClassName = "",
categoryClassName = "",
valueClassName = "",
footerClassName = "",
cardButtonClassName = "",
cardButtonTextClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: MetricCardTenProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
return (
<CardStack
useInvertedBackground={useInvertedBackground}
mode={carouselMode}
gridVariant="uniform-all-items-equal"
carouselThreshold={4}
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
carouselItemClassName="!w-carousel-item-3"
>
{metrics.map((metric, index) => (
<MetricCardItem
key={`${metric.id}-${index}`}
metric={metric}
shouldUseLightText={shouldUseLightText}
defaultButtonVariant={theme.defaultButtonVariant}
cardClassName={cardClassName}
cardTitleClassName={cardTitleClassName}
subtitleClassName={subtitleClassName}
categoryClassName={categoryClassName}
valueClassName={valueClassName}
footerClassName={footerClassName}
cardButtonClassName={cardButtonClassName}
cardButtonTextClassName={cardButtonTextClassName}
/>
))}
</CardStack>
);
};
MetricCardTen.displayName = "MetricCardTen";
export default MetricCardTen;

204
src/components/sections/metrics/MetricCardThree.tsx
View File

@@ -1,186 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type Metric = {
id: string;
icon: LucideIcon;
title: string;
value: string;
};
interface MetricCardThreeProps { interface MetricCardThreeProps {
metrics: Metric[]; metrics?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationTypeWith3D; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
iconContainerClassName?: string;
iconClassName?: string;
metricTitleClassName?: string;
valueClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface MetricCardItemProps { export default function MetricCardThree({
metric: Metric; metrics = [],
shouldUseLightText: boolean; title = "Metrics", description = "Key metrics", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
cardClassName?: string; }: MetricCardThreeProps) {
iconContainerClassName?: string; const items = metrics.map((metric) => ({
iconClassName?: string; id: metric.id,
metricTitleClassName?: string; label: metric.label,
valueClassName?: string; detail: metric.value,
}));
return (
<div className="metric-card-three">
<CardStack items={items} />
</div>
);
} }
const MetricCardItem = memo(({
metric,
shouldUseLightText,
cardClassName = "",
iconContainerClassName = "",
iconClassName = "",
metricTitleClassName = "",
valueClassName = "",
}: MetricCardItemProps) => {
return (
<div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col items-center justify-center gap-3", cardClassName)}>
<div className="relative z-1 w-full flex items-center justify-center gap-2">
<div className={cls("h-8 primary-button aspect-square rounded-theme flex items-center justify-center", iconContainerClassName)}>
<metric.icon className={cls("h-4/10 text-primary-cta-text", iconClassName)} strokeWidth={1.5} />
</div>
<h3 className={cls("text-xl truncate", shouldUseLightText ? "text-background" : "text-foreground", metricTitleClassName)}>
{metric.title}
</h3>
</div>
<div className="relative z-1 w-full flex items-center justify-center">
<h4 className={cls("text-7xl font-medium truncate", shouldUseLightText ? "text-background" : "text-foreground", valueClassName)}>
{metric.value}
</h4>
</div>
</div>
);
});
MetricCardItem.displayName = "MetricCardItem";
const MetricCardThree = ({
metrics,
carouselMode = "buttons",
uniformGridCustomHeightClasses = "min-h-70 2xl:min-h-80",
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Metrics section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
iconContainerClassName = "",
iconClassName = "",
metricTitleClassName = "",
valueClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: MetricCardThreeProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
return (
<CardStack
useInvertedBackground={useInvertedBackground}
mode={carouselMode}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
supports3DAnimation={true}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{metrics.map((metric, index) => (
<MetricCardItem
key={`${metric.id}-${index}`}
metric={metric}
shouldUseLightText={shouldUseLightText}
cardClassName={cardClassName}
iconContainerClassName={iconContainerClassName}
iconClassName={iconClassName}
metricTitleClassName={metricTitleClassName}
valueClassName={valueClassName}
/>
))}
</CardStack>
);
};
MetricCardThree.displayName = "MetricCardThree";
export default MetricCardThree;

201
src/components/sections/metrics/MetricCardTwo.tsx
View File

@@ -1,183 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type MetricCardTwoGridVariant = Extract<GridVariant, "uniform-all-items-equal" | "bento-grid" | "bento-grid-inverted">;
type Metric = {
id: string;
value: string;
description: string;
};
interface MetricCardTwoProps { interface MetricCardTwoProps {
metrics: Metric[]; metrics?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
gridVariant: MetricCardTwoGridVariant; description?: string;
uniformGridCustomHeightClasses?: string; animationType?: string;
animationType: CardAnimationTypeWith3D; textboxLayout?: string;
title: string; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
valueClassName?: string;
metricDescriptionClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface MetricCardItemProps { export default function MetricCardTwo({
metric: Metric; metrics = [],
shouldUseLightText: boolean; title = "Metrics", description = "Key metrics", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
cardClassName?: string; }: MetricCardTwoProps) {
valueClassName?: string; const items = metrics.map((metric) => ({
metricDescriptionClassName?: string; id: metric.id,
label: metric.label,
detail: metric.value,
}));
return (
<div className="metric-card-two">
<CardStack items={items} />
</div>
);
} }
const MetricCardItem = memo(({
metric,
shouldUseLightText,
cardClassName = "",
valueClassName = "",
metricDescriptionClassName = "",
}: MetricCardItemProps) => {
return (
<div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col justify-between", cardClassName)}>
<h3 className={cls("relative z-1 text-9xl md:text-7xl font-medium truncate", shouldUseLightText ? "text-background" : "text-foreground", valueClassName)}>
{metric.value}
</h3>
<p className={cls("relative z-1 text-xl", shouldUseLightText ? "text-background" : "text-foreground", metricDescriptionClassName)}>
{metric.description}
</p>
</div>
);
});
MetricCardItem.displayName = "MetricCardItem";
const MetricCardTwo = ({
metrics,
carouselMode = "buttons",
gridVariant,
uniformGridCustomHeightClasses,
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Metrics section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
valueClassName = "",
metricDescriptionClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: MetricCardTwoProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
const customUniformHeight = gridVariant === "uniform-all-items-equal"
? "min-h-70 2xl:min-h-80"
: uniformGridCustomHeightClasses;
const customGridRows = (gridVariant === "bento-grid" || gridVariant === "bento-grid-inverted")
? "md:grid-rows-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]"
: undefined;
return (
<CardStack
useInvertedBackground={useInvertedBackground}
mode={carouselMode}
gridVariant={gridVariant}
uniformGridCustomHeightClasses={customUniformHeight}
gridRowsClassName={customGridRows}
animationType={animationType}
supports3DAnimation={true}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
carouselThreshold={4}
carouselItemClassName="w-carousel-item-3!"
>
{metrics.map((metric, index) => (
<MetricCardItem
key={`${metric.id}-${index}`}
metric={metric}
shouldUseLightText={shouldUseLightText}
cardClassName={cardClassName}
valueClassName={valueClassName}
metricDescriptionClassName={metricDescriptionClassName}
/>
))}
</CardStack>
);
};
MetricCardTwo.displayName = "MetricCardTwo";
export default MetricCardTwo;

294
src/components/sections/pricing/PricingCardEight.tsx
View File

@@ -1,248 +1,60 @@
"use client"; import React from "react";
import { memo } from "react"; interface PricingPlan {
import CardStack from "@/components/cardStack/CardStack"; id: string;
import Button from "@/components/button/Button"; badge: string;
import PricingBadge from "@/components/shared/PricingBadge"; price: string;
import PricingFeatureList from "@/components/shared/PricingFeatureList"; subtitle: string;
import { getButtonProps } from "@/lib/buttonUtils"; features: string[];
import { cls, shouldUseInvertedText } from "@/lib/utils"; buttons?: Array<{ text: string; href?: string; onClick?: () => void }>;
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;
badge: string;
badgeIcon?: LucideIcon;
price: string;
subtitle: string;
buttons: ButtonConfig[];
features: string[];
};
interface PricingCardEightProps { interface PricingCardEightProps {
plans: PricingPlan[]; plans: PricingPlan[];
carouselMode?: "auto" | "buttons"; title: string;
uniformGridCustomHeightClasses?: string; description: string;
animationType: CardAnimationType; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
badgeClassName?: string;
priceClassName?: string;
subtitleClassName?: string;
planButtonContainerClassName?: string;
planButtonClassName?: string;
featuresClassName?: string;
featureItemClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface PricingCardItemProps { export default function PricingCardEight({
plan: PricingPlan; plans,
shouldUseLightText: boolean; title,
cardClassName?: string; description,
badgeClassName?: string; animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
priceClassName?: string; }: PricingCardEightProps) {
subtitleClassName?: string; return (
planButtonContainerClassName?: string; <div className="pricing-card-eight-container">
planButtonClassName?: string; <div className="pricing-header">
featuresClassName?: string; <h2 className="pricing-title">{title}</h2>
featureItemClassName?: string; <p className="pricing-description">{description}</p>
} </div>
<div className="pricing-plans-grid">
const PricingCardItem = memo(({ {plans.map((plan) => (
plan, <div key={plan.id} className="pricing-plan-card">
shouldUseLightText, <div className="plan-badge">{plan.badge}</div>
cardClassName = "", <div className="plan-price">{plan.price}</div>
badgeClassName = "", <div className="plan-subtitle">{plan.subtitle}</div>
priceClassName = "", <div className="plan-features">
subtitleClassName = "", {plan.features.map((feature, index) => (
planButtonContainerClassName = "", <div key={index} className="plan-feature">
planButtonClassName = "", {feature}
featuresClassName = "",
featureItemClassName = "",
}: PricingCardItemProps) => {
const theme = useTheme();
const getButtonConfigProps = () => {
if (theme.defaultButtonVariant === "hover-bubble") {
return { bgClassName: "w-full" };
}
if (theme.defaultButtonVariant === "icon-arrow") {
return { className: "justify-between" };
}
return {};
};
return (
<div className={cls("relative h-full card text-foreground rounded-theme-capped p-3 flex flex-col gap-3", cardClassName)}>
<div className="relative secondary-button p-3 flex flex-col gap-3 rounded-theme-capped" >
<PricingBadge
badge={plan.badge}
badgeIcon={plan.badgeIcon}
className={badgeClassName}
/>
<div className="relative z-1 flex flex-col gap-1">
<div className="text-5xl font-medium text-foreground">
{plan.price}
</div>
<p className="text-base text-foreground">
{plan.subtitle}
</p>
</div> </div>
))}
{plan.buttons && plan.buttons.length > 0 && (
<div className={cls("relative z-1 w-full flex flex-col gap-3", planButtonContainerClassName)}>
{plan.buttons.slice(0, 2).map((button, index) => (
<Button
key={`${button.text}-${index}`}
{...getButtonProps(
{ ...button, props: { ...button.props, ...getButtonConfigProps() } },
index,
theme.defaultButtonVariant,
cls("w-full", planButtonClassName)
)}
/>
))}
</div>
)}
</div> </div>
{plan.buttons && (
<div className="p-3 pt-0" > <div className="plan-buttons">
<PricingFeatureList {plan.buttons.map((button, index) => (
features={plan.features} <button key={index} className="plan-button">
shouldUseLightText={shouldUseLightText} {button.text}
className={cls("mt-1", featuresClassName)} </button>
featureItemClassName={featureItemClassName} ))}
/> </div>
</div> )}
</div> </div>
); ))}
}); </div>
</div>
PricingCardItem.displayName = "PricingCardItem"; );
}
const PricingCardEight = ({
plans,
carouselMode = "buttons",
uniformGridCustomHeightClasses,
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Pricing section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
badgeClassName = "",
priceClassName = "",
subtitleClassName = "",
planButtonContainerClassName = "",
planButtonClassName = "",
featuresClassName = "",
featureItemClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: PricingCardEightProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
return (
<CardStack
useInvertedBackground={useInvertedBackground}
mode={carouselMode}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{plans.map((plan, index) => (
<PricingCardItem
key={`${plan.id}-${index}`}
plan={plan}
shouldUseLightText={shouldUseLightText}
cardClassName={cardClassName}
badgeClassName={badgeClassName}
priceClassName={priceClassName}
subtitleClassName={subtitleClassName}
planButtonContainerClassName={planButtonContainerClassName}
planButtonClassName={planButtonClassName}
featuresClassName={featuresClassName}
featureItemClassName={featureItemClassName}
/>
))}
</CardStack>
);
};
PricingCardEight.displayName = "PricingCardEight";
export default PricingCardEight;

266
src/components/sections/pricing/PricingCardFive.tsx
View File

@@ -1,231 +1,51 @@
"use client"; "use client";
import { Check } from "lucide-react"; import React from "react";
import CardList from "@/components/cardStack/CardList"; 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 { interface PricingCardFiveProps {
plans: PricingPlan[]; plans?: any[];
animationType: CardAnimationType; title?: string;
title: string; description?: string;
titleSegments?: TitleSegment[]; animationType?: string;
description: string; useInvertedBackground?: boolean;
tag?: string; textboxLayout?: string;
tagIcon?: LucideIcon; tag?: string;
tagAnimation?: ButtonAnimationType; tagIcon?: any;
buttons?: ButtonConfig[]; tagAnimation?: string;
buttonAnimation?: ButtonAnimationType; buttons?: any[];
textboxLayout: TextboxLayout; buttonAnimation?: string;
useInvertedBackground: InvertedBackground; titleSegments?: any[];
ariaLabel?: string; ariaLabel?: string;
className?: string; className?: string;
containerClassName?: string; containerClassName?: string;
cardClassName?: string; cardClassName?: string;
textBoxTitleClassName?: string; textBoxTitleClassName?: string;
textBoxDescriptionClassName?: string; textBoxDescriptionClassName?: string;
textBoxClassName?: string; textBoxClassName?: string;
textBoxTagClassName?: string; textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string; textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string; textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string; textBoxButtonTextClassName?: string;
titleImageWrapperClassName?: string; titleImageWrapperClassName?: string;
titleImageClassName?: 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;
} }
const PricingCardFive = ({ export default function PricingCardFive({
plans, plans = [],
animationType, title = "Pricing", description = "Our pricing plans", animationType = "slide-up", useInvertedBackground = false,
title, textboxLayout = "default"}: PricingCardFiveProps) {
titleSegments, const items = plans.map((plan) => ({
description, id: plan.id,
tag, label: plan.badge,
tagIcon, detail: plan.price,
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 = () => { return (
if (theme.defaultButtonVariant === "hover-bubble") { <div className="pricing-card-five">
return { bgClassName: "w-full" }; <h2>{title}</h2>
} <p>{description}</p>
if (theme.defaultButtonVariant === "icon-arrow") { <CardList items={items} />
return { className: "justify-between" }; </div>
} );
return {}; }
};
return (
<CardList
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
animationType={animationType}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
cardClassName={cardClassName}
titleClassName={textBoxTitleClassName}
descriptionClassName={textBoxDescriptionClassName}
textBoxClassName={textBoxClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
ariaLabel={ariaLabel}
>
{plans.map((plan) => (
<div
key={plan.id}
className={cls(
"relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row justify-between items-stretch gap-8 md:gap-15 p-6 md:p-15",
cardContentClassName
)}
>
<div className="w-full md:w-1/2 min-w-0 flex flex-col justify-between gap-6">
<div className="flex flex-col gap-4">
<Tag
text={plan.tag}
icon={plan.tagIcon}
className={planTagClassName}
/>
<div className="flex items-baseline gap-1 mt-1">
<span className={cls(
"text-5xl md:text-6xl font-medium",
shouldUseLightText ? "text-background" : "text-foreground",
planPriceClassName
)}>
{plan.price}
</span>
<span className={cls(
"text-xl",
shouldUseLightText ? "text-background" : "text-foreground",
planPeriodClassName
)}>
{plan.period}
</span>
</div>
<p className={cls(
"text-2xl leading-tight text-balance",
shouldUseLightText ? "text-background" : "text-foreground",
planDescriptionClassName
)}>
{plan.description}
</p>
</div>
<Button
{...getButtonProps(
{ ...plan.button, props: { ...plan.button.props, ...getButtonConfigProps() } },
0,
theme.defaultButtonVariant,
cls("w-full h-12", planButtonClassName),
planButtonTextClassName
)}
/>
</div>
<div className="relative z-1 w-full h-px bg-foreground/20 md:hidden" />
<div className="w-full md:w-1/2 min-w-0 flex flex-col gap-4">
<h3 className={cls(
"text-xl",
shouldUseLightText ? "text-background" : "text-foreground",
featuresTitleClassName
)}>
{plan.featuresTitle}
</h3>
<ul className={cls("flex flex-col gap-3", featuresListClassName)}>
{plan.features.map((feature, index) => (
<li key={index} className={cls("flex items-start gap-3", featureItemClassName)}>
<div className={cls("flex-shrink-0 h-6 w-auto aspect-square rounded-theme primary-button flex items-center justify-center", featureIconClassName)}>
<Check className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={2.5} />
</div>
<span className={cls(
"text-sm leading-[1.4]",
shouldUseLightText ? "text-background/80" : "text-foreground/80",
featureTextClassName
)}>
{feature}
</span>
</li>
))}
</ul>
</div>
</div>
))}
</CardList>
);
};
PricingCardFive.displayName = "PricingCardFive";
export default PricingCardFive;

251
src/components/sections/pricing/PricingCardNine.tsx
View File

@@ -1,216 +1,51 @@
"use client"; "use client";
import { Check } from "lucide-react"; import React from "react";
import CardList from "@/components/cardStack/CardList"; 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 { interface PricingCardNineProps {
plans: PricingPlan[]; plans?: any[];
animationType: CardAnimationType; title?: string;
title: string; description?: string;
titleSegments?: TitleSegment[]; animationType?: string;
description: string; useInvertedBackground?: boolean;
tag?: string; textboxLayout?: string;
tagIcon?: LucideIcon; tag?: string;
tagAnimation?: ButtonAnimationType; tagIcon?: any;
buttons?: ButtonConfig[]; tagAnimation?: string;
buttonAnimation?: ButtonAnimationType; buttons?: any[];
textboxLayout: TextboxLayout; buttonAnimation?: string;
useInvertedBackground: InvertedBackground; titleSegments?: any[];
ariaLabel?: string; ariaLabel?: string;
className?: string; className?: string;
containerClassName?: string; containerClassName?: string;
cardClassName?: string; cardClassName?: string;
textBoxTitleClassName?: string; textBoxTitleClassName?: string;
textBoxDescriptionClassName?: string; textBoxDescriptionClassName?: string;
textBoxClassName?: string; textBoxClassName?: string;
textBoxTagClassName?: string; textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string; textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string; textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string; textBoxButtonTextClassName?: string;
titleImageWrapperClassName?: string; titleImageWrapperClassName?: string;
titleImageClassName?: 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;
} }
const PricingCardNine = ({ export default function PricingCardNine({
plans, plans = [],
animationType, title = "Pricing", description = "Our pricing plans", animationType = "slide-up", useInvertedBackground = false,
title, textboxLayout = "default"}: PricingCardNineProps) {
titleSegments, const items = plans.map((plan) => ({
description, id: plan.id,
tag, label: plan.badge,
tagIcon, detail: plan.price,
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 = () => { return (
if (theme.defaultButtonVariant === "hover-bubble") { <div className="pricing-card-nine">
return { bgClassName: "w-full" }; <h2>{title}</h2>
} <p>{description}</p>
if (theme.defaultButtonVariant === "icon-arrow") { <CardList items={items} />
return { className: "justify-between" }; </div>
} );
return {}; }
};
return (
<CardList
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
animationType={animationType}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
cardClassName={cardClassName}
titleClassName={textBoxTitleClassName}
descriptionClassName={textBoxDescriptionClassName}
textBoxClassName={textBoxClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
ariaLabel={ariaLabel}
>
{plans.map((plan) => (
<div
key={plan.id}
className={cls(
"relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row items-stretch gap-6 md:gap-10 p-4 md:p-6",
cardContentClassName
)}
>
<div className={cls("w-full md:w-1/2 min-w-0 aspect-square md:aspect-[4/3]", planImageWrapperClassName)}>
<MediaContent
imageSrc={plan.imageSrc}
videoSrc={plan.videoSrc}
imageAlt={plan.imageAlt || plan.title}
videoAriaLabel={plan.videoAriaLabel || plan.title}
imageClassName={cls("w-full h-full object-cover rounded-theme", planImageClassName)}
/>
</div>
<div className="w-full md:w-1/2 min-w-0 flex flex-col justify-center gap-6 py-2">
<div className="flex flex-col gap-4">
<Tag
text={`${plan.price}${plan.period}`}
useInvertedBackground={useInvertedBackground}
className={planPriceClassName}
/>
<h3 className={cls(
"text-4xl md:text-5xl font-medium mb-1 truncate",
shouldUseLightText ? "text-background" : "text-foreground",
planTitleClassName
)}>
{plan.title}
</h3>
<ul className={cls("flex flex-col gap-3", featuresListClassName)}>
{plan.features.map((feature, index) => (
<li key={index} className={cls("flex items-start gap-3", featureItemClassName)}>
<div className={cls("flex-shrink-0 h-6 w-auto aspect-square rounded-theme primary-button flex items-center justify-center", featureIconClassName)}>
<Check className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={2.5} />
</div>
<span className={cls(
"text-sm leading-[1.4]",
shouldUseLightText ? "text-background/80" : "text-foreground/80",
featureTextClassName
)}>
{feature}
</span>
</li>
))}
</ul>
</div>
<Button
{...getButtonProps(
{ ...plan.button, props: { ...plan.button.props, ...getButtonConfigProps() } },
0,
theme.defaultButtonVariant,
planButtonClassName,
planButtonTextClassName
)}
/>
</div>
</div>
))}
</CardList>
);
};
PricingCardNine.displayName = "PricingCardNine";
export default PricingCardNine;

224
src/components/sections/pricing/PricingCardOne.tsx
View File

@@ -1,206 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
import PricingBadge from "@/components/shared/PricingBadge";
import PricingFeatureList from "@/components/shared/PricingFeatureList";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type PricingPlan = {
id: string;
badge: string;
badgeIcon?: LucideIcon;
price: string;
subtitle: string;
features: string[];
};
interface PricingCardOneProps { interface PricingCardOneProps {
plans: PricingPlan[]; plans?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationTypeWith3D; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
badgeClassName?: string;
priceClassName?: string;
subtitleClassName?: string;
featuresClassName?: string;
featureItemClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface PricingCardItemProps { export default function PricingCardOne({
plan: PricingPlan; plans = [],
shouldUseLightText: boolean; title = "Pricing", description = "Our plans", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
cardClassName?: string; }: PricingCardOneProps) {
badgeClassName?: string; const items = plans.map((plan) => ({
priceClassName?: string; id: plan.id,
subtitleClassName?: string; label: plan.price,
featuresClassName?: string; detail: plan.subtitle,
featureItemClassName?: string; }));
return (
<div className="pricing-card-one">
<CardStack items={items} />
</div>
);
} }
const PricingCardItem = memo(({
plan,
shouldUseLightText,
cardClassName = "",
badgeClassName = "",
priceClassName = "",
subtitleClassName = "",
featuresClassName = "",
featureItemClassName = "",
}: PricingCardItemProps) => {
return (
<div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col gap-6 md:gap-8", cardClassName)}>
<PricingBadge
badge={plan.badge}
badgeIcon={plan.badgeIcon}
className={badgeClassName}
/>
<div className="relative z-1 flex flex-col gap-1">
<div className={cls("text-5xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", priceClassName)}>
{plan.price}
</div>
<p className={cls("text-base", shouldUseLightText ? "text-background" : "text-foreground", subtitleClassName)}>
{plan.subtitle}
</p>
</div>
<div className="relative z-1 w-full h-px bg-foreground/20" />
<PricingFeatureList
features={plan.features}
shouldUseLightText={shouldUseLightText}
className={cls("mt-1", featuresClassName)}
featureItemClassName={featureItemClassName}
/>
</div>
);
});
PricingCardItem.displayName = "PricingCardItem";
const PricingCardOne = ({
plans,
carouselMode = "buttons",
uniformGridCustomHeightClasses,
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Pricing section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
badgeClassName = "",
priceClassName = "",
subtitleClassName = "",
featuresClassName = "",
featureItemClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: PricingCardOneProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
return (
<CardStack
useInvertedBackground={useInvertedBackground}
mode={carouselMode}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
supports3DAnimation={true}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{plans.map((plan, index) => (
<PricingCardItem
key={`${plan.id}-${index}`}
plan={plan}
shouldUseLightText={shouldUseLightText}
cardClassName={cardClassName}
badgeClassName={badgeClassName}
priceClassName={priceClassName}
subtitleClassName={subtitleClassName}
featuresClassName={featuresClassName}
featureItemClassName={featureItemClassName}
/>
))}
</CardStack>
);
};
PricingCardOne.displayName = "PricingCardOne";
export default PricingCardOne;

265
src/components/sections/pricing/PricingCardThree.tsx
View File

@@ -1,247 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
import PricingFeatureList from "@/components/shared/PricingFeatureList";
import Button from "@/components/button/Button";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import { getButtonProps } from "@/lib/buttonUtils";
import { cls, shouldUseInvertedText } from "@/lib/utils";
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;
badge?: string;
badgeIcon?: LucideIcon;
price: string;
name: string;
buttons: ButtonConfig[];
features: string[];
};
interface PricingCardThreeProps { interface PricingCardThreeProps {
plans: PricingPlan[]; plans?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationType; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
badgeClassName?: string;
priceClassName?: string;
nameClassName?: string;
planButtonContainerClassName?: string;
planButtonClassName?: string;
featuresClassName?: string;
featureItemClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface PricingCardItemProps { export default function PricingCardThree({
plan: PricingPlan; plans = [],
shouldUseLightText: boolean; title = "Pricing", description = "Our plans", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
cardClassName?: string; }: PricingCardThreeProps) {
badgeClassName?: string; const items = plans.map((plan) => ({
priceClassName?: string; id: plan.id,
nameClassName?: string; label: plan.price,
planButtonContainerClassName?: string; detail: plan.subtitle,
planButtonClassName?: string; }));
featuresClassName?: string;
featureItemClassName?: string; return (
<div className="pricing-card-three">
<CardStack items={items} />
</div>
);
} }
const PricingCardItem = memo(({
plan,
shouldUseLightText,
cardClassName = "",
badgeClassName = "",
priceClassName = "",
nameClassName = "",
planButtonContainerClassName = "",
planButtonClassName = "",
featuresClassName = "",
featureItemClassName = "",
}: PricingCardItemProps) => {
const theme = useTheme();
const getButtonConfigProps = () => {
if (theme.defaultButtonVariant === "hover-bubble") {
return { bgClassName: "w-full" };
}
if (theme.defaultButtonVariant === "icon-arrow") {
return { className: "justify-between" };
}
return {};
};
return (
<div className="relative h-full flex flex-col">
<div className={cls("px-4 py-3 primary-button rounded-t-theme-capped rounded-b-none text-base text-primary-cta-text whitespace-nowrap z-10 flex items-center justify-center gap-2", plan.badge ? "visible" : "invisible", badgeClassName)}>
{plan.badgeIcon && <plan.badgeIcon className="inline h-[1em] w-auto" />}
{plan.badge || "placeholder"}
</div>
<div className={cls("relative min-h-0 h-full card text-foreground p-6 flex flex-col justify-between items-center gap-6 md:gap-8", plan.badge ? "rounded-t-none rounded-b-theme-capped" : "rounded-theme-capped", cardClassName)}>
<div className="flex flex-col items-center gap-6 md:gap-8" >
<div className="relative z-1 flex flex-col gap-2 text-center">
<div className={cls("text-5xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", priceClassName)}>
{plan.price}
</div>
<h3 className={cls("text-xl font-medium leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", nameClassName)}>
{plan.name}
</h3>
</div>
<div className="relative z-1 w-full h-px bg-foreground/10" />
<PricingFeatureList
features={plan.features}
shouldUseLightText={shouldUseLightText}
className={featuresClassName}
featureItemClassName={featureItemClassName}
/>
</div>
{plan.buttons && plan.buttons.length > 0 && (
<div className={cls("relative z-1 w-full flex flex-col gap-3", planButtonContainerClassName)}>
{plan.buttons.slice(0, 2).map((button, index) => (
<Button
key={`${button.text}-${index}`}
{...getButtonProps(
{ ...button, props: { ...button.props, ...getButtonConfigProps() } },
index,
theme.defaultButtonVariant,
cls("w-full", planButtonClassName)
)}
/>
))}
</div>
)}
</div>
</div>
);
});
PricingCardItem.displayName = "PricingCardItem";
const PricingCardThree = ({
plans,
carouselMode = "buttons",
uniformGridCustomHeightClasses,
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Pricing section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
badgeClassName = "",
priceClassName = "",
nameClassName = "",
planButtonContainerClassName = "",
planButtonClassName = "",
featuresClassName = "",
featureItemClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: PricingCardThreeProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
return (
<CardStack
useInvertedBackground={useInvertedBackground}
mode={carouselMode}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{plans.map((plan, index) => (
<PricingCardItem
key={`${plan.id}-${index}`}
plan={plan}
shouldUseLightText={shouldUseLightText}
cardClassName={cardClassName}
badgeClassName={badgeClassName}
priceClassName={priceClassName}
nameClassName={nameClassName}
planButtonContainerClassName={planButtonContainerClassName}
planButtonClassName={planButtonClassName}
featuresClassName={featuresClassName}
featureItemClassName={featureItemClassName}
/>
))}
</CardStack>
);
};
PricingCardThree.displayName = "PricingCardThree";
export default PricingCardThree;

264
src/components/sections/pricing/PricingCardTwo.tsx
View File

@@ -1,246 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
import PricingBadge from "@/components/shared/PricingBadge";
import PricingFeatureList from "@/components/shared/PricingFeatureList";
import Button from "@/components/button/Button";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import { getButtonProps } from "@/lib/buttonUtils";
import { cls, shouldUseInvertedText } from "@/lib/utils";
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;
badge: string;
badgeIcon?: LucideIcon;
price: string;
subtitle: string;
buttons: ButtonConfig[];
features: string[];
};
interface PricingCardTwoProps { interface PricingCardTwoProps {
plans: PricingPlan[]; plans?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationType; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
badgeClassName?: string;
priceClassName?: string;
subtitleClassName?: string;
planButtonContainerClassName?: string;
planButtonClassName?: string;
featuresClassName?: string;
featureItemClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface PricingCardItemProps { export default function PricingCardTwo({
plan: PricingPlan; plans = [],
shouldUseLightText: boolean; title = "Pricing", description = "Our plans", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
cardClassName?: string; }: PricingCardTwoProps) {
badgeClassName?: string; const items = plans.map((plan) => ({
priceClassName?: string; id: plan.id,
subtitleClassName?: string; label: plan.price,
planButtonContainerClassName?: string; detail: plan.subtitle,
planButtonClassName?: string; }));
featuresClassName?: string;
featureItemClassName?: string; return (
<div className="pricing-card-two">
<CardStack items={items} />
</div>
);
} }
const PricingCardItem = memo(({
plan,
shouldUseLightText,
cardClassName = "",
badgeClassName = "",
priceClassName = "",
subtitleClassName = "",
planButtonContainerClassName = "",
planButtonClassName = "",
featuresClassName = "",
featureItemClassName = "",
}: PricingCardItemProps) => {
const theme = useTheme();
const getButtonConfigProps = () => {
if (theme.defaultButtonVariant === "hover-bubble") {
return { bgClassName: "w-full" };
}
if (theme.defaultButtonVariant === "icon-arrow") {
return { className: "justify-between" };
}
return {};
};
return (
<div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col items-center gap-6 md:gap-8", cardClassName)}>
<PricingBadge
badge={plan.badge}
badgeIcon={plan.badgeIcon}
className={badgeClassName}
/>
<div className="relative z-1 flex flex-col gap-1 text-center">
<div className={cls("text-5xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", priceClassName)}>
{plan.price}
</div>
<p className={cls("text-base", shouldUseLightText ? "text-background" : "text-foreground", subtitleClassName)}>
{plan.subtitle}
</p>
</div>
{plan.buttons && plan.buttons.length > 0 && (
<div className={cls("relative z-1 w-full flex flex-col gap-3", planButtonContainerClassName)}>
{plan.buttons.slice(0, 2).map((button, index) => (
<Button
key={`${button.text}-${index}`}
{...getButtonProps(
{ ...button, props: { ...button.props, ...getButtonConfigProps() } },
index,
theme.defaultButtonVariant,
cls("w-full", planButtonClassName)
)}
/>
))}
</div>
)}
<div className="relative z-1 w-full h-px bg-foreground/10 my-3" />
<PricingFeatureList
features={plan.features}
shouldUseLightText={shouldUseLightText}
className={featuresClassName}
featureItemClassName={featureItemClassName}
/>
</div>
);
});
PricingCardItem.displayName = "PricingCardItem";
const PricingCardTwo = ({
plans,
carouselMode = "buttons",
uniformGridCustomHeightClasses,
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Pricing section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
badgeClassName = "",
priceClassName = "",
subtitleClassName = "",
planButtonContainerClassName = "",
planButtonClassName = "",
featuresClassName = "",
featureItemClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: PricingCardTwoProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
return (
<CardStack
useInvertedBackground={useInvertedBackground}
mode={carouselMode}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{plans.map((plan, index) => (
<PricingCardItem
key={`${plan.id}-${index}`}
plan={plan}
shouldUseLightText={shouldUseLightText}
cardClassName={cardClassName}
badgeClassName={badgeClassName}
priceClassName={priceClassName}
subtitleClassName={subtitleClassName}
planButtonContainerClassName={planButtonContainerClassName}
planButtonClassName={planButtonClassName}
featuresClassName={featuresClassName}
featureItemClassName={featureItemClassName}
/>
))}
</CardStack>
);
};
PricingCardTwo.displayName = "PricingCardTwo";
export default PricingCardTwo;

257
src/components/sections/product/ProductCardFour.tsx
View File

@@ -1,238 +1,35 @@
"use client"; import React from "react";
import { Product } from "@/lib/api/product";
import { memo, useCallback } from "react";
import { useRouter } from "next/navigation";
import CardStack from "@/components/cardStack/CardStack";
import ProductImage from "@/components/shared/ProductImage";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import { useProducts } from "@/hooks/useProducts";
import type { Product } from "@/lib/api/product";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type ProductCardFourGridVariant = Exclude<GridVariant, "timeline" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row">;
type ProductCard = Product & {
variant: string;
};
interface ProductCardFourProps { interface ProductCardFourProps {
products?: ProductCard[]; products?: Product[];
carouselMode?: "auto" | "buttons"; title?: string;
gridVariant: ProductCardFourGridVariant; description?: string;
uniformGridCustomHeightClasses?: string;
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;
imageClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
cardNameClassName?: string;
cardPriceClassName?: string;
cardVariantClassName?: string;
actionButtonClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface ProductCardItemProps { export default function ProductCardFour({
product: ProductCard; products = [],
shouldUseLightText: boolean; title = "Products", description = "Our premium product collection"}: ProductCardFourProps) {
cardClassName?: string;
imageClassName?: string;
cardNameClassName?: string;
cardPriceClassName?: string;
cardVariantClassName?: string;
actionButtonClassName?: string;
}
const ProductCardItem = memo(({
product,
shouldUseLightText,
cardClassName = "",
imageClassName = "",
cardNameClassName = "",
cardPriceClassName = "",
cardVariantClassName = "",
actionButtonClassName = "",
}: ProductCardItemProps) => {
return ( return (
<article <div className="product-card-four-container">
className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)} <div className="product-header">
onClick={product.onProductClick} <h2 className="product-title">{title}</h2>
role="article" <p className="product-description">{description}</p>
aria-label={`${product.name} - ${product.price}`} </div>
> <div className="product-grid">
<ProductImage {products.map((product) => (
imageSrc={product.imageSrc} <div key={product.id} className="product-card">
imageAlt={product.imageAlt || product.name} {product.imageSrc && (
isFavorited={product.isFavorited} <img src={product.imageSrc} alt={product.name} />
onFavoriteToggle={product.onFavorite} )}
showActionButton={true} <h3 className="product-name">{product.name}</h3>
actionButtonAriaLabel={`View ${product.name} details`} <p className="product-price">${product.price}</p>
imageClassName={imageClassName} {product.description && (
actionButtonClassName={actionButtonClassName} <p className="product-desc">{product.description}</p>
/> )}
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between gap-4">
<div className="flex flex-col gap-0 flex-1 min-w-0">
<h3 className={cls("text-base font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
{product.name}
</h3>
<p className={cls("text-sm leading-[1.3]", shouldUseLightText ? "text-background/60" : "text-foreground/60", cardVariantClassName)}>
{product.variant}
</p>
</div> </div>
<p className={cls("text-base font-medium leading-[1.3] flex-shrink-0", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}> ))}
{product.price}
</p>
</div>
</div> </div>
</article> </div>
); );
}); }
ProductCardItem.displayName = "ProductCardItem";
const ProductCardFour = ({
products: productsProp,
carouselMode = "buttons",
gridVariant,
uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Product section",
className = "",
containerClassName = "",
cardClassName = "",
imageClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
cardNameClassName = "",
cardPriceClassName = "",
cardVariantClassName = "",
actionButtonClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: ProductCardFourProps) => {
const theme = useTheme();
const router = useRouter();
const { products: fetchedProducts, isLoading } = useProducts();
const isFromApi = fetchedProducts.length > 0;
const products = (isFromApi ? fetchedProducts : productsProp) as ProductCard[];
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
const handleProductClick = useCallback((product: ProductCard) => {
if (isFromApi) {
router.push(`/shop/${product.id}`);
} else {
product.onProductClick?.();
}
}, [isFromApi, router]);
if (isLoading && !productsProp) {
return (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading products...</p>
</div>
);
}
if (!products || products.length === 0) {
return null;
}
return (
<CardStack
mode={carouselMode}
gridVariant={gridVariant}
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{products?.map((product, index) => (
<ProductCardItem
key={`${product.id}-${index}`}
product={{ ...product, onProductClick: () => handleProductClick(product) }}
shouldUseLightText={shouldUseLightText}
cardClassName={cardClassName}
imageClassName={imageClassName}
cardNameClassName={cardNameClassName}
cardPriceClassName={cardPriceClassName}
cardVariantClassName={cardVariantClassName}
actionButtonClassName={actionButtonClassName}
/>
))}
</CardStack>
);
};
ProductCardFour.displayName = "ProductCardFour";
export default ProductCardFour;

251
src/components/sections/product/ProductCardOne.tsx
View File

@@ -1,226 +1,35 @@
"use client"; import React from "react";
import { Product } from "@/lib/api/product";
import { memo, useCallback } from "react";
import { useRouter } from "next/navigation";
import { ArrowUpRight } from "lucide-react";
import CardStack from "@/components/cardStack/CardStack";
import ProductImage from "@/components/shared/ProductImage";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import { useProducts } from "@/hooks/useProducts";
import type { Product } from "@/lib/api/product";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type ProductCardOneGridVariant = Exclude<GridVariant, "timeline">;
type ProductCard = Product;
interface ProductCardOneProps { interface ProductCardOneProps {
products?: ProductCard[]; products?: Product[];
carouselMode?: "auto" | "buttons"; title?: string;
gridVariant: ProductCardOneGridVariant; description?: string;
uniformGridCustomHeightClasses?: string;
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;
imageClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
cardNameClassName?: string;
cardPriceClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface ProductCardItemProps { export default function ProductCardOne({
product: ProductCard; products = [],
shouldUseLightText: boolean; title = "Products", description = "Our premium product collection"}: ProductCardOneProps) {
cardClassName?: string; return (
imageClassName?: string; <div className="product-card-one-container">
cardNameClassName?: string; <div className="product-header">
cardPriceClassName?: string; <h2 className="product-title">{title}</h2>
<p className="product-description">{description}</p>
</div>
<div className="product-grid">
{products.map((product) => (
<div key={product.id} className="product-card">
{product.imageSrc && (
<img src={product.imageSrc} alt={product.name} />
)}
<h3 className="product-name">{product.name}</h3>
<p className="product-price">${product.price}</p>
{product.description && (
<p className="product-desc">{product.description}</p>
)}
</div>
))}
</div>
</div>
);
} }
const ProductCardItem = memo(({
product,
shouldUseLightText,
cardClassName = "",
imageClassName = "",
cardNameClassName = "",
cardPriceClassName = "",
}: ProductCardItemProps) => {
return (
<article
className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
onClick={product.onProductClick}
role="article"
aria-label={`${product.name} - ${product.price}`}
>
<ProductImage
imageSrc={product.imageSrc}
imageAlt={product.imageAlt || product.name}
isFavorited={product.isFavorited}
onFavoriteToggle={product.onFavorite}
imageClassName={imageClassName}
/>
<div className="relative z-1 flex items-center justify-between gap-4">
<div className="flex-1 min-w-0">
<h3 className={cls("text-base font-medium truncate leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
{product.name}
</h3>
<p className={cls("text-2xl font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
{product.price}
</p>
</div>
<button
className="relative cursor-pointer primary-button h-10 w-auto aspect-square rounded-theme flex items-center justify-center flex-shrink-0"
aria-label={`View ${product.name} details`}
type="button"
>
<ArrowUpRight className="h-4/10 text-primary-cta-text transition-transform duration-300 group-hover:rotate-45" strokeWidth={1.5} />
</button>
</div>
</article>
);
});
ProductCardItem.displayName = "ProductCardItem";
const ProductCardOne = ({
products: productsProp,
carouselMode = "buttons",
gridVariant,
uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Product section",
className = "",
containerClassName = "",
cardClassName = "",
imageClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
cardNameClassName = "",
cardPriceClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: ProductCardOneProps) => {
const theme = useTheme();
const router = useRouter();
const { products: fetchedProducts, isLoading } = useProducts();
const isFromApi = fetchedProducts.length > 0;
const products = isFromApi ? fetchedProducts : productsProp;
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
const handleProductClick = useCallback((product: ProductCard) => {
if (isFromApi) {
router.push(`/shop/${product.id}`);
} else {
product.onProductClick?.();
}
}, [isFromApi, router]);
if (isLoading && !productsProp) {
return (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading products...</p>
</div>
);
}
if (!products || products.length === 0) {
return null;
}
return (
<CardStack
mode={carouselMode}
gridVariant={gridVariant}
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{products?.map((product, index) => (
<ProductCardItem
key={`${product.id}-${index}`}
product={{ ...product, onProductClick: () => handleProductClick(product) }}
shouldUseLightText={shouldUseLightText}
cardClassName={cardClassName}
imageClassName={imageClassName}
cardNameClassName={cardNameClassName}
cardPriceClassName={cardPriceClassName}
/>
))}
</CardStack>
);
};
ProductCardOne.displayName = "ProductCardOne";
export default ProductCardOne;

308
src/components/sections/product/ProductCardThree.tsx
View File

@@ -1,283 +1,35 @@
"use client"; import React from "react";
import { Product } from "@/lib/api/product";
import { memo, useState, useCallback } from "react";
import { useRouter } from "next/navigation";
import { Plus, Minus } from "lucide-react";
import CardStack from "@/components/cardStack/CardStack";
import ProductImage from "@/components/shared/ProductImage";
import QuantityButton from "@/components/shared/QuantityButton";
import Button from "@/components/button/Button";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import { useProducts } from "@/hooks/useProducts";
import { getButtonProps } from "@/lib/buttonUtils";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import type { Product } from "@/lib/api/product";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, ButtonAnimationType, GridVariant, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
import type { CTAButtonVariant, ButtonPropsForVariant } from "@/components/button/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type ProductCardThreeGridVariant = Exclude<GridVariant, "timeline" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row">;
type ProductCard = Product & {
onQuantityChange?: (quantity: number) => void;
initialQuantity?: number;
priceButtonProps?: Partial<ButtonPropsForVariant<CTAButtonVariant>>;
};
interface ProductCardThreeProps { interface ProductCardThreeProps {
products?: ProductCard[]; products?: Product[];
carouselMode?: "auto" | "buttons"; title?: string;
gridVariant: ProductCardThreeGridVariant; description?: string;
uniformGridCustomHeightClasses?: string;
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;
imageClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
cardNameClassName?: string;
quantityControlsClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
export default function ProductCardThree({
interface ProductCardItemProps { products = [],
product: ProductCard; title = "Products", description = "Our premium product collection"}: ProductCardThreeProps) {
shouldUseLightText: boolean; return (
isFromApi: boolean; <div className="product-card-three-container">
onBuyClick?: (productId: string, quantity: number) => void; <div className="product-header">
cardClassName?: string; <h2 className="product-title">{title}</h2>
imageClassName?: string; <p className="product-description">{description}</p>
cardNameClassName?: string; </div>
quantityControlsClassName?: string; <div className="product-grid">
{products.map((product) => (
<div key={product.id} className="product-card">
{product.imageSrc && (
<img src={product.imageSrc} alt={product.name} />
)}
<h3 className="product-name">{product.name}</h3>
<p className="product-price">${product.price}</p>
{product.description && (
<p className="product-desc">{product.description}</p>
)}
</div>
))}
</div>
</div>
);
} }
const ProductCardItem = memo(({
product,
shouldUseLightText,
isFromApi,
onBuyClick,
cardClassName = "",
imageClassName = "",
cardNameClassName = "",
quantityControlsClassName = "",
}: ProductCardItemProps) => {
const theme = useTheme();
const [quantity, setQuantity] = useState(product.initialQuantity || 1);
const handleIncrement = useCallback((e: React.MouseEvent) => {
e.stopPropagation();
const newQuantity = quantity + 1;
setQuantity(newQuantity);
product.onQuantityChange?.(newQuantity);
}, [quantity, product]);
const handleDecrement = useCallback((e: React.MouseEvent) => {
e.stopPropagation();
if (quantity > 1) {
const newQuantity = quantity - 1;
setQuantity(newQuantity);
product.onQuantityChange?.(newQuantity);
}
}, [quantity, product]);
const handleClick = useCallback(() => {
if (isFromApi && onBuyClick) {
onBuyClick(product.id, quantity);
} else {
product.onProductClick?.();
}
}, [isFromApi, onBuyClick, product, quantity]);
return (
<article
className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
onClick={handleClick}
role="article"
aria-label={`${product.name} - ${product.price}`}
>
<ProductImage
imageSrc={product.imageSrc}
imageAlt={product.imageAlt || product.name}
isFavorited={product.isFavorited}
onFavoriteToggle={product.onFavorite}
imageClassName={imageClassName}
/>
<div className="relative z-1 flex flex-col gap-3">
<h3 className={cls("text-xl font-medium leading-[1.15] truncate", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
{product.name}
</h3>
<div className="flex items-center justify-between gap-4">
<div className={cls("flex items-center gap-2", quantityControlsClassName)}>
<QuantityButton
onClick={handleDecrement}
ariaLabel="Decrease quantity"
Icon={Minus}
/>
<span className={cls("text-base font-medium min-w-[2ch] text-center leading-[1]", shouldUseLightText ? "text-background" : "text-foreground")}>
{quantity}
</span>
<QuantityButton
onClick={handleIncrement}
ariaLabel="Increase quantity"
Icon={Plus}
/>
</div>
<Button
{...getButtonProps(
{
text: product.price,
props: product.priceButtonProps,
},
0,
theme.defaultButtonVariant
)}
/>
</div>
</div>
</article>
);
});
ProductCardItem.displayName = "ProductCardItem";
const ProductCardThree = ({
products: productsProp,
carouselMode = "buttons",
gridVariant,
uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Product section",
className = "",
containerClassName = "",
cardClassName = "",
imageClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
cardNameClassName = "",
quantityControlsClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: ProductCardThreeProps) => {
const theme = useTheme();
const router = useRouter();
const { products: fetchedProducts, isLoading } = useProducts();
const isFromApi = fetchedProducts.length > 0;
const products = (isFromApi ? fetchedProducts : productsProp) as ProductCard[];
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
const handleProductClick = useCallback((product: ProductCard) => {
if (isFromApi) {
router.push(`/shop/${product.id}`);
} else {
product.onProductClick?.();
}
}, [isFromApi, router]);
if (isLoading && !productsProp) {
return (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading products...</p>
</div>
);
}
if (!products || products.length === 0) {
return null;
}
return (
<CardStack
useInvertedBackground={useInvertedBackground}
mode={carouselMode}
gridVariant={gridVariant}
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{products?.map((product, index) => (
<ProductCardItem
key={`${product.id}-${index}`}
product={{ ...product, onProductClick: () => handleProductClick(product) }}
shouldUseLightText={shouldUseLightText}
isFromApi={isFromApi}
cardClassName={cardClassName}
imageClassName={imageClassName}
cardNameClassName={cardNameClassName}
quantityControlsClassName={quantityControlsClassName}
/>
))}
</CardStack>
);
};
ProductCardThree.displayName = "ProductCardThree";
export default ProductCardThree;

292
src/components/sections/product/ProductCardTwo.tsx
View File

@@ -1,267 +1,35 @@
"use client"; import React from "react";
import { Product } from "@/lib/api/product";
import { memo, useCallback } from "react";
import { useRouter } from "next/navigation";
import { Star } from "lucide-react";
import CardStack from "@/components/cardStack/CardStack";
import ProductImage from "@/components/shared/ProductImage";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import { useProducts } from "@/hooks/useProducts";
import type { Product } from "@/lib/api/product";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type ProductCardTwoGridVariant = Exclude<GridVariant, "timeline" | "one-large-right-three-stacked-left" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row" | "one-large-left-three-stacked-right">;
type ProductCard = Product & {
brand: string;
rating: number;
reviewCount: string;
};
interface ProductCardTwoProps { interface ProductCardTwoProps {
products?: ProductCard[]; products?: Product[];
carouselMode?: "auto" | "buttons"; title?: string;
gridVariant: ProductCardTwoGridVariant; description?: string;
uniformGridCustomHeightClasses?: string;
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;
imageClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
cardBrandClassName?: string;
cardNameClassName?: string;
cardPriceClassName?: string;
cardRatingClassName?: string;
actionButtonClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface ProductCardItemProps { export default function ProductCardTwo({
product: ProductCard; products = [],
shouldUseLightText: boolean; title = "Products", description = "Our premium product collection"}: ProductCardTwoProps) {
cardClassName?: string; return (
imageClassName?: string; <div className="product-card-two-container">
cardBrandClassName?: string; <div className="product-header">
cardNameClassName?: string; <h2 className="product-title">{title}</h2>
cardPriceClassName?: string; <p className="product-description">{description}</p>
cardRatingClassName?: string; </div>
actionButtonClassName?: string; <div className="product-grid">
{products.map((product) => (
<div key={product.id} className="product-card">
{product.imageSrc && (
<img src={product.imageSrc} alt={product.name} />
)}
<h3 className="product-name">{product.name}</h3>
<p className="product-price">${product.price}</p>
{product.description && (
<p className="product-desc">{product.description}</p>
)}
</div>
))}
</div>
</div>
);
} }
const ProductCardItem = memo(({
product,
shouldUseLightText,
cardClassName = "",
imageClassName = "",
cardBrandClassName = "",
cardNameClassName = "",
cardPriceClassName = "",
cardRatingClassName = "",
actionButtonClassName = "",
}: ProductCardItemProps) => {
return (
<article
className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
onClick={product.onProductClick}
role="article"
aria-label={`${product.brand} ${product.name} - ${product.price}`}
>
<ProductImage
imageSrc={product.imageSrc}
imageAlt={product.imageAlt || `${product.brand} ${product.name}`}
isFavorited={product.isFavorited}
onFavoriteToggle={product.onFavorite}
showActionButton={true}
actionButtonAriaLabel={`View ${product.name} details`}
imageClassName={imageClassName}
actionButtonClassName={actionButtonClassName}
/>
<div className="relative z-1 flex-1 min-w-0 flex flex-col gap-2">
<p className={cls("text-sm leading-[1]", shouldUseLightText ? "text-background" : "text-foreground", cardBrandClassName)}>
{product.brand}
</p>
<div className="flex flex-col gap-1" >
<h3 className={cls("text-xl font-medium truncate leading-[1.15]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
{product.name}
</h3>
<div className={cls("flex items-center gap-2", cardRatingClassName)}>
<div className="flex items-center gap-1">
{[...Array(5)].map((_, i) => (
<Star
key={i}
className={cls(
"h-4 w-auto",
i < Math.floor(product.rating)
? "text-accent fill-accent"
: "text-accent opacity-20"
)}
strokeWidth={1.5}
/>
))}
</div>
<span className={cls("text-sm leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground")}>
({product.reviewCount})
</span>
</div>
</div>
<p className={cls("text-2xl font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
{product.price}
</p>
</div>
</article>
);
});
ProductCardItem.displayName = "ProductCardItem";
const ProductCardTwo = ({
products: productsProp,
carouselMode = "buttons",
gridVariant,
uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Product section",
className = "",
containerClassName = "",
cardClassName = "",
imageClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
cardBrandClassName = "",
cardNameClassName = "",
cardPriceClassName = "",
cardRatingClassName = "",
actionButtonClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: ProductCardTwoProps) => {
const theme = useTheme();
const router = useRouter();
const { products: fetchedProducts, isLoading } = useProducts();
const isFromApi = fetchedProducts.length > 0;
const products = (fetchedProducts.length > 0 ? fetchedProducts : productsProp) as ProductCard[];
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
const handleProductClick = useCallback((product: ProductCard) => {
if (isFromApi) {
router.push(`/shop/${product.id}`);
} else {
product.onProductClick?.();
}
}, [isFromApi, router]);
const customGridRows = (gridVariant === "bento-grid" || gridVariant === "bento-grid-inverted")
? "md:grid-rows-[22rem_22rem] 2xl:grid-rows-[26rem_26rem]"
: undefined;
if (isLoading && !productsProp) {
return (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading products...</p>
</div>
);
}
if (!products || products.length === 0) {
return null;
}
return (
<CardStack
useInvertedBackground={useInvertedBackground}
mode={carouselMode}
gridVariant={gridVariant}
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
gridRowsClassName={customGridRows}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{products?.map((product, index) => (
<ProductCardItem
key={`${product.id}-${index}`}
product={{ ...product, onProductClick: () => handleProductClick(product) }}
shouldUseLightText={shouldUseLightText}
cardClassName={cardClassName}
imageClassName={imageClassName}
cardBrandClassName={cardBrandClassName}
cardNameClassName={cardNameClassName}
cardPriceClassName={cardPriceClassName}
cardRatingClassName={cardRatingClassName}
actionButtonClassName={actionButtonClassName}
/>
))}
</CardStack>
);
};
ProductCardTwo.displayName = "ProductCardTwo";
export default ProductCardTwo;

231
src/components/sections/team/TeamCardEleven.tsx
View File

@@ -1,196 +1,51 @@
"use client"; "use client";
import React from "react";
import CardList from "@/components/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 { interface TeamCardElevenProps {
groups: TeamGroup[]; members?: any[];
animationType: CardAnimationType; title?: string;
title: string; description?: string;
titleSegments?: TitleSegment[]; animationType?: string;
description: string; useInvertedBackground?: boolean;
tag?: string; textboxLayout?: string;
tagIcon?: LucideIcon; tag?: string;
tagAnimation?: ButtonAnimationType; tagIcon?: any;
buttons?: ButtonConfig[]; tagAnimation?: string;
buttonAnimation?: ButtonAnimationType; buttons?: any[];
textboxLayout: TextboxLayout; buttonAnimation?: string;
useInvertedBackground: InvertedBackground; titleSegments?: any[];
ariaLabel?: string; ariaLabel?: string;
className?: string; className?: string;
containerClassName?: string; containerClassName?: string;
cardClassName?: string; cardClassName?: string;
textBoxClassName?: string; textBoxTitleClassName?: string;
textBoxTitleClassName?: string; textBoxDescriptionClassName?: string;
textBoxDescriptionClassName?: string; textBoxClassName?: string;
textBoxTagClassName?: string; textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string; textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string; textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string; textBoxButtonTextClassName?: string;
titleImageWrapperClassName?: string; titleImageWrapperClassName?: string;
titleImageClassName?: string; titleImageClassName?: string;
groupTitleClassName?: string;
memberClassName?: string;
memberImageClassName?: string;
memberTitleClassName?: string;
memberSubtitleClassName?: string;
memberDetailClassName?: string;
} }
const TeamCardEleven = ({ export default function TeamCardEleven({
groups, members = [],
animationType, title = "Team", description = "Our team members", animationType = "slide-up", useInvertedBackground = false,
title, textboxLayout = "default"}: TeamCardElevenProps) {
titleSegments, const items = members.map((member) => ({
description, id: member.id,
tag, label: member.name,
tagIcon, detail: member.role,
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) => ( return (
<div <div className="team-card-eleven">
key={member.id} <h2>{title}</h2>
className={cls( <p>{description}</p>
"flex flex-col md:flex-row md:items-center gap-4 py-6", <CardList items={items} />
memberClassName </div>
)} );
> }
<div className="flex items-center gap-4 flex-1">
<div className={cls(
"relative h-14 w-auto md:h-16 aspect-square rounded-theme overflow-hidden shrink-0",
memberImageClassName
)}>
<MediaContent
imageSrc={member.imageSrc}
imageAlt={member.imageAlt || member.title}
videoSrc={member.videoSrc}
videoAriaLabel={member.videoAriaLabel}
imageClassName="w-full h-full object-cover"
/>
</div>
<div className="flex flex-col">
<p className={cls(
"text-lg md:text-xl font-medium",
shouldUseLightText ? "text-background" : "text-foreground",
memberTitleClassName
)}>
{member.title}
</p>
<p className={cls(
"text-base",
shouldUseLightText ? "text-background/60" : "text-foreground/60",
memberSubtitleClassName
)}>
{member.subtitle}
</p>
</div>
</div>
<p className={cls(
"text-base md:text-lg font-medium",
shouldUseLightText ? "text-background" : "text-foreground",
memberDetailClassName
)}>
{member.detail}
</p>
</div>
);
return (
<CardList
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
animationType={animationType}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
cardClassName={cardClassName}
titleClassName={textBoxTitleClassName}
descriptionClassName={textBoxDescriptionClassName}
textBoxClassName={textBoxClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
titleImageWrapperClassName={titleImageWrapperClassName}
titleImageClassName={titleImageClassName}
ariaLabel={ariaLabel}
>
{groups.map((group) => (
<div key={group.id} className="p-6 md:p-8">
<h3 className={cls(
"text-2xl md:text-3xl font-medium mb-2",
shouldUseLightText ? "text-background" : "text-foreground",
groupTitleClassName
)}>
{group.groupTitle}
</h3>
<div className="flex flex-col divide-y divide-accent/40 border-y border-accent/40">
{group.members.map(renderMemberRow)}
</div>
</div>
))}
</CardList>
);
};
TeamCardEleven.displayName = "TeamCardEleven";
export default TeamCardEleven;

168
src/components/sections/team/TeamCardFive.tsx
View File

@@ -1,148 +1,38 @@
"use client"; import React, { useRef } from "react";
import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
import MediaContent from "@/components/shared/MediaContent";
import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
import { cls } from "@/lib/utils";
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;
name: string;
role: string;
imageSrc?: string;
videoSrc?: string;
imageAlt?: string;
videoAriaLabel?: string;
};
interface TeamCardFiveProps { interface TeamCardFiveProps {
team: TeamMember[]; members?: any[];
animationType: CardAnimationType; title?: string;
title: string; description?: string;
titleSegments?: TitleSegment[]; animationType?: string;
description: string; useInvertedBackground?: boolean;
textboxLayout: TextboxLayout;
useInvertedBackground: InvertedBackground;
tag?: string;
tagIcon?: LucideIcon;
tagAnimation?: ButtonAnimationType;
buttons?: ButtonConfig[];
buttonAnimation?: ButtonAnimationType;
ariaLabel?: string;
className?: string;
containerClassName?: string;
textBoxTitleClassName?: string;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
gridClassName?: string;
cardClassName?: string;
mediaWrapperClassName?: string;
mediaClassName?: string;
nameClassName?: string;
roleClassName?: string;
} }
const TeamCardFive = ({ export default function TeamCardFive({
team, members = [],
animationType, title = "Team", description = "Our team", animationType = "slide-up", useInvertedBackground = false,
title, }: TeamCardFiveProps) {
titleSegments, const state = useCardAnimation({
description, rotationX: 0,
textboxLayout, rotationY: 0,
useInvertedBackground, rotationZ: 0,
tag, perspective: 1000,
tagIcon, duration: 0.3,
tagAnimation, });
buttons,
buttonAnimation,
ariaLabel = "Team section",
className = "",
containerClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
gridClassName = "",
cardClassName = "",
mediaWrapperClassName = "",
mediaClassName = "",
nameClassName = "",
roleClassName = "",
}: TeamCardFiveProps) => {
const { itemRefs } = useCardAnimation({ animationType, itemCount: team.length });
return ( return (
<section <div className="team-card-five">
aria-label={ariaLabel} <h2>{title}</h2>
className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)} <p>{description}</p>
> <div className="members-container">
<div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}> {members.map((member) => (
<CardStackTextBox <div key={member.id} className="member-item">
title={title} <h3>{member.name}</h3>
titleSegments={titleSegments} <p>{member.role}</p>
description={description} </div>
tag={tag} ))}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
/>
<div className={cls("flex flex-row flex-wrap gap-y-6 md:gap-x-0 justify-center", gridClassName)}>
{team.map((member, index) => (
<div
key={member.id}
ref={(el) => { itemRefs.current[index] = el; }}
className={cls("relative flex flex-col items-center text-center w-[55%] md:w-[28%] -mx-[4%] md:-mx-[2%]", cardClassName)}
>
<div className={cls("relative card w-full aspect-square rounded-theme overflow-hidden p-2 mb-4", mediaWrapperClassName)}>
<MediaContent
imageSrc={member.imageSrc}
videoSrc={member.videoSrc}
imageAlt={member.imageAlt || member.name}
videoAriaLabel={member.videoAriaLabel || member.name}
imageClassName={cls("relative z-1 w-full h-full object-cover rounded-theme!", mediaClassName)}
/>
</div>
<h3 className={cls("relative z-1 w-8/10 text-2xl font-medium leading-tight truncate", useInvertedBackground ? "text-background" : "text-foreground", nameClassName)}>
{member.name}
</h3>
<p className={cls("relative z-1 w-8/10 text-base leading-tight mt-1 truncate", useInvertedBackground ? "text-background/75" : "text-foreground/75", roleClassName)}>
{member.role}
</p>
</div>
))}
</div>
</div> </div>
</section> </div>
); );
}; }
TeamCardFive.displayName = "TeamCardFive";
export default TeamCardFive;

212
src/components/sections/team/TeamCardOne.tsx
View File

@@ -1,194 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
import MediaContent from "@/components/shared/MediaContent";
import { cls } from "@/lib/utils";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type TeamCardOneGridVariant = Exclude<GridVariant, "timeline">;
type TeamMember = {
id: string;
name: string;
role: string;
imageSrc?: string;
videoSrc?: string;
imageAlt?: string;
videoAriaLabel?: string;
};
interface TeamCardOneProps { interface TeamCardOneProps {
members: TeamMember[]; members?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
gridVariant: TeamCardOneGridVariant; description?: string;
uniformGridCustomHeightClasses?: string; animationType?: string;
animationType: CardAnimationTypeWith3D; textboxLayout?: string;
title: string; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
imageClassName?: string;
overlayClassName?: string;
nameClassName?: string;
roleClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface TeamMemberCardProps { export default function TeamCardOne({
member: TeamMember; members = [],
cardClassName?: string; title = "Team", description = "Our team", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
imageClassName?: string; }: TeamCardOneProps) {
overlayClassName?: string; const items = members.map((member) => ({
nameClassName?: string; id: member.id,
roleClassName?: string; label: member.name,
detail: member.role,
}));
return (
<div className="team-card-one">
<CardStack items={items} />
</div>
);
} }
const TeamMemberCard = memo(({
member,
cardClassName = "",
imageClassName = "",
overlayClassName = "",
nameClassName = "",
roleClassName = "",
}: TeamMemberCardProps) => {
return (
<div className={cls("relative h-full w-full max-w-full card rounded-theme-capped p-4 aspect-[8/10]", cardClassName)}>
<div className="relative z-1 w-full h-full rounded-theme-capped overflow-hidden">
<MediaContent
imageSrc={member.imageSrc}
videoSrc={member.videoSrc}
imageAlt={member.imageAlt || member.name}
videoAriaLabel={member.videoAriaLabel || member.name}
imageClassName={cls("w-full h-full object-cover", imageClassName)}
/>
<div className={cls("!absolute z-1 bottom-4 left-4 right-4 card backdrop-blur-xs p-4 rounded-theme-capped flex items-center justify-between gap-3", overlayClassName)}>
<h3 className={cls("relative z-1 text-xl font-medium text-foreground leading-[1.1] truncate", nameClassName)}>
{member.name}
</h3>
<div className="min-w-0 max-w-full w-fit primary-button px-3 py-2 rounded-theme">
<p className={cls("text-sm text-primary-cta-text leading-[1.1] truncate", roleClassName)}>
{member.role}
</p>
</div>
</div>
</div>
</div>
);
});
TeamMemberCard.displayName = "TeamMemberCard";
const TeamCardOne = ({
members,
carouselMode = "buttons",
gridVariant,
uniformGridCustomHeightClasses = "min-h-none",
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Team section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
imageClassName = "",
overlayClassName = "",
nameClassName = "",
roleClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: TeamCardOneProps) => {
return (
<CardStack
mode={carouselMode}
gridVariant={gridVariant}
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
supports3DAnimation={true}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{members.map((member, index) => (
<TeamMemberCard
key={`${member.id}-${index}`}
member={member}
cardClassName={cardClassName}
imageClassName={imageClassName}
overlayClassName={overlayClassName}
nameClassName={nameClassName}
roleClassName={roleClassName}
/>
))}
</CardStack>
);
};
TeamCardOne.displayName = "TeamCardOne";
export default TeamCardOne;

218
src/components/sections/team/TeamCardSix.tsx
View File

@@ -1,200 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
import MediaContent from "@/components/shared/MediaContent";
import { cls } from "@/lib/utils";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type TeamCardSixGridVariant = Exclude<GridVariant, "timeline" | "two-columns-alternating-heights" | "four-items-2x2-equal-grid">;
const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
type TeamMember = {
id: string;
name: string;
role: string;
imageSrc?: string;
videoSrc?: string;
imageAlt?: string;
videoAriaLabel?: string;
};
interface TeamCardSixProps { interface TeamCardSixProps {
members: TeamMember[]; members?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
gridVariant: TeamCardSixGridVariant; description?: string;
uniformGridCustomHeightClasses?: string; animationType?: string;
animationType: CardAnimationTypeWith3D; textboxLayout?: string;
title: string; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
imageClassName?: string;
overlayClassName?: string;
nameClassName?: string;
roleClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface TeamMemberCardProps { export default function TeamCardSix({
member: TeamMember; members = [],
cardClassName?: string; title = "Team", description = "Our team", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
imageClassName?: string; }: TeamCardSixProps) {
overlayClassName?: string; const items = members.map((member) => ({
nameClassName?: string; id: member.id,
roleClassName?: string; label: member.name,
detail: member.role,
}));
return (
<div className="team-card-six">
<CardStack items={items} />
</div>
);
} }
const TeamMemberCard = memo(({
member,
cardClassName = "",
imageClassName = "",
overlayClassName = "",
nameClassName = "",
roleClassName = "",
}: TeamMemberCardProps) => {
return (
<div className={cls("relative h-full rounded-theme-capped", cardClassName)}>
<div className="relative w-full h-full rounded-theme-capped overflow-hidden">
<MediaContent
imageSrc={member.imageSrc}
videoSrc={member.videoSrc}
imageAlt={member.imageAlt || member.name}
videoAriaLabel={member.videoAriaLabel || member.name}
imageClassName={cls("w-full h-full object-cover", imageClassName)}
/>
<div className={cls("absolute z-10 bottom-4 left-4 right-4 p-4 flex flex-col gap-0 text-background", overlayClassName)}>
<h3 className={cls("text-2xl font-medium leading-tight truncate", nameClassName)}>
{member.name}
</h3>
<p className={cls("text-base leading-tight truncate", roleClassName)}>
{member.role}
</p>
</div>
<div
className="absolute z-0 backdrop-blur-xl opacity-100 w-full h-1/3 left-0 bottom-0"
style={{ maskImage: MASK_GRADIENT }}
aria-hidden="true"
/>
</div>
</div>
);
});
TeamMemberCard.displayName = "TeamMemberCard";
const TeamCardSix = ({
members,
carouselMode = "buttons",
gridVariant,
uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Team section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
imageClassName = "",
overlayClassName = "",
nameClassName = "",
roleClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: TeamCardSixProps) => {
return (
<CardStack
mode={carouselMode}
gridVariant={gridVariant}
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
supports3DAnimation={true}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{members.map((member, index) => (
<TeamMemberCard
key={`${member.id}-${index}`}
member={member}
cardClassName={cardClassName}
imageClassName={imageClassName}
overlayClassName={overlayClassName}
nameClassName={nameClassName}
roleClassName={roleClassName}
/>
))}
</CardStack>
);
};
TeamCardSix.displayName = "TeamCardSix";
export default TeamCardSix;

258
src/components/sections/team/TeamCardTwo.tsx
View File

@@ -1,240 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
import MediaContent from "@/components/shared/MediaContent";
import { cls } from "@/lib/utils";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
type TeamCardTwoGridVariant = Exclude<GridVariant, "timeline">;
type SocialLink = {
icon: LucideIcon;
url: string;
};
type TeamMember = {
id: string;
name: string;
role: string;
description: string;
imageSrc?: string;
videoSrc?: string;
imageAlt?: string;
videoAriaLabel?: string;
socialLinks?: SocialLink[];
};
interface TeamCardTwoProps { interface TeamCardTwoProps {
members: TeamMember[]; members?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
gridVariant: TeamCardTwoGridVariant; description?: string;
uniformGridCustomHeightClasses?: string; animationType?: string;
animationType: CardAnimationType; textboxLayout?: string;
title: string; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
imageClassName?: string;
overlayClassName?: string;
nameClassName?: string;
roleClassName?: string;
memberDescriptionClassName?: string;
socialLinksClassName?: string;
socialIconClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface TeamMemberCardProps { export default function TeamCardTwo({
member: TeamMember; members = [],
cardClassName?: string; title = "Team", description = "Our team", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
imageClassName?: string; }: TeamCardTwoProps) {
overlayClassName?: string; const items = members.map((member) => ({
nameClassName?: string; id: member.id,
roleClassName?: string; label: member.name,
memberDescriptionClassName?: string; detail: member.role,
socialLinksClassName?: string; }));
socialIconClassName?: string;
return (
<div className="team-card-two">
<CardStack items={items} />
</div>
);
} }
const TeamMemberCard = memo(({
member,
cardClassName = "",
imageClassName = "",
overlayClassName = "",
nameClassName = "",
roleClassName = "",
memberDescriptionClassName = "",
socialLinksClassName = "",
socialIconClassName = "",
}: TeamMemberCardProps) => {
return (
<div className={cls("relative h-full rounded-theme-capped overflow-hidden group", cardClassName)}>
<MediaContent
imageSrc={member.imageSrc}
videoSrc={member.videoSrc}
imageAlt={member.imageAlt || member.name}
videoAriaLabel={member.videoAriaLabel || member.name}
imageClassName={cls("relative z-1 w-full h-full object-cover", imageClassName)}
/>
<div className={cls("!absolute z-10 bottom-6 left-6 right-6 card backdrop-blur-xs p-6 flex flex-col gap-2 rounded-theme-capped", overlayClassName)}>
<div className="relative z-1 flex items-start justify-between">
<h3 className={cls("text-2xl font-medium text-foreground leading-[1.1] truncate", nameClassName)}>
{member.name}
</h3>
<div className="relative z-1 secondary-button px-3 py-1 rounded-theme" >
<p className={cls("text-xs text-secondary-cta-text leading-[1.1] truncate", roleClassName)}>
{member.role}
</p>
</div>
</div>
<p className={cls("relative z-1 text-base text-foreground leading-[1.1]", memberDescriptionClassName)}>
{member.description}
</p>
{member.socialLinks && member.socialLinks.length > 0 && (
<div className={cls("relative z-1 flex gap-3 mt-1", socialLinksClassName)}>
{member.socialLinks.map((link, index) => (
<a
key={index}
href={link.url}
target="_blank"
rel="noopener noreferrer"
className={cls("primary-button h-9 aspect-square w-auto flex items-center justify-center rounded-theme", socialIconClassName)}
>
<link.icon className="h-4/10 text-primary-cta-text" strokeWidth={1.5} />
</a>
))}
</div>
)}
</div>
</div>
);
});
TeamMemberCard.displayName = "TeamMemberCard";
const TeamCardTwo = ({
members,
carouselMode = "buttons",
gridVariant,
uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Team section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
imageClassName = "",
overlayClassName = "",
nameClassName = "",
roleClassName = "",
memberDescriptionClassName = "",
socialLinksClassName = "",
socialIconClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: TeamCardTwoProps) => {
const customGridRows = (gridVariant === "bento-grid" || gridVariant === "bento-grid-inverted")
? "md:grid-rows-[22rem_22rem] 2xl:grid-rows-[26rem_26rem]"
: undefined;
return (
<CardStack
mode={carouselMode}
gridVariant={gridVariant}
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
gridRowsClassName={customGridRows}
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{members.map((member, index) => (
<TeamMemberCard
key={`${member.id}-${index}`}
member={member}
cardClassName={cardClassName}
imageClassName={imageClassName}
overlayClassName={overlayClassName}
nameClassName={nameClassName}
roleClassName={roleClassName}
memberDescriptionClassName={memberDescriptionClassName}
socialLinksClassName={socialLinksClassName}
socialIconClassName={socialIconClassName}
/>
))}
</CardStack>
);
};
TeamCardTwo.displayName = "TeamCardTwo";
export default TeamCardTwo;

237
src/components/sections/testimonial/TestimonialCardOne.tsx
View File

@@ -1,219 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
import MediaContent from "@/components/shared/MediaContent";
import { cls } from "@/lib/utils";
import { Star } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, GridVariant, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
type Testimonial = {
id: string;
name: string;
role: string;
company: string;
rating: number;
imageSrc?: string;
videoSrc?: string;
imageAlt?: string;
videoAriaLabel?: string;
};
interface TestimonialCardOneProps { interface TestimonialCardOneProps {
testimonials: Testimonial[]; testimonials?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
gridVariant: GridVariant; animationType?: string;
animationType: CardAnimationTypeWith3D; textboxLayout?: string;
title: string; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
imageClassName?: string;
overlayClassName?: string;
ratingClassName?: string;
nameClassName?: string;
roleClassName?: string;
companyClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface TestimonialCardProps { export default function TestimonialCardOne({
testimonial: Testimonial; testimonials = [],
cardClassName?: string; title = "Testimonials", description = "What customers say", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
imageClassName?: string; }: TestimonialCardOneProps) {
overlayClassName?: string; const items = testimonials.map((testimonial) => ({
ratingClassName?: string; id: testimonial.id,
nameClassName?: string; label: testimonial.name,
roleClassName?: string; detail: testimonial.company,
companyClassName?: string; }));
return (
<div className="testimonial-card-one">
<CardStack items={items} />
</div>
);
} }
const TestimonialCard = memo(({
testimonial,
cardClassName = "",
imageClassName = "",
overlayClassName = "",
ratingClassName = "",
nameClassName = "",
roleClassName = "",
companyClassName = "",
}: TestimonialCardProps) => {
return (
<div className={cls("relative h-full rounded-theme-capped overflow-hidden group", cardClassName)}>
<MediaContent
imageSrc={testimonial.imageSrc}
videoSrc={testimonial.videoSrc}
imageAlt={testimonial.imageAlt || testimonial.name}
videoAriaLabel={testimonial.videoAriaLabel || testimonial.name}
imageClassName={cls("relative z-1 w-full h-full object-cover!", imageClassName)}
/>
<div className={cls("!absolute z-1 bottom-6 left-6 right-6 card backdrop-blur-xs p-6 flex flex-col gap-3 rounded-theme-capped", overlayClassName)}>
<div className={cls("relative z-1 flex gap-1", ratingClassName)}>
{Array.from({ length: 5 }).map((_, index) => (
<Star
key={index}
className={cls(
"h-5 w-auto text-accent",
index < testimonial.rating ? "fill-accent" : "fill-transparent"
)}
strokeWidth={1.5}
/>
))}
</div>
<h3 className={cls("relative z-1 text-2xl font-medium text-foreground leading-[1.1] mt-1", nameClassName)}>
{testimonial.name}
</h3>
<div className="relative z-1 flex flex-col gap-1">
<p className={cls("text-base text-foreground leading-[1.1]", roleClassName)}>
{testimonial.role}
</p>
<p className={cls("text-base text-foreground leading-[1.1]", companyClassName)}>
{testimonial.company}
</p>
</div>
</div>
</div>
);
});
TestimonialCard.displayName = "TestimonialCard";
const TestimonialCardOne = ({
testimonials,
carouselMode = "buttons",
uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
gridVariant,
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Testimonials section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
imageClassName = "",
overlayClassName = "",
ratingClassName = "",
nameClassName = "",
roleClassName = "",
companyClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: TestimonialCardOneProps) => {
return (
<CardStack
mode={carouselMode}
gridVariant={gridVariant}
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
supports3DAnimation={true}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{testimonials.map((testimonial, index) => (
<TestimonialCard
key={`${testimonial.id}-${index}`}
testimonial={testimonial}
cardClassName={cardClassName}
imageClassName={imageClassName}
overlayClassName={overlayClassName}
ratingClassName={ratingClassName}
nameClassName={nameClassName}
roleClassName={roleClassName}
companyClassName={companyClassName}
/>
))}
</CardStack>
);
};
TestimonialCardOne.displayName = "TestimonialCardOne";
export default TestimonialCardOne;

220
src/components/sections/testimonial/TestimonialCardSix.tsx
View File

@@ -1,203 +1,29 @@
"use client"; import React from "react";
import { memo } from "react";
import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel"; 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 { interface TestimonialCardSixProps {
testimonials: Testimonial[]; testimonials?: any[];
animationType: CardAnimationType; title?: string;
title: string; description?: string;
titleSegments?: TitleSegment[]; animationType?: string;
description: string; useInvertedBackground?: boolean;
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;
} }
interface TestimonialCardProps { export default function TestimonialCardSix({
testimonial: Testimonial; testimonials = [],
useInvertedBackground: boolean; title = "Testimonials", description = "What customers say", animationType = "slide-up", useInvertedBackground = false,
cardClassName?: string; }: TestimonialCardSixProps) {
testimonialClassName?: string; const items = testimonials.map((testimonial) => ({
imageWrapperClassName?: string; id: testimonial.id,
imageClassName?: string; label: testimonial.name,
iconClassName?: string; detail: testimonial.company,
nameClassName?: string; }));
handleClassName?: string;
return (
<div className="testimonial-card-six">
<h2>{title}</h2>
<p>{description}</p>
<AutoCarousel items={items} />
</div>
);
} }
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 (
<div className={cls("relative h-full card rounded-theme-capped p-6 min-h-0 flex flex-col gap-10", cardClassName)}>
<p className={cls("relative z-1 text-lg leading-tight line-clamp-2", shouldUseLightText ? "text-background" : "text-foreground", testimonialClassName)}>
{testimonial.testimonial}
</p>
<TestimonialAuthor
name={testimonial.name}
subtitle={testimonial.handle}
imageSrc={testimonial.imageSrc}
imageAlt={testimonial.imageAlt}
icon={Icon}
useInvertedBackground={useInvertedBackground}
imageWrapperClassName={imageWrapperClassName}
imageClassName={imageClassName}
iconClassName={iconClassName}
nameClassName={nameClassName}
subtitleClassName={handleClassName}
/>
</div>
);
});
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 (
<AutoCarousel
speed={speed}
uniformGridCustomHeightClasses="min-h-none"
animationType={animationType}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
showTextBox={true}
dualMarquee={true}
topMarqueeDirection={topMarqueeDirection}
carouselClassName={carouselClassName}
bottomCarouselClassName={bottomCarouselClassName}
containerClassName={containerClassName}
className={className}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
itemClassName="w-60! md:w-carousel-item-3! xl:w-carousel-item-4!"
>
{testimonials.map((testimonial, index) => (
<TestimonialCard
key={`${testimonial.id}-${index}`}
testimonial={testimonial}
useInvertedBackground={useInvertedBackground}
cardClassName={cardClassName}
testimonialClassName={testimonialClassName}
imageWrapperClassName={imageWrapperClassName}
imageClassName={imageClassName}
iconClassName={iconClassName}
nameClassName={nameClassName}
handleClassName={handleClassName}
/>
))}
</AutoCarousel>
);
};
TestimonialCardSix.displayName = "TestimonialCardSix";
export default TestimonialCardSix;

258
src/components/sections/testimonial/TestimonialCardSixteen.tsx
View File

@@ -1,240 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
import MediaContent from "@/components/shared/MediaContent";
import { cls } from "@/lib/utils";
import { Star } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
type Testimonial = {
id: string;
name: string;
role: string;
company: string;
rating: number;
imageSrc?: string;
videoSrc?: string;
imageAlt?: string;
videoAriaLabel?: string;
};
type KpiItem = {
value: string;
label: string;
};
interface TestimonialCardSixteenProps { interface TestimonialCardSixteenProps {
testimonials: Testimonial[]; testimonials?: any[];
kpiItems: [KpiItem, KpiItem, KpiItem]; title?: string;
carouselMode?: "auto" | "buttons"; description?: string;
uniformGridCustomHeightClasses?: string; animationType?: string;
animationType: CardAnimationTypeWith3D; textboxLayout?: string;
title: string; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
imageClassName?: string;
overlayClassName?: string;
ratingClassName?: string;
nameClassName?: string;
roleClassName?: string;
companyClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface TestimonialCardProps { export default function TestimonialCardSixteen({
testimonial: Testimonial; testimonials = [],
cardClassName?: string; title = "Testimonials", description = "What customers say", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
imageClassName?: string; }: TestimonialCardSixteenProps) {
overlayClassName?: string; const items = testimonials.map((testimonial) => ({
ratingClassName?: string; id: testimonial.id,
nameClassName?: string; label: testimonial.name,
roleClassName?: string; detail: testimonial.company,
companyClassName?: string; }));
return (
<div className="testimonial-card-sixteen">
<CardStack items={items} />
</div>
);
} }
const TestimonialCard = memo(({
testimonial,
cardClassName = "",
imageClassName = "",
overlayClassName = "",
ratingClassName = "",
nameClassName = "",
roleClassName = "",
companyClassName = "",
}: TestimonialCardProps) => {
return (
<div className={cls("relative h-full w-full max-w-full aspect-[8/10] rounded-theme-capped overflow-hidden group", cardClassName)}>
<MediaContent
imageSrc={testimonial.imageSrc}
videoSrc={testimonial.videoSrc}
imageAlt={testimonial.imageAlt || testimonial.name}
videoAriaLabel={testimonial.videoAriaLabel || testimonial.name}
imageClassName={cls("relative z-1 w-full h-full object-cover!", imageClassName)}
/>
<div className={cls("!absolute z-1 bottom-6 left-6 right-6 card backdrop-blur-xs p-6 flex flex-col gap-3 rounded-theme-capped", overlayClassName)}>
<div className={cls("relative z-1 flex gap-1", ratingClassName)}>
{Array.from({ length: 5 }).map((_, index) => (
<Star
key={index}
className={cls(
"h-5 w-auto text-accent",
index < testimonial.rating ? "fill-accent" : "fill-transparent"
)}
strokeWidth={1.5}
/>
))}
</div>
<h3 className={cls("relative z-1 text-2xl font-medium text-foreground leading-[1.1] mt-1", nameClassName)}>
{testimonial.name}
</h3>
<div className="relative z-1 flex flex-col gap-1">
<p className={cls("text-base text-foreground leading-[1.1]", roleClassName)}>
{testimonial.role}
</p>
<p className={cls("text-base text-foreground leading-[1.1]", companyClassName)}>
{testimonial.company}
</p>
</div>
</div>
</div>
);
});
TestimonialCard.displayName = "TestimonialCard";
const TestimonialCardSixteen = ({
testimonials,
kpiItems,
carouselMode = "buttons",
uniformGridCustomHeightClasses = "min-h-none",
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Testimonials section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
imageClassName = "",
overlayClassName = "",
ratingClassName = "",
nameClassName = "",
roleClassName = "",
companyClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: TestimonialCardSixteenProps) => {
const kpiSection = (
<div className="card rounded-theme-capped p-8 md:py-16 flex flex-col md:flex-row items-center justify-between">
{kpiItems.map((item, index) => (
<div key={index} className="flex flex-col md:flex-row items-center w-full md:flex-1">
<div className="flex flex-col items-center text-center flex-1 py-4 md:py-0 gap-1">
<h3 className="text-5xl font-medium text-foreground">{item.value}</h3>
<p className="text-base text-foreground">{item.label}</p>
</div>
{index < 2 && (
<div className="w-full h-px md:h-[calc(var(--text-5xl)+var(--text-base))] md:w-px bg-foreground" />
)}
</div>
))}
</div>
);
return (
<CardStack
mode={carouselMode}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
supports3DAnimation={true}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
bottomContent={kpiSection}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{testimonials.map((testimonial, index) => (
<TestimonialCard
key={`${testimonial.id}-${index}`}
testimonial={testimonial}
cardClassName={cardClassName}
imageClassName={imageClassName}
overlayClassName={overlayClassName}
ratingClassName={ratingClassName}
nameClassName={nameClassName}
roleClassName={roleClassName}
companyClassName={companyClassName}
/>
))}
</CardStack>
);
};
TestimonialCardSixteen.displayName = "TestimonialCardSixteen";
export default TestimonialCardSixteen;

258
src/components/sections/testimonial/TestimonialCardThirteen.tsx
View File

@@ -1,240 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import CardStack from "@/components/cardStack/CardStack";
import TestimonialAuthor from "@/components/shared/TestimonialAuthor";
import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import { Quote, Star } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
type Testimonial = {
id: string;
name: string;
handle: string;
testimonial: string;
rating: number;
imageSrc?: string;
imageAlt?: string;
icon?: LucideIcon;
};
interface TestimonialCardThirteenProps { interface TestimonialCardThirteenProps {
testimonials: Testimonial[]; testimonials?: any[];
showRating: boolean; title?: string;
carouselMode?: "auto" | "buttons"; description?: string;
uniformGridCustomHeightClasses?: string; animationType?: string;
animationType: CardAnimationTypeWith3D; textboxLayout?: string;
title: string; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
imageWrapperClassName?: string;
imageClassName?: string;
iconClassName?: string;
nameClassName?: string;
handleClassName?: string;
testimonialClassName?: string;
ratingClassName?: string;
contentWrapperClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface TestimonialCardProps { export default function TestimonialCardThirteen({
testimonial: Testimonial; testimonials = [],
showRating: boolean; title = "Testimonials", description = "What customers say", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
useInvertedBackground: boolean; }: TestimonialCardThirteenProps) {
cardClassName?: string; const items = testimonials.map((testimonial) => ({
imageWrapperClassName?: string; id: testimonial.id,
imageClassName?: string; label: testimonial.name,
iconClassName?: string; detail: testimonial.company,
nameClassName?: string; }));
handleClassName?: string;
testimonialClassName?: string; return (
ratingClassName?: string; <div className="testimonial-card-thirteen">
contentWrapperClassName?: string; <CardStack items={items} />
</div>
);
} }
const TestimonialCard = memo(({
testimonial,
showRating,
useInvertedBackground,
cardClassName = "",
imageWrapperClassName = "",
imageClassName = "",
iconClassName = "",
nameClassName = "",
handleClassName = "",
testimonialClassName = "",
ratingClassName = "",
contentWrapperClassName = "",
}: TestimonialCardProps) => {
const Icon = testimonial.icon || Quote;
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
return (
<div className={cls("relative h-full card rounded-theme-capped p-6 flex flex-col justify-between", showRating ? "gap-5" : "gap-16", cardClassName)}>
<div className={cls("flex flex-col gap-5 items-start", contentWrapperClassName)}>
{showRating ? (
<div className={cls("relative z-1 flex gap-1", ratingClassName)}>
{Array.from({ length: 5 }).map((_, index) => (
<Star
key={index}
className={cls(
"h-5 w-auto text-accent",
index < testimonial.rating ? "fill-accent" : "fill-transparent"
)}
strokeWidth={1.5}
/>
))}
</div>
) : (
<Quote className="h-6 w-auto text-accent fill-accent" strokeWidth={1.5} />
)}
<p className={cls("relative z-1 text-lg leading-[1.2]", shouldUseLightText ? "text-background" : "text-foreground", testimonialClassName)}>
{testimonial.testimonial}
</p>
</div>
<TestimonialAuthor
name={testimonial.name}
subtitle={testimonial.handle}
imageSrc={testimonial.imageSrc}
imageAlt={testimonial.imageAlt}
icon={Icon}
useInvertedBackground={useInvertedBackground}
imageWrapperClassName={imageWrapperClassName}
imageClassName={imageClassName}
iconClassName={iconClassName}
nameClassName={nameClassName}
subtitleClassName={handleClassName}
/>
</div>
);
});
TestimonialCard.displayName = "TestimonialCard";
const TestimonialCardThirteen = ({
testimonials,
showRating,
carouselMode = "buttons",
uniformGridCustomHeightClasses = "min-h-none",
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Testimonials section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
imageWrapperClassName = "",
imageClassName = "",
iconClassName = "",
nameClassName = "",
handleClassName = "",
testimonialClassName = "",
ratingClassName = "",
contentWrapperClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: TestimonialCardThirteenProps) => {
return (
<CardStack
mode={carouselMode}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
supports3DAnimation={true}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{testimonials.map((testimonial, index) => (
<TestimonialCard
key={`${testimonial.id}-${index}`}
testimonial={testimonial}
showRating={showRating}
useInvertedBackground={useInvertedBackground}
cardClassName={cardClassName}
imageWrapperClassName={imageWrapperClassName}
imageClassName={imageClassName}
iconClassName={iconClassName}
nameClassName={nameClassName}
handleClassName={handleClassName}
testimonialClassName={testimonialClassName}
ratingClassName={ratingClassName}
contentWrapperClassName={contentWrapperClassName}
/>
))}
</CardStack>
);
};
TestimonialCardThirteen.displayName = "TestimonialCardThirteen";
export default TestimonialCardThirteen;

234
src/components/sections/testimonial/TestimonialCardTwo.tsx
View File

@@ -1,216 +1,28 @@
"use client"; import React from "react";
import { CardStack } from "@/components/cardStack/CardStack";
import { memo } from "react";
import Image from "next/image";
import CardStack from "@/components/cardStack/CardStack";
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 { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
type Testimonial = {
id: string;
name: string;
role: string;
testimonial: string;
imageSrc?: string;
imageAlt?: string;
icon?: LucideIcon;
};
interface TestimonialCardTwoProps { interface TestimonialCardTwoProps {
testimonials: Testimonial[]; testimonials?: any[];
carouselMode?: "auto" | "buttons"; title?: string;
uniformGridCustomHeightClasses?: string; description?: string;
animationType: CardAnimationTypeWith3D; animationType?: string;
title: string; textboxLayout?: string;
titleSegments?: TitleSegment[]; useInvertedBackground?: boolean;
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;
textBoxTitleImageWrapperClassName?: string;
textBoxTitleImageClassName?: string;
textBoxDescriptionClassName?: string;
imageWrapperClassName?: string;
imageClassName?: string;
iconClassName?: string;
nameClassName?: string;
roleClassName?: string;
testimonialClassName?: string;
gridClassName?: string;
carouselClassName?: string;
controlsClassName?: string;
textBoxClassName?: string;
textBoxTagClassName?: string;
textBoxButtonContainerClassName?: string;
textBoxButtonClassName?: string;
textBoxButtonTextClassName?: string;
} }
interface TestimonialCardProps { export default function TestimonialCardTwo({
testimonial: Testimonial; testimonials = [],
shouldUseLightText: boolean; title = "Testimonials", description = "What customers say", animationType = "slide-up", textboxLayout = "default", useInvertedBackground = false,
cardClassName?: string; }: TestimonialCardTwoProps) {
imageWrapperClassName?: string; const items = testimonials.map((testimonial) => ({
imageClassName?: string; id: testimonial.id,
iconClassName?: string; label: testimonial.name,
nameClassName?: string; detail: testimonial.company,
roleClassName?: string; }));
testimonialClassName?: string;
return (
<div className="testimonial-card-two">
<CardStack items={items} />
</div>
);
} }
const TestimonialCard = memo(({
testimonial,
shouldUseLightText,
cardClassName = "",
imageWrapperClassName = "",
imageClassName = "",
iconClassName = "",
nameClassName = "",
roleClassName = "",
testimonialClassName = "",
}: TestimonialCardProps) => {
const Icon = testimonial.icon || Quote;
return (
<div className={cls("relative h-full card rounded-theme-capped p-6 flex flex-col gap-6", cardClassName)}>
<div className={cls("relative z-1 h-30 w-fit aspect-square rounded-theme flex items-center justify-center primary-button overflow-hidden", imageWrapperClassName)}>
{testimonial.imageSrc ? (
<Image
src={testimonial.imageSrc}
alt={testimonial.imageAlt || testimonial.name}
width={800}
height={800}
className={cls("absolute inset-0 h-full w-full object-cover", imageClassName)}
unoptimized={testimonial.imageSrc.startsWith('http') || testimonial.imageSrc.startsWith('//')}
aria-hidden={testimonial.imageAlt === ""}
/>
) : (
<Icon className={cls("h-1/2 w-1/2 text-primary-cta-text", iconClassName)} strokeWidth={1} />
)}
</div>
<div className="relative z-1 flex flex-col gap-1 mt-1">
<h3 className={cls("text-2xl font-medium leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", nameClassName)}>
{testimonial.name}
</h3>
<p className={cls("text-base leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", roleClassName)}>
{testimonial.role}
</p>
</div>
<p className={cls("relative z-1 text-lg leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", testimonialClassName)}>
{testimonial.testimonial}
</p>
</div>
);
});
TestimonialCard.displayName = "TestimonialCard";
const TestimonialCardTwo = ({
testimonials,
carouselMode = "buttons",
uniformGridCustomHeightClasses = "min-h-none",
animationType,
title,
titleSegments,
description,
tag,
tagIcon,
tagAnimation,
buttons,
buttonAnimation,
textboxLayout,
useInvertedBackground,
ariaLabel = "Testimonials section",
className = "",
containerClassName = "",
cardClassName = "",
textBoxTitleClassName = "",
textBoxTitleImageWrapperClassName = "",
textBoxTitleImageClassName = "",
textBoxDescriptionClassName = "",
imageWrapperClassName = "",
imageClassName = "",
iconClassName = "",
nameClassName = "",
roleClassName = "",
testimonialClassName = "",
gridClassName = "",
carouselClassName = "",
controlsClassName = "",
textBoxClassName = "",
textBoxTagClassName = "",
textBoxButtonContainerClassName = "",
textBoxButtonClassName = "",
textBoxButtonTextClassName = "",
}: TestimonialCardTwoProps) => {
const theme = useTheme();
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
return (
<CardStack
mode={carouselMode}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
animationType={animationType}
supports3DAnimation={true}
title={title}
titleSegments={titleSegments}
description={description}
tag={tag}
tagIcon={tagIcon}
tagAnimation={tagAnimation}
buttons={buttons}
buttonAnimation={buttonAnimation}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
className={className}
containerClassName={containerClassName}
gridClassName={gridClassName}
carouselClassName={carouselClassName}
controlsClassName={controlsClassName}
textBoxClassName={textBoxClassName}
titleClassName={textBoxTitleClassName}
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
titleImageClassName={textBoxTitleImageClassName}
descriptionClassName={textBoxDescriptionClassName}
tagClassName={textBoxTagClassName}
buttonContainerClassName={textBoxButtonContainerClassName}
buttonClassName={textBoxButtonClassName}
buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel}
>
{testimonials.map((testimonial, index) => (
<TestimonialCard
key={`${testimonial.id}-${index}`}
testimonial={testimonial}
shouldUseLightText={shouldUseLightText}
cardClassName={cardClassName}
imageWrapperClassName={imageWrapperClassName}
imageClassName={imageClassName}
iconClassName={iconClassName}
nameClassName={nameClassName}
roleClassName={roleClassName}
testimonialClassName={testimonialClassName}
/>
))}
</CardStack>
);
};
TestimonialCardTwo.displayName = "TestimonialCardTwo";
export default TestimonialCardTwo;

343
src/components/shared/Dashboard.tsx
View File

@@ -1,331 +1,26 @@
"use client"; import React from "react";
import React, { useState, useEffect } from "react";
import { cls } from "@/lib/utils";
import type { LucideIcon } from "lucide-react";
import {
ArrowUpRight,
Bell,
ChevronLeft,
ChevronRight,
Plus,
Search,
} from "lucide-react";
import AnimationContainer from "@/components/sections/AnimationContainer";
import Button from "@/components/button/Button";
import { getButtonProps } from "@/lib/buttonUtils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import MediaContent from "@/components/shared/MediaContent";
import BentoLineChart from "@/components/bento/BentoLineChart/BentoLineChart";
import type { ChartDataItem } from "@/components/bento/BentoLineChart/utils";
import type { ButtonConfig } from "@/types/button";
import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
import TextNumberCount from "@/components/text/TextNumberCount";
export interface DashboardSidebarItem {
icon: LucideIcon;
active?: boolean;
}
export interface DashboardStat {
title: string;
titleMobile?: string;
values: [number, number, number];
valuePrefix?: string;
valueSuffix?: string;
valueFormat?: Omit<Intl.NumberFormatOptions, "notation"> & {
notation?: Exclude<Intl.NumberFormatOptions["notation"], "scientific" | "engineering">;
};
description: string;
}
export interface DashboardListItem {
icon: LucideIcon;
title: string;
status: string;
}
interface DashboardProps { interface DashboardProps {
title: string; data?: any[];
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;
} }
const Dashboard = ({ export default function Dashboard({ data = [] }: DashboardProps) {
title, const state = useCardAnimation({
stats, rotationX: 0,
logoIcon: LogoIcon, rotationY: 0,
sidebarItems, rotationZ: 0,
searchPlaceholder = "Search", perspective: 1000,
buttons, duration: 0.3,
chartTitle = "Revenue Overview", });
chartData,
listItems,
listTitle = "Recent Transfers",
imageSrc,
videoSrc,
imageAlt = "",
videoAriaLabel = "Avatar video",
className = "",
containerClassName = "",
sidebarClassName = "",
statClassName = "",
chartClassName = "",
listClassName = "",
}: DashboardProps) => {
const theme = useTheme();
const [activeStatIndex, setActiveStatIndex] = useState(0);
const [statValueIndex, setStatValueIndex] = useState(0);
const { itemRefs: statRefs } = useCardAnimation({
animationType: "slide-up",
itemCount: 3,
});
useEffect(() => { return (
const interval = setInterval(() => { <div className="dashboard">
setStatValueIndex((prev) => (prev + 1) % 3); {data.map((item, index) => (
}, 3000); <div key={index} className="dashboard-item">
return () => clearInterval(interval); {item.label}
}, []);
const statCard = (stat: DashboardStat, index: number, withRef = false) => (
<div
key={index}
ref={withRef ? (el) => { statRefs.current[index] = el; } : undefined}
className={cls(
"group rounded-theme-capped p-5 flex flex-col justify-between h-40 md:h-50 card shadow",
statClassName
)}
>
<div className="flex items-center justify-between">
<p className="text-base font-medium text-foreground">
{stat.title}
</p>
<div className="h-6 w-auto aspect-square rounded-theme secondary-button flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
<ArrowUpRight className="h-1/2 w-1/2 text-secondary-cta-text transition-transform duration-300 group-hover:rotate-45" />
</div>
</div>
<div className="flex flex-col">
<TextNumberCount
value={stat.values[statValueIndex]}
prefix={stat.valuePrefix}
suffix={stat.valueSuffix}
format={stat.valueFormat}
className="text-xl md:text-3xl font-medium text-foreground truncate"
/>
<p className="text-sm text-foreground/75 truncate">
{stat.description}
</p>
</div>
</div> </div>
); ))}
</div>
return ( );
<div }
className={cls(
"w-content-width flex gap-5 p-5 rounded-theme-capped card shadow",
className
)}
>
<div
className={cls(
"hidden md:flex gap-5 shrink-0",
sidebarClassName
)}
>
<div className="flex flex-col items-center gap-10" >
<div className="relative secondary-button h-9 w-auto aspect-square rounded-theme flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
<LogoIcon className="h-4/10 w-4/10 text-secondary-cta-text" />
</div>
<nav className="flex flex-col gap-3">
{sidebarItems.map((item, index) => (
<div
key={index}
className={cls(
"h-9 w-auto aspect-square rounded-theme flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]",
item.active
? "primary-button"
: "secondary-button"
)}
>
<item.icon
className={cls(
"h-4/10 w-4/10",
item.active
? "text-primary-cta-text"
: "text-secondary-cta-text"
)}
strokeWidth={1.5}
/>
</div>
))}
</nav>
</div>
<div className="h-full w-px bg-background-accent" />
</div>
<div
className={cls(
"flex-1 flex flex-col gap-5 min-w-0",
containerClassName
)}
>
<div className="flex items-center justify-between h-9">
<div className="h-9 px-6 rounded-theme card shadow flex items-center gap-3 transition-all duration-300 hover:px-8">
<Search className="h-(--text-sm) w-auto text-foreground" />
<p className="text-sm text-foreground">
{searchPlaceholder}
</p>
</div>
<div className="flex items-center gap-5">
<div className="h-9 w-auto aspect-square secondary-button rounded-theme flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
<Bell className="h-4/10 w-4/10 text-secondary-cta-text" />
</div>
<div className="h-9 w-auto aspect-square rounded-theme overflow-hidden transition-transform duration-300 hover:-translate-y-[3px]">
<MediaContent
imageSrc={imageSrc}
videoSrc={videoSrc}
imageAlt={imageAlt}
videoAriaLabel={videoAriaLabel}
imageClassName="w-full h-full object-cover"
/>
</div>
</div>
</div>
<div className="w-full h-px bg-background-accent" />
<div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
<h2 className="text-xl md:text-3xl font-medium text-foreground">
{title}
</h2>
<div className="flex items-center gap-5">
{buttons.slice(0, 2).map((button, index) => (
<Button
key={`${button.text}-${index}`}
{...getButtonProps(
button,
index,
theme.defaultButtonVariant
)}
/>
))}
</div>
</div>
<div className="hidden md:grid grid-cols-3 gap-5">
{stats.map((stat, index) => statCard(stat, index, true))}
</div>
<div className="flex flex-col gap-3 md:hidden">
<AnimationContainer
key={activeStatIndex}
className="w-full"
animationType="fade"
>
{statCard(stats[activeStatIndex], activeStatIndex)}
</AnimationContainer>
<div className="w-full flex justify-end gap-3">
<button
onClick={() => setActiveStatIndex((prev) => (prev - 1 + 3) % 3)}
className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-transform duration-300 hover:-translate-y-[3px]"
type="button"
aria-label="Previous stat"
>
<ChevronLeft className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
</button>
<button
onClick={() => setActiveStatIndex((prev) => (prev + 1) % 3)}
className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-transform duration-300 hover:-translate-y-[3px]"
type="button"
aria-label="Next stat"
>
<ChevronRight className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
</button>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
<div
className={cls(
"group/chart rounded-theme-capped p-3 md:p-4 flex flex-col h-80 card shadow",
chartClassName
)}
>
<div className="flex items-center justify-between mb-2">
<p className="text-base font-medium text-foreground">
{chartTitle}
</p>
<div className="h-6 w-auto aspect-square rounded-theme secondary-button flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
<ArrowUpRight className="h-1/2 w-1/2 text-secondary-cta-text transition-transform duration-300 group-hover/chart:rotate-45" />
</div>
</div>
<div className="flex-1 min-h-0">
<BentoLineChart
data={chartData}
metricLabel={chartTitle}
useInvertedBackground={false}
/>
</div>
</div>
<div
className={cls(
"group/list rounded-theme-capped p-5 flex flex-col h-80 card shadow",
listClassName
)}
>
<div className="flex items-center justify-between">
<p className="text-base font-medium text-foreground">
{listTitle}
</p>
<div className="h-6 w-auto aspect-square rounded-theme secondary-button flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
<Plus className="h-1/2 w-1/2 text-secondary-cta-text transition-transform duration-300 group-hover/list:rotate-90" />
</div>
</div>
<div className="overflow-hidden mask-fade-y flex-1 min-h-0 mt-3">
<div className="flex flex-col animate-marquee-vertical px-px">
{[...listItems, ...listItems, ...listItems, ...listItems].map((item, index) => {
const ItemIcon = item.icon;
return (
<div
key={index}
className="flex items-center gap-2.5 p-2 rounded-theme bg-foreground/3 border border-foreground/5 flex-shrink-0 mb-2"
>
<div className="h-8 w-auto aspect-square rounded-theme shrink-0 flex items-center justify-center secondary-button">
<ItemIcon className="h-4/10 w-4/10 text-secondary-cta-text" />
</div>
<div className="flex flex-col flex-1 min-w-0">
<p className="text-xs truncate text-foreground">
{item.title}
</p>
<p className="text-xs text-foreground/75">
{item.status}
</p>
</div>
<ChevronRight className="h-(--text-xs) w-auto shrink-0 text-foreground/75" />
</div>
);
})}
</div>
</div>
</div>
</div>
</div>
</div>
);
};
Dashboard.displayName = "Dashboard";
export default React.memo(Dashboard);

158
src/hooks/useCheckout.ts
View File

@@ -1,117 +1,45 @@
"use client"; import { useState, useCallback } from "react";
import { useState } from "react"; interface CheckoutItem {
import { Product } from "@/lib/api/product"; id: string;
name: string;
export type CheckoutItem = { price: number;
productId: string; quantity: number;
quantity: number;
imageSrc?: string;
imageAlt?: string;
metadata?: {
brand?: string;
variant?: string;
rating?: number;
reviewCount?: string;
[key: string]: string | number | undefined;
};
};
export type CheckoutResult = {
success: boolean;
url?: string;
error?: string;
};
export function useCheckout() {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const checkout = async (items: CheckoutItem[], options?: { successUrl?: string; cancelUrl?: string }): Promise<CheckoutResult> => {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!apiUrl || !projectId) {
const errorMsg = "NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured";
setError(errorMsg);
return { success: false, error: errorMsg };
}
setIsLoading(true);
setError(null);
try {
const response = await fetch(`${apiUrl}/stripe/project/checkout-session`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
projectId,
items,
successUrl: options?.successUrl || window.location.href,
cancelUrl: options?.cancelUrl || window.location.href,
}),
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
const errorMsg = errorData.message || `Request failed with status ${response.status}`;
setError(errorMsg);
return { success: false, error: errorMsg };
}
const data = await response.json();
if (data.data.url) {
window.location.href = data.data.url;
}
return { success: true, url: data.data.url };
} catch (err) {
const errorMsg = err instanceof Error ? err.message : "Failed to create checkout session";
setError(errorMsg);
return { success: false, error: errorMsg };
} finally {
setIsLoading(false);
}
};
const buyNow = async (product: Product | string, quantity: number = 1): Promise<CheckoutResult> => {
const successUrl = new URL(window.location.href);
successUrl.searchParams.set("success", "true");
if (typeof product === "string") {
return checkout([{ productId: product, quantity }], { successUrl: successUrl.toString() });
}
let metadata: CheckoutItem["metadata"] = {};
if (product.metadata && Object.keys(product.metadata).length > 0) {
const { imageSrc, imageAlt, images, ...restMetadata } = product.metadata;
metadata = restMetadata;
} else {
if (product.brand) metadata.brand = product.brand;
if (product.variant) metadata.variant = product.variant;
if (product.rating !== undefined) metadata.rating = product.rating;
if (product.reviewCount) metadata.reviewCount = product.reviewCount;
}
return checkout([{
productId: product.id,
quantity,
imageSrc: product.imageSrc,
imageAlt: product.imageAlt,
metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
}], { successUrl: successUrl.toString() });
};
return {
checkout,
buyNow,
isLoading,
error,
clearError: () => setError(null),
};
} }
export const useCheckout = () => {
const [items, setItems] = useState<CheckoutItem[]>([]);
const [total, setTotal] = useState(0);
const addItem = useCallback(
(item: CheckoutItem) => {
setItems((prev) => [...prev, item]);
setTotal((prev) => prev + item.price * item.quantity);
},
[]
);
const removeItem = useCallback(
(id: string) => {
const item = items.find((i) => i.id === id);
if (item) {
setTotal((prev) => prev - item.price * item.quantity);
setItems((prev) => prev.filter((i) => i.id !== id));
}
},
[items]
);
const clearCart = useCallback(() => {
setItems([]);
setTotal(0);
}, []);
return {
items,
total,
addItem,
removeItem,
clearCart,
};
};

63
src/hooks/useProduct.ts
View File

@@ -1,45 +1,28 @@
"use client"; import { useState, useEffect } from "react";
import { useEffect, useState } from "react";
import { Product, fetchProduct } from "@/lib/api/product"; import { Product, fetchProduct } from "@/lib/api/product";
export function useProduct(productId: string) { export const useProduct = (productId: string) => {
const [product, setProduct] = useState<Product | null>(null); const [product, setProduct] = useState<Product | null>(null);
const [isLoading, setIsLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null); const [error, setError] = useState<string | null>(null);
useEffect(() => { useEffect(() => {
let isMounted = true; const fetch = async () => {
try {
setLoading(true);
const data = await fetchProduct(productId);
setProduct(data);
} catch (err) {
setError(err instanceof Error ? err.message : "Unknown error");
} finally {
setLoading(false);
}
};
async function loadProduct() { if (productId) {
if (!productId) { fetch();
setIsLoading(false); }
return; }, [productId]);
}
try { return { product, loading, error };
setIsLoading(true); };
const data = await fetchProduct(productId);
if (isMounted) {
setProduct(data);
}
} catch (err) {
if (isMounted) {
setError(err instanceof Error ? err : new Error("Failed to fetch product"));
}
} finally {
if (isMounted) {
setIsLoading(false);
}
}
}
loadProduct();
return () => {
isMounted = false;
};
}, [productId]);
return { product, isLoading, error };
}

138
src/hooks/useProductCatalog.ts
View File

@@ -1,115 +1,33 @@
"use client"; import { useState, useEffect } from "react";
import { useState, useMemo, useCallback } from "react"; interface CatalogItem {
import { useRouter } from "next/navigation"; id: string;
import { useProducts } from "./useProducts"; name: string;
import type { Product } from "@/lib/api/product"; price: number;
import type { CatalogProduct } from "@/components/ecommerce/productCatalog/ProductCatalogItem"; category: string;
import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
export type SortOption = "Newest" | "Price: Low-High" | "Price: High-Low";
interface UseProductCatalogOptions {
basePath?: string;
} }
export function useProductCatalog(options: UseProductCatalogOptions = {}) { export const useProductCatalog = () => {
const { basePath = "/shop" } = options; const [items, setItems] = useState<CatalogItem[]>([]);
const router = useRouter(); const [loading, setLoading] = useState(true);
const { products: fetchedProducts, isLoading } = useProducts(); const [error, setError] = useState<string | null>(null);
const [search, setSearch] = useState(""); useEffect(() => {
const [category, setCategory] = useState("All"); // Fetch catalog items
const [sort, setSort] = useState<SortOption>("Newest"); const fetchCatalog = async () => {
try {
const handleProductClick = useCallback((productId: string) => { setLoading(true);
router.push(`${basePath}/${productId}`); // Simulated fetch
}, [router, basePath]); setItems([]);
} catch (err) {
const catalogProducts: CatalogProduct[] = useMemo(() => { setError(err instanceof Error ? err.message : "Unknown error");
if (fetchedProducts.length === 0) return []; } finally {
setLoading(false);
return fetchedProducts.map((product) => ({ }
id: product.id,
name: product.name,
price: product.price,
imageSrc: product.imageSrc,
imageAlt: product.imageAlt || product.name,
rating: product.rating || 0,
reviewCount: product.reviewCount,
category: product.brand,
onProductClick: () => handleProductClick(product.id),
}));
}, [fetchedProducts, handleProductClick]);
const categories = useMemo(() => {
const categorySet = new Set<string>();
catalogProducts.forEach((product) => {
if (product.category) {
categorySet.add(product.category);
}
});
return Array.from(categorySet).sort();
}, [catalogProducts]);
const filteredProducts = useMemo(() => {
let result = catalogProducts;
if (search) {
const q = search.toLowerCase();
result = result.filter(
(p) =>
p.name.toLowerCase().includes(q) ||
(p.category?.toLowerCase().includes(q) ?? false)
);
}
if (category !== "All") {
result = result.filter((p) => p.category === category);
}
if (sort === "Price: Low-High") {
result = [...result].sort(
(a, b) =>
parseFloat(a.price.replace("$", "").replace(",", "")) -
parseFloat(b.price.replace("$", "").replace(",", ""))
);
} else if (sort === "Price: High-Low") {
result = [...result].sort(
(a, b) =>
parseFloat(b.price.replace("$", "").replace(",", "")) -
parseFloat(a.price.replace("$", "").replace(",", ""))
);
}
return result;
}, [catalogProducts, search, category, sort]);
const filters: ProductVariant[] = useMemo(() => [
{
label: "Category",
options: ["All", ...categories],
selected: category,
onChange: setCategory,
},
{
label: "Sort",
options: ["Newest", "Price: Low-High", "Price: High-Low"] as SortOption[],
selected: sort,
onChange: (value) => setSort(value as SortOption),
},
], [categories, category, sort]);
return {
products: filteredProducts,
isLoading,
search,
setSearch,
category,
setCategory,
sort,
setSort,
filters,
categories,
}; };
}
fetchCatalog();
}, []);
return { items, loading, error };
};

221
src/hooks/useProductDetail.ts
View File

@@ -1,196 +1,35 @@
"use client"; import { useState, useEffect } from "react";
import { useState, useMemo, useCallback } from "react"; interface ProductDetail {
import { useProduct } from "./useProduct"; id: string;
import type { Product } from "@/lib/api/product"; name: string;
import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard"; price: number;
import type { ExtendedCartItem } from "./useCart"; description: string;
interface ProductImage {
src: string;
alt: string;
} }
interface ProductMeta { export const useProductDetail = (productId: string) => {
salePrice?: string; const [product, setProduct] = useState<ProductDetail | null>(null);
ribbon?: string; const [loading, setLoading] = useState(true);
inventoryStatus?: string; const [error, setError] = useState<string | null>(null);
inventoryQuantity?: number;
sku?: string;
}
export function useProductDetail(productId: string) { useEffect(() => {
const { product, isLoading, error } = useProduct(productId); // Fetch product details
const [selectedQuantity, setSelectedQuantity] = useState(1); const fetchProduct = async () => {
const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({}); try {
setLoading(true);
const images = useMemo<ProductImage[]>(() => { // Simulated fetch
if (!product) return []; setProduct(null);
} catch (err) {
if (product.images && product.images.length > 0) { setError(err instanceof Error ? err.message : "Unknown error");
return product.images.map((src, index) => ({ } finally {
src, setLoading(false);
alt: product.imageAlt || `${product.name} - Image ${index + 1}`, }
}));
}
return [{
src: product.imageSrc,
alt: product.imageAlt || product.name,
}];
}, [product]);
const meta = useMemo<ProductMeta>(() => {
if (!product?.metadata) return {};
const metadata = product.metadata;
let salePrice: string | undefined;
const onSaleValue = metadata.onSale;
const onSale = String(onSaleValue) === "true" || onSaleValue === 1 || String(onSaleValue) === "1";
const salePriceValue = metadata.salePrice;
if (onSale && salePriceValue !== undefined && salePriceValue !== null) {
if (typeof salePriceValue === 'number') {
salePrice = `$${salePriceValue.toFixed(2)}`;
} else {
const salePriceStr = String(salePriceValue);
salePrice = salePriceStr.startsWith('$') ? salePriceStr : `$${salePriceStr}`;
}
}
let inventoryQuantity: number | undefined;
if (metadata.inventoryQuantity !== undefined) {
const qty = metadata.inventoryQuantity;
inventoryQuantity = typeof qty === 'number' ? qty : parseInt(String(qty), 10);
}
return {
salePrice,
ribbon: metadata.ribbon ? String(metadata.ribbon) : undefined,
inventoryStatus: metadata.inventoryStatus ? String(metadata.inventoryStatus) : undefined,
inventoryQuantity,
sku: metadata.sku ? String(metadata.sku) : undefined,
};
}, [product]);
const variants = useMemo<ProductVariant[]>(() => {
if (!product) return [];
const variantList: ProductVariant[] = [];
if (product.metadata?.variantOptions) {
try {
const variantOptionsStr = String(product.metadata.variantOptions);
const parsedOptions = JSON.parse(variantOptionsStr);
if (Array.isArray(parsedOptions)) {
parsedOptions.forEach((option: any) => {
if (option.name && option.values) {
const values = typeof option.values === 'string'
? option.values.split(',').map((v: string) => v.trim())
: Array.isArray(option.values)
? option.values.map((v: any) => String(v).trim())
: [String(option.values)];
if (values.length > 0) {
const optionLabel = option.name;
const currentSelected = selectedVariants[optionLabel] || values[0];
variantList.push({
label: optionLabel,
options: values,
selected: currentSelected,
onChange: (value) => {
setSelectedVariants((prev) => ({
...prev,
[optionLabel]: value,
}));
},
});
}
}
});
}
} catch (error) {
console.warn("Failed to parse variantOptions:", error);
}
}
if (variantList.length === 0 && product.brand) {
variantList.push({
label: "Brand",
options: [product.brand],
selected: product.brand,
onChange: () => { },
});
}
if (variantList.length === 0 && product.variant) {
const variantOptions = product.variant.includes('/')
? product.variant.split('/').map(v => v.trim())
: [product.variant];
const variantLabel = "Variant";
const currentSelected = selectedVariants[variantLabel] || variantOptions[0];
variantList.push({
label: variantLabel,
options: variantOptions,
selected: currentSelected,
onChange: (value) => {
setSelectedVariants((prev) => ({
...prev,
[variantLabel]: value,
}));
},
});
}
return variantList;
}, [product, selectedVariants]);
const quantityVariant = useMemo<ProductVariant>(() => ({
label: "Quantity",
options: Array.from({ length: 10 }, (_, i) => String(i + 1)),
selected: String(selectedQuantity),
onChange: (value) => setSelectedQuantity(parseInt(value, 10)),
}), [selectedQuantity]);
const createCartItem = useCallback((): ExtendedCartItem | null => {
if (!product) return null;
const variantStrings = Object.entries(selectedVariants).map(
([label, value]) => `${label}: ${value}`
);
if (variantStrings.length === 0 && product.variant) {
variantStrings.push(`Variant: ${product.variant}`);
}
const variantId = Object.values(selectedVariants).join('-') || 'default';
return {
id: `${product.id}-${variantId}-${selectedQuantity}`,
productId: product.id,
name: product.name,
variants: variantStrings,
price: product.price,
quantity: selectedQuantity,
imageSrc: product.imageSrc,
imageAlt: product.imageAlt || product.name,
};
}, [product, selectedVariants, selectedQuantity]);
return {
product,
isLoading,
error,
images,
meta,
variants,
quantityVariant,
selectedQuantity,
selectedVariants,
createCartItem,
}; };
}
if (productId) {
fetchProduct();
}
}, [productId]);
return { product, loading, error };
};

55
src/hooks/useProducts.ts
View File

@@ -1,39 +1,26 @@
"use client"; import { useState, useEffect } from "react";
import { useEffect, useState } from "react";
import { Product, fetchProducts } from "@/lib/api/product"; import { Product, fetchProducts } from "@/lib/api/product";
export function useProducts() { export const useProducts = () => {
const [products, setProducts] = useState<Product[]>([]); const [products, setProducts] = useState<Product[]>([]);
const [isLoading, setIsLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null); const [error, setError] = useState<string | null>(null);
useEffect(() => { useEffect(() => {
let isMounted = true; const fetch = async () => {
try {
setLoading(true);
const data = await fetchProducts();
setProducts(data);
} catch (err) {
setError(err instanceof Error ? err.message : "Unknown error");
} finally {
setLoading(false);
}
};
async function loadProducts() { fetch();
try { }, []);
const data = await fetchProducts();
if (isMounted) {
setProducts(data);
}
} catch (err) {
if (isMounted) {
setError(err instanceof Error ? err : new Error("Failed to fetch products"));
}
} finally {
if (isMounted) {
setIsLoading(false);
}
}
}
loadProducts(); return { products, loading, error };
};
return () => {
isMounted = false;
};
}, []);
return { products, isLoading, error };
}

251
src/lib/api/product.ts
View File

@@ -1,219 +1,38 @@
export type Product = { export interface Product {
id: string; id: string;
name: string; name: string;
price: string; price: number;
imageSrc: string; description?: string;
imageAlt?: string; imageSrc?: string;
images?: string[]; imageAlt?: string;
brand?: string; rating?: number;
variant?: string; reviewCount?: string;
rating?: number; brand?: string;
reviewCount?: string; category?: string;
description?: string; }
priceId?: string;
metadata?: { export const fetchProducts = async (): Promise<Product[]> => {
[key: string]: string | number | undefined; try {
}; const response = await fetch("/api/products");
onFavorite?: () => void; const data = await response.json();
onProductClick?: () => void; return data;
isFavorited?: boolean; } catch (err) {
console.error("Failed to fetch products");
return [];
}
}; };
export const defaultProducts: Product[] = [ export const fetchProduct = async (id: string): Promise<Product | null> => {
{ try {
id: "1", const response = await fetch(`/api/products/${id}`);
name: "Classic White Sneakers", const data = await response.json();
price: "$129", return data;
brand: "Nike", } catch (err) {
variant: "White / Size 42", console.error(`Failed to fetch product ${id}`);
rating: 4.5, return null;
reviewCount: "128", }
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif", };
imageAlt: "Classic white sneakers",
},
{
id: "2",
name: "Leather Crossbody Bag",
price: "$89",
brand: "Coach",
variant: "Brown / Medium",
rating: 4.8,
reviewCount: "256",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
imageAlt: "Brown leather crossbody bag",
},
{
id: "3",
name: "Wireless Headphones",
price: "$199",
brand: "Sony",
variant: "Black",
rating: 4.7,
reviewCount: "512",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
imageAlt: "Black wireless headphones",
},
{
id: "4",
name: "Minimalist Watch",
price: "$249",
brand: "Fossil",
variant: "Silver / 40mm",
rating: 4.6,
reviewCount: "89",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
imageAlt: "Silver minimalist watch",
},
];
function formatPrice(amount: number, currency: string): string { export const fetchProductDetail = async (id: string): Promise<Product | null> => {
const formatter = new Intl.NumberFormat("en-US", { return fetchProduct(id);
style: "currency", };
currency: currency.toUpperCase(),
minimumFractionDigits: 0,
maximumFractionDigits: 2,
});
return formatter.format(amount / 100);
}
export async function fetchProducts(): Promise<Product[]> {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!apiUrl || !projectId) {
return [];
}
try {
const url = `${apiUrl}/stripe/project/products?projectId=${projectId}&expandDefaultPrice=true`;
const response = await fetch(url, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
return [];
}
const resp = await response.json();
const data = resp.data.data || resp.data;
if (!Array.isArray(data) || data.length === 0) {
return [];
}
return data.map((product: any) => {
const metadata: Record<string, string | number | undefined> = {};
if (product.metadata && typeof product.metadata === 'object') {
Object.keys(product.metadata).forEach(key => {
const value = product.metadata[key];
if (value !== null && value !== undefined) {
const numValue = parseFloat(value);
metadata[key] = isNaN(numValue) ? value : numValue;
}
});
}
const imageSrc = product.images?.[0] || product.imageSrc || "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif";
const imageAlt = product.imageAlt || product.name || "";
const images = product.images && Array.isArray(product.images) && product.images.length > 0
? product.images
: [imageSrc];
return {
id: product.id || String(Math.random()),
name: product.name || "Untitled Product",
description: product.description || "",
price: product.default_price?.unit_amount
? formatPrice(product.default_price.unit_amount, product.default_price.currency || "usd")
: product.price || "$0",
priceId: product.default_price?.id || product.priceId,
imageSrc,
imageAlt,
images,
brand: product.metadata?.brand || product.brand || "",
variant: product.metadata?.variant || product.variant || "",
rating: product.metadata?.rating ? parseFloat(product.metadata.rating) : undefined,
reviewCount: product.metadata?.reviewCount || undefined,
metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
};
});
} catch (error) {
return [];
}
}
export async function fetchProduct(productId: string): Promise<Product | null> {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!apiUrl || !projectId) {
return null;
}
try {
const url = `${apiUrl}/stripe/project/products/${productId}?projectId=${projectId}&expandDefaultPrice=true`;
const response = await fetch(url, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
return null;
}
const resp = await response.json();
const product = resp.data?.data || resp.data || resp;
if (!product || typeof product !== 'object') {
return null;
}
const metadata: Record<string, string | number | undefined> = {};
if (product.metadata && typeof product.metadata === 'object') {
Object.keys(product.metadata).forEach(key => {
const value = product.metadata[key];
if (value !== null && value !== undefined && value !== '') {
const numValue = parseFloat(String(value));
metadata[key] = isNaN(numValue) ? String(value) : numValue;
}
});
}
let priceValue = product.price;
if (!priceValue && product.default_price?.unit_amount) {
priceValue = formatPrice(product.default_price.unit_amount, product.default_price.currency || "usd");
}
if (!priceValue) {
priceValue = "$0";
}
const imageSrc = product.images?.[0] || product.imageSrc || "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif";
const imageAlt = product.imageAlt || product.name || "";
const images = product.images && Array.isArray(product.images) && product.images.length > 0
? product.images
: [imageSrc];
return {
id: product.id || String(Math.random()),
name: product.name || "Untitled Product",
description: product.description || "",
price: priceValue,
priceId: product.default_price?.id || product.priceId,
imageSrc,
imageAlt,
images,
brand: product.metadata?.brand || product.brand || "",
variant: product.metadata?.variant || product.variant || "",
rating: product.metadata?.rating ? parseFloat(String(product.metadata.rating)) : undefined,
reviewCount: product.metadata?.reviewCount || undefined,
metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
};
} catch (error) {
return null;
}
}