Redesign homepage with moumoujus-inspired layout
- 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
This commit is contained in:
51
src/components/ui/Marquee.tsx
Normal file
51
src/components/ui/Marquee.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user