MetatroncubeSoftwareSolutions/Antalya-All-Locations
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fimplement landing page with animated location selection grid

Browse Source
This commit is contained in:
Alaguraj0361 2026-04-03 22:28:44 +05:30
parent 4230a41692
commit bb32f8d494
1 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/page.tsx
View File

@ -8,7 +8,7 @@ const locations = [
{ {
id: "burlington", id: "burlington",
name: "Burlington", name: "Burlington",
address: "2444 New St, Burlington, ON L7R 1J6", address: "1860 Appleby Line, Burlington, ON L7L 7H7",
image: "/images/burlington.png", image: "/images/burlington.png",
url: "https://burlington.antalyarestaurant.ca", url: "https://burlington.antalyarestaurant.ca",
description: "Discover the Anatolian fire-kissed flavours in Burlington. Where elegance meets authentic Turkish taste for a truly memorable dining experience.", description: "Discover the Anatolian fire-kissed flavours in Burlington. Where elegance meets authentic Turkish taste for a truly memorable dining experience.",
@ -16,7 +16,7 @@ const locations = [
{ {
id: "kitchener", id: "kitchener",
name: "Kitchener", name: "Kitchener",
address: "1600 Ottawa St S, Kitchener, ON N2E 3K1", address: "1187 Fischer-Hallman Rd #435, Kitchener, ON N2E 4H9",
image: "/images/kitchener.png", image: "/images/kitchener.png",
url: "https://kitchener.antalyarestaurant.ca", url: "https://kitchener.antalyarestaurant.ca",
description: "Experience the charcoal-grilled kebabs and signature classics in Kitchener. A refined atmosphere meets time-tested traditional Mediterranean recipes.", description: "Experience the charcoal-grilled kebabs and signature classics in Kitchener. A refined atmosphere meets time-tested traditional Mediterranean recipes.",
@ -61,7 +61,7 @@ export default function Home() {
{/* Dynamic Environment */} {/* Dynamic Environment */}
<div className="hero-gradient" /> <div className="hero-gradient" />
<div className="noise-bg" /> <div className="noise-bg" />
<div style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'none' }}> <div style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'none' }}>
<Image <Image
src="/images/home-banner.webp" src="/images/home-banner.webp"
@ -146,21 +146,21 @@ export default function Home() {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ delay: 1, duration: 1.5 }} transition={{ delay: 1, duration: 1.5 }}
style={{ style={{
color: 'var(--color-paragraph)', color: 'var(--color-paragraph)',
fontSize: 'clamp(1rem, 2.5vw, 1.35rem)', fontSize: 'clamp(1rem, 2.5vw, 1.35rem)',
maxWidth: '700px', maxWidth: '700px',
margin: '0 auto', margin: '0 auto',
fontWeight: 300, fontWeight: 300,
lineHeight: 1.8, lineHeight: 1.8,
letterSpacing: '0.02em' letterSpacing: '0.02em'
}} }}
> >
Experience the art of authentic Turkish charcoal grilling. A culinary heritage crafted with fire, passion, and Mediterranean excellence since 2010. Experience the art of authentic Turkish charcoal grilling. A culinary heritage crafted with fire, passion, and Mediterranean excellence since 2022.
</motion.p> </motion.p>
</motion.div> </motion.div>
<motion.div <motion.div
className="locations-grid" className="locations-grid"
variants={container} variants={container}
initial="hidden" initial="hidden"
@ -213,7 +213,7 @@ export default function Home() {
<h2 style={{ fontSize: 'clamp(2.5rem, 5vw, 3.5rem)', fontWeight: 700, marginBottom: '20px', color: '#fff', textShadow: '0 2px 10px rgba(0,0,0,0.5)' }}> <h2 style={{ fontSize: 'clamp(2.5rem, 5vw, 3.5rem)', fontWeight: 700, marginBottom: '20px', color: '#fff', textShadow: '0 2px 10px rgba(0,0,0,0.5)' }}>
{loc.name} {loc.name}
</h2> </h2>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', color: 'rgba(255,255,255,0.7)', fontSize: '0.9rem', fontFamily: 'var(--font-accent)' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '10px', color: 'rgba(255,255,255,0.7)', fontSize: '0.9rem', fontFamily: 'var(--font-accent)' }}>
<MapPin size={16} style={{ color: 'var(--color-gold)' }} /> <MapPin size={16} style={{ color: 'var(--color-gold)' }} />
<span style={{ fontWeight: 400, letterSpacing: '0.05em' }}>{loc.address}</span> <span style={{ fontWeight: 400, letterSpacing: '0.05em' }}>{loc.address}</span>
@ -234,13 +234,15 @@ export default function Home() {
))} ))}
</motion.div> </motion.div>
<motion.footer <motion.footer
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }} whileInView={{ opacity: 1 }}
viewport={{ once: true }} viewport={{ once: true }}
className="footer-copyright" className="footer-copyright"
> >
<p>© 2025 Antalya Restaurant Group | Handcrafted by <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer">MetatronCube</a></p> <p>© 2025 Antalya Restaurant Group
{/* | Handcrafted by <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer">MetatronCube</a> */}
</p>
</motion.footer> </motion.footer>
</div> </div>
</main> </main>