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
35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
export default function AnnouncementBar() {
|
|
const items = [
|
|
"PREMIUM NATURAL OILS FOR HAIR & SKIN",
|
|
"PREMIUM NATURAL OILS FOR HAIR & SKIN",
|
|
"PREMIUM NATURAL OILS FOR HAIR & SKIN",
|
|
"PREMIUM NATURAL OILS FOR HAIR & SKIN",
|
|
"PREMIUM NATURAL OILS FOR HAIR & SKIN",
|
|
"PREMIUM NATURAL OILS FOR HAIR & SKIN",
|
|
"PREMIUM NATURAL OILS FOR HAIR & SKIN",
|
|
"PREMIUM NATURAL OILS FOR HAIR & SKIN",
|
|
];
|
|
|
|
return (
|
|
<div className="fixed top-0 left-0 right-0 z-50 bg-[#E8F4F8] overflow-hidden">
|
|
<div className="flex animate-marquee whitespace-nowrap py-2 will-change-transform">
|
|
{items.map((text, index) => (
|
|
<div
|
|
key={index}
|
|
className="inline-flex items-center gap-4 mx-5 shrink-0"
|
|
>
|
|
<span className="text-xs tracking-[0.12em] uppercase text-[#1A1A1A]/70 font-medium">
|
|
{text}
|
|
</span>
|
|
<ArrowRight className="w-4 h-4 text-[#1A1A1A]/50" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|