chore: setup project for production
This commit is contained in:
107
components/footer/Footer.jsx
Normal file
107
components/footer/Footer.jsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import Link from "next/link"
|
||||
import { motion } from "framer-motion"
|
||||
import { Facebook, Twitter, Instagram, Youtube, PhoneIcon as Whatsapp, ArrowRight } from "lucide-react"
|
||||
|
||||
|
||||
const footerLinks = [
|
||||
{
|
||||
title: "Exclusive Services",
|
||||
links: [
|
||||
{ name: "Return And Cancellation Policy", href: "/policies/refund-policy" },
|
||||
{ name: "Privacy Policy", href: "/policies/privacy-policy" },
|
||||
{ name: "Book a Consultation", href: "/products/premium-rudraksha-consultation-astrology" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "May We Help You?",
|
||||
links: [
|
||||
{ name: "Help and Contact", href: "/pages/contact-us" },
|
||||
{ name: "Track Order", href: "/pages/track-order" },
|
||||
{ name: "Shipping Information", href: "/pages/shipping-information" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Our Brands",
|
||||
links: [
|
||||
// { name: "Why Gupta Rudraksha?", href: "/pages/about-us" },
|
||||
{ name: "Certification and Guarantee", href: "/pages/certification-and-guarantee" },
|
||||
{ name: "Terms of Service", href: "/policies/terms-of-services" },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const socialLinks = [
|
||||
{ name: "Facebook", icon: Facebook, href: "https://www.facebook.com/share/15qi5L1EsK/" },
|
||||
{ name: "Instagram", icon: Instagram, href: "https://www.instagram.com/grb.religiongoods?igsh=ejNqZXZmMTVudzk=" },
|
||||
{ name: "YouTube", icon: Youtube, href: "https://youtube.com/@guptarudrakshabeads?si=bCVPn8GsneXcFv0s" },
|
||||
{
|
||||
name: "WhatsApp",
|
||||
icon: Whatsapp,
|
||||
href: "https://api.whatsapp.com/send/?phone=9779803287986&text&type=phone_number&app_absent=0",
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="bg-[#304938] text-primary-foreground">
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
|
||||
{footerLinks.map((column, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
>
|
||||
<h3 className="text-xl font-bold mb-4 text-primary-foreground/90">{column.title}</h3>
|
||||
<ul className="space-y-2">
|
||||
{column.links.map((link, linkIndex) => (
|
||||
<li key={linkIndex}>
|
||||
<Link href={link.href} className="hover:text-primary-foreground/70 transition-colors">
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
>
|
||||
<h3 className="text-xl font-bold mb-4 text-primary-foreground/90">Stay Connected</h3>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{socialLinks.map((social, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-primary-foreground/10 p-2 rounded-full hover:bg-primary-foreground/20 transition-colors"
|
||||
>
|
||||
<social.icon size={24} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="border-t border-primary-foreground/20 pt-8 text-center">
|
||||
<p className="text-sm text-primary-foreground/70">
|
||||
© {new Date().getFullYear()} Gupta Rudraksha. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
|
||||
Reference in New Issue
Block a user