Update src/app/page.tsx

src/app/page.tsx

@@ -10,10 +10,10 @@ import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen
 import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
 import TeamCardFive from "@/components/sections/team/TeamCardFive";
 import FaqBase from "@/components/sections/faq/FaqBase";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
-import { Coffee, Espresso, Tally3, Cake, Laptop, Moon, Star, MapPin, CoffeeBean, ArrowUpRight, Phone, MessageCircle } from "lucide-react";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import { Coffee, Tally3, Cake, Laptop, Moon, Star, MapPin, ArrowUpRight, Phone, MessageCircle, Instagram, Facebook } from "lucide-react";
 
 export default function WebAgency2Page() {
   return (
@@ -61,13 +61,13 @@ export default function WebAgency2Page() {
             { imageSrc: "asset://hero_cinematic_coffee_2", imageAlt: "Elegant coffee shop interior" },
             { imageSrc: "asset://hero_cinematic_coffee_3", imageAlt: "Close-up of coffee beans" },
             { imageSrc: "asset://hero_cinematic_coffee_4", imageAlt: "Person enjoying coffee" },
-            { imageSrc: "asset://hero_cinematic_coffee_5", imageAlt: "Coffee cup on wooden table" },
+            { imageSrc: "asset://hero_cinematic_coffee_5", imageAlt: "Coffee cup on wooden table" }
           ]}
           rightCarouselItems={[
             { imageSrc: "asset://hero_cinematic_coffee_6", imageAlt: "Aeropress coffee preparation" },
             { imageSrc: "asset://hero_cinematic_coffee_7", imageAlt: "Espresso machine in action" },
             { imageSrc: "asset://hero_cinematic_coffee_8", imageAlt: "Outdoor seating at coffee shop" },
-            { imageSrc: "asset://hero_cinematic_coffee_9", imageAlt: "Hand holding a take-away coffee cup" },
+            { imageSrc: "asset://hero_cinematic_coffee_9", imageAlt: "Hand holding a take-away coffee cup" }
           ]}
           carouselItemClassName="!aspect-[3/4]"
         />
@@ -82,23 +82,23 @@ export default function WebAgency2Page() {
               title: "Premium Single Origin Beans",              description: "Sourced from the world's most renowned coffee regions, ensuring rich and distinct flavors in every cup.",              bentoComponent: "media-stack",              items: [
                 { imageSrc: "asset://coffee_beans_bag", imageAlt: "Bag of premium coffee beans" },
                 { imageSrc: "asset://coffee_plantation", imageAlt: "Coffee plantation field" },
-                { imageSrc: "asset://barista_coffee_beans", imageAlt: "Barista selecting coffee beans" },
-              ],
+                { imageSrc: "asset://barista_coffee_beans", imageAlt: "Barista selecting coffee beans" }
+              ]
             },
             {
               title: "Artisan Barista Craftsmanship",              description: "Our skilled baristas are true artists, dedicated to perfecting every brew, from precise pour-overs to intricate latte art.",              bentoComponent: "media-stack",              items: [
                 { imageSrc: "asset://barista_making_latte", imageAlt: "Barista pouring latte art" },
                 { imageSrc: "asset://barista_pouring", imageAlt: "Barista pouring coffee in a professional setting" },
-                { imageSrc: "asset://barista_smiling", imageAlt: "Smiling barista serving coffee" },
-              ],
+                { imageSrc: "asset://barista_smiling", imageAlt: "Smiling barista serving coffee" }
+              ]
             },
             {
               title: "Finest Quality Ingredients",              description: "Beyond coffee, we use fresh, premium milk, natural sweeteners, and high-quality ingredients for all our beverages and pastries.",              bentoComponent: "media-stack",              items: [
                 { imageSrc: "asset://fresh_milk_pour", imageAlt: "Fresh milk being poured" },
                 { imageSrc: "asset://pastry_ingredients", imageAlt: "Fresh ingredients for pastries" },
-                { imageSrc: "asset://dessert_plating", imageAlt: "Chef plating a dessert" },
-              ],
-            },
+                { imageSrc: "asset://dessert_plating", imageAlt: "Chef plating a dessert" }
+              ]
+            }
           ]}
         />
         <FeatureCardTwentySix
@@ -110,22 +110,28 @@ export default function WebAgency2Page() {
           features={[
             {
               title: "Specialty Coffee",              description: "From pour-overs to cold brews, explore our meticulously crafted specialty coffee selection.",              imageSrc: "asset://pour_over_coffee",              imageAlt: "Pour over coffee brewing",              buttonIcon: Coffee,
-              buttonHref: "#menu"},
+              buttonHref: "#menu"
+            },
             {
-              title: "The Espresso Bar",              description: "Classic espressos, macchiatos, and lattes perfected by our artisan baristas, rich and aromatic.",              imageSrc: "asset://espresso_shot",              imageAlt: "Perfect espresso shot",              buttonIcon: Espresso,
-              buttonHref: "#menu"},
+              title: "The Espresso Bar",              description: "Classic espressos, macchiatos, and lattes perfected by our artisan baristas, rich and aromatic.",              imageSrc: "asset://espresso_shot",              imageAlt: "Perfect espresso shot",              buttonIcon: Coffee,
+              buttonHref: "#menu"
+            },
             {
               title: "Authentic Arabic Coffee",              description: "Experience the rich heritage and distinct flavors of traditional Arabic coffee, brewed to perfection.",              imageSrc: "asset://arabic_coffee_pot",              imageAlt: "Traditional Arabic coffee pot",              buttonIcon: Tally3,
-              buttonHref: "#menu"},
+              buttonHref: "#menu"
+            },
             {
               title: "Gourmet Desserts & Pastries",              description: "Indulge in our exquisite selection of handcrafted cakes, tarts, and freshly baked pastries.",              imageSrc: "asset://dessert_display",              imageAlt: "Gourmet dessert display",              buttonIcon: Cake,
-              buttonHref: "#menu"},
+              buttonHref: "#menu"
+            },
             {
               title: "The Cozy Workspace",              description: "A tranquil environment perfect for remote work, meetings, or quiet contemplation with your coffee.",              imageSrc: "asset://cozy_workspace_coffee",              imageAlt: "Cozy coffee shop interior with laptop",              buttonIcon: Laptop,
-              buttonHref: "#visit-us"},
+              buttonHref: "#visit-us"
+            },
             {
               title: "Late-Night Coffee",              description: "Enjoy our full menu and a sophisticated ambiance, open daily until 2:00 AM for your evening cravings.",              imageSrc: "asset://late_night_coffee_shop",              imageAlt: "Elegant coffee shop at night",              buttonIcon: Moon,
-              buttonHref: "#visit-us"},
+              buttonHref: "#visit-us"
+            }
           ]}
         />
         <FeatureBento
@@ -136,32 +142,58 @@ export default function WebAgency2Page() {
           animationType="slide-up"
           features={[
             {
-              title: "Espresso Classics",              description: "Rich, bold, and perfectly extracted shots. Starting from EGP 65.",              bentoComponent: "media-stack",              items: [{ imageSrc: "asset://espresso_menu_card", imageAlt: "Espresso shot with crema" }],
+              title: "Espresso Classics",              description: "Rich, bold, and perfectly extracted shots. Starting from EGP 65.",              bentoComponent: "media-stack",              items: [
+                { imageSrc: "asset://espresso_menu_card?_wi=1", imageAlt: "Espresso shot with crema" },
+                { imageSrc: "asset://espresso_menu_card?_wi=2", imageAlt: "Espresso shot with crema" },
+                { imageSrc: "asset://espresso_menu_card?_wi=3", imageAlt: "Espresso shot with crema" }
+              ]
             },
             {
-              title: "Artisanal Pour-Overs",              description: "Experience the nuanced flavors of our V60 and Chemex brews. Starting from EGP 80.",              bentoComponent: "media-stack",              items: [{ imageSrc: "asset://pourover_menu_card", imageAlt: "V60 coffee brewing" }],
+              title: "Artisanal Pour-Overs",              description: "Experience the nuanced flavors of our V60 and Chemex brews. Starting from EGP 80.",              bentoComponent: "media-stack",              items: [
+                { imageSrc: "asset://pourover_menu_card?_wi=1", imageAlt: "V60 coffee brewing" },
+                { imageSrc: "asset://pourover_menu_card?_wi=2", imageAlt: "V60 coffee brewing" },
+                { imageSrc: "asset://pourover_menu_card?_wi=3", imageAlt: "V60 coffee brewing" }
+              ]
             },
             {
-              title: "Fifty Fifty Signatures",              description: "Unique handcrafted beverages you won't find anywhere else. Starting from EGP 90.",              bentoComponent: "media-stack",              items: [{ imageSrc: "asset://signature_menu_card", imageAlt: "Signature coffee drink" }],
+              title: "Fifty Fifty Signatures",              description: "Unique handcrafted beverages you won't find anywhere else. Starting from EGP 90.",              bentoComponent: "media-stack",              items: [
+                { imageSrc: "asset://signature_menu_card?_wi=1", imageAlt: "Signature coffee drink" },
+                { imageSrc: "asset://signature_menu_card?_wi=2", imageAlt: "Signature coffee drink" },
+                { imageSrc: "asset://signature_menu_card?_wi=3", imageAlt: "Signature coffee drink" }
+              ]
             },
             {
-              title: "Decadent Desserts",              description: "Indulge in our selection of gourmet cakes and tarts, baked fresh daily. Starting from EGP 80.",              bentoComponent: "media-stack",              items: [{ imageSrc: "asset://dessert_menu_card", imageAlt: "Chocolate cake slice" }],
-            },
+              title: "Decadent Desserts",              description: "Indulge in our selection of gourmet cakes and tarts, baked fresh daily. Starting from EGP 80.",              bentoComponent: "media-stack",              items: [
+                { imageSrc: "asset://dessert_menu_card?_wi=1", imageAlt: "Chocolate cake slice" },
+                { imageSrc: "asset://dessert_menu_card?_wi=2", imageAlt: "Chocolate cake slice" },
+                { imageSrc: "asset://dessert_menu_card?_wi=3", imageAlt: "Chocolate cake slice" }
+              ]
+            }
           ]}
         />
-        <TestimonialCardFifteen
-          testimonial="Fifty Fifty offers an unparalleled coffee experience in Cairo. The outstanding quality, friendly professional staff, and beautiful, relaxing atmosphere make it my favorite spot. Truly one of the best specialty coffee destinations!"
-          rating={5}
-          author="— A Delighted Guest"
-          avatars={[
-            { src: "asset://customer_avatar_1", alt: "Customer 1" },
-            { src: "asset://customer_avatar_2", alt: "Customer 2" },
-            { src: "asset://customer_avatar_3", alt: "Customer 3" }
-          ]}
-          ratingAnimation="slide-up"
-          avatarsAnimation="slide-up"
-          useInvertedBackground={false}
-        />
+        <div id="reviews" data-section="reviews">
+          <TestimonialCardSix
+            title="What Our Customers Say"
+            description="Hear from our delighted guests about their experiences with our coffee, staff, and atmosphere."
+            testimonials={[
+              {
+                id: "1",                name: "Ahmed K.",                handle: "@ahmed_coffee",                testimonial: "Fifty Fifty delivers exceptional coffee every time. The quality and depth of flavor are simply unmatched. A true gem for coffee lovers!",                imageSrc: "asset://customer_avatar_1",                imageAlt: "Ahmed K.",                icon: Star
+              },
+              {
+                id: "2",                name: "Laila S.",                handle: "@laila_eats",                testimonial: "The staff here are incredibly friendly and knowledgeable, always ready with a smile and a recommendation. They make every visit a pleasure!",                imageSrc: "asset://customer_avatar_2",                imageAlt: "Laila S.",                icon: Star
+              },
+              {
+                id: "3",                name: "Omar G.",                handle: "@omar_explorer",                testimonial: "The atmosphere at Fifty Fifty is so relaxing and inviting. It's my go-to spot for unwinding or getting some work done. Highly recommend!",                imageSrc: "asset://customer_avatar_3",                imageAlt: "Omar G.",                icon: Star
+              },
+              {
+                id: "4",                name: "Nour A.",                handle: "@nour_reads",                testimonial: "Their specialty coffee selection is outstanding. I've tried new brews here that I never thought I'd enjoy. A fantastic experience for true connoisseurs.",                imageSrc: "asset://customer_avatar_4",                imageAlt: "Nour A.",                icon: Star
+              }
+            ]}
+            animationType="slide-up"
+            useInvertedBackground={false}
+            textboxLayout="default"
+          />
+        </div>
         <MetricCardOne
           title="Recognized for Excellence"
           description="Dedicated to delivering the finest coffee experience in Zamalek, consistently rated among the best."
@@ -172,7 +204,7 @@ export default function WebAgency2Page() {
           metrics={[
             { id: "rating", value: "4.8/5", title: "Customer Rating", description: "Consistently highly rated for quality and service.", icon: Star },
             { id: "location", value: "Zamalek", title: "Prime Location", description: "Nestled in the heart of Cairo's vibrant Zamalek district.", icon: MapPin },
-            { id: "specialty", value: "Premium", title: "Specialty Coffee", description: "Curating the finest beans and artisanal brewing methods.", icon: CoffeeBean },
+            { id: "specialty", value: "Premium", title: "Specialty Coffee", description: "Curating the finest beans and artisanal brewing methods.", icon: Coffee }
           ]}
         />
         <FeatureCardSixteen
@@ -183,11 +215,13 @@ export default function WebAgency2Page() {
           animationType="slide-up"
           negativeCard={{
             items: [
-              "Sophisticated interiors and design aesthetics",              "Artisan coffee preparation in action",              "Relaxing ambiance, perfect for contemplation",              "Delectable pastries and gourmet desserts",              "Community moments and social gatherings"],
+              "Sophisticated interiors and design aesthetics",              "Artisan coffee preparation in action",              "Relaxing ambiance, perfect for contemplation",              "Delectable pastries and gourmet desserts",              "Community moments and social gatherings"
+            ]
           }}
           positiveCard={{
             items: [
-              "Our signature handcrafted beverages",              "Expert barista artistry and latte designs",              "Inviting seating areas for every mood",              "Freshly baked delights, made with passion",              "The perfect spot for meetings or remote work"],
+              "Our signature handcrafted beverages",              "Expert barista artistry and latte designs",              "Inviting seating areas for every mood",              "Freshly baked delights, made with passion",              "The perfect spot for meetings or remote work"
+            ]
           }}
         />
         <TeamCardFive
@@ -200,36 +234,47 @@ export default function WebAgency2Page() {
           team={[
             { id: "1", name: "Aisha", role: "Head Barista", imageSrc: "asset://barista_female_1", imageAlt: "Aisha, Head Barista" },
             { id: "2", name: "Karim", role: "Latte Artist", imageSrc: "asset://barista_male_1", imageAlt: "Karim, Latte Artist" },
-            { id: "3", name: "Nour", role: "Coffee Specialist", imageSrc: "asset://barista_female_2", imageAlt: "Nour, Coffee Specialist" },
+            { id: "3", name: "Nour", role: "Coffee Specialist", imageSrc: "asset://barista_female_2", imageAlt: "Nour, Coffee Specialist" }
           ]}
         />
-        <FaqBase
-          title="Visit Us in Zamalek"
-          description="Find your way to Fifty Fifty and discover our extended hours, perfect for any time of day."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          faqsAnimation="slide-up"
-          faqs={[
-            { id: "1", title: "Where are you located?", content: "Fifty Fifty Specialty Coffee is located at B-Zamalek, Abu El Feda Street, Zamalek, Cairo, Egypt. We're easily accessible and a perfect spot to relax." },
-            { id: "2", title: "What are your operating hours?", content: "We are open daily from early morning until 2:00 AM, offering a perfect spot for your morning coffee, afternoon meetings, or late-night gatherings." },
-            { id: "3", title: "Do you offer Wi-Fi for remote work?", content: "Yes, we provide complimentary high-speed Wi-Fi, making Fifty Fifty an ideal environment for remote work and study." },
-            { id: "4", title: "Is there parking available?", content: "While street parking is available, it can be limited. We recommend ride-sharing or public transport for ease of access in Zamalek." },
-            { id: "5", title: "What landmarks are nearby?", content: "We are located near the Zamalek Bridge and the Aquarium Grotto Garden, making us a great stop during your exploration of Zamalek." },
-          ]}
-        />
-        <ContactCTA
-          tag="Connect With Us"
-          title="Experience Fifty Fifty Today"
-          description="We look forward to welcoming you. Get in touch for inquiries, reservations, or simply to say hello. Our team is ready to assist you."
-          background={{ variant: "sparkles-gradient" }}
-          buttons={[
-            { text: "Get Directions", href: "https://www.google.com/maps/search/Fifty+Fifty+50%2F50+Specialty+Coffee,+B-Zamalek,+Abu+El+Feda+Street,+Zamalek,+Cairo,+Egypt" },
-            { text: "Call Us", href: "tel:+201001234567" },
-          ]}
-          buttonAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-        <FooterBase
+        <div id="visit-us" data-section="visit-us">
+          <FaqBase
+            title="Visit Us in Zamalek"
+            description="Find your way to Fifty Fifty, your premier coffee destination. Located at B-Zamalek, Abu El Feda Street, Zamalek, Cairo, Egypt. Use the button below for directions via Google Maps."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            faqsAnimation="slide-up"
+            buttons={[
+              { text: "Get Directions", href: "https://www.google.com/maps/search/Fifty+Fifty+50%2F50+Specialty+Coffee,+B-Zamalek,+Abu+El+Feda+Street,+Zamalek,+Cairo,+Egypt", onClick: () => console.log("Get Directions clicked") },
+              { text: "Call Us", href: "tel:+201001234567", onClick: () => console.log("Call Us clicked") }
+            ]}
+            faqs={[
+              { id: "1", title: "Where are you located?", content: "Fifty Fifty Specialty Coffee is located at B-Zamalek, Abu El Feda Street, Zamalek, Cairo, Egypt. We're easily accessible and a perfect spot to relax." },
+              { id: "2", title: "What are your operating hours?", content: "We are open daily from early morning until 2:00 AM, offering a perfect spot for your morning coffee, afternoon meetings, or late-night gatherings." },
+              { id: "3", title: "Do you offer Wi-Fi for remote work?", content: "Yes, we provide complimentary high-speed Wi-Fi, making Fifty Fifty an ideal environment for remote work and study." },
+              { id: "4", title: "Is there parking available?", content: "While street parking is available, it can be limited. We recommend ride-sharing or public transport for ease of access in Zamalek." },
+              { id: "5", title: "What landmarks are nearby?", content: "We are located near the Zamalek Bridge and the Aquarium Grotto Garden, making us a great stop during your exploration of Zamalek." }
+            ]}
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            tag="Connect With Us"
+            title="Reach Out to Fifty Fifty"
+            description="Have questions, feedback, or want to make a reservation? Fill out the form below or contact us directly. We'd love to hear from you!"
+            background={{ variant: "sparkles-gradient" }}
+            useInvertedBackground={false}
+            mediaAnimation="slide-up"
+            mediaPosition="right"
+            imageSrc="asset://coffee_cup_contact_us"
+            imageAlt="Contact Us"
+            inputPlaceholder="Enter your email"
+            buttonText="Send Message"
+            termsText="By sending a message, you agree to our privacy policy and terms of service."
+            onSubmit={(email) => console.log(`Contact form submitted with email: ${email}`)}
+          />
+        </div>
+        <FooterBaseReveal
           logoText="Fifty Fifty"
           copyrightText="© 2024 | Fifty Fifty Specialty Coffee. All rights reserved."
           columns={[
@@ -239,25 +284,19 @@ export default function WebAgency2Page() {
                 { label: "About Us", href: "#about" },
                 { label: "Experiences", href: "#experiences" },
                 { label: "Gallery", href: "#gallery" },
-              ],
+                { label: "Reviews", href: "#reviews" }
+              ]
             },
             {
               title: "Visit",              items: [
                 { label: "Location", href: "#visit-us" },
                 { label: "Hours", href: "#visit-us" },
-                { label: "Contact", href: "#contact" },
-              ],
-            },
-            {
-              title: "Connect",              items: [
-                { label: "Instagram", href: "#" },
-                { label: "Facebook", href: "#" },
-                { label: "WhatsApp", href: "#" },
-              ],
-            },
+                { label: "Contact", href: "#contact" }
+              ]
+            }
           ]}
         />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #161616;
-  --foreground: #f0f0f0;
-  --primary-cta: #ffffff;
+  --background: #1A1B22;
+  --card: #2A2B37;
+  --foreground: #E0E1DD;
+  --primary-cta: #B8860B;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1e1e1e;
+  --secondary-cta: #4A4B5A;
   --secondary-cta-text: #e0e0e0;
-  --accent: #d0d0d0;
-  --background-accent: #9a9a9a;
+  --accent: #D4AF37;
+  --background-accent: #3B3D4D;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);