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 FooterCard from "@/components/sections/footer/FooterCard";
+import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import { Coffee, Espresso, Tally3, Cake, Laptop, Moon, Star, MapPin, CoffeeBean, ArrowUpRight, Phone, MessageCircle, Instagram, Facebook } from "lucide-react";
 
 export default function WebAgency2Page() {
   return (
@@ -149,19 +149,28 @@ export default function WebAgency2Page() {
             },
           ]}
         />
-        <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}
+          />
+        </div>
         <MetricCardOne
           title="Recognized for Excellence"
           description="Dedicated to delivering the finest coffee experience in Zamalek, consistently rated among the best."
@@ -203,35 +212,51 @@ export default function WebAgency2Page() {
             { 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>
+        <FooterCard
           logoText="Fifty Fifty"
           copyrightText="© 2024 | Fifty Fifty Specialty Coffee. All rights reserved."
+          socialLinks={[
+            { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+            { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+            { icon: MessageCircle, href: "#", ariaLabel: "WhatsApp" }
+          ]}
           columns={[
             {
               title: "Explore",              items: [
@@ -239,6 +264,7 @@ export default function WebAgency2Page() {
                 { label: "About Us", href: "#about" },
                 { label: "Experiences", href: "#experiences" },
                 { label: "Gallery", href: "#gallery" },
+                { label: "Reviews", href: "#reviews" }
               ],
             },
             {
@@ -247,17 +273,10 @@ export default function WebAgency2Page() {
                 { label: "Hours", href: "#visit-us" },
                 { label: "Contact", href: "#contact" },
               ],
-            },
-            {
-              title: "Connect",              items: [
-                { label: "Instagram", href: "#" },
-                { label: "Facebook", href: "#" },
-                { label: "WhatsApp", href: "#" },
-              ],
-            },
+            }
           ]}
         />
       </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);