From 114faaaefdfd90c69e6c90f6f1cae87e065cf008 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 15:07:05 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 192 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 185 insertions(+), 7 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8ec77d0..204eff4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,9 +10,103 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
 import { MapPin } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [activeCity, setActiveCity] = useState('bhuj');
+
+  const cityData = {
+    bhuj: {
+      name: 'Bhuj, Gujarat',
+      metrics: [
+        {
+          id: '1',
+          title: 'Main Store',
+          subtitle: 'Bhuj City Center · Dine-in & Delivery',
+          category: 'Est. Location',
+          value: 'Open Daily',
+          buttons: [{ text: 'Get Directions', href: 'https://maps.google.com/?q=6MP3+G6+Bhuj,+Gujarat' }]
+        },
+        {
+          id: '2',
+          title: 'University Campus',
+          subtitle: 'Near SVNIT Campus · Student Favorite',
+          category: 'Popular Spot',
+          value: '9AM-11PM',
+          buttons: [{ text: 'Visit Now', href: 'tel:09920997568' }]
+        },
+        {
+          id: '3',
+          title: 'Weekend Hub',
+          subtitle: 'Mandvi Gate · Perfect for Groups',
+          category: 'Hangout Zone',
+          value: '11AM-12AM',
+          buttons: [{ text: 'Call Ahead', href: 'tel:09920997568' }]
+        }
+      ]
+    },
+    ahmedabad: {
+      name: 'Ahmedabad',
+      metrics: [
+        {
+          id: '1',
+          title: 'Premium Outlet',
+          subtitle: 'CG Road · High-End Location',
+          category: 'Premium',
+          value: '10AM-10PM',
+          buttons: [{ text: 'Get Directions', href: 'https://maps.google.com/?q=ahmedabad+cg+road' }]
+        },
+        {
+          id: '2',
+          title: 'College Point',
+          subtitle: 'Near CEPT Campus · Student Zone',
+          category: 'College Hub',
+          value: '9AM-11PM',
+          buttons: [{ text: 'Visit Now', href: 'tel:09920997568' }]
+        },
+        {
+          id: '3',
+          title: 'South City',
+          subtitle: 'Thaltej · Modern Setup',
+          category: 'New Branch',
+          value: '10AM-12AM',
+          buttons: [{ text: 'Call Ahead', href: 'tel:09920997568' }]
+        }
+      ]
+    },
+    gandhinagar: {
+      name: 'Gandhinagar',
+      metrics: [
+        {
+          id: '1',
+          title: 'City Center',
+          subtitle: 'Main Road · Family Friendly',
+          category: 'Family Zone',
+          value: 'Open Daily',
+          buttons: [{ text: 'Get Directions', href: 'https://maps.google.com/?q=gandhinagar+main+road' }]
+        },
+        {
+          id: '2',
+          title: 'Tech Park Branch',
+          subtitle: 'Infopark · Corporate Area',
+          category: 'Business District',
+          value: '9AM-9PM',
+          buttons: [{ text: 'Visit Now', href: 'tel:09920997568' }]
+        },
+        {
+          id: '3',
+          title: 'Entertainment Zone',
+          subtitle: 'Mall Area · Shopping Hub',
+          category: 'Retail Zone',
+          value: '10AM-11PM',
+          buttons: [{ text: 'Call Ahead', href: 'tel:09920997568' }]
+        }
+      ]
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -33,7 +127,7 @@ export default function LandingPage() {
             { name: "Why Us", id: "whyus" },
             { name: "Gallery", id: "gallery" },
             { name: "Reviews", id: "reviews" },
-            { name: "Visit", id: "visit" },
+            { name: "Locations", id: "locations" },
           ]}
           brandName="SIZE ZERO CAFE"
           bottomLeftText="Est. Bhuj, Gujarat"
@@ -56,7 +150,7 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           buttons={[
             { text: "View Menu", href: "#bestsellers" },
-            { text: "Visit Cafe", href: "#visit" },
+            { text: "Visit Cafe", href: "#locations" },
           ]}
           buttonAnimation="slide-up"
           imageSrc="http://img.b2bpic.net/free-photo/stylish-young-woman-using-digital-tablet-restaurant-table_23-2147936094.jpg"
@@ -158,13 +252,97 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="locations" data-section="locations">
+        <div className="px-4 py-16 md:px-6 md:py-24 w-full">
+          <div className="mx-auto max-w-6xl">
+            {/* Header */}
+            <div className="mb-12 text-center">
+              <div className="mb-4 inline-block">
+                <span className="rounded-full border border-current px-3 py-1 text-sm font-medium">Store Locator</span>
+              </div>
+              <h2 className="mb-4 text-3xl font-bold md:text-5xl">Visit Size Zero Cafe</h2>
+              <p className="mx-auto max-w-2xl text-base text-gray-600 md:text-lg">Discover our locations across cities with unique vibes and authentic cafe culture. Find the perfect spot near you.</p>
+            </div>
+
+            {/* City Tabs */}
+            <div className="mb-12 flex flex-wrap justify-center gap-3">
+              {Object.entries(cityData).map(([key, value]) => (
+                <button
+                  key={key}
+                  onClick={() => setActiveCity(key)}
+                  className={`rounded-full px-6 py-2 font-medium transition-all duration-300 ${
+                    activeCity === key
+                      ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg'
+                      : 'border border-gray-300 text-gray-700 hover:border-gray-400'
+                  }`}
+                >
+                  {value.name}
+                </button>
+              ))}
+            </div>
+
+            {/* Locations Grid */}
+            <div className="mb-12">
+              <MetricCardTen
+                metrics={cityData[activeCity as keyof typeof cityData].metrics}
+                title={`${cityData[activeCity as keyof typeof cityData].name} - Store Locations`}
+                description="Explore our premium cafes with 3D effects and interactive maps for each location."
+                textboxLayout="default"
+                animationType="slide-up"
+                useInvertedBackground={false}
+              />
+            </div>
+
+            {/* Map Visualization (3D Effect) */}
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              {cityData[activeCity as keyof typeof cityData].metrics.map((location, idx) => (
+                <div
+                  key={location.id}
+                  className="group relative overflow-hidden rounded-2xl border border-gray-200 bg-gradient-to-br from-white to-gray-50 p-6 shadow-md transition-all duration-300 hover:shadow-2xl hover:scale-105"
+                  style={{
+                    transform: `perspective(1000px) rotateY(${idx % 2 === 0 ? -5 : 5}deg)`,
+                    transformStyle: 'preserve-3d' as const
+                  }}
+                >
+                  {/* 3D Background Effect */}
+                  <div className="absolute inset-0 bg-gradient-to-br from-blue-400/10 to-purple-400/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+                  
+                  <div className="relative z-10">
+                    <div className="mb-3 flex items-center gap-2">
+                      <MapPin className="h-5 w-5 text-blue-600" />
+                      <span className="text-sm font-medium text-blue-600">{location.category}</span>
+                    </div>
+                    <h3 className="mb-2 text-xl font-bold text-gray-900">{location.title}</h3>
+                    <p className="mb-4 text-sm text-gray-600">{location.subtitle}</p>
+                    <div className="mb-4 inline-block rounded-lg bg-purple-100 px-3 py-1 text-sm font-semibold text-purple-700">
+                      {location.value}
+                    </div>
+                    <div className="flex gap-2">
+                      {location.buttons?.map((btn, btnIdx) => (
+                        <a
+                          key={btnIdx}
+                          href={btn.href}
+                          className="inline-block rounded-lg bg-blue-600 px-4 py-2 text-xs font-semibold text-white transition-all duration-200 hover:bg-blue-700 hover:shadow-lg"
+                        >
+                          {btn.text}
+                        </a>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="about" data-section="about">
         <TextSplitAbout
           title="The Story of Size Zero"
           description={[
             "Size Zero Cafe started with a simple mission: create a place where great food, great vibes and great people come together. We believe that food tastes better when you're surrounded by good company and Instagram-worthy aesthetics.",            "From our first cafe near universities to becoming a favorite hangout spot across cities, we focus on three core pillars: delicious fast food crafted with premium ingredients, cool minimalist interiors designed for social moments, and memorable experiences that keep customers coming back.",            "Because at Size Zero, we don't just serve food—we create moments, memories, and the perfect backdrop for your next social post. Join us for breakfast, lunch, dinner, or just a casual hangout. Every visit is special."]}
           buttons={[
-            { text: "Get Directions", href: "#visit" },
+            { text: "Get Directions", href: "#locations" },
           ]}
           showBorder={true}
           useInvertedBackground={false}
@@ -208,10 +386,10 @@ export default function LandingPage() {
             },
             {
               title: "Location",              items: [
-                { label: "Bhuj, Gujarat", href: "#visit" },
+                { label: "Bhuj, Gujarat", href: "#locations" },
                 { label: "Call: 09920997568", href: "tel:09920997568" },
-                { label: "Free Parking", href: "#visit" },
-                { label: "Dine-in & Delivery", href: "#visit" },
+                { label: "Free Parking", href: "#locations" },
+                { label: "Dine-in & Delivery", href: "#locations" },
               ],
             },
             {
@@ -219,7 +397,7 @@ export default function LandingPage() {
                 { label: "Instagram", href: "https://instagram.com" },
                 { label: "Google Reviews", href: "https://google.com" },
                 { label: "Share & Tag", href: "#" },
-                { label: "Contact", href: "#visit" },
+                { label: "Contact", href: "#locations" },
               ],
             },
           ]}