initialize Antalya restaurant locations landing page with custom styling and animations

src/app/globals.css

@@ -35,29 +35,132 @@ h1, h2, h3, h4 {
 
 .grand-text {
   font-family: var(--font-heading);
-  background: linear-gradient(to bottom, #d3cab3, #c49c5c);
+  background: linear-gradient(
+    45deg,
+    #d3cab3 0%,
+    #d28839 25%,
+    #c49c5c 50%,
+    #d28839 75%,
+    #d3cab3 100%
+  );
+  background-size: 200% auto;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   display: inline-block;
+  position: relative;
+  animation: colorShift 8s linear infinite;
 }
 
+@keyframes colorShift {
+  0% { background-position: 0% center; }
+  100% { background-position: 200% center; }
+}
+
+
+.shine-effect {
+  position: relative;
+  overflow: hidden;
+}
+
+.shine-effect::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 50%;
+  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%
+  );
+  transform: skewX(-25deg);
+  animation: shine 6s infinite;
+}
+
+@keyframes shine {
+  0% { left: -100%; }
+  20% { left: 100%; }
+  100% { left: 100%; }
+}
+
+
 .glass-card {
-  background: rgba(20, 20, 20, 0.6);
+  background: rgba(15, 15, 15, 0.7);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(15px);
-  border: 1px solid rgba(210, 136, 57, 0.2);
+  border: 1px solid rgba(210, 136, 57, 0.15);
-  border-radius: 20px;
+  border-radius: 24px;
-  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
   position: relative;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+}
+
+.glass-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(210, 136, 57, 0.5), transparent);
+  z-index: 5;
+  opacity: 0.5;
 }
 
 .glass-card:hover {
-  transform: translateY(-10px);
+  transform: translateY(-12px) scale(1.02);
-  border-color: rgba(210, 136, 57, 0.6);
+  border-color: rgba(210, 136, 57, 0.8);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(210, 136, 57, 0.1);
+  box-shadow: 
+    0 25px 50px rgba(0, 0, 0, 0.7), 
+    0 0 30px rgba(210, 136, 57, 0.25);
 }
 
+.glass-card:hover .card-frame {
+  opacity: 1;
+  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;
+}
+
+.nav-link {
+  color: var(--color-heading);
+  text-decoration: none;
+  transition: color 0.3s ease;
+  position: relative;
+}
+
+.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;
@@ -87,3 +190,105 @@ h1, h2, h3, h4 {
   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;
+  overflow: hidden;
+  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.4) 100%);
+}
+
+@media (min-width: 768px) {
+  .main-container {
+    padding: 48px;
+  }
+}
+
+.content-wrapper {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  max-width: 1152px; /* 6xl */
+  margin: 0 auto;
+}
+
+.hero-section {
+  text-align: center;
+  margin-bottom: 64px;
+}
+
+.locations-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 40px;
+  margin-top: 48px;
+}
+
+@media (min-width: 768px) {
+  .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 */
+  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);
+}
+
+/* Text & Typography */
+.text-center { text-align: center; }
+.text-gold { color: var(--color-gold); }
+.flex-center { display: flex; justify-content: center; align-items: center; }
+.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; }
+
+.footer {
+  margin-top: 128px;
+  text-align: center;
+  padding-bottom: 48px;
+}
+
+.decorative-blob {
+  position: fixed;
+  border-radius: 50%;
+  filter: blur(100px);
+  pointer-events: none;
+  background: rgba(210, 136, 57, 0.1);
+  z-index: 0;
+}
+
+.blob-1 { top: -16px; left: -16px; width: 256px; height: 256px; }
+.blob-2 { bottom: -16px; right: -16px; width: 384px; height: 384px; }
+

src/app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion, Variants } from "framer-motion";
 import Image from "next/image";
 import { MapPin, Globe, ExternalLink, Utensils } from "lucide-react";
 
@@ -10,19 +10,50 @@ const locations = [
     name: "Burlington",
     address: "2444 New St, Burlington, ON L7R 1J6",
     image: "/images/burlington.png",
-    url: "#", // Placeholder URL
+    url: "#",
-    description: "Experience the authentic flavors of Turkey in the heart of Burlington. Traditional recipes meet modern elegance.",
+    description: "Discover the Anatolian fire-kissed flavours in Burlington. Where elegance meets authentic Turkish taste for a truly memorable dining experience.",
   },
   {
     id: "kitchener",
     name: "Kitchener",
     address: "1600 Ottawa St S, Kitchener, ON N2E 3K1",
     image: "/images/kitchener.png",
-    url: "#", // Placeholder URL
+    url: "#",
-    description: "Our Kitchener location brings you a unique Mediterranean dining experience with a touch of authentic Turkish hospitality.",
+    description: "Experience the charcoal-grilled kebabs and signature classics in Kitchener. A refined atmosphere meets time-tested traditional Mediterranean recipes.",
   },
 ];
 
+const titleLetters = "Antalya".split("");
+
+const container: Variants = {
+  hidden: { opacity: 0 },
+  visible: (i = 1) => ({
+    opacity: 1,
+    transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
+  }),
+};
+
+const child: Variants = {
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      type: "spring",
+      damping: 12,
+      stiffness: 100,
+    },
+  },
+  hidden: {
+    opacity: 0,
+    y: 20,
+    transition: {
+      type: "spring",
+      damping: 12,
+      stiffness: 100,
+    },
+  },
+};
+
 export default function Home() {
   const handleLocationSelect = (url: string) => {
     if (url !== "#") {
@@ -33,127 +64,196 @@ export default function Home() {
   };
 
   return (
-    <main className="min-h-screen relative flex flex-col items-center justify-center p-6 md:p-12 overflow-hidden bg-[#0a0a0a]">
+    <main className="main-container">
       {/* Background Hero */}
-      <div className="fixed inset-0 z-0 pointer-events-none">
+      <div style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'none' }}>
         <Image
-          src="/images/hero.png"
+          src="/images/hero_luxury.webp"
-          alt="Grand Interior"
+          alt="Luxury Turkish Dining"
           fill
-          className="object-cover opacity-20 scale-105"
+          style={{ objectFit: 'cover', opacity: 0.3, transform: 'scale(1.05)' }}
           priority
         />
-        <div className="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black" />
+        <div style={{ 
+          position: 'absolute', 
+          inset: 0, 
+          background: 'linear-gradient(to bottom, black, transparent, black)' 
+        }} />
+        <div style={{ 
+          position: 'absolute', 
+          inset: 0, 
+          opacity: 0.1, 
+          backgroundImage: 'url("https://grainy-gradients.vercel.app/noise.svg")',
+          pointerEvents: 'none'
+        }} />
       </div>
 
       {/* Content */}
-      <div className="relative z-10 w-full max-w-6xl py-12">
+      <div className="content-wrapper">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
-          className="text-center mb-16"
+          className="hero-section"
         >
           <motion.div 
             initial={{ scale: 0.8 }}
             animate={{ scale: 1 }}
             transition={{ duration: 0.5, delay: 0.3 }}
-            className="flex items-center justify-center gap-2 mb-6"
+            className="flex-center gap-2 mb-6"
           >
-            <div className="h-[1px] w-12 bg-[#d28839]" />
+            <div style={{ height: '1px', width: '48px', backgroundColor: '#d28839' }} />
-            <Utensils className="text-[#d28839]" size={20} />
+            <Utensils className="text-gold" size={16} style={{ color: '#d28839' }} />
-            <span className="text-[#d28839] tracking-[0.4em] font-medium text-xs uppercase">Premium Cuisine</span>
+            <span style={{ color: '#d28839', letterSpacing: '0.4em', fontWeight: 600, fontSize: '0.8rem', textTransform: 'uppercase' }}>
-            <div className="h-[1px] w-12 bg-[#d28839]" />
+              EXPERIENCE UNFORGETTABLE TURKISH FUSION
+            </span>
+            <div style={{ height: '1px', width: '48px', backgroundColor: '#d28839' }} />
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 1 }}
+            style={{ marginBottom: '24px', display: 'flex', justifyContent: 'center' }}
+          >
+            <Image 
+              src="/images/logo.png"
+              alt="Antalya Logo"
+              width={160}
+              height={80}
+              style={{ objectFit: 'contain' }}
+            />
           </motion.div>
           
-          <h1 className="text-5xl md:text-8xl font-bold mb-8 grand-text tracking-tight">
+          <motion.h1 
-            Antalya
+            variants={container}
-          </h1>
+            initial="hidden"
-          <p className="text-[#c49c5c] text-xl md:text-2xl max-w-3xl mx-auto font-light italic leading-relaxed">
+            animate="visible"
-            "Taste the Mediterranean Legacy. Select one of our prestigious locations to begin your journey."
+            style={{ 
-          </p>
+              fontSize: 'clamp(3.5rem, 12vw, 8rem)', 
+              fontWeight: 'bold', 
+              marginBottom: '32px', 
+              letterSpacing: '0.05em', 
+              marginTop: '-10px',
+              display: 'flex',
+              justifyContent: 'center',
+              overflow: 'hidden'
+            }} 
+            className="grand-text shine-effect"
+          >
+            {titleLetters.map((letter, index) => (
+              <motion.span
+                variants={child}
+                key={index}
+                style={{ display: 'inline-block' }}
+              >
+                {letter}
+              </motion.span>
+            ))}
+          </motion.h1>
+          
+          <motion.p 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 1, duration: 1 }}
+            style={{ color: '#c49c5c', fontSize: 'clamp(1.1rem, 3vw, 1.5rem)', maxWidth: '850px', margin: '0 auto', fontWeight: 300, fontStyle: 'italic', lineHeight: 1.6 }}
+          >
+            "Savour a journey through Turkish culture crafted on the grill. Traditional charcoal-grilled kebabs, handcrafted dishes, and warm hospitality since 2010."
+          </motion.p>
         </motion.div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-10 lg:gap-16 mt-12 px-2 md:px-0">
+        <div className="locations-grid">
           {locations.map((loc, index) => (
             <motion.div
               key={loc.id}
               initial={{ opacity: 0, y: 40 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.8, delay: index * 0.2 + 0.5 }}
+              transition={{ duration: 0.8, delay: index * 0.2 + 0.8 }}
-              className="glass-card group cursor-pointer"
+              className="glass-card group"
+              style={{ cursor: 'pointer' }}
               onClick={() => handleLocationSelect(loc.url)}
             >
-              <div className="relative h-[24rem] md:h-96 overflow-hidden">
+              <div className="card-image-container">
+                <div className="card-frame" />
                 <Image
                   src={loc.image}
                   alt={loc.name}
                   fill
-                  className="object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
+                  style={{ objectFit: 'cover' }}
+                  className="transition-image"
                 />
                 <div className="overlay" />
                 
-                <div className="absolute top-6 right-6 z-20">
+                <div style={{ position: 'absolute', top: '24px', right: '24px', zIndex: 20 }}>
                     <motion.div 
                       whileHover={{ scale: 1.1, rotate: 5 }}
-                      className="bg-black/40 backdrop-blur-xl p-3 rounded-full border border-[#d28839]/40"
+                      style={{ 
+                        backgroundColor: 'rgba(0,0,0,0.4)', 
+                        backdropFilter: 'blur(10px)', 
+                        padding: '12px', 
+                        borderRadius: '9999px', 
+                        border: '1px solid rgba(210, 136, 57, 0.4)' 
+                      }}
                     >
-                        <ExternalLink size={20} className="text-[#d3cab3]" />
+                        <ExternalLink size={20} style={{ color: '#d3cab3' }} />
                     </motion.div>
                 </div>
 
-                <div className="absolute bottom-10 left-10 right-10 z-20 flex flex-col items-start translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
+                <div style={{ 
-                    <div className="flex items-center gap-2 mb-3 text-[#d28839]">
+                  position: 'absolute', 
-                        <Globe size={14} className="animate-pulse" />
+                  bottom: '40px', 
-                        <span className="text-[10px] tracking-[0.3em] uppercase font-bold text-[#d28839]">Signature Spot</span>
+                  left: '40px', 
+                  right: '40px', 
+                  zIndex: 20, 
+                  display: 'flex', 
+                  flexDirection: 'column', 
+                  alignItems: 'flex-start' 
+                }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
+                        <Globe size={14} style={{ color: '#d28839' }} />
+                        <span style={{ fontSize: '10px', letterSpacing: '0.3em', textTransform: 'uppercase', fontWeight: 'bold', color: '#d28839' }}>
+                          Signature Spot
+                        </span>
                     </div>
-                    <h2 className="text-4xl md:text-5xl font-bold mb-4 text-[#d3cab3]">{loc.name}</h2>
+                    <h2 style={{ fontSize: 'clamp(2rem, 5vw, 3rem)', fontWeight: 'bold', marginBottom: '16px', color: '#d3cab3' }}>
-                    <div className="flex items-start gap-2 text-gray-300 text-sm mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-700 delay-100">
+                      {loc.name}
-                        <MapPin size={16} className="mt-1 flex-shrink-0 text-[#d28839]" />
+                    </h2>
-                        <span className="font-light">{loc.address}</span>
+                    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px', color: '#d1d5db', fontSize: '0.875rem' }}>
+                        <MapPin size={16} style={{ marginTop: '4px', flexShrink: 0, color: '#d28839' }} />
+                        <span style={{ fontWeight: 300 }}>{loc.address}</span>
                     </div>
                 </div>
               </div>
 
-              <div className="p-10 border-t border-[#b07c4b]/10">
+              <div className="card-content">
-                <p className="text-base text-[#c49c5c]/80 mb-8 font-light leading-relaxed">
+                <p style={{ fontSize: '1rem', color: 'rgba(196, 156, 92, 0.8)', marginBottom: '32px', fontWeight: 300, lineHeight: 1.6 }}>
                     {loc.description}
                 </p>
-                <div className="inline-flex items-center gap-3 text-white font-medium group/btn">
+                <div style={{ display: 'inline-flex', alignItems: 'center', gap: '12px', color: 'white', fontWeight: 500 }}>
-                  <span className="border-b border-transparent group-hover/btn:border-[#d28839] transition-all duration-300 tracking-[0.2em] uppercase text-sm">Explore House</span>
+                  <span style={{ letterSpacing: '0.2em', textTransform: 'uppercase', fontSize: '0.875rem', borderBottom: '1px solid transparent' }}>
-                  <div className="w-8 h-8 rounded-full border border-white/20 flex items-center justify-center group-hover/btn:bg-[#d28839] group-hover/btn:border-[#d28839] transition-all duration-300">
+                    Explore House
-                    <Globe size={14} className="text-white" />
+                  </span>
+                  <div style={{ 
+                    width: '32px', 
+                    height: '32px', 
+                    borderRadius: '50%', 
+                    border: '1px solid rgba(255,255,255,0.2)', 
+                    display: 'flex', 
+                    alignItems: 'center', 
+                    justifyContent: 'center' 
+                  }}>
+                    <Globe size={14} color="white" />
                   </div>
                 </div>
               </div>
             </motion.div>
           ))}
         </div>
-
-        <motion.footer
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 1, delay: 1.5 }}
-          className="mt-32 text-center pb-12"
-        >
-          <div className="h-[1px] w-full bg-gradient-to-r from-transparent via-[#b07c4b]/30 to-transparent mb-12" />
-          <p className="uppercase tracking-[0.5em] font-medium text-[10px] text-[#c49c5c] mb-6 opacity-60">
-            Turkish Excellence Since 2010
-          </p>
-          <div className="flex justify-center gap-8 text-[#d3cab3] font-light text-sm tracking-widest uppercase">
-            <a href="#" className="hover:text-[#d28839] transition-colors duration-300">Home</a>
-            <a href="#" className="hover:text-[#d28839] transition-colors duration-300">Private Dining</a>
-            <a href="#" className="hover:text-[#d28839] transition-colors duration-300">Catering</a>
-          </div>
-          <p className="mt-12 text-[10px] text-gray-600 tracking-wider">
-            © {new Date().getFullYear()} ANTALYA RESTAURANT GROUP. ALL RIGHTS RESERVED.
-          </p>
-        </motion.footer>
       </div>
       
       {/* Decorative Elements */}
-      <div className="fixed -top-4 -left-4 w-64 h-64 bg-[#d28839]/10 rounded-full blur-[100px] pointer-events-none" />
+      <div className="decorative-blob blob-1" />
-      <div className="fixed -bottom-4 -right-4 w-96 h-96 bg-[#d28839]/10 rounded-full blur-[120px] pointer-events-none" />
+      <div className="decorative-blob blob-2" />
     </main>
   );
 }