From 4230a416921dd4277024c8f7e790d016293f1103 Mon Sep 17 00:00:00 2001 From: Alaguraj0361 Date: Fri, 3 Apr 2026 19:24:00 +0530 Subject: [PATCH] initialize Antalya locations landing page with responsive grid and animation styles --- src/app/globals.css | 362 +++++++++++++++++++++----------------------- src/app/page.tsx | 208 +++++++++++-------------- 2 files changed, 266 insertions(+), 304 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index fb33ea2..c011038 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,14 +1,17 @@ -@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@300;400;500;600&family=Outfit:wght@300;400;600;700&display=swap'); :root { --color-heading: #d3cab3; --color-button: #d28839; --color-paragraph: #c49c5c; --color-gold: #d28839; + --color-gold-light: #f5e6d3; --color-dark: #0a0a0a; + --color-dark-accent: #110908; --color-text-light: #f5f5f5; - --font-heading: var(--font-playfair), serif; - --font-body: var(--font-inter), sans-serif; + --font-heading: 'Playfair Display', serif; + --font-accent: 'Outfit', sans-serif; + --font-body: 'Inter', sans-serif; } * { @@ -34,15 +37,16 @@ h3, h4 { font-family: var(--font-heading); color: var(--color-heading); + letter-spacing: -0.02em; } .grand-text { font-family: var(--font-heading); - background: linear-gradient(45deg, + background: linear-gradient(135deg, #d3cab3 0%, - #d28839 25%, - #c49c5c 50%, - #d28839 75%, + #fff 25%, + #d28839 50%, + #fff 75%, #d3cab3 100%); background-size: 200% auto; -webkit-background-clip: text; @@ -50,20 +54,19 @@ h4 { -webkit-text-fill-color: transparent; display: inline-block; position: relative; - animation: colorShift 8s linear infinite; + animation: colorShift 12s linear infinite; + filter: drop-shadow(0 0 10px rgba(210, 136, 57, 0.2)); } @keyframes colorShift { 0% { background-position: 0% center; } - 100% { background-position: 200% center; } } - .shine-effect { position: relative; overflow: hidden; @@ -73,41 +76,32 @@ h4 { content: ''; position: absolute; top: 0; - left: -100%; - width: 50%; + left: -200%; + width: 100%; height: 100%; background: linear-gradient(to right, - rgba(255, 255, 255, 0) 0%, - rgba(210, 136, 57, 0.4) 50%, - rgba(255, 255, 255, 0) 100%); + transparent 0%, + rgba(255, 255, 255, 0.3) 50%, + transparent 100%); transform: skewX(-25deg); - animation: shine 6s infinite; + animation: shine 4s ease-in-out infinite; } @keyframes shine { - 0% { - left: -100%; - } - - 20% { - left: 100%; - } - - 100% { - left: 100%; - } + 0% { left: -200%; } + 35% { left: 200%; } + 100% { left: 200%; } } - .glass-card { - background: rgba(15, 15, 15, 0.7); - backdrop-filter: blur(15px); + background: rgba(15, 15, 15, 0.45); + backdrop-filter: blur(25px) saturate(180%); border: 1px solid rgba(210, 136, 57, 0.15); - border-radius: 24px; - transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); + border-radius: 32px; + transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; position: relative; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); } .glass-card::before { @@ -117,17 +111,29 @@ h4 { left: 0; right: 0; height: 1px; - background: linear-gradient(90deg, transparent, rgba(210, 136, 57, 0.5), transparent); + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); z-index: 5; - opacity: 0.5; + opacity: 0.8; } .glass-card:hover { - transform: translateY(-12px) scale(1.02); - border-color: rgba(210, 136, 57, 0.8); + transform: translateY(-20px) scale(1.02); + border-color: rgba(210, 136, 57, 0.6); box-shadow: - 0 25px 50px rgba(0, 0, 0, 0.7), - 0 0 30px rgba(210, 136, 57, 0.25); + 0 40px 80px rgba(0, 0, 0, 0.6), + 0 0 40px rgba(210, 136, 57, 0.3); + background: rgba(20, 10, 10, 0.6); +} + +.card-frame { + position: absolute; + inset: 16px; + border: 1px solid rgba(210, 136, 57, 0.2); + pointer-events: none; + z-index: 10; + opacity: 0; + transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1); + border-radius: 20px; } .glass-card:hover .card-frame { @@ -135,90 +141,43 @@ h4 { inset: 12px; } -.card-frame { - position: absolute; - inset: 24px; - border: 1px solid rgba(210, 136, 57, 0.3); - pointer-events: none; - z-index: 10; - opacity: 0; - transition: all 0.6s ease; - border-radius: 12px; +.transition-image { + transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); } -.nav-link { - color: var(--color-heading); - text-decoration: none; - transition: color 0.3s ease; - position: relative; +.glass-card:hover .transition-image { + transform: scale(1.1); } -.nav-link:hover { - color: var(--color-gold); -} - -.nav-link::after { - content: ''; - position: absolute; - bottom: -4px; - left: 0; - width: 0; - height: 1px; - background-color: var(--color-gold); - transition: width 0.3s ease; -} - -.nav-link:hover::after { - width: 100%; -} - - .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.4) 50%, transparent 100%); + background: linear-gradient(180deg, + rgba(0,0,0,0.1) 0%, + rgba(0,0,0,0.4) 40%, + rgba(0,0,0,0.9) 100%); z-index: 1; + transition: opacity 0.5s ease; } -.btn-primary { - background-color: var(--color-button); - color: white; - padding: 12px 28px; - border-radius: 50px; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 1px; - transition: all 0.3s ease; - border: none; - cursor: pointer; - display: inline-block; -} - -.btn-primary:hover { - background-color: #e39a4a; - transform: scale(1.05); - box-shadow: 0 10px 20px rgba(210, 136, 57, 0.3); -} - -/* Layout Utilities */ .main-container { min-height: 100vh; position: relative; display: flex; flex-direction: column; align-items: center; - justify-content: center; - padding: 24px; + justify-content: flex-start; + padding: 40px 24px; overflow: hidden; - background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%); + background-color: var(--color-dark); } @media (min-width: 768px) { .main-container { - padding: 48px; + padding: 80px 48px; } } @@ -226,149 +185,180 @@ h4 { position: relative; z-index: 10; width: 100%; - max-width: 1152px; - /* 6xl */ + max-width: 1280px; margin: 0 auto; } .hero-section { text-align: center; - margin-bottom: 64px; + margin-bottom: 80px; } .locations-grid { display: grid; grid-template-columns: 1fr; - gap: 40px; - margin-top: 48px; + gap: 48px; + margin-top: 60px; } -@media (min-width: 768px) { +@media (min-width: 860px) { .locations-grid { grid-template-columns: 1fr 1fr; } } -@media (min-width: 1024px) { - .locations-grid { - gap: 64px; - } -} - -/* Card Specifics */ .card-image-container { position: relative; - height: 384px; - /* 24rem / 96 */ + height: 440px; overflow: hidden; } -@media (max-width: 767px) { - .card-image-container { - height: 320px; - } -} - .card-content { - padding: 40px; - border-top: 1px solid rgba(176, 124, 75, 0.1); - background-color: #410d0a; + padding: 48px; + border-top: 1px solid rgba(210, 136, 57, 0.1); + background: linear-gradient(180deg, rgba(65, 13, 10, 0.8) 0%, rgba(15, 0, 0, 0.95) 100%); + position: relative; } -/* Text & Typography */ -.text-center { - text-align: center; +.card-content::after { + content: ''; + position: absolute; + bottom: 0; + right: 0; + width: 150px; + height: 150px; + background: radial-gradient(circle at bottom right, rgba(210, 136, 57, 0.1), transparent 70%); + pointer-events: none; } -.text-gold { +.signature-badge { + display: flex; + align-items: center; + gap: 8px; + background: rgba(210, 136, 57, 0.15); + border: 1px solid rgba(210, 136, 57, 0.3); + padding: 6px 12px; + border-radius: 99px; + margin-bottom: 20px; + width: fit-content; +} + +.signature-text { + font-family: var(--font-accent); + font-size: 11px; + letter-spacing: 0.25em; + text-transform: uppercase; + font-weight: 600; color: var(--color-gold); } -.flex-center { - display: flex; - justify-content: center; +.explore-btn { + display: inline-flex; align-items: center; + gap: 16px; + color: #fff; + font-family: var(--font-accent); + font-size: 14px; + letter-spacing: 0.15em; + text-transform: uppercase; + font-weight: 500; + transition: all 0.3s ease; + padding: 10px 0; + border-bottom: 1px solid rgba(255,255,255,0.1); } -.flex-col { - display: flex; - flex-direction: column; -} - -.gap-2 { - gap: 8px; -} - -.mb-2 { - margin-bottom: 8px; -} - -.mb-3 { - margin-bottom: 12px; -} - -.mb-4 { - margin-bottom: 16px; -} - -.mb-6 { - margin-bottom: 24px; -} - -.mb-8 { - margin-bottom: 32px; -} - -.mt-12 { - margin-top: 48px; -} - -.mt-24 { - margin-top: 96px; +.glass-card:hover .explore-btn { + color: var(--color-gold); + border-bottom-color: var(--color-gold); + gap: 24px; } .footer-copyright { - margin-top: 80px; + margin-top: 120px; text-align: center; - padding: 40px 0; - border-top: 1px solid rgba(210, 136, 57, 0.15); - color: rgba(196, 156, 92, 0.6); - font-size: 0.9rem; - font-weight: 300; - letter-spacing: 0.05em; + padding: 60px 0; + border-top: 1px solid rgba(210, 136, 57, 0.1); + color: rgba(255, 255, 255, 0.4); + font-size: 0.85rem; + letter-spacing: 0.1em; + font-family: var(--font-accent); } .footer-copyright a { color: var(--color-gold); text-decoration: none; - font-weight: 500; + font-weight: 600; transition: all 0.3s ease; + position: relative; } -.footer-copyright a:hover { - text-shadow: 0 0 10px rgba(210, 136, 57, 0.4); - opacity: 0.8; +.footer-copyright a::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 100%; + height: 1px; + background-color: var(--color-gold); + transform: scaleX(0); + transform-origin: right; + transition: transform 0.4s ease; +} + +.footer-copyright a:hover::after { + transform: scaleX(1); + transform-origin: left; +} + +.noise-bg { + position: fixed; + inset: 0; + opacity: 0.04; + background-image: url('https://grainy-gradients.vercel.app/noise.svg'); + pointer-events: none; + z-index: 1; +} + +.hero-gradient { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: + radial-gradient(circle at 20% 30%, rgba(210, 136, 57, 0.08) 0%, transparent 40%), + radial-gradient(circle at 80% 70%, rgba(65, 13, 10, 0.15) 0%, transparent 40%); + pointer-events: none; + z-index: 0; } .decorative-blob { position: fixed; border-radius: 50%; - filter: blur(100px); + filter: blur(120px); pointer-events: none; - background: rgba(210, 136, 57, 0.1); z-index: 0; + opacity: 0.4; + animation: pulse 12s infinite alternate ease-in-out; +} + +@keyframes pulse { + 0% { transform: scale(1) translate(0, 0); } + 100% { transform: scale(1.2) translate(30px, 20px); } } .blob-1 { - top: -16px; - left: -16px; - width: 256px; - height: 256px; + top: -10%; + left: -10%; + width: 40vw; + height: 40vw; + background: radial-gradient(circle, rgba(210, 136, 57, 0.2), transparent); } .blob-2 { - bottom: -16px; - right: -16px; - width: 384px; - height: 384px; + bottom: -15%; + right: -10%; + width: 50vw; + height: 50vw; + background: radial-gradient(circle, rgba(65, 13, 10, 0.3), transparent); } \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index f0b15f0..8ed2d2b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,7 +2,7 @@ import { motion, Variants } from "framer-motion"; import Image from "next/image"; -import { MapPin, Globe, ExternalLink, Utensils } from "lucide-react"; +import { MapPin, Globe, ExternalLink, Utensils, ArrowRight } from "lucide-react"; const locations = [ { @@ -23,13 +23,11 @@ const locations = [ }, ]; -const titleLetters = "Antalya".split(""); - const container: Variants = { hidden: { opacity: 0 }, visible: (i = 1) => ({ opacity: 1, - transition: { staggerChildren: 0.12, delayChildren: 0.04 * i }, + transition: { staggerChildren: 0.15, delayChildren: 0.2 * i }, }), }; @@ -39,18 +37,13 @@ const child: Variants = { y: 0, transition: { type: "spring", - damping: 12, - stiffness: 100, + damping: 15, + stiffness: 80, }, }, hidden: { opacity: 0, - y: 20, - transition: { - type: "spring", - damping: 12, - stiffness: 100, - }, + y: 40, }, }; @@ -65,7 +58,10 @@ export default function Home() { return (
- {/* Background Hero */} + {/* Dynamic Environment */} +
+
+
-
-
+
+
+ {/* Content */}
-
- - - EXPERIENCE UNFORGETTABLE TURKISH FUSION +
+ + + Legacy of Flavor -
+
Antalya Logo @@ -142,45 +127,50 @@ export default function Home() { initial="hidden" animate="visible" style={{ - fontSize: 'clamp(3.5rem, 12vw, 8rem)', - fontWeight: 'bold', + fontSize: 'clamp(3.5rem, 15vw, 10rem)', + lineHeight: 1.2, marginBottom: '32px', - letterSpacing: '0.05em', - marginTop: '-10px', display: 'flex', justifyContent: 'center', - overflow: 'hidden' + gap: '0.02em', + paddingBottom: '0.1em' }} className="grand-text shine-effect" > - {titleLetters.map((letter, index) => ( - - {letter} - + {"Antalya".split("").map((letter, index) => ( + {letter} ))} - "Savour a journey through Turkish culture crafted on the grill. Traditional charcoal-grilled kebabs, handcrafted dishes, and warm hospitality since 2010." + Experience the art of authentic Turkish charcoal grilling. A culinary heritage crafted with fire, passion, and Mediterranean excellence since 2010. -
- {locations.map((loc, index) => ( + + {locations.map((loc) => ( handleLocationSelect(loc.url)} @@ -193,84 +183,66 @@ export default function Home() { fill style={{ objectFit: 'cover' }} className="transition-image" - sizes="(max-width: 768px) 100vw, 50vw" + sizes="(max-width: 860px) 100vw, 50vw" />
-
+
- +
-
- - - Signature Spot - -
-

+

{loc.name}

-
- - {loc.address} + +
+ + {loc.address}
-

+

{loc.description}

-
- - Explore House - -
- -
+
+ Visit Restaurant +
))} -
+ -
-

© Copyright 2025 Antalya Restaurant | Powered by MetatronCube All Rights Reserved

-
+ +

© 2025 Antalya Restaurant Group | Handcrafted by MetatronCube

+
- - {/* Decorative Elements */} -
-
); }