Merge version_2 into main #4
@@ -1407,4 +1407,4 @@ export default function RootLayout({
|
|||||||
</ServiceWrapper>
|
</ServiceWrapper>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
153
src/app/page.tsx
153
src/app/page.tsx
@@ -1,4 +1,4 @@
|
|||||||
"use client"
|
"use client";
|
||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||||
@@ -10,8 +10,18 @@ import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCar
|
|||||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||||
import { Award, BookOpen, Briefcase, Code, GitBranch, Mail, MessageSquare, Sparkles, TrendingUp, Trophy, Users, Zap } from 'lucide-react';
|
import { Award, BookOpen, Briefcase, Code, GitBranch, Mail, MessageSquare, Sparkles, TrendingUp, Trophy, Users, Zap } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
|
const [flippedCards, setFlippedCards] = useState<{ [key: string]: boolean }>({});
|
||||||
|
|
||||||
|
const toggleFlip = (id: string) => {
|
||||||
|
setFlippedCards(prev => ({
|
||||||
|
...prev,
|
||||||
|
[id]: !prev[id]
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="expand-hover"
|
defaultButtonVariant="expand-hover"
|
||||||
@@ -126,42 +136,109 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardSix
|
<div className="py-16 md:py-24">
|
||||||
title="What Our Members Say"
|
<div className="w-content-width mx-auto px-6">
|
||||||
description="Real stories from computer club members about their learning journey and growth."
|
<div className="mb-12">
|
||||||
tag="Community Voices"
|
<h2 className="text-4xl md:text-5xl font-bold mb-4">What Our Members Say</h2>
|
||||||
tagIcon={MessageSquare}
|
<p className="text-lg text-foreground/75">Real stories from computer club members about their learning journey and growth.</p>
|
||||||
tagAnimation="slide-up"
|
</div>
|
||||||
testimonials={[
|
|
||||||
{
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
id: "1", name: "Alex Chen", handle: "@AlexDev", testimonial: "CompClub transformed my coding skills. The workshops and mentorship helped me land my dream job at a top tech company. Grateful for this amazing community!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=1", imageAlt: "Alex Chen"
|
{[
|
||||||
},
|
{
|
||||||
{
|
id: "1", name: "Alex Chen", handle: "@AlexDev", shortText: "Landed dream job at top tech company", fullText: "CompClub transformed my coding skills. The workshops and mentorship helped me land my dream job at a top tech company. Grateful for this amazing community!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=1"
|
||||||
id: "2", name: "Sarah Mitchell", handle: "@SarahCodes", testimonial: "The collaborative projects here are incredible. I've built friendships and a portfolio that actually impresses recruiters. Best decision ever!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=2", imageAlt: "Sarah Mitchell"
|
},
|
||||||
},
|
{
|
||||||
{
|
id: "2", name: "Sarah Mitchell", handle: "@SarahCodes", shortText: "Built impressive portfolio through projects", fullText: "The collaborative projects here are incredible. I've built friendships and a portfolio that actually impresses recruiters. Best decision ever!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=2"
|
||||||
id: "3", name: "Jordan Lee", handle: "@JordanDev", testimonial: "From zero experience to building full-stack applications in just a few months. The mentorship here is unmatched. Highly recommend CompClub!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=3", imageAlt: "Jordan Lee"
|
},
|
||||||
},
|
{
|
||||||
{
|
id: "3", name: "Jordan Lee", handle: "@JordanDev", shortText: "Full-stack development in just months", fullText: "From zero experience to building full-stack applications in just a few months. The mentorship here is unmatched. Highly recommend CompClub!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=3"
|
||||||
id: "4", name: "Maya Patel", handle: "@MayaCode", testimonial: "The hackathons taught me so much about teamwork and problem-solving. Plus, winning first place was the cherry on top!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=4", imageAlt: "Maya Patel"
|
},
|
||||||
},
|
{
|
||||||
{
|
id: "4", name: "Maya Patel", handle: "@MayaCode", shortText: "Won first place in hackathon", fullText: "The hackathons taught me so much about teamwork and problem-solving. Plus, winning first place was the cherry on top!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=4"
|
||||||
id: "5", name: "David Brown", handle: "@DavidDeveloper", testimonial: "CompClub isn't just about coding. It's about building a network of passionate people who genuinely want to help each other succeed.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=5", imageAlt: "David Brown"
|
},
|
||||||
},
|
{
|
||||||
{
|
id: "5", name: "David Brown", handle: "@DavidDeveloper", shortText: "Built a supportive tech network", fullText: "CompClub isn't just about coding. It's about building a network of passionate people who genuinely want to help each other succeed.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=5"
|
||||||
id: "6", name: "Lisa Wong", handle: "@LisaTech", testimonial: "The industry expert talks opened my eyes to so many career possibilities. This community has given me the confidence to pursue my tech dreams.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=6", imageAlt: "Lisa Wong"
|
},
|
||||||
}
|
{
|
||||||
]}
|
id: "6", name: "Lisa Wong", handle: "@LisaTech", shortText: "Discovered career possibilities", fullText: "The industry expert talks opened my eyes to so many career possibilities. This community has given me the confidence to pursue my tech dreams.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=6"
|
||||||
animationType="slide-up"
|
}
|
||||||
textboxLayout="default"
|
].map((testimonial) => (
|
||||||
useInvertedBackground={false}
|
<div
|
||||||
buttons={[
|
key={testimonial.id}
|
||||||
{ text: "Join Our Community", href: "#contact" }
|
className="h-64 cursor-pointer perspective"
|
||||||
]}
|
onClick={() => toggleFlip(testimonial.id)}
|
||||||
buttonAnimation="slide-up"
|
style={{
|
||||||
speed={40}
|
perspective: '1000px'
|
||||||
topMarqueeDirection="left"
|
}}
|
||||||
/>
|
>
|
||||||
|
<div
|
||||||
|
className="relative w-full h-full transition-transform duration-500"
|
||||||
|
style={{
|
||||||
|
transformStyle: 'preserve-3d',
|
||||||
|
transform: flippedCards[testimonial.id] ? 'rotateY(180deg)' : 'rotateY(0deg)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Front side */}
|
||||||
|
<div
|
||||||
|
className="absolute w-full h-full bg-card rounded-lg p-6 flex flex-col justify-between border border-accent/20"
|
||||||
|
style={{
|
||||||
|
backfaceVisibility: 'hidden',
|
||||||
|
WebkitBackfaceVisibility: 'hidden'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
{testimonial.imageSrc && (
|
||||||
|
<img
|
||||||
|
src={testimonial.imageSrc}
|
||||||
|
alt={testimonial.name}
|
||||||
|
className="w-12 h-12 rounded-full object-cover"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold text-foreground">{testimonial.name}</p>
|
||||||
|
<p className="text-sm text-foreground/60">{testimonial.handle}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-foreground/80 line-clamp-4">{testimonial.shortText}</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-accent text-center mt-4">Click to read full testimonial</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Back side */}
|
||||||
|
<div
|
||||||
|
className="absolute w-full h-full bg-primary-cta rounded-lg p-6 flex flex-col justify-between border border-accent/20"
|
||||||
|
style={{
|
||||||
|
backfaceVisibility: 'hidden',
|
||||||
|
WebkitBackfaceVisibility: 'hidden',
|
||||||
|
transform: 'rotateY(180deg)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p className="text-primary-cta-text text-sm leading-relaxed">{testimonial.fullText}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 mt-4">
|
||||||
|
{testimonial.imageSrc && (
|
||||||
|
<img
|
||||||
|
src={testimonial.imageSrc}
|
||||||
|
alt={testimonial.name}
|
||||||
|
className="w-10 h-10 rounded-full object-cover"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-primary-cta-text">{testimonial.name}</p>
|
||||||
|
<p className="text-xs text-primary-cta-text/70">{testimonial.handle}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-primary-cta-text/50 text-center mt-2">Click to go back</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
@@ -213,4 +290,4 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,22 +1,15 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import Script from 'next/script';
|
import React, { ReactNode } from 'react';
|
||||||
|
|
||||||
export function ServiceWrapper({ children }: { children: React.ReactNode }) {
|
interface ServiceWrapperProps {
|
||||||
const websiteId = process.env.NEXT_PUBLIC_WEBSITE_ANALYTICS_ID;
|
children: ReactNode;
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{websiteId && (
|
|
||||||
<Script
|
|
||||||
async
|
|
||||||
defer
|
|
||||||
data-website-id={websiteId}
|
|
||||||
src="https://analytics.webild.io/script.js"
|
|
||||||
strategy="afterInteractive"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{children}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function ServiceWrapper({ children }: ServiceWrapperProps) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen w-full bg-gradient-to-br from-slate-50 to-slate-100">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,148 +1,79 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useCallback } from "react";
|
import { useState } from "react";
|
||||||
import MobileMenu from "../mobileMenu/MobileMenu";
|
|
||||||
import Button from "@/components/button/Button";
|
|
||||||
import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
|
|
||||||
import Logo from "../Logo";
|
|
||||||
import { Plus } from "lucide-react";
|
|
||||||
import { NavbarProps } from "@/types/navigation";
|
|
||||||
import { useScrollState } from "./useScrollState";
|
|
||||||
import { cls } from "@/lib/utils";
|
|
||||||
import { getButtonProps } from "@/lib/buttonUtils";
|
|
||||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
|
||||||
import type { ButtonConfig } from "@/types/button";
|
|
||||||
|
|
||||||
const SCROLL_THRESHOLD = 50;
|
interface NavItem {
|
||||||
|
name: string;
|
||||||
interface NavbarStyleAppleProps extends NavbarProps {
|
id: string;
|
||||||
button?: ButtonConfig;
|
|
||||||
buttonClassName?: string;
|
|
||||||
buttonTextClassName?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const NavbarStyleApple = ({
|
interface NavbarStyleAppleProps {
|
||||||
|
brandName: string;
|
||||||
|
navItems: NavItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function NavbarStyleApple({
|
||||||
|
brandName,
|
||||||
navItems,
|
navItems,
|
||||||
// logoSrc,
|
}: NavbarStyleAppleProps) {
|
||||||
// logoAlt = "",
|
const [activeId, setActiveId] = useState<string | null>(null);
|
||||||
brandName = "Webild",
|
|
||||||
button,
|
|
||||||
buttonClassName = "",
|
|
||||||
buttonTextClassName = "",
|
|
||||||
}: NavbarStyleAppleProps) => {
|
|
||||||
const isScrolled = useScrollState(SCROLL_THRESHOLD);
|
|
||||||
const [menuOpen, setMenuOpen] = useState(false);
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
const handleMenuToggle = useCallback(() => {
|
const handleNavClick = (id: string) => {
|
||||||
setMenuOpen((prev) => !prev);
|
setActiveId(id);
|
||||||
}, []);
|
const element = document.getElementById(id);
|
||||||
|
if (element) {
|
||||||
const handleMobileNavClick = useCallback(() => {
|
element.scrollIntoView({ behavior: "smooth" });
|
||||||
setMenuOpen(false);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const getButtonConfigProps = () => {
|
|
||||||
if (theme.defaultButtonVariant === "hover-bubble") {
|
|
||||||
return { bgClassName: "w-full" };
|
|
||||||
}
|
}
|
||||||
if (theme.defaultButtonVariant === "icon-arrow") {
|
|
||||||
return { className: "justify-between" };
|
|
||||||
}
|
|
||||||
return {};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav
|
<nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
|
||||||
className={cls(
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
"fixed z-[1000] top-0 left-0 w-full transition-all duration-500 ease-in-out",
|
<div className="flex justify-between items-center h-16">
|
||||||
isScrolled
|
{/* Brand */}
|
||||||
? "bg-background/80 backdrop-blur-sm h-15"
|
<div className="flex-shrink-0">
|
||||||
: "bg-background/0 backdrop-blur-0 h-20"
|
<span className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||||
)}
|
{brandName}
|
||||||
>
|
</span>
|
||||||
<div className="relative flex items-center justify-between h-full w-content-width mx-auto">
|
|
||||||
<div className="flex items-center transition-all duration-500 ease-in-out">
|
|
||||||
<Logo brandName={brandName} href="/" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className={cls(
|
|
||||||
"hidden md:flex items-center gap-6 transition-all duration-500 ease-in-out",
|
|
||||||
button && "absolute left-1/2 -translate-x-1/2"
|
|
||||||
)}
|
|
||||||
role="navigation"
|
|
||||||
>
|
|
||||||
{navItems.map((item, index) => (
|
|
||||||
<ButtonTextUnderline
|
|
||||||
key={index}
|
|
||||||
text={item.name}
|
|
||||||
href={item.id}
|
|
||||||
className="!text-base"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
{!button && null}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{button && (
|
|
||||||
<div className="hidden md:block">
|
|
||||||
<Button
|
|
||||||
{...getButtonProps(
|
|
||||||
button,
|
|
||||||
0,
|
|
||||||
theme.defaultButtonVariant,
|
|
||||||
buttonClassName,
|
|
||||||
buttonTextClassName
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
{/* Navigation Items */}
|
||||||
className="flex md:hidden shrink-0 h-8 aspect-square rounded-theme bg-foreground items-center justify-center cursor-pointer"
|
<div className="hidden md:flex items-center space-x-1">
|
||||||
onClick={handleMenuToggle}
|
{navItems.map((item) => (
|
||||||
aria-label="Toggle menu"
|
<button
|
||||||
aria-expanded={menuOpen}
|
key={item.id}
|
||||||
aria-controls="mobile-menu"
|
onClick={() => handleNavClick(item.id)}
|
||||||
>
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
|
||||||
<Plus
|
activeId === item.id
|
||||||
className={cls(
|
? "bg-blue-100 text-blue-600"
|
||||||
"w-1/2 h-1/2 text-background transition-transform duration-300",
|
: "text-gray-700 hover:bg-gray-100"
|
||||||
menuOpen ? "rotate-45" : "rotate-0"
|
}`}
|
||||||
)}
|
>
|
||||||
strokeWidth={1.5}
|
{item.name}
|
||||||
aria-hidden="true"
|
</button>
|
||||||
/>
|
))}
|
||||||
</button>
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Menu Button */}
|
||||||
|
<div className="md:hidden">
|
||||||
|
<button className="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none">
|
||||||
|
<svg
|
||||||
|
className="h-6 w-6"
|
||||||
|
stroke="currentColor"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M4 6h16M4 12h16M4 18h16"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<MobileMenu
|
|
||||||
menuOpen={menuOpen}
|
|
||||||
onMenuToggle={handleMenuToggle}
|
|
||||||
navItems={navItems}
|
|
||||||
onNavClick={handleMobileNavClick}
|
|
||||||
>
|
|
||||||
{button && (
|
|
||||||
<Button
|
|
||||||
{...getButtonProps(
|
|
||||||
{
|
|
||||||
...button,
|
|
||||||
onClick: () => {
|
|
||||||
button.onClick?.();
|
|
||||||
setMenuOpen(false);
|
|
||||||
},
|
|
||||||
props: { ...button.props, ...getButtonConfigProps() }
|
|
||||||
},
|
|
||||||
0,
|
|
||||||
theme.defaultButtonVariant,
|
|
||||||
cls("w-full", buttonClassName),
|
|
||||||
buttonTextClassName
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</MobileMenu>
|
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
export default NavbarStyleApple;
|
|
||||||
@@ -1,106 +1,116 @@
|
|||||||
"use client";
|
'use client';
|
||||||
|
|
||||||
import TextAnimation from "@/components/text/TextAnimation";
|
import React, { useState } from 'react';
|
||||||
import { cls, shouldUseInvertedText } from "@/lib/utils";
|
import { LucideIcon } from 'lucide-react';
|
||||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
|
||||||
import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
|
|
||||||
import type { LucideIcon } from "lucide-react";
|
|
||||||
import type { ButtonAnimationType } from "@/types/button";
|
|
||||||
|
|
||||||
interface Metric {
|
interface Metric {
|
||||||
icon: LucideIcon;
|
icon: LucideIcon;
|
||||||
label: string;
|
label: string;
|
||||||
value: string;
|
value: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface AboutMetricProps {
|
interface AboutMetricProps {
|
||||||
title: string;
|
title: string;
|
||||||
metrics: Metric[];
|
metrics: Metric[];
|
||||||
metricsAnimation: ButtonAnimationType;
|
metricsAnimation?: string;
|
||||||
useInvertedBackground: boolean;
|
useInvertedBackground?: boolean;
|
||||||
ariaLabel?: string;
|
|
||||||
className?: string;
|
|
||||||
containerClassName?: string;
|
|
||||||
titleClassName?: string;
|
|
||||||
metricsContainerClassName?: string;
|
|
||||||
metricCardClassName?: string;
|
|
||||||
metricIconClassName?: string;
|
|
||||||
metricLabelClassName?: string;
|
|
||||||
metricValueClassName?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const AboutMetric = ({
|
export default function AboutMetric({
|
||||||
title,
|
title,
|
||||||
metrics,
|
metrics,
|
||||||
metricsAnimation,
|
metricsAnimation = 'slide-up',
|
||||||
useInvertedBackground,
|
useInvertedBackground = false,
|
||||||
ariaLabel = "About metrics section",
|
}: AboutMetricProps) {
|
||||||
className = "",
|
const [flipped, setFlipped] = useState<{ [key: number]: boolean }>({});
|
||||||
containerClassName = "",
|
|
||||||
titleClassName = "",
|
|
||||||
metricsContainerClassName = "",
|
|
||||||
metricCardClassName = "",
|
|
||||||
metricIconClassName = "",
|
|
||||||
metricLabelClassName = "",
|
|
||||||
metricValueClassName = "",
|
|
||||||
}: AboutMetricProps) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
|
||||||
const { containerRef: metricsContainerRef } = useButtonAnimation({ animationType: metricsAnimation });
|
|
||||||
|
|
||||||
const gridColsMap = {
|
const toggleFlip = (index: number) => {
|
||||||
2: "md:grid-cols-2",
|
setFlipped((prev) => ({
|
||||||
3: "md:grid-cols-3",
|
...prev,
|
||||||
4: "md:grid-cols-4",
|
[index]: !prev[index],
|
||||||
};
|
}));
|
||||||
const gridCols = gridColsMap[metrics.length as keyof typeof gridColsMap] || "md:grid-cols-4";
|
};
|
||||||
|
|
||||||
return (
|
const bgClass = useInvertedBackground ? 'bg-slate-900' : 'bg-white';
|
||||||
<section
|
const textClass = useInvertedBackground ? 'text-white' : 'text-slate-900';
|
||||||
aria-label={ariaLabel}
|
|
||||||
className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
|
|
||||||
>
|
|
||||||
<div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
|
|
||||||
<TextAnimation
|
|
||||||
type={theme.defaultTextAnimation}
|
|
||||||
text={title}
|
|
||||||
variant="words-trigger"
|
|
||||||
className={cls("text-2xl md:text-5xl font-medium leading-[1.175]", useInvertedBackground && "text-background", titleClassName)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div ref={metricsContainerRef} className={cls("grid grid-cols-1 gap-6", gridCols, metricsContainerClassName)}>
|
const getAnimationDelay = (index: number) => {
|
||||||
{metrics.map((metric, index) => {
|
if (metricsAnimation === 'slide-up') {
|
||||||
const Icon = metric.icon;
|
return {
|
||||||
return (
|
transitionDelay: `${index * 100}ms`,
|
||||||
<div
|
};
|
||||||
key={index}
|
}
|
||||||
className={cls(
|
return {};
|
||||||
"h-fit card rounded-theme-capped px-6 py-8 md:py-10 flex flex-col items-center justify-center gap-3",
|
};
|
||||||
metricCardClassName
|
|
||||||
)}
|
return (
|
||||||
>
|
<section className={`${bgClass} py-16 px-4 sm:px-6 lg:px-8`}>
|
||||||
<div className="relative z-1 w-full flex items-center justify-center gap-2">
|
<div className="max-w-6xl mx-auto">
|
||||||
<div className={cls("h-8 primary-button aspect-square rounded-theme flex items-center justify-center", metricIconClassName)}>
|
<div className="mb-12">
|
||||||
<Icon className="h-4/10 text-primary-cta-text" strokeWidth={1.5} />
|
<h2 className={`text-3xl sm:text-4xl font-bold ${textClass} text-center`}>
|
||||||
</div>
|
{title}
|
||||||
<h3 className={cls("text-xl truncate", shouldUseLightText && "text-background", metricLabelClassName)}>
|
</h2>
|
||||||
{metric.label}
|
</div>
|
||||||
</h3>
|
|
||||||
</div>
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
<div className="relative z-1 w-full flex items-center justify-center">
|
{metrics.map((metric, index) => {
|
||||||
<h4 className={cls("text-6xl font-medium truncate", shouldUseLightText && "text-background", metricValueClassName)}>
|
const Icon = metric.icon;
|
||||||
{metric.value}
|
const isFlipped = flipped[index] || false;
|
||||||
</h4>
|
|
||||||
</div>
|
return (
|
||||||
</div>
|
<div
|
||||||
);
|
key={index}
|
||||||
})}
|
className="h-64 cursor-pointer perspective"
|
||||||
|
onClick={() => toggleFlip(index)}
|
||||||
|
style={getAnimationDelay(index)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="relative w-full h-full transition-transform duration-500 transform-gpu"
|
||||||
|
style={{
|
||||||
|
transformStyle: 'preserve-3d',
|
||||||
|
transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Front Side */}
|
||||||
|
<div
|
||||||
|
className={`absolute w-full h-full ${bgClass} rounded-lg shadow-lg p-6 flex flex-col items-center justify-center border border-slate-200`}
|
||||||
|
style={{
|
||||||
|
backfaceVisibility: 'hidden',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Icon className={`w-12 h-12 ${useInvertedBackground ? 'text-blue-400' : 'text-blue-600'} mb-4`} />
|
||||||
|
<p className={`text-sm font-semibold ${textClass} text-center mb-2`}>
|
||||||
|
{metric.label}
|
||||||
|
</p>
|
||||||
|
<p className={`text-3xl font-bold ${useInvertedBackground ? 'text-blue-400' : 'text-blue-600'}`}>
|
||||||
|
{metric.value}
|
||||||
|
</p>
|
||||||
|
<p className={`text-xs ${useInvertedBackground ? 'text-slate-400' : 'text-slate-500'} mt-4 text-center`}>
|
||||||
|
Click to learn more
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Back Side */}
|
||||||
|
<div
|
||||||
|
className={`absolute w-full h-full ${useInvertedBackground ? 'bg-slate-800' : 'bg-slate-100'} rounded-lg shadow-lg p-6 flex flex-col items-center justify-center border border-slate-200`}
|
||||||
|
style={{
|
||||||
|
backfaceVisibility: 'hidden',
|
||||||
|
transform: 'rotateY(180deg)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p className={`text-sm ${textClass} text-center leading-relaxed`}>
|
||||||
|
{metric.label}: {metric.value} represents our commitment to excellence and continuous growth in this area.
|
||||||
|
</p>
|
||||||
|
<p className={`text-xs ${useInvertedBackground ? 'text-slate-400' : 'text-slate-500'} mt-4 text-center`}>
|
||||||
|
Click to flip back
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
);
|
||||||
);
|
})}
|
||||||
};
|
</div>
|
||||||
|
</div>
|
||||||
AboutMetric.displayName = "AboutMetric";
|
</section>
|
||||||
|
);
|
||||||
export default AboutMetric;
|
}
|
||||||
@@ -1,131 +1,106 @@
|
|||||||
"use client";
|
'use client';
|
||||||
|
|
||||||
import ContactForm from "@/components/form/ContactForm";
|
import React, { useState } from 'react';
|
||||||
import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
|
import { LucideIcon } from 'lucide-react';
|
||||||
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;
|
tagIcon: LucideIcon;
|
||||||
tagAnimation?: ButtonAnimationType;
|
tagAnimation?: string;
|
||||||
background: ContactCenterBackgroundProps;
|
background?: {
|
||||||
useInvertedBackground: boolean;
|
variant: string;
|
||||||
tagClassName?: string;
|
};
|
||||||
inputPlaceholder?: string;
|
useInvertedBackground?: boolean;
|
||||||
buttonText?: string;
|
inputPlaceholder: string;
|
||||||
termsText?: string;
|
buttonText: string;
|
||||||
onSubmit?: (email: string) => void;
|
termsText: string;
|
||||||
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,
|
tagIcon: TagIcon,
|
||||||
tagAnimation,
|
tagAnimation = 'slide-up',
|
||||||
background,
|
background = { variant: 'radial-gradient' },
|
||||||
useInvertedBackground,
|
useInvertedBackground = false,
|
||||||
tagClassName = "",
|
inputPlaceholder,
|
||||||
inputPlaceholder = "Enter your email",
|
buttonText,
|
||||||
buttonText = "Sign Up",
|
termsText,
|
||||||
termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
|
}: ContactCenterProps) {
|
||||||
onSubmit,
|
const [email, setEmail] = useState('');
|
||||||
ariaLabel = "Contact section",
|
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||||
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 });
|
if (email.trim()) {
|
||||||
console.log("Email send successfully");
|
setIsSubmitted(true);
|
||||||
} catch (error) {
|
setEmail('');
|
||||||
console.error("Failed to send email:", error);
|
setTimeout(() => setIsSubmitted(false), 3000);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
const bgClass =
|
||||||
<section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
|
background.variant === 'radial-gradient'
|
||||||
<div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
|
? 'bg-gradient-to-br from-blue-50 via-white to-purple-50'
|
||||||
<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)}>
|
: 'bg-white';
|
||||||
<div className="relative z-10 w-full md:w-1/2">
|
|
||||||
<ContactForm
|
|
||||||
tag={tag}
|
|
||||||
tagIcon={tagIcon}
|
|
||||||
tagAnimation={tagAnimation}
|
|
||||||
title={title}
|
|
||||||
description={description}
|
|
||||||
useInvertedBackground={useInvertedBackground}
|
|
||||||
inputPlaceholder={inputPlaceholder}
|
|
||||||
buttonText={buttonText}
|
|
||||||
termsText={termsText}
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
centered={true}
|
|
||||||
tagClassName={tagClassName}
|
|
||||||
titleClassName={titleClassName}
|
|
||||||
descriptionClassName={descriptionClassName}
|
|
||||||
formWrapperClassName={cls("md:w-8/10 2xl:w-6/10", formWrapperClassName)}
|
|
||||||
formClassName={formClassName}
|
|
||||||
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";
|
const invertedBg = useInvertedBackground ? 'bg-slate-900 text-white' : '';
|
||||||
|
|
||||||
export default ContactCenter;
|
return (
|
||||||
|
<section className={`relative py-20 px-4 sm:px-6 lg:px-8 ${bgClass} ${invertedBg}`}>
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
{/* Tag */}
|
||||||
|
<div
|
||||||
|
className={`flex items-center justify-center gap-2 mb-6 ${
|
||||||
|
tagAnimation === 'slide-up' ? 'animate-in slide-in-from-bottom-4' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<TagIcon className="w-5 h-5 text-blue-600" />
|
||||||
|
<span className="text-sm font-semibold text-blue-600 uppercase tracking-wide">
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Title */}
|
||||||
|
<h2 className="text-4xl sm:text-5xl font-bold text-center mb-4 leading-tight">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<p className={`text-center text-lg mb-10 ${useInvertedBackground ? 'text-gray-300' : 'text-gray-600'}`}>
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Form */}
|
||||||
|
<form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3 mb-6">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
placeholder={inputPlaceholder}
|
||||||
|
required
|
||||||
|
className={`flex-1 px-4 py-3 rounded-lg border transition-all focus:outline-none focus:ring-2 focus:ring-blue-500 ${
|
||||||
|
useInvertedBackground
|
||||||
|
? 'bg-slate-800 border-slate-700 text-white placeholder-gray-400'
|
||||||
|
: 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors duration-200 whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{isSubmitted ? '✓ Subscribed' : buttonText}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{/* Terms Text */}
|
||||||
|
<p className={`text-center text-sm ${useInvertedBackground ? 'text-gray-400' : 'text-gray-500'}`}>
|
||||||
|
{termsText}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,235 +1,120 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import TextBox from "@/components/Textbox";
|
import { LucideIcon } from "lucide-react";
|
||||||
import Accordion from "@/components/Accordion";
|
|
||||||
import MediaContent from "@/components/shared/MediaContent";
|
|
||||||
import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
|
|
||||||
import { cls } from "@/lib/utils";
|
|
||||||
import type { LucideIcon } from "lucide-react";
|
|
||||||
import type { ButtonConfig, ButtonAnimationType, TitleSegment } from "@/components/cardStack/types";
|
|
||||||
import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
|
|
||||||
|
|
||||||
type MediaProps =
|
interface AccordionItem {
|
||||||
| {
|
id: string;
|
||||||
imageSrc: string;
|
title: string;
|
||||||
imageAlt?: string;
|
content: string;
|
||||||
videoSrc?: never;
|
}
|
||||||
videoAriaLabel?: never;
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
videoSrc: string;
|
|
||||||
videoAriaLabel?: string;
|
|
||||||
imageSrc?: never;
|
|
||||||
imageAlt?: never;
|
|
||||||
};
|
|
||||||
|
|
||||||
type AccordionItem = {
|
interface FeatureCardTwentyOneProps {
|
||||||
id: string;
|
title: string;
|
||||||
title: string;
|
description: string;
|
||||||
content: string;
|
tag: string;
|
||||||
};
|
tagIcon: LucideIcon;
|
||||||
|
tagAnimation?: string;
|
||||||
|
accordionItems: AccordionItem[];
|
||||||
|
}
|
||||||
|
|
||||||
type FeatureCardTwentyOneProps = MediaProps & {
|
export default function FeatureCardTwentyOne({
|
||||||
title: string;
|
title,
|
||||||
titleSegments?: TitleSegment[];
|
description,
|
||||||
description: string;
|
tag,
|
||||||
tag?: string;
|
tagIcon: TagIcon,
|
||||||
tagIcon?: LucideIcon;
|
accordionItems,
|
||||||
tagAnimation?: ButtonAnimationType;
|
}: FeatureCardTwentyOneProps) {
|
||||||
buttons?: ButtonConfig[];
|
const [flipped, setFlipped] = useState<{ [key: string]: boolean }>({});
|
||||||
buttonAnimation?: ButtonAnimationType;
|
|
||||||
mediaAnimation: ButtonAnimationType;
|
|
||||||
accordionItems: AccordionItem[];
|
|
||||||
useInvertedBackground: InvertedBackground;
|
|
||||||
mediaPosition?: "left" | "right";
|
|
||||||
ariaLabel?: string;
|
|
||||||
className?: string;
|
|
||||||
containerClassName?: string;
|
|
||||||
mediaWrapperClassName?: string;
|
|
||||||
mediaClassName?: string;
|
|
||||||
contentClassName?: string;
|
|
||||||
textBoxClassName?: string;
|
|
||||||
titleClassName?: string;
|
|
||||||
descriptionClassName?: string;
|
|
||||||
tagClassName?: string;
|
|
||||||
buttonContainerClassName?: string;
|
|
||||||
buttonClassName?: string;
|
|
||||||
buttonTextClassName?: string;
|
|
||||||
titleImageWrapperClassName?: string;
|
|
||||||
titleImageClassName?: string;
|
|
||||||
accordionContainerClassName?: string;
|
|
||||||
accordionClassName?: string;
|
|
||||||
accordionTitleClassName?: string;
|
|
||||||
accordionContentClassName?: string;
|
|
||||||
accordionIconContainerClassName?: string;
|
|
||||||
accordionIconClassName?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const FeatureCardTwentyOne = ({
|
const toggleFlip = (id: string) => {
|
||||||
title,
|
setFlipped((prev) => ({
|
||||||
titleSegments,
|
...prev,
|
||||||
description,
|
[id]: !prev[id],
|
||||||
tag,
|
}));
|
||||||
tagIcon,
|
};
|
||||||
tagAnimation,
|
|
||||||
buttons,
|
|
||||||
buttonAnimation,
|
|
||||||
mediaAnimation,
|
|
||||||
accordionItems,
|
|
||||||
imageSrc,
|
|
||||||
imageAlt,
|
|
||||||
videoSrc,
|
|
||||||
videoAriaLabel,
|
|
||||||
useInvertedBackground,
|
|
||||||
mediaPosition = "left",
|
|
||||||
ariaLabel = "Feature section",
|
|
||||||
className = "",
|
|
||||||
containerClassName = "",
|
|
||||||
mediaWrapperClassName = "",
|
|
||||||
mediaClassName = "",
|
|
||||||
contentClassName = "",
|
|
||||||
textBoxClassName = "",
|
|
||||||
titleClassName = "",
|
|
||||||
descriptionClassName = "",
|
|
||||||
tagClassName = "",
|
|
||||||
buttonContainerClassName = "",
|
|
||||||
buttonClassName = "",
|
|
||||||
buttonTextClassName = "",
|
|
||||||
titleImageWrapperClassName = "",
|
|
||||||
titleImageClassName = "",
|
|
||||||
accordionContainerClassName = "",
|
|
||||||
accordionClassName = "",
|
|
||||||
accordionTitleClassName = "",
|
|
||||||
accordionContentClassName = "",
|
|
||||||
accordionIconContainerClassName = "",
|
|
||||||
accordionIconClassName = "",
|
|
||||||
}: FeatureCardTwentyOneProps) => {
|
|
||||||
const [activeAccordion, setActiveAccordion] = useState<number>(0);
|
|
||||||
const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
|
|
||||||
|
|
||||||
const handleAccordionToggle = (index: number) => {
|
return (
|
||||||
setActiveAccordion(activeAccordion === index ? -1 : index);
|
<section className="w-full py-12 md:py-20 lg:py-24">
|
||||||
};
|
<div className="container mx-auto px-4 md:px-6">
|
||||||
|
{/* Header Section */}
|
||||||
const mediaElement = (
|
<div className="mb-12 md:mb-16 text-center">
|
||||||
<div
|
<div className="inline-flex items-center gap-2 mb-4 px-4 py-2 bg-blue-50 rounded-full">
|
||||||
ref={mediaContainerRef}
|
<TagIcon className="w-4 h-4 text-blue-600" />
|
||||||
className={cls(
|
<span className="text-sm font-semibold text-blue-600">{tag}</span>
|
||||||
"w-full md:w-1/2 h-[50svh] md:h-auto card rounded-theme-capped overflow-hidden",
|
</div>
|
||||||
mediaWrapperClassName
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-gray-900">
|
||||||
)}
|
{title}
|
||||||
>
|
</h2>
|
||||||
<MediaContent
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||||
imageSrc={imageSrc}
|
{description}
|
||||||
videoSrc={videoSrc}
|
</p>
|
||||||
imageAlt={imageAlt}
|
|
||||||
videoAriaLabel={videoAriaLabel}
|
|
||||||
imageClassName={cls("w-full h-full object-cover", mediaClassName)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
|
|
||||||
const contentElement = (
|
{/* Flip Cards Grid */}
|
||||||
<div className={cls(
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||||
"w-full md:w-1/2 flex flex-col",
|
{accordionItems.map((item) => (
|
||||||
contentClassName
|
<div
|
||||||
)}>
|
key={item.id}
|
||||||
{/* Mobile */}
|
className="h-80 cursor-pointer perspective"
|
||||||
<TextBox
|
onClick={() => toggleFlip(item.id)}
|
||||||
title={title}
|
>
|
||||||
titleSegments={titleSegments}
|
<div
|
||||||
description={description}
|
className="relative w-full h-full transition-transform duration-500 transform-gpu"
|
||||||
tag={tag}
|
style={{
|
||||||
tagIcon={tagIcon}
|
transformStyle: "preserve-3d",
|
||||||
tagAnimation={tagAnimation}
|
transform: flipped[item.id]
|
||||||
buttons={buttons}
|
? "rotateY(180deg)"
|
||||||
buttonAnimation={buttonAnimation}
|
: "rotateY(0deg)",
|
||||||
useInvertedBackground={useInvertedBackground}
|
}}
|
||||||
className={cls("flex flex-col gap-1 md:hidden", textBoxClassName)}
|
>
|
||||||
titleClassName={cls("text-4xl md:text-5xl font-medium text-center md:text-left text-balance", titleClassName)}
|
{/* Front Side */}
|
||||||
descriptionClassName={cls("text-base md:text-lg leading-[1.2] text-center md:text-left", descriptionClassName)}
|
<div
|
||||||
tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 md:mb-2", tagClassName)}
|
className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between border border-gray-200"
|
||||||
buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-4", buttonContainerClassName)}
|
style={{
|
||||||
buttonClassName={buttonClassName}
|
backfaceVisibility: "hidden",
|
||||||
buttonTextClassName={cls("text-base", buttonTextClassName)}
|
}}
|
||||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
>
|
||||||
titleImageClassName={titleImageClassName}
|
<div>
|
||||||
center={true}
|
<h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-2">
|
||||||
/>
|
{item.title}
|
||||||
{/* Desktop */}
|
</h3>
|
||||||
<TextBox
|
<p className="text-gray-500 text-sm">
|
||||||
title={title}
|
Click to read more
|
||||||
titleSegments={titleSegments}
|
</p>
|
||||||
description={description}
|
</div>
|
||||||
tag={tag}
|
<div className="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg">
|
||||||
tagIcon={tagIcon}
|
<span className="text-blue-600 font-bold text-lg">
|
||||||
tagAnimation={tagAnimation}
|
{item.id}
|
||||||
buttons={buttons}
|
</span>
|
||||||
buttonAnimation={buttonAnimation}
|
</div>
|
||||||
useInvertedBackground={useInvertedBackground}
|
</div>
|
||||||
className={cls("hidden md:flex flex-col gap-1", textBoxClassName)}
|
|
||||||
titleClassName={cls("text-4xl md:text-5xl font-medium text-center md:text-left text-balance", titleClassName)}
|
|
||||||
descriptionClassName={cls("text-base md:text-lg leading-[1.2] text-center md:text-left", descriptionClassName)}
|
|
||||||
tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 md:mb-2", tagClassName)}
|
|
||||||
buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-4", buttonContainerClassName)}
|
|
||||||
buttonClassName={buttonClassName}
|
|
||||||
buttonTextClassName={cls("text-base", buttonTextClassName)}
|
|
||||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
|
||||||
titleImageClassName={titleImageClassName}
|
|
||||||
center={false}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className={cls(
|
{/* Back Side */}
|
||||||
"flex flex-col mt-8 divide-y divide-accent/20 border-y border-accent/20",
|
<div
|
||||||
accordionContainerClassName
|
className="absolute w-full h-full bg-blue-600 rounded-lg shadow-lg p-6 flex flex-col justify-between border border-blue-700"
|
||||||
)}>
|
style={{
|
||||||
{accordionItems.map((item, index) => (
|
backfaceVisibility: "hidden",
|
||||||
<Accordion
|
transform: "rotateY(180deg)",
|
||||||
key={item.id}
|
}}
|
||||||
index={index}
|
>
|
||||||
isActive={activeAccordion === index}
|
<div>
|
||||||
onToggle={handleAccordionToggle}
|
<h3 className="text-xl md:text-2xl font-bold text-white mb-4">
|
||||||
title={item.title}
|
{item.title}
|
||||||
content={item.content}
|
</h3>
|
||||||
showCard={false}
|
<p className="text-blue-50 text-sm leading-relaxed">
|
||||||
useInvertedBackground={!useInvertedBackground ? undefined : useInvertedBackground}
|
{item.content}
|
||||||
className={cls("py-4 md:py-6", accordionClassName)}
|
</p>
|
||||||
titleClassName={cls("text-xl md:text-2xl", accordionTitleClassName)}
|
</div>
|
||||||
contentClassName={accordionContentClassName}
|
<p className="text-blue-200 text-xs text-center">
|
||||||
iconContainerClassName={accordionIconContainerClassName}
|
Click to flip back
|
||||||
iconClassName={accordionIconClassName}
|
</p>
|
||||||
/>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
|
</section>
|
||||||
return (
|
);
|
||||||
<section
|
}
|
||||||
aria-label={ariaLabel}
|
|
||||||
className={cls("relative w-full py-20", useInvertedBackground && "bg-foreground", className)}
|
|
||||||
>
|
|
||||||
<div className={cls(
|
|
||||||
"w-content-width mx-auto flex flex-col md:flex-row gap-8 md:gap-15",
|
|
||||||
containerClassName
|
|
||||||
)}>
|
|
||||||
{mediaPosition === "left" ? (
|
|
||||||
<>
|
|
||||||
{mediaElement}
|
|
||||||
{contentElement}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{contentElement}
|
|
||||||
{mediaElement}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
FeatureCardTwentyOne.displayName = "FeatureCardTwentyOne";
|
|
||||||
|
|
||||||
export default FeatureCardTwentyOne;
|
|
||||||
@@ -1,108 +1,89 @@
|
|||||||
"use client";
|
'use client';
|
||||||
|
|
||||||
// import Image from "next/image";
|
import React from 'react';
|
||||||
import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
|
|
||||||
import FooterColumns from "@/components/shared/FooterColumns";
|
|
||||||
import { cls } from "@/lib/utils";
|
|
||||||
import type { FooterColumn } from "@/components/shared/FooterColumns";
|
|
||||||
|
|
||||||
interface FooterBaseProps {
|
interface FooterLink {
|
||||||
// logoSrc?: string;
|
label: string;
|
||||||
logoText?: string;
|
href: string;
|
||||||
// logoWidth?: number;
|
|
||||||
// logoHeight?: number;
|
|
||||||
columns: FooterColumn[];
|
|
||||||
copyrightText?: string;
|
|
||||||
onPrivacyClick?: () => void;
|
|
||||||
ariaLabel?: string;
|
|
||||||
className?: string;
|
|
||||||
containerClassName?: string;
|
|
||||||
// logoClassName?: string;
|
|
||||||
logoTextClassName?: string;
|
|
||||||
columnsClassName?: string;
|
|
||||||
columnClassName?: string;
|
|
||||||
columnTitleClassName?: string;
|
|
||||||
columnItemClassName?: string;
|
|
||||||
copyrightContainerClassName?: string;
|
|
||||||
copyrightTextClassName?: string;
|
|
||||||
privacyButtonClassName?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const FooterBase = ({
|
interface FooterColumn {
|
||||||
// logoSrc = "/brand/logowhite.svg",
|
title: string;
|
||||||
logoText = "Webild",
|
items: FooterLink[];
|
||||||
// logoWidth = 120,
|
}
|
||||||
// logoHeight = 40,
|
|
||||||
columns,
|
|
||||||
copyrightText = `© 2025 | Webild`,
|
|
||||||
onPrivacyClick,
|
|
||||||
ariaLabel = "Site footer",
|
|
||||||
className = "",
|
|
||||||
containerClassName = "",
|
|
||||||
// logoClassName = "",
|
|
||||||
logoTextClassName = "",
|
|
||||||
columnsClassName = "",
|
|
||||||
columnClassName = "",
|
|
||||||
columnTitleClassName = "",
|
|
||||||
columnItemClassName = "",
|
|
||||||
copyrightContainerClassName = "",
|
|
||||||
copyrightTextClassName = "",
|
|
||||||
privacyButtonClassName = "",
|
|
||||||
}: FooterBaseProps) => {
|
|
||||||
return (
|
|
||||||
<footer
|
|
||||||
role="contentinfo"
|
|
||||||
aria-label={ariaLabel}
|
|
||||||
className={cls("relative overflow-hidden w-full primary-button text-primary-cta-text py-15 mt-20", className)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={cls("relative w-content-width mx-auto z-10", containerClassName)}
|
|
||||||
>
|
|
||||||
<div className="flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
|
|
||||||
{/* {logoSrc ? (
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<Image
|
|
||||||
src={logoSrc}
|
|
||||||
alt="Logo"
|
|
||||||
width={logoWidth}
|
|
||||||
height={logoHeight}
|
|
||||||
className={cls("object-contain", logoClassName)}
|
|
||||||
unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
|
|
||||||
aria-hidden={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : ( */}
|
|
||||||
<h2 className={cls("text-4xl font-medium text-primary-cta-text", logoTextClassName)}>
|
|
||||||
{logoText}
|
|
||||||
</h2>
|
|
||||||
{/* )} */}
|
|
||||||
|
|
||||||
<FooterColumns
|
interface FooterBaseProps {
|
||||||
columns={columns}
|
logoText: string;
|
||||||
className={columnsClassName}
|
copyrightText: string;
|
||||||
columnClassName={columnClassName}
|
columns: FooterColumn[];
|
||||||
columnTitleClassName={cls("text-primary-cta-text/50", columnTitleClassName)}
|
}
|
||||||
columnItemClassName={cls("text-primary-cta-text", columnItemClassName)}
|
|
||||||
/>
|
export default function FooterBase({
|
||||||
|
logoText,
|
||||||
|
copyrightText,
|
||||||
|
columns
|
||||||
|
}: FooterBaseProps) {
|
||||||
|
return (
|
||||||
|
<footer className="bg-slate-900 text-slate-100 py-12 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
{/* Top Section */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
||||||
|
{/* Logo Section */}
|
||||||
|
<div className="flex flex-col justify-start">
|
||||||
|
<h2 className="text-2xl font-bold text-white mb-2">{logoText}</h2>
|
||||||
|
<p className="text-slate-400 text-sm">
|
||||||
|
Building amazing communities together
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer Columns */}
|
||||||
|
{columns.map((column, index) => (
|
||||||
|
<div key={index}>
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4">
|
||||||
|
{column.title}
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{column.items.map((item, itemIndex) => (
|
||||||
|
<li key={itemIndex}>
|
||||||
|
<a
|
||||||
|
href={item.href}
|
||||||
|
className="text-slate-400 hover:text-white transition-colors duration-200 text-sm"
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
{/* Divider */}
|
||||||
className={cls("w-full flex items-center justify-between pt-9 border-t border-primary-cta-text/20", copyrightContainerClassName)}
|
<div className="border-t border-slate-700 my-8"></div>
|
||||||
>
|
|
||||||
<span className={cls("text-primary-cta-text/50 text-sm", copyrightTextClassName)}>
|
{/* Bottom Section */}
|
||||||
|
<div className="flex flex-col sm:flex-row justify-between items-center">
|
||||||
|
<p className="text-slate-400 text-sm mb-4 sm:mb-0">
|
||||||
{copyrightText}
|
{copyrightText}
|
||||||
</span>
|
</p>
|
||||||
<ButtonTextUnderline
|
<div className="flex gap-6">
|
||||||
text="Privacy Policy"
|
<a
|
||||||
onClick={onPrivacyClick}
|
href="#"
|
||||||
className={cls("text-primary-cta-text/50", privacyButtonClassName)}
|
className="text-slate-400 hover:text-white transition-colors duration-200"
|
||||||
/>
|
aria-label="Privacy Policy"
|
||||||
|
>
|
||||||
|
<span className="text-sm">Privacy Policy</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-slate-400 hover:text-white transition-colors duration-200"
|
||||||
|
aria-label="Terms of Service"
|
||||||
|
>
|
||||||
|
<span className="text-sm">Terms of Service</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
FooterBase.displayName = "FooterBase";
|
|
||||||
|
|
||||||
export default FooterBase;
|
|
||||||
@@ -1,172 +1,187 @@
|
|||||||
"use client";
|
'use client';
|
||||||
|
|
||||||
import MediaContent from "@/components/shared/MediaContent";
|
import React, { useState } from 'react';
|
||||||
import FillWidthText from "@/components/shared/FillWidthText/FillWidthText";
|
import Image from 'next/image';
|
||||||
import TextAnimation from "@/components/text/TextAnimation";
|
|
||||||
import Button from "@/components/button/Button";
|
|
||||||
import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
|
|
||||||
import { cls } from "@/lib/utils";
|
|
||||||
import { getButtonProps } from "@/lib/buttonUtils";
|
|
||||||
import { Plus } from "lucide-react";
|
|
||||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
|
||||||
import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
|
|
||||||
import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
|
|
||||||
|
|
||||||
type HeroLogoBillboardSplitBackgroundProps = Extract<
|
interface Button {
|
||||||
HeroBackgroundVariantProps,
|
text: string;
|
||||||
| { variant: "plain" }
|
href: string;
|
||||||
| { 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: "glowing-orb" }
|
|
||||||
| { 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 HeroLogoBillboardSplitProps {
|
|
||||||
logoText: string;
|
|
||||||
description: string;
|
|
||||||
background: HeroLogoBillboardSplitBackgroundProps;
|
|
||||||
buttons: ButtonConfig[];
|
|
||||||
buttonAnimation?: ButtonAnimationType;
|
|
||||||
layoutOrder: "default" | "reverse";
|
|
||||||
mediaAnimation: ButtonAnimationType;
|
|
||||||
imageSrc?: string;
|
|
||||||
videoSrc?: string;
|
|
||||||
imageAlt?: string;
|
|
||||||
videoAriaLabel?: string;
|
|
||||||
frameStyle?: "card" | "browser";
|
|
||||||
ariaLabel?: string;
|
|
||||||
className?: string;
|
|
||||||
containerClassName?: string;
|
|
||||||
logoContainerClassName?: string;
|
|
||||||
descriptionClassName?: string;
|
|
||||||
buttonContainerClassName?: string;
|
|
||||||
buttonClassName?: string;
|
|
||||||
buttonTextClassName?: string;
|
|
||||||
logoClassName?: string;
|
|
||||||
mediaWrapperClassName?: string;
|
|
||||||
imageClassName?: string;
|
|
||||||
browserBarClassName?: string;
|
|
||||||
addressBarClassName?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const HeroLogoBillboardSplit = ({
|
interface Background {
|
||||||
logoText,
|
variant: 'radial-gradient' | 'linear-gradient' | 'solid';
|
||||||
description,
|
}
|
||||||
background,
|
|
||||||
buttons,
|
|
||||||
buttonAnimation = "none",
|
|
||||||
layoutOrder,
|
|
||||||
mediaAnimation,
|
|
||||||
imageSrc,
|
|
||||||
videoSrc,
|
|
||||||
imageAlt = "",
|
|
||||||
videoAriaLabel = "Hero video",
|
|
||||||
frameStyle = "card",
|
|
||||||
ariaLabel = "Hero section",
|
|
||||||
className = "",
|
|
||||||
containerClassName = "",
|
|
||||||
logoContainerClassName = "",
|
|
||||||
descriptionClassName = "",
|
|
||||||
buttonContainerClassName = "",
|
|
||||||
buttonClassName = "",
|
|
||||||
buttonTextClassName = "",
|
|
||||||
logoClassName = "",
|
|
||||||
mediaWrapperClassName = "",
|
|
||||||
imageClassName = "",
|
|
||||||
browserBarClassName = "",
|
|
||||||
addressBarClassName = "",
|
|
||||||
}: HeroLogoBillboardSplitProps) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const { containerRef: buttonContainerRef } = useButtonAnimation({ animationType: buttonAnimation });
|
|
||||||
const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
|
|
||||||
|
|
||||||
return (
|
interface HeroLogoBillboardSplitProps {
|
||||||
<section
|
logoText: string;
|
||||||
aria-label={ariaLabel}
|
description: string;
|
||||||
className={cls("relative w-full py-hero-page-padding", className)}
|
background: Background;
|
||||||
>
|
buttons: Button[];
|
||||||
<HeroBackgrounds {...background} />
|
layoutOrder: 'default' | 'reverse';
|
||||||
<div className={cls("w-content-width mx-auto flex flex-col gap-6 md:gap-15 relative z-10", containerClassName)}>
|
imageSrc: string;
|
||||||
<div className={cls(
|
imageAlt: string;
|
||||||
"w-full flex gap-6 md:gap-8",
|
frameStyle: 'card' | 'none';
|
||||||
layoutOrder === "default" ? "flex-col" : "flex-col-reverse",
|
buttonAnimation: 'slide-up' | 'fade' | 'none';
|
||||||
logoContainerClassName
|
mediaAnimation: 'opacity' | 'scale' | 'none';
|
||||||
)}>
|
}
|
||||||
<div className="relative flex flex-col gap-3 md:flex-row justify-between md:items-end w-full" >
|
|
||||||
<div className="relative flex flex-col gap-4 w-full md:w-1/2" >
|
export default function HeroLogoBillboardSplit({
|
||||||
<TextAnimation
|
logoText,
|
||||||
type={theme.defaultTextAnimation}
|
description,
|
||||||
text={description}
|
background,
|
||||||
variant="words-trigger"
|
buttons,
|
||||||
start="top 100%"
|
layoutOrder,
|
||||||
className={cls("text-lg md:text-3xl text-foreground/75 text-balance text-start leading-[1.2]", descriptionClassName)}
|
imageSrc,
|
||||||
/>
|
imageAlt,
|
||||||
</div>
|
frameStyle,
|
||||||
<div ref={buttonContainerRef} className={cls("flex flex-wrap gap-4 max-md:justify-center", buttonContainerClassName)}>
|
buttonAnimation,
|
||||||
{buttons.slice(0, 2).map((button, index) => (
|
mediaAnimation,
|
||||||
<Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
|
}: HeroLogoBillboardSplitProps) {
|
||||||
))}
|
const [isFlipped, setIsFlipped] = useState(false);
|
||||||
</div>
|
|
||||||
</div>
|
const getBackgroundClass = () => {
|
||||||
<div className="relative w-full flex">
|
switch (background.variant) {
|
||||||
<FillWidthText className={cls("text-foreground", logoClassName)}>
|
case 'radial-gradient':
|
||||||
{logoText}
|
return 'bg-gradient-to-br from-blue-50 via-white to-purple-50';
|
||||||
</FillWidthText>
|
case 'linear-gradient':
|
||||||
</div>
|
return 'bg-gradient-to-r from-blue-50 to-purple-50';
|
||||||
|
case 'solid':
|
||||||
|
return 'bg-white';
|
||||||
|
default:
|
||||||
|
return 'bg-white';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getButtonAnimationClass = () => {
|
||||||
|
switch (buttonAnimation) {
|
||||||
|
case 'slide-up':
|
||||||
|
return 'transform transition-all duration-500 hover:translate-y-[-4px]';
|
||||||
|
case 'fade':
|
||||||
|
return 'transition-opacity duration-300 hover:opacity-80';
|
||||||
|
case 'none':
|
||||||
|
return '';
|
||||||
|
default:
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getMediaAnimationClass = () => {
|
||||||
|
switch (mediaAnimation) {
|
||||||
|
case 'opacity':
|
||||||
|
return 'transition-opacity duration-500 hover:opacity-90';
|
||||||
|
case 'scale':
|
||||||
|
return 'transition-transform duration-500 hover:scale-105';
|
||||||
|
case 'none':
|
||||||
|
return '';
|
||||||
|
default:
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getFrameClass = () => {
|
||||||
|
switch (frameStyle) {
|
||||||
|
case 'card':
|
||||||
|
return 'rounded-2xl shadow-lg overflow-hidden';
|
||||||
|
case 'none':
|
||||||
|
return '';
|
||||||
|
default:
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const isReverse = layoutOrder === 'reverse';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className={`w-full min-h-screen flex items-center justify-center ${getBackgroundClass()} py-20 px-4 sm:px-6 lg:px-8`}>
|
||||||
|
<div className="max-w-7xl w-full mx-auto">
|
||||||
|
<div className={`grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center ${isReverse ? 'lg:grid-flow-dense' : ''}`}>
|
||||||
|
{/* Content Section */}
|
||||||
|
<div className={`flex flex-col justify-center space-y-8 ${isReverse ? 'lg:col-start-2' : ''}`}>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h1 className="text-5xl sm:text-6xl font-bold text-gray-900 leading-tight">
|
||||||
|
{logoText}
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-600 leading-relaxed max-w-lg">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Buttons */}
|
||||||
|
<div className="flex flex-wrap gap-4 pt-4">
|
||||||
|
{buttons.map((button, index) => (
|
||||||
|
<a
|
||||||
|
key={index}
|
||||||
|
href={button.href}
|
||||||
|
className={`px-8 py-3 rounded-lg font-semibold transition-all duration-300 ${
|
||||||
|
index === 0
|
||||||
|
? 'bg-blue-600 text-white hover:bg-blue-700 shadow-lg'
|
||||||
|
: 'bg-gray-200 text-gray-900 hover:bg-gray-300'
|
||||||
|
} ${getButtonAnimationClass()}`}
|
||||||
|
>
|
||||||
|
{button.text}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Image Section with Flip Card */}
|
||||||
|
<div className={`flex justify-center items-center ${isReverse ? 'lg:col-start-1' : ''}`}>
|
||||||
|
<div
|
||||||
|
className="w-full max-w-md h-96 cursor-pointer perspective"
|
||||||
|
onMouseEnter={() => setIsFlipped(true)}
|
||||||
|
onMouseLeave={() => setIsFlipped(false)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`relative w-full h-full transition-transform duration-500 ${getFrameClass()} ${getMediaAnimationClass()}`}
|
||||||
|
style={{
|
||||||
|
transformStyle: 'preserve-3d',
|
||||||
|
transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Front Side - Image */}
|
||||||
|
<div
|
||||||
|
className={`absolute w-full h-full ${getFrameClass()}`}
|
||||||
|
style={{
|
||||||
|
backfaceVisibility: 'hidden',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={imageSrc}
|
||||||
|
alt={imageAlt}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{frameStyle === "browser" ? (
|
{/* Back Side - Testimonial */}
|
||||||
<div ref={mediaContainerRef} className={cls("w-full overflow-hidden rounded-theme-capped card", mediaWrapperClassName)}>
|
<div
|
||||||
<div className={cls("relative z-1 bg-background border-b border-foreground/10 px-4 py-3 flex items-center gap-4", browserBarClassName)}>
|
className={`absolute w-full h-full bg-gradient-to-br from-blue-600 to-purple-600 p-8 flex flex-col justify-center items-center text-white ${getFrameClass()}`}
|
||||||
<div className="flex items-center gap-2">
|
style={{
|
||||||
<div className="h-3 w-auto aspect-square rounded-theme bg-accent" />
|
backfaceVisibility: 'hidden',
|
||||||
<div className="h-3 w-auto aspect-square rounded-theme bg-accent" />
|
transform: 'rotateY(180deg)',
|
||||||
<div className="h-3 w-auto aspect-square rounded-theme bg-accent" />
|
}}
|
||||||
</div>
|
>
|
||||||
<div className="flex items-center gap-2 flex-1">
|
<div className="text-center space-y-4">
|
||||||
<div className={cls("w-15 md:w-10 h-8 rounded-theme bg-accent/10", addressBarClassName)} />
|
<svg
|
||||||
<div className="w-15 md:w-10 h-8 rounded-theme bg-accent/10" />
|
className="w-12 h-12 mx-auto opacity-80"
|
||||||
<div className="hidden md:block w-10 h-8 rounded-theme bg-accent/10" />
|
fill="currentColor"
|
||||||
</div>
|
viewBox="0 0 24 24"
|
||||||
<Plus className="h-[var(--text-sm)] w-auto text-foreground" />
|
>
|
||||||
</div>
|
<path d="M3 21c3 0 7-1 7-8V5c0-1.25-4.716-5-7-5-6 0-6.002 4-6 7v11c0 1 0 7 6 7z" />
|
||||||
<div className="relative z-1 p-0">
|
<path d="M15 21c3 0 7-1 7-8V5c0-1.25-4.716-5-7-5-6 0-6.002 4-6 7v11c0 1 0 7 6 7z" />
|
||||||
<MediaContent
|
</svg>
|
||||||
imageSrc={imageSrc}
|
<p className="text-lg font-semibold leading-relaxed">
|
||||||
videoSrc={videoSrc}
|
"CompClub has transformed how I connect with fellow tech enthusiasts. The projects are innovative and the community is incredibly supportive!"
|
||||||
imageAlt={imageAlt}
|
</p>
|
||||||
videoAriaLabel={videoAriaLabel}
|
<p className="text-sm opacity-90">- Sarah Chen, Tech Innovator</p>
|
||||||
imageClassName={cls("z-1 rounded-none! aspect-square md:aspect-video!", imageClassName)}
|
</div>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div ref={mediaContainerRef} className={cls("w-full overflow-hidden rounded-theme-capped card p-4", mediaWrapperClassName)}>
|
|
||||||
<MediaContent
|
|
||||||
imageSrc={imageSrc}
|
|
||||||
videoSrc={videoSrc}
|
|
||||||
imageAlt={imageAlt}
|
|
||||||
videoAriaLabel={videoAriaLabel}
|
|
||||||
imageClassName={cls("z-1 aspect-square md:aspect-video", imageClassName)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
);
|
</div>
|
||||||
};
|
</div>
|
||||||
|
</section>
|
||||||
HeroLogoBillboardSplit.displayName = "HeroLogoBillboardSplit";
|
);
|
||||||
|
}
|
||||||
export default HeroLogoBillboardSplit;
|
|
||||||
@@ -1,186 +1,151 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { memo } from "react";
|
import React, { useState } from "react";
|
||||||
import CardStack from "@/components/cardStack/CardStack";
|
import { LucideIcon } 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 Metric = {
|
interface Metric {
|
||||||
id: string;
|
id: string;
|
||||||
icon: LucideIcon;
|
icon: LucideIcon;
|
||||||
title: string;
|
title: string;
|
||||||
value: string;
|
value: string;
|
||||||
};
|
|
||||||
|
|
||||||
interface MetricCardThreeProps {
|
|
||||||
metrics: Metric[];
|
|
||||||
carouselMode?: "auto" | "buttons";
|
|
||||||
uniformGridCustomHeightClasses?: string;
|
|
||||||
animationType: CardAnimationTypeWith3D;
|
|
||||||
title: string;
|
|
||||||
titleSegments?: TitleSegment[];
|
|
||||||
description: string;
|
|
||||||
tag?: string;
|
|
||||||
tagIcon?: LucideIcon;
|
|
||||||
tagAnimation?: ButtonAnimationType;
|
|
||||||
buttons?: ButtonConfig[];
|
|
||||||
buttonAnimation?: ButtonAnimationType;
|
|
||||||
textboxLayout: TextboxLayout;
|
|
||||||
useInvertedBackground: InvertedBackground;
|
|
||||||
ariaLabel?: string;
|
|
||||||
className?: string;
|
|
||||||
containerClassName?: string;
|
|
||||||
cardClassName?: string;
|
|
||||||
textBoxTitleClassName?: string;
|
|
||||||
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 {
|
interface Button {
|
||||||
metric: Metric;
|
text: string;
|
||||||
shouldUseLightText: boolean;
|
href: string;
|
||||||
cardClassName?: string;
|
|
||||||
iconContainerClassName?: string;
|
|
||||||
iconClassName?: string;
|
|
||||||
metricTitleClassName?: string;
|
|
||||||
valueClassName?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const MetricCardItem = memo(({
|
interface Props {
|
||||||
metric,
|
title: string;
|
||||||
shouldUseLightText,
|
description: string;
|
||||||
cardClassName = "",
|
tag: string;
|
||||||
iconContainerClassName = "",
|
tagIcon: LucideIcon;
|
||||||
iconClassName = "",
|
tagAnimation?: string;
|
||||||
metricTitleClassName = "",
|
metrics: Metric[];
|
||||||
valueClassName = "",
|
textboxLayout?: string;
|
||||||
}: MetricCardItemProps) => {
|
animationType?: string;
|
||||||
return (
|
useInvertedBackground?: boolean;
|
||||||
<div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col items-center justify-center gap-3", cardClassName)}>
|
buttons?: Button[];
|
||||||
<div className="relative z-1 w-full flex items-center justify-center gap-2">
|
buttonAnimation?: string;
|
||||||
<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>
|
export default function MetricCardThree({
|
||||||
<h3 className={cls("text-xl truncate", shouldUseLightText ? "text-background" : "text-foreground", metricTitleClassName)}>
|
title,
|
||||||
{metric.title}
|
description,
|
||||||
</h3>
|
tag,
|
||||||
</div>
|
tagIcon: TagIcon,
|
||||||
<div className="relative z-1 w-full flex items-center justify-center">
|
metrics,
|
||||||
<h4 className={cls("text-7xl font-medium truncate", shouldUseLightText ? "text-background" : "text-foreground", valueClassName)}>
|
useInvertedBackground = false,
|
||||||
{metric.value}
|
buttons = [],
|
||||||
</h4>
|
}: Props) {
|
||||||
</div>
|
const [flipped, setFlipped] = useState<{ [key: string]: boolean }>({});
|
||||||
|
|
||||||
|
const toggleFlip = (id: string) => {
|
||||||
|
setFlipped((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[id]: !prev[id],
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const bgClass = useInvertedBackground
|
||||||
|
? "bg-slate-900 text-white"
|
||||||
|
: "bg-white text-slate-900";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className={`py-16 px-4 sm:px-6 lg:px-8 ${bgClass}`}>
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
{/* Header Section */}
|
||||||
|
<div className="mb-12 text-center">
|
||||||
|
<div className="inline-flex items-center gap-2 mb-4 px-4 py-2 rounded-full bg-blue-100 text-blue-700">
|
||||||
|
<TagIcon className="w-4 h-4" />
|
||||||
|
<span className="text-sm font-semibold">{tag}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="text-4xl sm:text-5xl font-bold mb-4">{title}</h2>
|
||||||
|
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
MetricCardItem.displayName = "MetricCardItem";
|
{/* Metrics Grid with Flip Cards */}
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||||
|
{metrics.map((metric) => {
|
||||||
|
const MetricIcon = metric.icon;
|
||||||
|
const isFlipped = flipped[metric.id] || false;
|
||||||
|
|
||||||
const MetricCardThree = ({
|
return (
|
||||||
metrics,
|
<div
|
||||||
carouselMode = "buttons",
|
key={metric.id}
|
||||||
uniformGridCustomHeightClasses = "min-h-70 2xl:min-h-80",
|
className="h-64 cursor-pointer perspective"
|
||||||
animationType,
|
onClick={() => toggleFlip(metric.id)}
|
||||||
title,
|
>
|
||||||
titleSegments,
|
<div
|
||||||
description,
|
className={`relative w-full h-full transition-transform duration-500 transform-gpu ${
|
||||||
tag,
|
isFlipped ? "rotate-y-180" : ""
|
||||||
tagIcon,
|
}`}
|
||||||
tagAnimation,
|
style={{
|
||||||
buttons,
|
transformStyle: "preserve-3d",
|
||||||
buttonAnimation,
|
transform: isFlipped
|
||||||
textboxLayout,
|
? "rotateY(180deg)"
|
||||||
useInvertedBackground,
|
: "rotateY(0deg)",
|
||||||
ariaLabel = "Metrics section",
|
}}
|
||||||
className = "",
|
>
|
||||||
containerClassName = "",
|
{/* Front of Card */}
|
||||||
cardClassName = "",
|
<div
|
||||||
textBoxTitleClassName = "",
|
className="absolute w-full h-full bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-6 flex flex-col items-center justify-center text-center border border-blue-200 shadow-lg"
|
||||||
textBoxTitleImageWrapperClassName = "",
|
style={{
|
||||||
textBoxTitleImageClassName = "",
|
backfaceVisibility: "hidden",
|
||||||
textBoxDescriptionClassName = "",
|
}}
|
||||||
iconContainerClassName = "",
|
>
|
||||||
iconClassName = "",
|
<MetricIcon className="w-12 h-12 text-blue-600 mb-4" />
|
||||||
metricTitleClassName = "",
|
<h3 className="text-sm font-semibold text-slate-700 mb-3">
|
||||||
valueClassName = "",
|
{metric.title}
|
||||||
gridClassName = "",
|
</h3>
|
||||||
carouselClassName = "",
|
<p className="text-4xl font-bold text-blue-600">
|
||||||
controlsClassName = "",
|
{metric.value}
|
||||||
textBoxClassName = "",
|
</p>
|
||||||
textBoxTagClassName = "",
|
<p className="text-xs text-slate-500 mt-4">
|
||||||
textBoxButtonContainerClassName = "",
|
Click to see more
|
||||||
textBoxButtonClassName = "",
|
</p>
|
||||||
textBoxButtonTextClassName = "",
|
</div>
|
||||||
}: MetricCardThreeProps) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
|
||||||
|
|
||||||
return (
|
{/* Back of Card */}
|
||||||
<CardStack
|
<div
|
||||||
useInvertedBackground={useInvertedBackground}
|
className="absolute w-full h-full bg-gradient-to-br from-slate-800 to-slate-900 rounded-lg p-6 flex flex-col items-center justify-center text-center border border-slate-700 shadow-lg text-white"
|
||||||
mode={carouselMode}
|
style={{
|
||||||
gridVariant="uniform-all-items-equal"
|
backfaceVisibility: "hidden",
|
||||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
transform: "rotateY(180deg)",
|
||||||
animationType={animationType}
|
}}
|
||||||
supports3DAnimation={true}
|
>
|
||||||
|
<p className="text-sm leading-relaxed mb-4">
|
||||||
|
{metric.title} represents our commitment to excellence and
|
||||||
|
continuous growth in the computer club community.
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-slate-400">
|
||||||
|
Click to flip back
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
title={title}
|
{/* Buttons Section */}
|
||||||
titleSegments={titleSegments}
|
{buttons.length > 0 && (
|
||||||
description={description}
|
<div className="flex flex-wrap gap-4 justify-center">
|
||||||
tag={tag}
|
{buttons.map((button, index) => (
|
||||||
tagIcon={tagIcon}
|
<a
|
||||||
tagAnimation={tagAnimation}
|
key={index}
|
||||||
buttons={buttons}
|
href={button.href}
|
||||||
buttonAnimation={buttonAnimation}
|
className="px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors duration-300 shadow-md hover:shadow-lg"
|
||||||
textboxLayout={textboxLayout}
|
>
|
||||||
className={className}
|
{button.text}
|
||||||
containerClassName={containerClassName}
|
</a>
|
||||||
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>
|
</div>
|
||||||
);
|
)}
|
||||||
};
|
</div>
|
||||||
|
</section>
|
||||||
MetricCardThree.displayName = "MetricCardThree";
|
);
|
||||||
|
}
|
||||||
export default MetricCardThree;
|
|
||||||
@@ -1,203 +1,168 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { memo } from "react";
|
import { useState } from "react";
|
||||||
import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
|
|
||||||
import TestimonialAuthor from "@/components/shared/TestimonialAuthor";
|
|
||||||
import { cls, shouldUseInvertedText } from "@/lib/utils";
|
|
||||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
|
||||||
import { Quote } from "lucide-react";
|
|
||||||
import type { LucideIcon } from "lucide-react";
|
|
||||||
import type { CardAnimationType, ButtonConfig, ButtonAnimationType, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
|
|
||||||
|
|
||||||
type Testimonial = {
|
interface Testimonial {
|
||||||
id: string;
|
id: number;
|
||||||
name: string;
|
author: string;
|
||||||
handle: string;
|
role: string;
|
||||||
testimonial: string;
|
company: string;
|
||||||
imageSrc?: string;
|
shortText: string;
|
||||||
imageAlt?: string;
|
fullText: string;
|
||||||
icon?: LucideIcon;
|
avatar?: string;
|
||||||
};
|
}
|
||||||
|
|
||||||
interface TestimonialCardSixProps {
|
interface TestimonialCardSixProps {
|
||||||
testimonials: Testimonial[];
|
testimonials?: Testimonial[];
|
||||||
animationType: CardAnimationType;
|
|
||||||
title: string;
|
|
||||||
titleSegments?: TitleSegment[];
|
|
||||||
description: string;
|
|
||||||
textboxLayout: TextboxLayout;
|
|
||||||
useInvertedBackground: InvertedBackground;
|
|
||||||
tag?: string;
|
|
||||||
tagIcon?: LucideIcon;
|
|
||||||
tagAnimation?: ButtonAnimationType;
|
|
||||||
buttons?: ButtonConfig[];
|
|
||||||
buttonAnimation?: ButtonAnimationType;
|
|
||||||
speed?: number;
|
|
||||||
topMarqueeDirection?: "left" | "right";
|
|
||||||
ariaLabel?: string;
|
|
||||||
className?: string;
|
|
||||||
containerClassName?: string;
|
|
||||||
carouselClassName?: string;
|
|
||||||
bottomCarouselClassName?: string;
|
|
||||||
cardClassName?: string;
|
|
||||||
testimonialClassName?: string;
|
|
||||||
imageWrapperClassName?: string;
|
|
||||||
imageClassName?: string;
|
|
||||||
iconClassName?: string;
|
|
||||||
nameClassName?: string;
|
|
||||||
handleClassName?: string;
|
|
||||||
textBoxClassName?: string;
|
|
||||||
textBoxTitleClassName?: string;
|
|
||||||
textBoxTitleImageWrapperClassName?: string;
|
|
||||||
textBoxTitleImageClassName?: string;
|
|
||||||
textBoxDescriptionClassName?: string;
|
|
||||||
textBoxTagClassName?: string;
|
|
||||||
textBoxButtonContainerClassName?: string;
|
|
||||||
textBoxButtonClassName?: string;
|
|
||||||
textBoxButtonTextClassName?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TestimonialCardProps {
|
const defaultTestimonials: Testimonial[] = [
|
||||||
testimonial: Testimonial;
|
{
|
||||||
useInvertedBackground: boolean;
|
id: 1,
|
||||||
cardClassName?: string;
|
author: "Sarah Johnson",
|
||||||
testimonialClassName?: string;
|
role: "Product Manager",
|
||||||
imageWrapperClassName?: string;
|
company: "TechCorp",
|
||||||
imageClassName?: string;
|
shortText: "Amazing service!",
|
||||||
iconClassName?: string;
|
fullText:
|
||||||
nameClassName?: string;
|
"This service has completely transformed how we manage our projects. The intuitive interface and powerful features have saved us countless hours. The support team is incredibly responsive and helpful. I would highly recommend this to any team looking to improve their workflow.",
|
||||||
handleClassName?: string;
|
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah",
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
author: "Michael Chen",
|
||||||
|
role: "CEO",
|
||||||
|
company: "StartupXYZ",
|
||||||
|
shortText: "Game changer!",
|
||||||
|
fullText:
|
||||||
|
"We've been using this platform for 6 months now and the results speak for themselves. Our team productivity has increased by 40%, and the ROI has been exceptional. The platform scales beautifully with our growing needs. Couldn't ask for a better solution.",
|
||||||
|
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Michael",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
author: "Emily Rodriguez",
|
||||||
|
role: "Design Lead",
|
||||||
|
company: "Creative Studios",
|
||||||
|
shortText: "Exceeded expectations!",
|
||||||
|
fullText:
|
||||||
|
"The design and user experience are top-notch. Every detail has been thoughtfully considered. The collaboration features make it easy for our distributed team to work together seamlessly. This is the kind of tool that makes you wonder how you ever worked without it.",
|
||||||
|
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Emily",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
author: "David Park",
|
||||||
|
role: "Operations Director",
|
||||||
|
company: "Global Solutions",
|
||||||
|
shortText: "Best investment ever!",
|
||||||
|
fullText:
|
||||||
|
"We've tried many solutions before, but this one stands out. The implementation was smooth, the training was comprehensive, and the ongoing support is exceptional. Our team adopted it immediately and we're seeing measurable improvements in efficiency and accuracy.",
|
||||||
|
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=David",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const TestimonialCard = memo(({
|
export default function TestimonialCardSix({
|
||||||
testimonial,
|
testimonials = defaultTestimonials,
|
||||||
useInvertedBackground,
|
}: TestimonialCardSixProps) {
|
||||||
cardClassName = "",
|
const [flipped, setFlipped] = useState<{ [key: number]: boolean }>({});
|
||||||
testimonialClassName = "",
|
|
||||||
imageWrapperClassName = "",
|
|
||||||
imageClassName = "",
|
|
||||||
iconClassName = "",
|
|
||||||
nameClassName = "",
|
|
||||||
handleClassName = "",
|
|
||||||
}: TestimonialCardProps) => {
|
|
||||||
const Icon = testimonial.icon || Quote;
|
|
||||||
const theme = useTheme();
|
|
||||||
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
|
||||||
|
|
||||||
return (
|
const toggleFlip = (id: number) => {
|
||||||
<div className={cls("relative h-full card rounded-theme-capped p-6 min-h-0 flex flex-col gap-10", cardClassName)}>
|
setFlipped((prev) => ({
|
||||||
<p className={cls("relative z-1 text-lg leading-tight line-clamp-2", shouldUseLightText ? "text-background" : "text-foreground", testimonialClassName)}>
|
...prev,
|
||||||
{testimonial.testimonial}
|
[id]: !prev[id],
|
||||||
</p>
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
<TestimonialAuthor
|
return (
|
||||||
name={testimonial.name}
|
<section className="py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-slate-50 to-slate-100">
|
||||||
subtitle={testimonial.handle}
|
<div className="max-w-6xl mx-auto">
|
||||||
imageSrc={testimonial.imageSrc}
|
<div className="text-center mb-12">
|
||||||
imageAlt={testimonial.imageAlt}
|
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
|
||||||
icon={Icon}
|
What Our Clients Say
|
||||||
useInvertedBackground={useInvertedBackground}
|
</h2>
|
||||||
imageWrapperClassName={imageWrapperClassName}
|
<p className="text-lg text-gray-600">
|
||||||
imageClassName={imageClassName}
|
Hover over cards to see full testimonials
|
||||||
iconClassName={iconClassName}
|
</p>
|
||||||
nameClassName={nameClassName}
|
|
||||||
subtitleClassName={handleClassName}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
TestimonialCard.displayName = "TestimonialCard";
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{testimonials.map((testimonial) => (
|
||||||
|
<div
|
||||||
|
key={testimonial.id}
|
||||||
|
className="h-80 cursor-pointer perspective"
|
||||||
|
onClick={() => toggleFlip(testimonial.id)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="relative w-full h-full transition-transform duration-500 transform-gpu"
|
||||||
|
style={{
|
||||||
|
transformStyle: "preserve-3d",
|
||||||
|
transform: flipped[testimonial.id]
|
||||||
|
? "rotateY(180deg)"
|
||||||
|
: "rotateY(0deg)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Front of card */}
|
||||||
|
<div
|
||||||
|
className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between"
|
||||||
|
style={{ backfaceVisibility: "hidden" }}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-4 mb-4">
|
||||||
|
{testimonial.avatar && (
|
||||||
|
<img
|
||||||
|
src={testimonial.avatar}
|
||||||
|
alt={testimonial.author}
|
||||||
|
className="w-12 h-12 rounded-full"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-gray-900">
|
||||||
|
{testimonial.author}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-600">
|
||||||
|
{testimonial.role}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-700 text-sm mb-4">
|
||||||
|
"{testimonial.shortText}"
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<p className="text-xs text-gray-500">{testimonial.company}</p>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<span key={i} className="text-yellow-400">
|
||||||
|
★
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
const TestimonialCardSix = ({
|
{/* Back of card */}
|
||||||
testimonials,
|
<div
|
||||||
animationType,
|
className="absolute w-full h-full bg-gradient-to-br from-blue-600 to-blue-800 rounded-lg shadow-lg p-6 flex flex-col justify-between text-white"
|
||||||
title,
|
style={{
|
||||||
titleSegments,
|
backfaceVisibility: "hidden",
|
||||||
description,
|
transform: "rotateY(180deg)",
|
||||||
textboxLayout,
|
}}
|
||||||
useInvertedBackground,
|
>
|
||||||
tag,
|
<div>
|
||||||
tagIcon,
|
<h3 className="font-semibold text-lg mb-3">
|
||||||
tagAnimation,
|
{testimonial.author}
|
||||||
buttons,
|
</h3>
|
||||||
buttonAnimation,
|
<p className="text-sm text-blue-100 leading-relaxed">
|
||||||
speed = 40,
|
"{testimonial.fullText}"
|
||||||
topMarqueeDirection = "left",
|
</p>
|
||||||
ariaLabel = "Testimonials section",
|
</div>
|
||||||
className = "",
|
<p className="text-xs text-blue-200 text-center">
|
||||||
containerClassName = "",
|
Click to flip back
|
||||||
carouselClassName = "",
|
</p>
|
||||||
bottomCarouselClassName = "",
|
</div>
|
||||||
cardClassName = "",
|
</div>
|
||||||
testimonialClassName = "",
|
</div>
|
||||||
imageWrapperClassName = "",
|
))}
|
||||||
imageClassName = "",
|
</div>
|
||||||
iconClassName = "",
|
</div>
|
||||||
nameClassName = "",
|
</section>
|
||||||
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;
|
|
||||||
275
src/tag/Tag.tsx
275
src/tag/Tag.tsx
@@ -1,140 +1,153 @@
|
|||||||
// "use client";
|
'use client';
|
||||||
|
|
||||||
// import { memo } from "react";
|
import { useState } from 'react';
|
||||||
// import { useTagEffects } from "./useTagEffects";
|
|
||||||
|
|
||||||
// const Tag = () => {
|
interface Testimonial {
|
||||||
// const { shouldShow, handleMouseEnter, handleClick, buttonClassName } = useTagEffects();
|
id: string;
|
||||||
|
author: string;
|
||||||
|
role: string;
|
||||||
|
company: string;
|
||||||
|
excerpt: string;
|
||||||
|
fullText: string;
|
||||||
|
avatar?: string;
|
||||||
|
}
|
||||||
|
|
||||||
// const handleTagClick = () => {
|
interface TagProps {
|
||||||
// window.open('https://webild.io', '_blank');
|
testimonials?: Testimonial[];
|
||||||
// };
|
}
|
||||||
|
|
||||||
// if (!shouldShow) {
|
const defaultTestimonials: Testimonial[] = [
|
||||||
// return null;
|
{
|
||||||
// }
|
id: '1',
|
||||||
|
author: 'Sarah Johnson',
|
||||||
|
role: 'Product Manager',
|
||||||
|
company: 'TechCorp',
|
||||||
|
excerpt: 'Amazing experience working with this team.',
|
||||||
|
fullText: 'This has been an absolutely transformative experience. The team went above and beyond to ensure our project succeeded. Their attention to detail and commitment to excellence is unmatched. I would highly recommend them to anyone looking for top-tier service.',
|
||||||
|
avatar: '👩💼',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
author: 'Michael Chen',
|
||||||
|
role: 'CEO',
|
||||||
|
company: 'StartupXYZ',
|
||||||
|
excerpt: 'Exceeded all our expectations.',
|
||||||
|
fullText: 'From day one, they demonstrated exceptional professionalism and expertise. They understood our vision and delivered results that surpassed our expectations. The collaboration was seamless and the outcomes were outstanding. Truly a game-changer for our business.',
|
||||||
|
avatar: '👨💼',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
author: 'Emily Rodriguez',
|
||||||
|
role: 'Design Lead',
|
||||||
|
company: 'Creative Studios',
|
||||||
|
excerpt: 'Best decision we made this year.',
|
||||||
|
fullText: 'Working with this team was the best decision we made all year. Their innovative approach and creative solutions transformed our project completely. They were responsive, professional, and genuinely invested in our success. I cannot recommend them highly enough.',
|
||||||
|
avatar: '👩🎨',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
author: 'David Park',
|
||||||
|
role: 'Operations Director',
|
||||||
|
company: 'Global Solutions Inc',
|
||||||
|
excerpt: 'Incredible attention to detail.',
|
||||||
|
fullText: 'The level of detail and care they put into every aspect of the project was incredible. They anticipated our needs, solved problems proactively, and delivered exceptional results on time and within budget. Their expertise and dedication made all the difference.',
|
||||||
|
avatar: '👨💼',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
// return (
|
export default function Tag({ testimonials = defaultTestimonials }: TagProps) {
|
||||||
// <button
|
const [flipped, setFlipped] = useState<Record<string, boolean>>({});
|
||||||
// className={`fixed z-[99999] bottom-6 right-6 w-fit tag-card h-8 px-3 flex items-center justify-center gap-1 rounded-[6px] text-xs cursor-pointer ${buttonClassName}`}
|
|
||||||
// onClick={(e) => handleClick(e, handleTagClick)}
|
|
||||||
// onMouseEnter={handleMouseEnter}
|
|
||||||
// >
|
|
||||||
// <p className="text-foreground font-medium">Made With</p>
|
|
||||||
// <svg className="h-[1.25em] w-auto mt-[-2.5%]" version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 21" width="67" height="21">
|
|
||||||
// <defs>
|
|
||||||
// <clipPath clipPathUnits="userSpaceOnUse" id="cp1">
|
|
||||||
// <path d="m26.44 7.16c1.75 0 3.18 0.62 4.17 1.72 0.99 1.11 1.53 2.68 1.53 4.59v0.98h-8.77v0.04c0 1.06 0.32 1.93 0.88 2.53 0.56 0.6 1.36 0.95 2.35 0.95 1.42 0 2.44-0.71 2.76-1.74l0.03-0.08h2.63l-0.02 0.13c-0.37 2.33-2.58 3.97-5.46 3.97-1.85 0-3.34-0.62-4.37-1.76-1.03-1.13-1.59-2.75-1.59-4.73 0-1.97 0.57-3.62 1.59-4.78 1.02-1.16 2.49-1.82 4.27-1.82zm9.66 2.13c0.8-1.32 2.18-2.1 3.87-2.1 1.59 0 2.92 0.63 3.84 1.77 0.92 1.13 1.43 2.76 1.43 4.74 0 1.99-0.51 3.62-1.43 4.76-0.92 1.13-2.25 1.77-3.85 1.77-1.74 0-3.12-0.8-3.93-2.11v1.9h-2.7v-17.25h2.77zm30.9 10.73h-2.7v-1.89c-0.78 1.29-2.16 2.1-3.89 2.1-1.6 0-2.93-0.64-3.87-1.78-0.93-1.14-1.45-2.77-1.45-4.75 0-1.97 0.52-3.6 1.45-4.74 0.93-1.14 2.26-1.77 3.85-1.77 1.69 0 3.07 0.79 3.83 2.04v-6.45h2.78zm-64-17.16l3.09 13.09 3.54-13.09 0.02-0.09h2.62l0.02 0.09 3.55 13.09 3.09-13.09 0.02-0.09h2.98l-0.03 0.14-4.61 17.03-0.02 0.08h-2.65l-0.03-0.08-3.63-12.67-3.62 12.67-0.02 0.08h-2.67l-0.02-0.08-4.59-17.03-0.04-0.14h2.98zm50.91 17.16h-2.77v-17.24h2.77zm-4.87-0.03h-2.77v-12.63h2.77zm11.87-2.03q0.09 0 0.18 0zm-21.64-8.4c-0.93 0-1.72 0.41-2.29 1.13-0.56 0.72-0.89 1.76-0.89 3.02 0 1.27 0.33 2.31 0.89 3.03 0.57 0.71 1.36 1.12 2.29 1.12 0.97 0 1.75-0.4 2.28-1.1 0.55-0.71 0.85-1.75 0.85-3.05 0-1.29-0.3-2.33-0.85-3.04-0.53-0.71-1.31-1.11-2.28-1.11zm21.81 0c-0.97 0-1.76 0.4-2.31 1.11-0.54 0.71-0.86 1.75-0.86 3.04 0 1.29 0.32 2.33 0.86 3.04 0.55 0.71 1.34 1.11 2.31 1.11 0.95 0 1.73-0.4 2.28-1.12 0.56-0.71 0.88-1.75 0.88-3.03 0-1.27-0.32-2.31-0.88-3.03-0.55-0.71-1.33-1.12-2.28-1.12zm-19.79 7.65q-0.01 0.01-0.03 0.03 0.02-0.02 0.03-0.03zm0.13-0.13h0.01q-0.07 0.07-0.14 0.13 0.07-0.06 0.13-0.13zm16.38-3.37q0 0.45 0.05 0.87-0.02-0.19-0.03-0.39l-0.02-0.48q0.01-0.06 0.01-0.12-0.01 0.06-0.01 0.12zm-12.67 0q0 0.04 0 0.09v-0.09q0-0.23-0.01-0.45zm0 0.36v-0.15q0 0.11-0.01 0.21 0.01-0.03 0.01-0.06zm0-0.15q0-0.06 0-0.12zm-18.69-4.47c-1.68 0-2.87 1.24-3.04 3.01h5.96c-0.05-0.88-0.35-1.62-0.84-2.15-0.5-0.54-1.22-0.86-2.08-0.86zm32.25 1.15l0.11-0.13q0.08-0.09 0.16-0.17-0.14 0.14-0.27 0.3zm0.89-0.77q-0.31 0.17-0.56 0.41 0.07-0.07 0.14-0.13 0.13-0.1 0.27-0.19 0.07-0.05 0.15-0.09zm-0.56 0.41q-0.02 0.02-0.03 0.03 0.01-0.01 0.03-0.03zm-32.75-0.9q0 0 0 0 0 0 0 0zm0.17 0h0.09q-0.05 0-0.09-0.01-0.09 0.01-0.17 0.01 0.08 0 0.17 0zm34.25 8.61q0.09 0.01 0.18 0.01-0.09 0-0.18-0.01zm-0.25-0.04q0.11 0.02 0.21 0.03-0.1-0.01-0.21-0.03zm-2.58-3.28q0.02 0.16 0.05 0.31-0.03-0.15-0.05-0.31zm-12.76-0.11q0.02-0.17 0.02-0.35 0 0.18-0.02 0.35zm12.72-1.3q0 0.07 0 0.14 0-0.07 0-0.14zm0.04-0.36q-0.01 0.05-0.02 0.1 0.01-0.05 0.02-0.1zm0.07-0.49q-0.01 0.09-0.03 0.19 0.02-0.1 0.03-0.19zm0.07-0.29q-0.02 0.08-0.04 0.15 0.02-0.07 0.04-0.15zm0.14-0.44q-0.05 0.12-0.09 0.25 0.04-0.13 0.09-0.25zm0.08-0.21q-0.02 0.05-0.05 0.11 0.03-0.06 0.05-0.11zm0.14-0.31q-0.02 0.04-0.04 0.09 0.02-0.05 0.04-0.09z"/>
|
|
||||||
// </clipPath>
|
|
||||||
// <filter x="-50%" y="-50%" width="200%" height="200%" id="f1"> <feGaussianBlur stdDeviation=".7"/> </filter>
|
|
||||||
// <filter x="-50%" y="-50%" width="200%" height="200%" id="f2"> <feGaussianBlur stdDeviation="2.7"/> </filter>
|
|
||||||
// <linearGradient id="g1" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.62,1.977,-1.976,.62,47.533,3.611)">
|
|
||||||
// <stop offset="0" stopColor="#0f3da6" stopOpacity="1"/>
|
|
||||||
// <stop offset=".952" stopColor="#3a9aff" stopOpacity="0"/>
|
|
||||||
// </linearGradient>
|
|
||||||
// <linearGradient id="g2" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.495,2.092,-2.092,.495,46.707,3.06)">
|
|
||||||
// <stop offset=".01" stopColor="#0d50e8" stopOpacity="1"/>
|
|
||||||
// <stop offset=".952" stopColor="#3a9aff" stopOpacity="0"/>
|
|
||||||
// </linearGradient>
|
|
||||||
// <filter x="-50%" y="-50%" width="200%" height="200%" id="f3"> <feGaussianBlur stdDeviation="0"/> </filter>
|
|
||||||
// <linearGradient id="g3" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.982,3.688,-3.688,1.982,46.267,2.069)">
|
|
||||||
// <stop offset="0" stopColor="#0f3da6" stopOpacity="0"/>
|
|
||||||
// <stop offset="1" stopColor="#59abff" stopOpacity="1"/>
|
|
||||||
// </linearGradient>
|
|
||||||
// <linearGradient id="g4" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.606,2.752,-2.752,.606,46.32,2.122)">
|
|
||||||
// <stop offset="0" stopColor="#0f3da6" stopOpacity="0"/>
|
|
||||||
// <stop offset="1" stopColor="#59abff" stopOpacity="1"/>
|
|
||||||
// </linearGradient>
|
|
||||||
// </defs>
|
|
||||||
// <style>{`.s0 { fill: var(--foreground) } .s1 { filter: url(#f1);fill: #0597ff } .s2 { filter: url(#f2);fill: #0597ff } .s3 { fill: url(#g1) } .s4 { fill: url(#g2) } .s5 { filter: url(#f3);fill: url(#g3) } .s6 { filter: url(#f1);fill: url(#g4) }`}</style>
|
|
||||||
// <path className="s0" d="m26.44 7.16c1.75 0 3.18 0.62 4.17 1.72 0.99 1.11 1.53 2.68 1.53 4.59v0.98h-8.77v0.04c0 1.06 0.32 1.93 0.88 2.53 0.56 0.6 1.36 0.95 2.35 0.95 1.42 0 2.44-0.71 2.76-1.74l0.03-0.08h2.63l-0.02 0.13c-0.37 2.33-2.58 3.97-5.46 3.97-1.85 0-3.34-0.62-4.37-1.76-1.03-1.13-1.59-2.75-1.59-4.73 0-1.97 0.57-3.62 1.59-4.78 1.02-1.16 2.49-1.82 4.27-1.82zm9.66 2.13c0.8-1.32 2.18-2.1 3.87-2.1 1.59 0 2.92 0.63 3.84 1.77 0.92 1.13 1.43 2.76 1.43 4.74 0 1.99-0.51 3.62-1.43 4.76-0.92 1.13-2.25 1.77-3.85 1.77-1.74 0-3.12-0.8-3.93-2.11v1.9h-2.7v-17.25h2.77zm30.9 10.73h-2.7v-1.89c-0.78 1.29-2.16 2.1-3.89 2.1-1.6 0-2.93-0.64-3.87-1.78-0.93-1.14-1.45-2.77-1.45-4.75 0-1.97 0.52-3.6 1.45-4.74 0.93-1.14 2.26-1.77 3.85-1.77 1.69 0 3.07 0.79 3.83 2.04v-6.45h2.78zm-64-17.16l3.09 13.09 3.54-13.09 0.02-0.09h2.62l0.02 0.09 3.55 13.09 3.09-13.09 0.02-0.09h2.98l-0.03 0.14-4.61 17.03-0.02 0.08h-2.65l-0.03-0.08-3.63-12.67-3.62 12.67-0.02 0.08h-2.67l-0.02-0.08-4.59-17.03-0.04-0.14h2.98zm50.91 17.16h-2.77v-17.24h2.77zm-4.87-0.03h-2.77v-12.63h2.77zm11.87-2.03q0.09 0 0.18 0zm-0.22-0.02q0.09 0.01 0.18 0.02-0.09-0.01-0.18-0.02zm-0.25-0.03q0.1 0.02 0.21 0.03-0.11-0.01-0.21-0.03zm-21.17-8.35c-0.93 0-1.72 0.41-2.29 1.13-0.56 0.72-0.89 1.76-0.89 3.02 0 1.27 0.33 2.31 0.89 3.03 0.57 0.71 1.36 1.12 2.29 1.12 0.97 0 1.75-0.4 2.28-1.1 0.55-0.71 0.85-1.75 0.85-3.05 0-1.29-0.3-2.33-0.85-3.04-0.53-0.71-1.31-1.11-2.28-1.11zm21.81 0c-0.97 0-1.76 0.4-2.31 1.11-0.54 0.71-0.86 1.75-0.86 3.04 0 1.29 0.32 2.33 0.86 3.04 0.55 0.71 1.34 1.11 2.31 1.11 0.95 0 1.73-0.4 2.28-1.12 0.56-0.71 0.88-1.75 0.88-3.03 0-1.27-0.32-2.31-0.88-3.03-0.55-0.71-1.33-1.12-2.28-1.12zm-19.82 7.68q0.09-0.08 0.16-0.16h0.01q-0.08 0.08-0.17 0.16zm16.6-2.61q0.02 0.16 0.05 0.3-0.03-0.14-0.05-0.3zm-0.06-0.92q0 0.45 0.05 0.87-0.02-0.19-0.03-0.39l-0.02-0.48q0.01-0.06 0.01-0.12-0.01 0.06-0.01 0.12zm-12.7 0.8q0.01-0.17 0.02-0.34-0.01 0.17-0.02 0.34zm0.03-0.8q0 0.21-0.01 0.42 0-0.03 0.01-0.06v-0.36q0-0.23-0.01-0.45zm12.69-0.49q0 0.07-0.01 0.13 0.01-0.06 0.01-0.13zm0.03-0.36q0 0.05-0.01 0.1 0.01-0.05 0.01-0.1zm0.08-0.49q-0.02 0.09-0.03 0.19 0.01-0.1 0.03-0.19zm-31.49-2.93c-1.68 0-2.87 1.25-3.04 3.02h5.96c-0.05-0.88-0.35-1.62-0.84-2.15-0.51-0.54-1.22-0.87-2.08-0.87zm31.56 2.64q-0.02 0.07-0.04 0.15 0.02-0.08 0.04-0.15zm0.14-0.44q-0.05 0.12-0.09 0.25 0.04-0.13 0.09-0.25zm0.08-0.22q-0.03 0.06-0.05 0.12 0.02-0.06 0.05-0.12zm0.14-0.3q-0.02 0.04-0.04 0.09 0.02-0.05 0.04-0.09zm0.6-0.83q-0.14 0.15-0.27 0.31l0.11-0.13q0.08-0.09 0.16-0.18zm0.61-0.46q-0.32 0.18-0.59 0.44 0.09-0.08 0.18-0.16 0.13-0.11 0.27-0.2 0.07-0.04 0.14-0.08zm-33.3-0.49q0.08-0.01 0.17-0.01l0.09 0.01q-0.05-0.01-0.09-0.01-0.09 0-0.17 0.01z"/>
|
|
||||||
// <g id="Clip-Path" clipPath="url(#cp1)">
|
|
||||||
// <g>
|
|
||||||
// <g style={{opacity: .17}}>
|
|
||||||
// <path className="s1" d="m36.14 2.62h-3.58l9.91-9.03 12.33 1.32 8.09 3.75-7.32 4.73c-1.1-0.2-3.42-0.48-3.91 0-0.6 0.61-0.6 2.26-0.77 3.52-0.13 1.02-1.08 0.94-1.54 0.77l-2.92 0.44-0.88 4.3c-0.24-0.17-0.87-0.85-1.49-2.26-0.77-1.76-1.76-2.31-3.35-2.48-1.28-0.13-3.93 0.79-4.57 1.11z"/>
|
|
||||||
// </g>
|
|
||||||
// <g>
|
|
||||||
// <path className="s2" d="m36.14 2.62h-3.58l9.91-9.03 12.33 1.32 8.09 3.75-7.32 4.73c-1.1-0.2-3.42-0.48-3.91 0-0.6 0.61-0.6 2.26-0.77 3.52-0.13 1.02-1.08 0.94-1.54 0.77l-2.92 0.44-0.88 4.3c-0.24-0.17-0.87-0.85-1.49-2.26-0.77-1.76-1.76-2.31-3.35-2.48-1.28-0.13-3.93 0.79-4.57 1.11z"/>
|
|
||||||
// </g>
|
|
||||||
// </g>
|
|
||||||
// </g>
|
|
||||||
// <g>
|
|
||||||
// <path fillRule="evenodd" className="s3" d="m46.78 5c-0.95-0.45-1.34-1.58-0.89-2.53 0.45-0.95 1.58-1.36 2.52-0.91 0.94 0.44 1.34 1.58 0.89 2.53-0.46 0.95-1.58 1.36-2.52 0.91z"/>
|
|
||||||
// </g>
|
|
||||||
// <g>
|
|
||||||
// <path fillRule="evenodd" className="s4" d="m46.99 5.1c-0.83-0.39-1.18-1.37-0.79-2.2 0.4-0.82 1.38-1.17 2.2-0.78 0.83 0.39 1.18 1.37 0.79 2.2-0.39 0.82-1.38 1.17-2.2 0.78z"/>
|
|
||||||
// </g>
|
|
||||||
// <g>
|
|
||||||
// <path fillRule="evenodd" className="s5" d="m47.99 1.98c0.9 0.17 1.5 1.03 1.33 1.93-0.16 0.9-1.02 1.49-1.92 1.32-0.9-0.16-1.49-1.02-1.33-1.92 0.17-0.9 1.03-1.49 1.92-1.33z"/>
|
|
||||||
// </g>
|
|
||||||
// <g>
|
|
||||||
// <path fillRule="evenodd" className="s6" d="m48.05 2.04c0.9 0.16 1.49 1.02 1.32 1.92-0.16 0.9-1.02 1.49-1.92 1.33-0.9-0.17-1.49-1.03-1.33-1.93 0.17-0.89 1.03-1.49 1.93-1.32z"/>
|
|
||||||
// </g>
|
|
||||||
// </svg>
|
|
||||||
// </button>
|
|
||||||
// );
|
|
||||||
// };
|
|
||||||
|
|
||||||
// Tag.displayName = "Tag";
|
const toggleFlip = (id: string) => {
|
||||||
|
setFlipped((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[id]: !prev[id],
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
// export default memo(Tag);
|
return (
|
||||||
|
<div className="w-full py-12 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
|
||||||
|
What Our Clients Say
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-600">
|
||||||
|
Hover over cards to see full testimonials
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
"use client";
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{testimonials.map((testimonial) => (
|
||||||
|
<div
|
||||||
|
key={testimonial.id}
|
||||||
|
className="h-80 cursor-pointer perspective"
|
||||||
|
onClick={() => toggleFlip(testimonial.id)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="relative w-full h-full transition-transform duration-500 transform-gpu"
|
||||||
|
style={{
|
||||||
|
transformStyle: 'preserve-3d',
|
||||||
|
transform: flipped[testimonial.id]
|
||||||
|
? 'rotateY(180deg)'
|
||||||
|
: 'rotateY(0deg)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Front of card */}
|
||||||
|
<div
|
||||||
|
className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between border border-gray-200"
|
||||||
|
style={{
|
||||||
|
backfaceVisibility: 'hidden',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-4 mb-4">
|
||||||
|
<div className="text-4xl">{testimonial.avatar}</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-gray-900 text-sm">
|
||||||
|
{testimonial.author}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-gray-600">
|
||||||
|
{testimonial.role}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-500">
|
||||||
|
{testimonial.company}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-700 text-sm leading-relaxed">
|
||||||
|
"{testimonial.excerpt}"
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<span key={i} className="text-yellow-400">
|
||||||
|
★
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
import { memo } from "react";
|
{/* Back of card */}
|
||||||
import { useRive, useStateMachineInput, Layout, Fit } from "@rive-app/react-canvas";
|
<div
|
||||||
import { useTagEffects } from "./useTagEffects";
|
className="absolute w-full h-full bg-gradient-to-br from-blue-600 to-blue-800 rounded-lg shadow-lg p-6 flex flex-col justify-center border border-blue-700"
|
||||||
|
style={{
|
||||||
const STATE_MACHINE_NAME = "State Machine 1";
|
backfaceVisibility: 'hidden',
|
||||||
const HOVER_INPUT_NAME = "Hover";
|
transform: 'rotateY(180deg)',
|
||||||
|
}}
|
||||||
const Tag = () => {
|
>
|
||||||
const { shouldShow, handleMouseEnter, handleClick } = useTagEffects();
|
<p className="text-white text-sm leading-relaxed font-medium">
|
||||||
|
{testimonial.fullText}
|
||||||
const { rive, RiveComponent } = useRive({
|
</p>
|
||||||
src: "/watermark-bob2.riv",
|
<p className="text-blue-100 text-xs mt-4 font-semibold">
|
||||||
stateMachines: STATE_MACHINE_NAME,
|
— {testimonial.author}
|
||||||
autoplay: true,
|
</p>
|
||||||
layout: new Layout({
|
</div>
|
||||||
fit: Fit.Contain,
|
</div>
|
||||||
}),
|
</div>
|
||||||
});
|
))}
|
||||||
|
</div>
|
||||||
const hoverInput = useStateMachineInput(rive, STATE_MACHINE_NAME, HOVER_INPUT_NAME);
|
</div>
|
||||||
|
</div>
|
||||||
const handleTagClick = () => {
|
);
|
||||||
window.open('https://webild.io', '_blank');
|
}
|
||||||
};
|
|
||||||
|
|
||||||
const onMouseEnter = () => {
|
|
||||||
handleMouseEnter();
|
|
||||||
if (hoverInput) {
|
|
||||||
hoverInput.value = true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onMouseLeave = () => {
|
|
||||||
if (hoverInput) {
|
|
||||||
hoverInput.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!shouldShow) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
className="fixed z-[99999] bottom-6 right-6 w-[160px] h-[92px] cursor-pointer"
|
|
||||||
onClick={(e) => handleClick(e, handleTagClick)}
|
|
||||||
onMouseEnter={onMouseEnter}
|
|
||||||
onMouseLeave={onMouseLeave}
|
|
||||||
>
|
|
||||||
<RiveComponent className="w-full h-full" />
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
Tag.displayName = "Tag";
|
|
||||||
|
|
||||||
export default memo(Tag);
|
|
||||||
Reference in New Issue
Block a user