Update src/app/page.tsx

src/app/globals.css

@@ -4,13 +4,13 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  --background: #fafffb;;
+  --background: #ffffff;
-  --card: #f7fffa;;
+  --card: #fcfcfc;
-  --foreground: #001a0a;;
+  --foreground: #000000e6;
-  --primary-cta: #0a7039;;
+  --primary-cta: #1a1a1a;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #ffffff;
-  --accent: #a8d9be;;
+  --accent: #bebebe;
-  --background-accent: #6bbf8e;;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
@@ -495,7 +495,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-cormorant-garamond), sans-serif;
+  font-family: var(--font-inter-tight), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -508,5 +508,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-cormorant-garamond), sans-serif;
+  font-family: var(--font-inter-tight), sans-serif;
 }

src/app/layout.tsx

@@ -1278,4 +1278,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
 import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import AboutPhoneTimeline from '@/components/sections/about/AboutPhoneTimeline';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
@@ -20,7 +20,7 @@ export default function LandingPage() {
       borderRadius="pill"
       contentWidth="medium"
       sizing="mediumLargeSizeMediumTitles"
-      background="circleGradient"
+      background="none"
       cardStyle="outline"
       primaryButtonStyle="diagonal-gradient"
       secondaryButtonStyle="radial-glow"
@@ -89,6 +89,13 @@ export default function LandingPage() {
               price: "AED 3.1M",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766677285397-72fbvxql.jpg",
               imageAlt: "Contemporary townhouse design"
+            },
+            {
+              id: "5",
+              name: "Dreamy Luxury Villa",
+              price: "AED 6.2M",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766677281862-wrg59rzg.jpg",
+              imageAlt: "Dreamy luxury villa with premium finishes"
             }
           ]}
           gridVariant="uniform-all-items-equal"
@@ -101,10 +108,13 @@ export default function LandingPage() {
       </div>
       
       <div id="about" data-section="about">
-        <InlineImageSplitTextAbout 
+        <AboutPhoneTimeline 
-          heading={[
+          title="Our Mission"
-            { type: "text", content: "Leading Dubai Real Estate Company with over 15 years of market expertise" }
+          description="We believe in creating experiences that inspire, empower, and transform. Our team is dedicated to building solutions that make a real difference in people's lives."
-          ]}
+          tag="About Us"
+          phoneOne={{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766677283454-saiau266.jpg", imageAlt: "Dashboard view" }}
+          phoneTwo={{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766677284138-zvo3uevt.jpg", imageAlt: "Product demo view" }}
+          textboxLayout="default"
           buttons={[
             { text: "Learn More", href: "#contact" },
             { text: "Contact Team", href: "#contact" }
@@ -312,4 +322,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}