Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| cdddd03c4e | |||
| c5a074c242 | |||
| 599ba2e7f9 | |||
| 07ab2b3fd7 | |||
| 9b0d0c5eb1 | |||
| 9ec9fd0b52 | |||
| 7ed7056372 | |||
| 5d00a3d3cd | |||
| 055d8feb7d | |||
| d2bda4e745 | |||
| c24bf28d9b | |||
| 12615abe84 |
@@ -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: `
|
||||||
|
|||||||
245
src/app/portfolio/[projectId]/page.tsx
Normal file
245
src/app/portfolio/[projectId]/page.tsx
Normal file
@@ -0,0 +1,245 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||||
|
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||||
|
import { ArrowLeft } from "lucide-react";
|
||||||
|
|
||||||
|
// Mock project data - replace with actual data fetching
|
||||||
|
const projects: Record<string, any> = {
|
||||||
|
"1": {
|
||||||
|
id: "1", title: "Digital Brand Identity System", subtitle: "Complete visual identity redesign for tech startup", category: "Brand Strategy", year: "2024", 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.", fullDescription: [
|
||||||
|
"This comprehensive brand identity project involved creating a complete visual system for an emerging tech startup. The project scope included logo design, color palette development, typography system, brand guidelines, and a full suite of digital assets.", "Through extensive stakeholder interviews and market research, we developed a brand strategy that positioned the company as an innovative leader in their space. The visual identity reflects the company's core values of innovation, reliability, and forward-thinking approach.", "The resulting brand system has been implemented across all digital touchpoints, including website, marketing materials, product interfaces, and company communications. The new brand identity has contributed to a 40% increase in brand recognition within the first six months of launch."],
|
||||||
|
tags: ["Branding", "Identity", "Design System"],
|
||||||
|
challenge:
|
||||||
|
"The startup needed to establish a strong visual identity that would differentiate them in a crowded market while conveying trust and innovation to enterprise clients.", solution:
|
||||||
|
"We created a modern, versatile brand system with a distinctive visual language that works across all applications, from digital interfaces to printed materials.", result: "40% increase in brand recognition, improved market positioning, and a comprehensive design system for future growth.", images: [
|
||||||
|
"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/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png"],
|
||||||
|
},
|
||||||
|
"2": {
|
||||||
|
id: "2", title: "E-commerce Platform Redesign", subtitle: "User-centered redesign of enterprise e-commerce platform", category: "UX Design", year: "2024", 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.", fullDescription: [
|
||||||
|
"This e-commerce redesign project focused on improving user experience and increasing conversion rates for a large-scale enterprise platform. Through extensive user research and analytics review, we identified key friction points in the customer journey.", "We implemented a mobile-first design approach, streamlined the checkout process, and created an intuitive navigation system that reduced friction at every step. Accessibility was a key consideration, with WCAG 2.1 AA compliance implemented throughout.", "The redesigned platform resulted in a 35% increase in conversion rates, 40% reduction in cart abandonment, and improved customer satisfaction scores. The platform now serves over 100,000 monthly active users with a seamless shopping experience."],
|
||||||
|
tags: ["UX Design", "E-commerce", "Accessibility"],
|
||||||
|
challenge:
|
||||||
|
"The existing platform suffered from high cart abandonment rates and poor mobile experience, resulting in significant revenue loss.", solution:
|
||||||
|
"We conducted comprehensive user research, optimized the checkout flow, and implemented a mobile-first responsive design with improved accessibility.", result: "35% increase in conversion rate, 40% reduction in cart abandonment, improved WCAG accessibility compliance.", images: [
|
||||||
|
"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"],
|
||||||
|
},
|
||||||
|
"3": {
|
||||||
|
id: "3", title: "SaaS Product Interface Design", subtitle: "Designed intuitive interface for data analytics SaaS platform", category: "Product Design", year: "2024", 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%.", fullDescription: [
|
||||||
|
"This SaaS design project involved creating a comprehensive product interface for a data analytics platform serving enterprise clients. The challenge was to make complex data visualization and analysis tools accessible to non-technical users.", "We developed an extensive design system with over 15 component variations, created interactive prototypes for validation, and implemented a guided onboarding experience that reduced the learning curve significantly.", "The result was a 50% reduction in support tickets, improved user engagement, and increased adoption rates among new customers. The design system has also streamlined development processes, reducing design-to-development time by 35%."],
|
||||||
|
tags: ["SaaS", "Product Design", "UI Design"],
|
||||||
|
challenge:
|
||||||
|
"Making complex data analytics tools intuitive for both technical and non-technical users while maintaining powerful functionality.", solution:
|
||||||
|
"Created a comprehensive design system with clear information architecture, progressive disclosure patterns, and comprehensive onboarding.", result: "50% reduction in support tickets, 35% improvement in design-to-development time, increased user adoption.", images: [
|
||||||
|
"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/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png"],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ProjectDetailPage() {
|
||||||
|
const params = useParams();
|
||||||
|
const projectId = params.projectId as string;
|
||||||
|
const project = projects[projectId];
|
||||||
|
|
||||||
|
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">
|
||||||
|
<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 className="flex-1 flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className="text-2xl font-bold mb-4">Project not found</h1>
|
||||||
|
<Link href="/" className="text-blue-500 hover:underline">
|
||||||
|
Back to portfolio
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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">
|
||||||
|
{/* Navigation */}
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* Back Button */}
|
||||||
|
<div className="pt-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="inline-flex items-center gap-2 text-sm font-medium hover:opacity-70 transition-opacity mb-12"
|
||||||
|
>
|
||||||
|
<ArrowLeft size={16} />
|
||||||
|
Back to Portfolio
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="flex-1 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<div className="mb-16">
|
||||||
|
<div className="mb-8">
|
||||||
|
<p className="text-sm font-medium text-gray-600 mb-3 uppercase tracking-wide">
|
||||||
|
{project.category}
|
||||||
|
</p>
|
||||||
|
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-4 leading-tight">
|
||||||
|
{project.title}
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg sm:text-xl text-gray-600 max-w-3xl">
|
||||||
|
{project.subtitle}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tags */}
|
||||||
|
<div className="flex flex-wrap gap-2 mb-12">
|
||||||
|
{project.tags.map((tag: string) => (
|
||||||
|
<span
|
||||||
|
key={tag}
|
||||||
|
className="px-3 py-1 bg-gray-200 text-gray-800 text-xs font-medium rounded-full"
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hero Image */}
|
||||||
|
{project.images[0] && (
|
||||||
|
<div className="w-full rounded-lg overflow-hidden mb-12 aspect-video">
|
||||||
|
<img
|
||||||
|
src={project.images[0]}
|
||||||
|
alt={project.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Project Details Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16 py-12 border-t border-gray-200">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold uppercase tracking-wide text-gray-600 mb-2">
|
||||||
|
Challenge
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-800">{project.challenge}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold uppercase tracking-wide text-gray-600 mb-2">
|
||||||
|
Solution
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-800">{project.solution}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold uppercase tracking-wide text-gray-600 mb-2">
|
||||||
|
Result
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-800">{project.result}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Full Description */}
|
||||||
|
<div className="prose prose-lg max-w-none mb-16">
|
||||||
|
<h2 className="text-3xl font-bold mb-8">Project Overview</h2>
|
||||||
|
<div className="space-y-6">
|
||||||
|
{project.fullDescription.map((paragraph: string, idx: number) => (
|
||||||
|
<p key={idx} className="text-gray-700 leading-relaxed">
|
||||||
|
{paragraph}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Additional Images */}
|
||||||
|
{project.images.length > 1 && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
||||||
|
{project.images.slice(1).map((image: string, idx: number) => (
|
||||||
|
<div key={idx} className="rounded-lg overflow-hidden aspect-square">
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt={`${project.title} - ${idx + 2}`}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<div className="py-12 mb-16 border-t border-gray-200 text-center">
|
||||||
|
<h3 className="text-2xl font-bold mb-4">Interested in working together?</h3>
|
||||||
|
<p className="text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||||
|
Let's discuss your next project and how we can create exceptional digital experiences.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/#contact"
|
||||||
|
className="inline-block px-8 py-3 bg-black text-white font-medium rounded-lg hover:opacity-80 transition-opacity"
|
||||||
|
>
|
||||||
|
Start a Project
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div id="footer" data-section="footer" className="mt-auto">
|
||||||
|
<FooterLogoReveal
|
||||||
|
logoText="Portfolio"
|
||||||
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||||
|
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
220
src/app/project/[id]/page.tsx
Normal file
220
src/app/project/[id]/page.tsx
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useParams, useRouter } from "next/navigation";
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||||
|
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||||
|
|
||||||
|
// Project data
|
||||||
|
const projectsData: Record<string, any> = {
|
||||||
|
"1": {
|
||||||
|
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.", fullDescription:
|
||||||
|
"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"],
|
||||||
|
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", 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": {
|
||||||
|
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.", fullDescription:
|
||||||
|
"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"],
|
||||||
|
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", 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": {
|
||||||
|
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%.", fullDescription:
|
||||||
|
"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"],
|
||||||
|
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", 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 ProjectPage() {
|
||||||
|
const params = useParams();
|
||||||
|
const router = useRouter();
|
||||||
|
const projectId = params.id as string;
|
||||||
|
const project = projectsData[projectId];
|
||||||
|
|
||||||
|
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 items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className="text-4xl font-bold mb-4">Project Not Found</h1>
|
||||||
|
<button
|
||||||
|
onClick={() => router.push("/")}
|
||||||
|
className="mt-8 px-8 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90"
|
||||||
|
>
|
||||||
|
Back to Portfolio
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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: "/" },
|
||||||
|
{ name: "About", id: "/" },
|
||||||
|
{ name: "Services", id: "/" },
|
||||||
|
{ name: "Contact", id: "/" },
|
||||||
|
]}
|
||||||
|
button={{
|
||||||
|
text: "Get in Touch", href: "/#contact"}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main className="py-20">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
{/* Back button */}
|
||||||
|
<button
|
||||||
|
onClick={() => router.push("/#work")}
|
||||||
|
className="text-secondary-cta hover:text-primary-cta transition-colors mb-8"
|
||||||
|
>
|
||||||
|
← Back to Work
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Project Hero */}
|
||||||
|
<section className="mb-20">
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div>
|
||||||
|
<div className="text-sm text-secondary-cta mb-4">{project.author}</div>
|
||||||
|
<h1 className="text-5xl md:text-6xl font-bold mb-6">{project.title}</h1>
|
||||||
|
<p className="text-xl text-foreground/80 max-w-3xl">
|
||||||
|
{project.fullDescription}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tags */}
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{project.tags.map((tag: string, index: number) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="px-4 py-2 bg-card text-foreground rounded-full text-sm border border-accent"
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Project Image */}
|
||||||
|
<div className="mt-12">
|
||||||
|
<img
|
||||||
|
src={project.imageSrc}
|
||||||
|
alt={project.imageAlt}
|
||||||
|
className="w-full h-auto rounded-lg object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Project Details */}
|
||||||
|
<section className="grid md:grid-cols-2 gap-12 mb-20">
|
||||||
|
{/* Challenges */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold mb-6">Challenges</h2>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* Solutions */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold mb-6">Solutions</h2>
|
||||||
|
<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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Results */}
|
||||||
|
<section className="mb-20">
|
||||||
|
<h2 className="text-2xl font-bold mb-6">Results & Impact</h2>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
{project.results.map((result: string, index: number) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="p-6 bg-card rounded-lg border border-accent text-center"
|
||||||
|
>
|
||||||
|
<p className="text-foreground/80">{result}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<section className="text-center py-12">
|
||||||
|
<h2 className="text-3xl font-bold mb-6">Ready to Work Together?</h2>
|
||||||
|
<button
|
||||||
|
onClick={() => router.push("/#contact")}
|
||||||
|
className="px-8 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90 transition-opacity"
|
||||||
|
>
|
||||||
|
Start Your Project
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<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/digital-brand-identity/page.tsx
Normal file
62
src/app/projects/digital-brand-identity/page.tsx
Normal 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
62
src/app/projects/ecommerce-platform-redesign/page.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
62
src/app/projects/saas-product-interface-design/page.tsx
Normal file
62
src/app/projects/saas-product-interface-design/page.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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);
|
|
||||||
|
|||||||
@@ -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);
|
|
||||||
|
|||||||
@@ -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 };
|
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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 };
|
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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);
|
|
||||||
|
|||||||
@@ -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);
|
|
||||||
|
|||||||
@@ -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);
|
|
||||||
|
|||||||
@@ -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);
|
|
||||||
|
|||||||
@@ -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);
|
|
||||||
|
|||||||
@@ -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);
|
|
||||||
|
|||||||
@@ -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);
|
|
||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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);
|
|
||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
|
|||||||
@@ -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);
|
|
||||||
|
|||||||
@@ -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;
|
||||||
|
price: number;
|
||||||
|
quantity: number;
|
||||||
|
}
|
||||||
|
|
||||||
export type CheckoutItem = {
|
export const useCheckout = () => {
|
||||||
productId: string;
|
const [items, setItems] = useState<CheckoutItem[]>([]);
|
||||||
quantity: number;
|
const [total, setTotal] = useState(0);
|
||||||
imageSrc?: string;
|
|
||||||
imageAlt?: string;
|
const addItem = useCallback(
|
||||||
metadata?: {
|
(item: CheckoutItem) => {
|
||||||
brand?: string;
|
setItems((prev) => [...prev, item]);
|
||||||
variant?: string;
|
setTotal((prev) => prev + item.price * item.quantity);
|
||||||
rating?: number;
|
},
|
||||||
reviewCount?: string;
|
[]
|
||||||
[key: string]: string | number | undefined;
|
);
|
||||||
};
|
|
||||||
|
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,
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
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),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -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 };
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -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 };
|
||||||
|
};
|
||||||
|
|||||||
@@ -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 };
|
||||||
|
};
|
||||||
|
|||||||
@@ -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 };
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user