Update src/app/styles/variables.css

src/app/page.tsx

@@ -32,21 +32,13 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "hero"},
-          id: "hero",
-        },
         {
-          name: "Developments",
+          name: "Developments",          id: "projects"},
-          id: "projects",
-        },
         {
-          name: "Track Record",
+          name: "Track Record",          id: "metrics"},
-          id: "metrics",
-        },
         {
-          name: "Contact",
+          name: "Contact",          id: "contact"},
-          id: "contact",
-        },
       ]}
       brandName="Czar Projects"
     />
@@ -55,19 +47,14 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
       background={{
-        variant: "plain",
+        variant: "plain"}}
-      }}
       logoText="CZAR PROJECTS"
       description="Defining the pinnacle of luxury corporate real estate in the heart of Lekki. Crafting legacies for the visionary developer."
       buttons={[
         {
-          text: "View Portfolio",
+          text: "View Portfolio",          href: "#projects"},
-          href: "#projects",
-        },
         {
-          text: "Consult Today",
+          text: "Consult Today",          href: "#contact"},
-          href: "#contact",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/skyscrapers-golden-clouds_23-2152013759.jpg"
       mediaAnimation="slide-up"
@@ -82,17 +69,11 @@ export default function LandingPage() {
       description="Czar Projects Limited combines architectural innovation with structural integrity. We specialize in developing high-yield commercial and residential properties for institutional and private clients."
       bulletPoints={[
         {
-          title: "Prime Locations",
+          title: "Prime Locations",          description: "Strategic placement in Lekki's fastest-growing corridors."},
-          description: "Strategic placement in Lekki's fastest-growing corridors.",
-        },
         {
-          title: "Corporate Standards",
+          title: "Corporate Standards",          description: "World-class build quality and modern sustainability."},
-          description: "World-class build quality and modern sustainability.",
-        },
         {
-          title: "Institutional Trust",
+          title: "Institutional Trust",          description: "Transparent development processes and proven track record."},
-          description: "Transparent development processes and proven track record.",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/view-modern-futuristic-work-space-with-furniture_23-2151797715.jpg"
       mediaAnimation="blur-reveal"
@@ -107,41 +88,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "p1",
+          id: "p1",          name: "The Royal Crest Tower",          price: "Enquire",          imageSrc: "http://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg"},
-          name: "The Royal Crest Tower",
-          price: "Enquire",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg",
-        },
         {
-          id: "p2",
+          id: "p2",          name: "Czar Business Plaza",          price: "Enquire",          imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-island-with-fluted-glass-cabinets-stylish-interior-with-builtin-appliances_169016-72717.jpg"},
-          name: "Czar Business Plaza",
-          price: "Enquire",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-island-with-fluted-glass-cabinets-stylish-interior-with-builtin-appliances_169016-72717.jpg",
-        },
         {
-          id: "p3",
+          id: "p3",          name: "Imperial Garden Estate",          price: "Enquire",          imageSrc: "http://img.b2bpic.net/free-photo/brutalist-inspiration-architecture-background_23-2149162837.jpg"},
-          name: "Imperial Garden Estate",
-          price: "Enquire",
-          imageSrc: "http://img.b2bpic.net/free-photo/brutalist-inspiration-architecture-background_23-2149162837.jpg",
-        },
         {
-          id: "p4",
+          id: "p4",          name: "The Executive Suites",          price: "Enquire",          imageSrc: "http://img.b2bpic.net/free-photo/modern-dining-room-living-room-with-luxury-decor_105762-1672.jpg"},
-          name: "The Executive Suites",
-          price: "Enquire",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-dining-room-living-room-with-luxury-decor_105762-1672.jpg",
-        },
         {
-          id: "p5",
+          id: "p5",          name: "Lekki Waterfront Residences",          price: "Enquire",          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-kitchen-interior-design_23-2151821287.jpg"},
-          name: "Lekki Waterfront Residences",
-          price: "Enquire",
-          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-kitchen-interior-design_23-2151821287.jpg",
-        },
         {
-          id: "p6",
+          id: "p6",          name: "Summit Corporate Hub",          price: "Enquire",          imageSrc: "http://img.b2bpic.net/free-photo/woman-pajama-standing-balcony-looking-around-excited-female-model-with-long-blonde-hair-enjoying-morning_197531-20976.jpg"},
-          name: "Summit Corporate Hub",
-          price: "Enquire",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-pajama-standing-balcony-looking-around-excited-female-model-with-long-blonde-hair-enjoying-morning_197531-20976.jpg",
-        },
       ]}
       title="Our Signature Developments"
       description="Discover our collection of curated spaces, designed for modern corporate and luxury living standards."
@@ -155,34 +112,16 @@ export default function LandingPage() {
       useInvertedBackground={false}
       metrics={[
         {
-          id: "m1",
+          id: "m1",          value: "15+",          title: "Projects Delivered",          items: [
-          value: "15+",
+            "Commercial Office Towers",            "Luxury Residential Blocks",            "Mixed-Use Developments"],
-          title: "Projects Delivered",
-          items: [
-            "Commercial Office Towers",
-            "Luxury Residential Blocks",
-            "Mixed-Use Developments",
-          ],
         },
         {
-          id: "m2",
+          id: "m2",          value: "₦50B+",          title: "Value Created",          items: [
-          value: "₦50B+",
+            "Aggregated asset valuation",            "Total development pipeline",            "Client-focused ROI"],
-          title: "Value Created",
-          items: [
-            "Aggregated asset valuation",
-            "Total development pipeline",
-            "Client-focused ROI",
-          ],
         },
         {
-          id: "m3",
+          id: "m3",          value: "98%",          title: "On-Time Completion",          items: [
-          value: "98%",
+            "Efficient project cycles",            "Supply chain excellence",            "Unbroken delivery history"],
-          title: "On-Time Completion",
-          items: [
-            "Efficient project cycles",
-            "Supply chain excellence",
-            "Unbroken delivery history",
-          ],
         },
       ]}
       title="Unmatched Track Record"
@@ -197,17 +136,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       negativeCard={{
         items: [
-          "No compromise on materials",
+          "No compromise on materials",          "Zero tolerance for delays",          "Avoiding architectural clutter"],
-          "Zero tolerance for delays",
-          "Avoiding architectural clutter",
-        ],
       }}
       positiveCard={{
         items: [
-          "Premium global finishing",
+          "Premium global finishing",          "State-of-the-art security",          "Sustainability-first architecture"],
-          "State-of-the-art security",
-          "Sustainability-first architecture",
-        ],
       }}
       title="Why Choose Czar Projects?"
       description="We don't just build buildings; we craft institutional-grade assets for Lekki’s skyline."
@@ -222,131 +155,87 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",
+          id: "t1",          name: "Tunde Adeyemi",          role: "CEO",          company: "CapitalTrust",          rating: 5,
-          name: "Tunde Adeyemi",
+          imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg"},
-          role: "CEO",
-          company: "CapitalTrust",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg",
-        },
         {
-          id: "t2",
+          id: "t2",          name: "Chioma Obi",          role: "Managing Director",          company: "InvestLagos",          rating: 5,
-          name: "Chioma Obi",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg"},
-          role: "Managing Director",
-          company: "InvestLagos",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg",
-        },
         {
-          id: "t3",
+          id: "t3",          name: "James Henderson",          role: "Principal Architect",          company: "Henderson Group",          rating: 5,
-          name: "James Henderson",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg"},
-          role: "Principal Architect",
-          company: "Henderson Group",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg",
-        },
         {
-          id: "t4",
+          id: "t4",          name: "Amina Bashir",          role: "Investment Analyst",          company: "Zenith Properties",          rating: 5,
-          name: "Amina Bashir",
+          imageSrc: "http://img.b2bpic.net/free-photo/corporate-employee-posing-office_23-2148804484.jpg"},
-          role: "Investment Analyst",
-          company: "Zenith Properties",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/corporate-employee-posing-office_23-2148804484.jpg",
-        },
         {
-          id: "t5",
+          id: "t5",          name: "Samuel Igwe",          role: "Director",          company: "Igwe Ventures",          rating: 5,
-          name: "Samuel Igwe",
+          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-holding-document_23-2149445754.jpg"},
-          role: "Director",
-          company: "Igwe Ventures",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-holding-document_23-2149445754.jpg",
-        },
       ]}
       title="Our Partnerships"
       description="What our institutional partners and luxury investors have to say."
     />
   </div>
 
-  <div id="faq" data-section="faq">
+  <div id="faq" data-section="faq" className="bg-white/5 backdrop-blur-xl border-t border-white/10">
       <FaqDouble
       textboxLayout="split"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       faqs={[
         {
-          id: "f1",
+          id: "f1",          title: "How do I invest in Czar Projects?",          content: "Our projects are open to qualified investors through our institutional partners."},
-          title: "How do I invest in Czar Projects?",
-          content: "Our projects are open to qualified investors through our institutional partners.",
-        },
         {
-          id: "f2",
+          id: "f2",          title: "What are the project timelines?",          content: "We offer detailed project schedules post-onboarding."},
-          title: "What are the project timelines?",
-          content: "We offer detailed project schedules post-onboarding.",
-        },
         {
-          id: "f3",
+          id: "f3",          title: "Do you offer property management?",          content: "Yes, we provide full facility management services for our developments."},
-          title: "Do you offer property management?",
-          content: "Yes, we provide full facility management services for our developments.",
-        },
       ]}
       title="Investor Information"
       description="Common queries regarding our development process and investment opportunities."
       faqsAnimation="slide-up"
+      containerClassName="shadow-2xl rounded-3xl"
     />
   </div>
 
-  <div id="contact" data-section="contact">
+  <div id="contact" data-section="contact" className="bg-white/5 backdrop-blur-xl">
       <ContactCTA
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       background={{
-        variant: "plain",
+        variant: "plain"}}
-      }}
       tag="Get in touch"
       title="Develop With Czar Projects"
       description="Secure your interest in our latest developments or inquire about partnership opportunities in Lekki."
       buttons={[
         {
-          text: "Contact Our Team",
+          text: "Contact Our Team",          href: "#"},
-          href: "#",
-        },
       ]}
+      containerClassName="shadow-inner border border-white/5"
     />
   </div>
 
-  <div id="footer" data-section="footer">
+  <div id="footer" data-section="footer" className="bg-black/20 backdrop-blur-3xl">
       <FooterBaseReveal
       logoText="CZAR PROJECTS"
       columns={[
         {
-          title: "Company",
+          title: "Company",          items: [
-          items: [
             {
-              label: "About Us",
+              label: "About Us",              href: "#about"},
-              href: "#about",
-            },
             {
-              label: "Portfolio",
+              label: "Portfolio",              href: "#projects"},
-              href: "#projects",
-            },
           ],
         },
         {
-          title: "Legal",
+          title: "Legal",          items: [
-          items: [
             {
-              label: "Privacy Policy",
+              label: "Privacy Policy",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Terms of Service",
+              label: "Terms of Service",              href: "#"},
-              href: "#",
-            },
           ],
         },
       ]}
       copyrightText="© 2024 Czar Projects Limited. All rights reserved."
+      className="border-t border-white/5"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #050505;
   --card: #121212;
   --foreground: #f5f5f5;
   --primary-cta: #d4af37;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1c1c1c;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #f5f5f5;
   --accent: #b8860b;
-  --background-accent: #2e2e2e;
+  --background-accent: #202020;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);