9cd8b19787
- Add AnnouncementBar with marquee animation - Add NewHero with floating product card - Add StatsSection with large stat numbers - Add FeaturesSection with icons - Add TestimonialsSection with cards - Add NewsletterSection with signup form - Update Header styling for new design - Update globals.css with marquee animations - Update page.tsx to use new components All existing WooCommerce functionality preserved
52 lines
1.0 KiB
TypeScript
52 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface MarqueeProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
speed?: "slow" | "normal" | "fast";
|
|
pauseOnHover?: boolean;
|
|
}
|
|
|
|
export default function Marquee({
|
|
children,
|
|
className,
|
|
speed = "normal",
|
|
pauseOnHover = false,
|
|
}: MarqueeProps) {
|
|
const speedClass = {
|
|
slow: "animate-marquee-slow",
|
|
normal: "animate-marquee",
|
|
fast: "animate-marquee-fast",
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex overflow-hidden",
|
|
pauseOnHover && "hover:[animation-play-state:paused]",
|
|
className
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"flex shrink-0 items-center whitespace-nowrap will-change-transform",
|
|
speedClass[speed]
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"flex shrink-0 items-center whitespace-nowrap will-change-transform",
|
|
speedClass[speed]
|
|
)}
|
|
aria-hidden="true"
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|