260 lines
13 KiB
TypeScript
260 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import Image from "next/image";
|
||
import { Instagram, Facebook, Mail, Phone, MapPin, Send } from "lucide-react";
|
||
|
||
export default function Footer() {
|
||
const [email, setEmail] = useState("");
|
||
const [subscribed, setSubscribed] = useState(false);
|
||
|
||
const handleSubscribe = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!email) return;
|
||
setSubscribed(true);
|
||
setEmail("");
|
||
};
|
||
|
||
return (
|
||
<footer id="footer" className="relative w-full py-16 overflow-hidden z-20">
|
||
|
||
{/* Consolidated Mockup Background Layer */}
|
||
<div className="absolute inset-0 z-0 pointer-events-none select-none">
|
||
<Image
|
||
src="/images/home/footer/footer-bg.webp"
|
||
alt="Footer Backdrop"
|
||
fill
|
||
priority
|
||
className="object-fill"
|
||
/>
|
||
</div>
|
||
|
||
{/* Frame Container enclosing footer - content floats within the baked border box */}
|
||
<div className="max-w-7xl w-full mx-auto px-6 relative z-10 flex flex-col h-full">
|
||
|
||
{/* Column Grid layout */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8 md:gap-8 pb-8 border-b border-[#bc9e65]/35">
|
||
|
||
{/* Column 1: Brand & Bio (col-span 3) */}
|
||
<div className="lg:col-span-3 flex flex-col gap-5">
|
||
<div className="flex flex-col items-start select-text">
|
||
{/* Brand Logo */}
|
||
<Image
|
||
src="/images/logo.png"
|
||
alt="My Dosa Place"
|
||
width={200}
|
||
height={80}
|
||
className="w-40 sm:w-48 h-auto mb-2 pointer-events-none select-none"
|
||
/>
|
||
|
||
{/* Traditional Gold Leaf Separator */}
|
||
<div className="flex items-center gap-2 w-28 mb-3 pointer-events-none select-none">
|
||
<div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
|
||
<svg className="w-3.5 h-3.5 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||
</svg>
|
||
<div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start gap-2.5 max-w-sm text-left">
|
||
<span className="text-[#bc9e65] text-xl font-bold leading-none mt-0.5 pointer-events-none select-none">•</span>
|
||
<p className="font-sans text-sm text-stone-300 leading-relaxed tracking-wider select-text">
|
||
Waterloo's premier 100% pure vegetarian restaurant, serving authentic dosa in Waterloo. Enjoy crispy ghee roast dosa, lentil sambar, and home-ground chutneys made fresh daily using time-honoured recipes.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Circular outline social links */}
|
||
<div className="flex gap-4 items-center mt-2">
|
||
<a
|
||
href="#"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="clickable w-8 h-8 rounded-full border border-[#bc9e65]/30 flex items-center justify-center text-[#bc9e65] hover:text-white hover:border-[#bc9e65] transition-all duration-300"
|
||
>
|
||
<Instagram size={13} />
|
||
</a>
|
||
<a
|
||
href="#"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="clickable w-8 h-8 rounded-full border border-[#bc9e65]/30 flex items-center justify-center text-[#bc9e65] hover:text-white hover:border-[#bc9e65] transition-all duration-300"
|
||
>
|
||
<Facebook size={13} />
|
||
</a>
|
||
<a
|
||
href="#"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="clickable w-8 h-8 rounded-full border border-[#bc9e65]/30 flex items-center justify-center text-[#bc9e65] hover:text-white hover:border-[#bc9e65] font-sans font-bold text-sm transition-all duration-300"
|
||
>
|
||
G
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Column 2: Quick Links (col-span 2) */}
|
||
<div className="lg:col-span-2 flex flex-col gap-4 text-left">
|
||
<div className="flex flex-col items-start select-text">
|
||
<svg className="w-6 h-6 text-[#bc9e65] mb-2.5 pointer-events-none select-none" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||
</svg>
|
||
<h4 className="font-serif font-bold text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
|
||
Quick Links
|
||
</h4>
|
||
{/* Separator */}
|
||
<div className="flex items-center gap-2 w-28 mb-2 pointer-events-none select-none">
|
||
<div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
|
||
<svg className="w-3.5 h-3.5 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||
</svg>
|
||
<div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
|
||
</div>
|
||
</div>
|
||
|
||
<ul className="flex flex-col gap-3 font-sans text-sm text-stone-300 tracking-wider">
|
||
<li>
|
||
<a href="#story" className="clickable hover:text-[#bc9e65] transition-colors duration-300">
|
||
Our Story
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#menu" className="clickable hover:text-[#bc9e65] transition-colors duration-300">
|
||
Feast Menu
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#chef" className="clickable hover:text-[#bc9e65] transition-colors duration-300">
|
||
Our Chef
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#events" className="clickable hover:text-[#bc9e65] transition-colors duration-300">
|
||
Royal Events
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Column 3: Feast Sessions (col-span 4, bordered vertically on desktop) */}
|
||
<div className="lg:col-span-4 flex flex-col gap-4 text-left border-l-0 border-r-0 lg:border-l lg:border-r border-[#bc9e65]/20 lg:px-6">
|
||
<div className="flex flex-col items-start select-text">
|
||
<svg className="w-6 h-6 text-[#bc9e65] mb-2 pointer-events-none select-none" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||
</svg>
|
||
<h4 className="font-serif font-bold text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
|
||
Feast Sessions
|
||
</h4>
|
||
{/* Separator */}
|
||
<div className="flex items-center gap-2 w-28 mb-2 pointer-events-none select-none">
|
||
<div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
|
||
<svg className="w-3.5 h-3.5 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||
</svg>
|
||
<div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-2 font-sans text-sm text-stone-300 tracking-wider">
|
||
{/* Friday */}
|
||
<div className="flex justify-between items-center select-text">
|
||
<span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Friday</span>
|
||
<span>5–10 pm</span>
|
||
</div>
|
||
{/* Saturday */}
|
||
<div className="flex justify-between items-center select-text">
|
||
<span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Saturday</span>
|
||
<span>12–10 pm</span>
|
||
</div>
|
||
{/* Sunday */}
|
||
<div className="flex justify-between items-center select-text">
|
||
<span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Sunday</span>
|
||
<span>12–9 pm</span>
|
||
</div>
|
||
{/* Monday */}
|
||
<div className="flex justify-between items-center select-text">
|
||
<span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Monday</span>
|
||
<span>4–10 pm</span>
|
||
</div>
|
||
|
||
<div className="border-t border-dashed border-[#bc9e65]/20 my-1 w-full" />
|
||
|
||
{/* Tuesday – Closed */}
|
||
<div className="flex justify-between items-center select-text">
|
||
<span className="text-white font-semibold uppercase tracking-widest">Tuesday</span>
|
||
<span className="text-stone-400">Closed</span>
|
||
</div>
|
||
|
||
<div className="border-t border-dashed border-[#bc9e65]/20 my-1 w-full" />
|
||
|
||
{/* Wednesday */}
|
||
<div className="flex justify-between items-center select-text">
|
||
<span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Wednesday</span>
|
||
<span>4:30–10 pm</span>
|
||
</div>
|
||
{/* Thursday */}
|
||
<div className="flex justify-between items-center select-text">
|
||
<span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Thursday</span>
|
||
<span>4–10 pm</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Column 4: The Dining Court (col-span 3, no borders) */}
|
||
<div className="lg:col-span-3 flex flex-col gap-4 text-left">
|
||
<div className="flex flex-col items-start select-text">
|
||
<svg className="w-6 h-6 text-[#bc9e65] mb-2 pointer-events-none select-none" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||
</svg>
|
||
<h4 className="font-serif font-bold text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
|
||
The Dining Court
|
||
</h4>
|
||
{/* Separator */}
|
||
<div className="flex items-center gap-2 w-28 mb-2 pointer-events-none select-none">
|
||
<div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
|
||
<svg className="w-3.5 h-3.5 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||
</svg>
|
||
<div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-4 font-sans text-sm text-stone-300 tracking-wider">
|
||
{/* Address */}
|
||
<div className="flex items-start gap-3">
|
||
<div className="w-9 h-9 rounded-full border border-[#bc9e65]/35 flex items-center justify-center text-[#bc9e65] flex-shrink-0 mt-0.5">
|
||
<MapPin size={13} />
|
||
</div>
|
||
<span className="select-text max-w-[195px]">922 Erb St. W Unit C3#3, Waterloo, ON N2T 0C9, Canada</span>
|
||
</div>
|
||
{/* Phone */}
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-9 h-9 rounded-full border border-[#bc9e65]/35 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
||
<Phone size={13} />
|
||
</div>
|
||
<span className="select-text">+1 519-888-7459</span>
|
||
</div>
|
||
{/* Email */}
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-9 h-9 rounded-full border border-[#bc9e65]/35 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
||
<Mail size={13} />
|
||
</div>
|
||
<span className="select-text">mydosaplacewaterloo@gmail.com</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Footer Bottom copyright & credits bar */}
|
||
<div className="pt-6 mt-8 flex flex-col items-center justify-center text-center gap-2 text-stone-300 font-sans text-xs tracking-[0.2em] uppercase select-text relative z-10">
|
||
<p>
|
||
© 2026 My Dosa Place. All rights reserved. | Powered by <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer" className="hover:text-[#bc9e65] transition-colors">Metatroncube</a>
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|