Update src/app/page.tsx

src/app/globals.css

@@ -4,13 +4,13 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  --background: #fafffb;;
-  --card: #f7fffa;;
-  --foreground: #001a0a;;
+  --background: #ffffff;;
+  --card: #f5f5f5;;
+  --foreground: #000000;;
   --primary-cta: #0a7039;;
   --secondary-cta: #ffffff;;
-  --accent: #a8d9be;;
-  --background-accent: #6bbf8e;;
+  --accent: #808080;;
+  --background-accent: #d3d3d3;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/page.tsx

@@ -5,6 +5,7 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
 import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import FeatureCardFourteen from '@/components/sections/feature/FeatureCardFourteen';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import ProductCardSix from '@/components/sections/product/ProductCardSix';
 import MetricCardEight from '@/components/sections/metrics/MetricCardEight';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
@@ -21,7 +22,7 @@ export default function LandingPage() {
       borderRadius="pill"
       contentWidth="small"
       sizing="mediumLargeSizeLargeTitles"
-      background="dotGrid"
+      background="circleGradient"
       cardStyle="gradient-bordered"
       primaryButtonStyle="neon-glow-border"
       secondaryButtonStyle="radial-glow"
@@ -56,10 +57,6 @@ export default function LandingPage() {
             { text: "Start Free Trial", href: "contact" },
             { text: "Watch Demo", href: "features" }
           ]}
-          className="w-full"
-          containerClassName="max-w-7xl mx-auto"
-          titleClassName="text-5xl md:text-6xl font-bold"
-          descriptionClassName="text-lg md:text-xl opacity-90"
         />
       </div>
 
@@ -75,8 +72,6 @@ export default function LandingPage() {
           buttons={[
             { text: "Learn Our Story", href: "contact" }
           ]}
-          titleClassName="text-5xl font-bold mb-8"
-          descriptionClassName="text-lg leading-relaxed"
         />
       </div>
 
@@ -117,6 +112,41 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="feature-card-six" data-section="feature-card-six">
+        <FeatureCardSix
+          title="Advanced Feature Showcase"
+          description="Deep dive into our platform capabilities"
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
+          features={[
+            {
+              id: 1,
+              title: "Carbon Accounting Precision",
+              description: "Automated calculation of Scope 1, 2, and 3 emissions with verified accuracy.",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704073615-140eun3n.jpg",
+              imageAlt: "Carbon accounting interface"
+            },
+            {
+              id: 2,
+              title: "Sustainability Benchmarking",
+              description: "Compare your performance against industry peers and track progress over time.",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704075057-ywovh1h1.jpg",
+              imageAlt: "Benchmarking dashboard"
+            },
+            {
+              id: 3,
+              title: "ESG Compliance Automation",
+              description: "Simplify regulatory compliance with automated reporting for TCFD, GRI, and SASB standards.",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704076251-88p8egr2.jpg",
+              imageAlt: "ESG compliance tools"
+            }
+          ]}
+          buttons={[
+            { text: "Request Demo", href: "contact" }
+          ]}
+        />
+      </div>
+
       <div id="products" data-section="products">
         <ProductCardSix
           title="Our Product Suite"