d381cba302
- Add TrustBadges component with ratings, customer count, secure payment icons - Add AsSeenIn media logos banner - Add BeforeAfterGallery with interactive gallery - Add TestimonialsSection (already existed, now integrated into homepage) - Connect all sections in homepage page.tsx Sections added to homepage flow: 1. HeroVideo 2. TrustBadges 3. AsSeenIn 4. Products Grid 5. BeforeAfterGallery 6. Brand Story 7. Benefits 8. TestimonialsSection 9. Newsletter
62 lines
2.6 KiB
TypeScript
62 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
|
|
export default function TrustBadges() {
|
|
return (
|
|
<section className="py-12 bg-white border-y border-gray-100">
|
|
<div className="container mx-auto px-4">
|
|
<motion.div
|
|
className="flex flex-wrap items-center justify-center gap-8 md:gap-16"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex">
|
|
{[1, 2, 3, 4, 5].map((star) => (
|
|
<svg
|
|
key={star}
|
|
className="w-5 h-5 text-gold fill-gold"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
|
</svg>
|
|
))}
|
|
</div>
|
|
<span className="text-sm font-medium text-gray-700">4.9/5 Average Rating</span>
|
|
</div>
|
|
|
|
<div className="h-8 w-px bg-gray-200 hidden md:block" />
|
|
|
|
<div className="flex items-center gap-2">
|
|
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span className="text-sm font-medium text-gray-700">50,000+ Happy Customers</span>
|
|
</div>
|
|
|
|
<div className="h-8 w-px bg-gray-200 hidden md:block" />
|
|
|
|
<div className="flex items-center gap-2">
|
|
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
|
</svg>
|
|
<span className="text-sm font-medium text-gray-700">Secure Payment</span>
|
|
</div>
|
|
|
|
<div className="h-8 w-px bg-gray-200 hidden md:block" />
|
|
|
|
<div className="flex items-center gap-2">
|
|
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
</svg>
|
|
<span className="text-sm font-medium text-gray-700">Free Shipping Over $50</span>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|