Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -9,6 +9,7 @@ import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { MapPin, Phone, Mail, Facebook, Instagram, Linkedin, Twitter } from 'lucide-react';
 
 export default function AgoraLanding() {
   return (
@@ -32,7 +33,9 @@ export default function AgoraLanding() {
             { name: "About", id: "about" },
             { name: "The Sandwich", id: "signature" },
             { name: "Why Agora", id: "features" },
-            { name: "Reviews", id: "testimonial" }
+            { name: "Reviews", id: "testimonial" },
+            { name: "Location", id: "location" },
+            { name: "Gallery", id: "gallery" }
           ]}
           button={{
             text: "Order Now",            href: "https://wolt.com"
@@ -51,7 +54,7 @@ export default function AgoraLanding() {
           imageAlt="Legendary Agora beef prosciutto sandwich"
           buttons={[
             { text: "Order Now on Wolt", href: "https://wolt.com" },
-            { text: "Call +383 38 123 456", href: "tel:+38338123456" }
+            { text: "Call +383 45 363 636", href: "tel:+38345363636" }
           ]}
           buttonAnimation="blur-reveal"
         />
@@ -158,6 +161,115 @@ export default function AgoraLanding() {
         />
       </div>
 
+      <div id="location" data-section="location" className="w-full py-16 md:py-24 px-4">
+        <div className="mx-auto max-w-7xl">
+          <div className="mb-12">
+            <h2 className="text-3xl md:text-5xl font-bold mb-4">Visit Us</h2>
+            <p className="text-lg text-foreground/70 mb-8">Located in the heart of Prishtina, Kosovo. Come experience the legendary Agora sandwich in person.</p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
+            {/* Map Section */}
+            <div className="w-full h-96 md:h-full min-h-96 rounded-lg overflow-hidden shadow-lg">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2934.5476505819253!2d21.155894!3d42.662041!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x13549e6d7f5f5f5f%3A0x5f5f5f5f5f5f5f5f!2sSadik%20Bekteshi%20Dardani%2C%20Prishtina%2010000%2C%20Kosovo!5e0!3m2!1sen!2s!4v1234567890"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen={true}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                className="w-full h-full"
+              />
+            </div>
+
+            {/* Contact Details Section */}
+            <div className="flex flex-col justify-center space-y-6">
+              <div className="bg-card rounded-lg p-6 md:p-8 shadow-md">
+                <div className="flex items-start gap-4">
+                  <MapPin className="w-6 h-6 text-primary-cta flex-shrink-0 mt-1" />
+                  <div>
+                    <h3 className="text-xl font-semibold mb-2">Address</h3>
+                    <p className="text-foreground/70">Sadik Bekteshi Dardani</p>
+                    <p className="text-foreground/70">Prishtina 10000, Kosovo</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-card rounded-lg p-6 md:p-8 shadow-md">
+                <div className="flex items-start gap-4">
+                  <Phone className="w-6 h-6 text-primary-cta flex-shrink-0 mt-1" />
+                  <div>
+                    <h3 className="text-xl font-semibold mb-2">Phone</h3>
+                    <a href="tel:+38345363636" className="text-foreground/70 hover:text-primary-cta transition">+383 45 363 636</a>
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-card rounded-lg p-6 md:p-8 shadow-md">
+                <div className="flex items-start gap-4">
+                  <Mail className="w-6 h-6 text-primary-cta flex-shrink-0 mt-1" />
+                  <div>
+                    <h3 className="text-xl font-semibold mb-2">Email</h3>
+                    <a href="mailto:hello@agora.ks" className="text-foreground/70 hover:text-primary-cta transition">hello@agora.ks</a>
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-card rounded-lg p-6 md:p-8 shadow-md">
+                <h3 className="text-xl font-semibold mb-4">Hours</h3>
+                <div className="space-y-2 text-foreground/70">
+                  <p>Monday - Thursday: 10:00 AM - 10:00 PM</p>
+                  <p>Friday - Saturday: 10:00 AM - 12:00 AM</p>
+                  <p>Sunday: 11:00 AM - 10:00 PM</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="gallery" data-section="gallery" className="w-full py-16 md:py-24 px-4">
+        <div className="mx-auto max-w-7xl">
+          <div className="mb-12">
+            <h2 className="text-3xl md:text-5xl font-bold mb-4">Gallery</h2>
+            <p className="text-lg text-foreground/70">Feast your eyes on the iconic Agora sandwich and our cozy restaurant atmosphere.</p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
+            {[
+              {
+                src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Amx0QtR9TKHbbyJg3HHp8bccAP/uploaded-1773211705145-22yecdhl.png?_wi=20",                alt: "Signature Agora beef prosciutto sandwich"
+              },
+              {
+                src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Amx0QtR9TKHbbyJg3HHp8bccAP/uploaded-1773211705145-22yecdhl.png?_wi=21",                alt: "Fresh sandwich preparation"
+              },
+              {
+                src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Amx0QtR9TKHbbyJg3HHp8bccAP/uploaded-1773211705145-22yecdhl.png?_wi=22",                alt: "Restaurant interior"
+              },
+              {
+                src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Amx0QtR9TKHbbyJg3HHp8bccAP/uploaded-1773211705145-22yecdhl.png?_wi=23",                alt: "Premium ingredients close-up"
+              },
+              {
+                src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Amx0QtR9TKHbbyJg3HHp8bccAP/uploaded-1773211705145-22yecdhl.png?_wi=24",                alt: "Sandwich presentation"
+              },
+              {
+                src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Amx0QtR9TKHbbyJg3HHp8bccAP/uploaded-1773211705145-22yecdhl.png?_wi=25",                alt: "Happy customers enjoying Agora"
+              }
+            ].map((image, index) => (
+              <div key={index} className="relative group overflow-hidden rounded-lg shadow-lg h-64 md:h-72">
+                <img
+                  src={image.src}
+                  alt={image.alt}
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                />
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
       <div id="contact" data-section="contact">
         <ContactSplit
           tag="Order Now"
@@ -185,7 +297,7 @@ export default function AgoraLanding() {
             {
               title: "Order",              items: [
                 { label: "Order on Wolt", href: "https://wolt.com" },
-                { label: "Call +383 38 123 456", href: "tel:+38338123456" },
+                { label: "Call +383 45 363 636", href: "tel:+38345363636" },
                 { label: "Menu", href: "#signature" },
                 { label: "Delivery Info", href: "#" }
               ]
@@ -195,7 +307,15 @@ export default function AgoraLanding() {
                 { label: "Our Story", href: "#about" },
                 { label: "Why Agora", href: "#features" },
                 { label: "Reviews", href: "#testimonial" },
-                { label: "Contact Us", href: "#contact" }
+                { label: "Location", href: "#location" }
+              ]
+            },
+            {
+              title: "Connect",              items: [
+                { label: "Facebook", href: "https://facebook.com" },
+                { label: "Instagram", href: "https://instagram.com" },
+                { label: "LinkedIn", href: "https://linkedin.com" },
+                { label: "Twitter", href: "https://twitter.com" }
               ]
             },
             {

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #120006e6;
-  --primary-cta: #e63946;
+  --background: #1a1410;
+  --card: #2a201a;
+  --foreground: #f5e6d3;
+  --primary-cta: #d4a574;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #2a201a;
   --secondary-cta-text: #120006e6;
-  --accent: #e2e2e2;
-  --background-accent: #e63946;
+  --accent: #c08552;
+  --background-accent: #8b6f47;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);