src/app/layout.tsx

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

src/app/page.tsx

@@ -125,36 +125,31 @@ export default function LandingPage() {
 
       <div id="howitworks" data-section="howitworks" className="w-full py-20 md:py-32">
         <div className="w-full max-w-7xl mx-auto px-6 md:px-12">
-          <FeatureCardTwelve
+          <HeroBillboard
             title="Three Simple Steps to Your Dream Property"
             description="From selection to purchase—transparent, verified, legally secured."
             tag="PROCESS"
             tagIcon={Zap}
-            accordionItems={[
-              {
-                id: "step1",
-                title: "Browse & Select Premium Properties",
-                content: "Verified listings with full documentation. Advanced filters (location, price, type). High-quality images and virtual tours. Transparent pricing—no hidden fees."
-              },
-              {
-                id: "step2",
-                title: "Schedule Viewing & Due Diligence",
-                content: "Private showings with property advisors. Legal compliance verification. Investment ROI analysis (if applicable). Professional inspection support."
-              },
-              {
-                id: "step3",
-                title: "Complete Purchase or Lease Agreement",
-                content: "Secure transaction handling. Legal documentation assistance. Dedicated support throughout process. Post-purchase advisory services."
-              }
-            ]}
             imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767704138951-siri0kwa.jpg"
             imageAlt="Real estate process"
-            animationType="opacity"
-            textboxLayout="default"
-            useInvertedBackground="noInvert"
-            textBoxTitleClassName="text-3xl md:text-4xl font-bold"
-            textBoxDescriptionClassName="text-lg opacity-90"
+            frameStyle="card"
+            className="relative"
+            titleClassName="text-3xl md:text-4xl font-bold"
           />
+          <div className="mt-16 space-y-8">
+            <div className="bg-card/50 backdrop-blur-sm border border-accent/20 rounded-lg p-6">
+              <h3 className="text-xl font-semibold text-foreground mb-3">Step 1: Browse & Select Premium Properties</h3>
+              <p className="text-foreground/80">Verified listings with full documentation. Advanced filters (location, price, type). High-quality images and virtual tours. Transparent pricing—no hidden fees.</p>
+            </div>
+            <div className="bg-card/50 backdrop-blur-sm border border-accent/20 rounded-lg p-6">
+              <h3 className="text-xl font-semibold text-foreground mb-3">Step 2: Schedule Viewing & Due Diligence</h3>
+              <p className="text-foreground/80">Private showings with property advisors. Legal compliance verification. Investment ROI analysis (if applicable). Professional inspection support.</p>
+            </div>
+            <div className="bg-card/50 backdrop-blur-sm border border-accent/20 rounded-lg p-6">
+              <h3 className="text-xl font-semibold text-foreground mb-3">Step 3: Complete Purchase or Lease Agreement</h3>
+              <p className="text-foreground/80">Secure transaction handling. Legal documentation assistance. Dedicated support throughout process. Post-purchase advisory services.</p>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -402,4 +397,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}