From b41daa976c78fd62ee8a544a03375848e4e865b7 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 12 Mar 2026 13:43:09 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 333 ++++++++++++++++++++++++++++-------------------
 1 file changed, 199 insertions(+), 134 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index d2a4c74..0d0d36e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,7 @@ import ContactText from "@/components/sections/contact/ContactText";
 import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
 import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
+import RadialGradientBackground from "@/components/background/RadialGradientBackground";
 import { Database, Globe, Shield, Sparkles, Zap, ArrowRight, Check } from "lucide-react";
 
 export default function LandingPage() {
@@ -39,161 +40,225 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardRotatedCarousel
-          title="The investment analysis platform Europe's property market deserves."
-          description="Paste any European property listing URL. Get a full investment report in 60 seconds — net yield, tax breakdown, risk score, three scenarios."
-          tag="Private beta · 847 investors waiting"
-          tagIcon={Zap}
-          background={{ variant: "radial-gradient" }}
-          buttons={[{ text: "Get early access →", href: "#waitlist" }]}
-          carouselItems={[
-            {
-              id: "1",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-68ywkcgf.jpg?_wi=1",              imageAlt: "Investment analysis dashboard showing metrics"
-            },
-            {
-              id: "2",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-qj0y48af.jpg?_wi=1",              imageAlt: "Property investment report interface"
-            },
-            {
-              id: "3",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-rn2r740d.jpg?_wi=1",              imageAlt: "Real estate market analysis dashboard"
-            },
-            {
-              id: "4",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-yb3ch9ok.png?_wi=1",              imageAlt: "Investment scenario comparison view"
-            },
-            {
-              id: "5",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-68ywkcgf.jpg?_wi=2",              imageAlt: "Tax breakdown and yield calculation"
-            },
-            {
-              id: "6",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-qj0y48af.jpg?_wi=2",              imageAlt: "Risk assessment and scoring interface"
-            }
-          ]}
-          autoPlay={true}
-          autoPlayInterval={5000}
-        />
+        <div className="relative">
+          <RadialGradientBackground
+            centerColor="var(--background)"
+            edgeColor="var(--color-background-accent)"
+            size="130% 130%"
+            position="50% 15%"
+          />
+          <HeroBillboardRotatedCarousel
+            title="The investment analysis platform Europe's property market deserves."
+            description="Paste any European property listing URL. Get a full investment report in 60 seconds — net yield, tax breakdown, risk score, three scenarios."
+            tag="Private beta · 847 investors waiting"
+            tagIcon={Zap}
+            background={{ variant: "radial-gradient" }}
+            buttons={[{ text: "Get early access →", href: "#waitlist" }]}
+            carouselItems={[
+              {
+                id: "1",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-68ywkcgf.jpg?_wi=1",                imageAlt: "Investment analysis dashboard showing metrics"
+              },
+              {
+                id: "2",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-qj0y48af.jpg?_wi=1",                imageAlt: "Property investment report interface"
+              },
+              {
+                id: "3",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-rn2r740d.jpg?_wi=1",                imageAlt: "Real estate market analysis dashboard"
+              },
+              {
+                id: "4",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-yb3ch9ok.png?_wi=1",                imageAlt: "Investment scenario comparison view"
+              },
+              {
+                id: "5",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-68ywkcgf.jpg?_wi=2",                imageAlt: "Tax breakdown and yield calculation"
+              },
+              {
+                id: "6",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-qj0y48af.jpg?_wi=2",                imageAlt: "Risk assessment and scoring interface"
+              }
+            ]}
+            autoPlay={true}
+            autoPlayInterval={5000}
+          />
+        </div>
       </div>
 
       <div id="social-proof" data-section="social-proof">
-        <SocialProofOne
-          title="Trusted by investors across Europe"
-          description="Join hundreds of property investors already using Terrivio"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          names={[
-            "Dutch Investors",            "German Analysts",            "French Partners",            "Spanish Funds",            "Italian Groups",            "Swiss Wealth",            "Belgian Teams"
-          ]}
-          speed={40}
-          showCard={true}
-        />
+        <div className="relative">
+          <RadialGradientBackground
+            centerColor="var(--background)"
+            edgeColor="var(--color-background-accent)"
+            size="140% 140%"
+            position="50% 20%"
+          />
+          <SocialProofOne
+            title="Trusted by investors across Europe"
+            description="Join hundreds of property investors already using Terrivio"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            names={[
+              "Dutch Investors",              "German Analysts",              "French Partners",              "Spanish Funds",              "Italian Groups",              "Swiss Wealth",              "Belgian Teams"
+            ]}
+            speed={40}
+            showCard={true}
+          />
+        </div>
       </div>
 
       <div id="metrics" data-section="metrics">
-        <MetricCardThree
-          title="Why Terrivio Stands Out"
-          description="Powerful metrics that drive investor confidence"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          metrics={[
-            { id: "1", icon: Globe, title: "European Markets", value: "13" },
-            { id: "2", icon: Database, title: "Data Sources", value: "8" },
-            { id: "3", icon: Zap, title: "Report Time", value: "~60s" },
-            { id: "4", icon: Shield, title: "Gross Margin", value: "96%" }
-          ]}
-        />
+        <div className="relative">
+          <RadialGradientBackground
+            centerColor="var(--background)"
+            edgeColor="var(--color-background-accent)"
+            size="135% 135%"
+            position="50% 25%"
+          />
+          <MetricCardThree
+            title="Why Terrivio Stands Out"
+            description="Powerful metrics that drive investor confidence"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            animationType="slide-up"
+            metrics={[
+              { id: "1", icon: Globe, title: "European Markets", value: "13" },
+              { id: "2", icon: Database, title: "Data Sources", value: "8" },
+              { id: "3", icon: Zap, title: "Report Time", value: "~60s" },
+              { id: "4", icon: Shield, title: "Gross Margin", value: "96%" }
+            ]}
+          />
+        </div>
       </div>
 
       <div id="features" data-section="features">
-        <FeatureCardTwentyOne
-          title="From URL to investment decision."
-          description="No account needed. No spreadsheets. No guesswork."
-          tag="HOW IT WORKS"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-rn2r740d.jpg?_wi=2"
-          imageAlt="Three-step process visualization"
-          mediaAnimation="slide-up"
-          useInvertedBackground={false}
-          mediaPosition="right"
-          accordionItems={[
-            {
-              id: "1",              title: "Paste a property URL",              content: "Copy any listing from Idealista, Funda, Green-Acres, Immobiliare, or 10+ platforms. Terrivio fetches all data automatically."
-            },
-            {
-              id: "2",              title: "AI analyzes everything",              content: "Our engine extracts specs, calculates gross and net yield, scores location risk, and models three investment scenarios in seconds."
-            },
-            {
-              id: "3",              title: "Make your decision",              content: "Net yield, risk score, tax breakdown per country, break-even occupancy and DSCR — everything you need to invest with confidence."
-            }
-          ]}
-        />
+        <div className="relative">
+          <RadialGradientBackground
+            centerColor="var(--background)"
+            edgeColor="var(--color-background-accent)"
+            size="130% 130%"
+            position="50% 30%"
+          />
+          <FeatureCardTwentyOne
+            title="From URL to investment decision."
+            description="No account needed. No spreadsheets. No guesswork."
+            tag="HOW IT WORKS"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-rn2r740d.jpg?_wi=2"
+            imageAlt="Three-step process visualization"
+            mediaAnimation="slide-up"
+            useInvertedBackground={false}
+            mediaPosition="right"
+            accordionItems={[
+              {
+                id: "1",                title: "Paste a property URL",                content: "Copy any listing from Idealista, Funda, Green-Acres, Immobiliare, or 10+ platforms. Terrivio fetches all data automatically."
+              },
+              {
+                id: "2",                title: "AI analyzes everything",                content: "Our engine extracts specs, calculates gross and net yield, scores location risk, and models three investment scenarios in seconds."
+              },
+              {
+                id: "3",                title: "Make your decision",                content: "Net yield, risk score, tax breakdown per country, break-even occupancy and DSCR — everything you need to invest with confidence."
+              }
+            ]}
+          />
+        </div>
       </div>
 
       <div id="demo" data-section="demo">
-        <ContactText
-          text="Try it yourself. Paste any real listing URL. No account needed."
-          animationType="reveal-blur"
-          background={{ variant: "radial-gradient" }}
-          useInvertedBackground={false}
-          buttons={[{ text: "Analyze →", href: "#analyze" }]}
-        />
+        <div className="relative">
+          <RadialGradientBackground
+            centerColor="var(--background)"
+            edgeColor="var(--color-background-accent)"
+            size="125% 125%"
+            position="50% 35%"
+          />
+          <ContactText
+            text="Try it yourself. Paste any real listing URL. No account needed."
+            animationType="reveal-blur"
+            background={{ variant: "radial-gradient" }}
+            useInvertedBackground={false}
+            buttons={[{ text: "Analyze →", href: "#analyze" }]}
+          />
+        </div>
       </div>
 
       <div id="markets" data-section="markets">
-        <TestimonialAboutCard
-          tag="COVERAGE"
-          title="13 European markets."
-          description="Local expertise in every region"
-          subdescription="Local tax rules, STR regulations, rental yield data and price history — built in for every market."
-          icon={Globe}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-yb3ch9ok.png?_wi=2"
-          imageAlt="European market map coverage"
-          mediaAnimation="slide-up"
-          useInvertedBackground={false}
-        />
+        <div className="relative">
+          <RadialGradientBackground
+            centerColor="var(--background)"
+            edgeColor="var(--color-background-accent)"
+            size="140% 140%"
+            position="50% 40%"
+          />
+          <TestimonialAboutCard
+            tag="COVERAGE"
+            title="13 European markets."
+            description="Local expertise in every region"
+            subdescription="Local tax rules, STR regulations, rental yield data and price history — built in for every market."
+            icon={Globe}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqVgQeR7OoU3XeDyP8qH8ouFzg/uploaded-1773321908022-yb3ch9ok.png?_wi=2"
+            imageAlt="European market map coverage"
+            mediaAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
       </div>
 
       <div id="pricing" data-section="pricing">
-        <PricingCardTwo
-          title="Simple, transparent pricing."
-          description="Founding Member pricing locked in at signup. Price increases after launch."
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground={false}
-          plans={[
-            {
-              id: "1",              badge: "Pay per report",              price: "€3,20",              subtitle: "per analysis",              buttons: [{ text: "Join waitlist", href: "#waitlist" }],
-              features: [
-                "No subscription",                "Buy when you need it",                "Cancel anytime",                "Instant access"
-              ]
-            },
-            {
-              id: "2",              badge: "Lite",              price: "€29",              subtitle: "/month",              buttons: [{ text: "Join waitlist", href: "#waitlist" }],
-              features: [
-                "50 analyses per month",                "All market data",                "Email support",                "Founding pricing"
-              ]
-            },
-            {
-              id: "3",              badge: "Pro",              badgeIcon: Sparkles,
-              price: "€59",              subtitle: "/month",              buttons: [
-                { text: "Get early access", href: "#waitlist" },
-                { text: "Contact sales", href: "#contact" }
-              ],
-              features: [
-                "200 analyses per month",                "All features included",                "Priority support",                "Custom integrations",                "Locked founding price"
-              ]
-            }
-          ]}
-        />
+        <div className="relative">
+          <RadialGradientBackground
+            centerColor="var(--background)"
+            edgeColor="var(--color-background-accent)"
+            size="135% 135%"
+            position="50% 45%"
+          />
+          <PricingCardTwo
+            title="Simple, transparent pricing."
+            description="Founding Member pricing locked in at signup. Price increases after launch."
+            textboxLayout="default"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            plans={[
+              {
+                id: "1",                badge: "Pay per report",                price: "€3,20",                subtitle: "per analysis",                buttons: [{ text: "Join waitlist", href: "#waitlist" }],
+                features: [
+                  "No subscription",                  "Buy when you need it",                  "Cancel anytime",                  "Instant access"
+                ]
+              },
+              {
+                id: "2",                badge: "Lite",                price: "€29",                subtitle: "/month",                buttons: [{ text: "Join waitlist", href: "#waitlist" }],
+                features: [
+                  "50 analyses per month",                  "All market data",                  "Email support",                  "Founding pricing"
+                ]
+              },
+              {
+                id: "3",                badge: "Pro",                badgeIcon: Sparkles,
+                price: "€59",                subtitle: "/month",                buttons: [
+                  { text: "Get early access", href: "#waitlist" },
+                  { text: "Contact sales", href: "#contact" }
+                ],
+                features: [
+                  "200 analyses per month",                  "All features included",                  "Priority support",                  "Custom integrations",                  "Locked founding price"
+                ]
+              }
+            ]}
+          />
+        </div>
       </div>
 
       <div id="final-cta" data-section="final-cta">
-        <ContactText
-          text="847 investors are already waiting. Join them. Founding Member pricing is limited."
-          animationType="entrance-slide"
-          background={{ variant: "animated-grid" }}
-          useInvertedBackground={true}
-          buttons={[
-            { text: "Join waitlist", href: "#waitlist" },
-            { text: "Learn more", href: "#features" }
-          ]}
-        />
+        <div className="relative">
+          <RadialGradientBackground
+            centerColor="var(--background)"
+            edgeColor="var(--color-background-accent)"
+            size="130% 130%"
+            position="50% 50%"
+          />
+          <ContactText
+            text="847 investors are already waiting. Join them. Founding Member pricing is limited."
+            animationType="entrance-slide"
+            background={{ variant: "animated-grid" }}
+            useInvertedBackground={true}
+            buttons={[
+              { text: "Join waitlist", href: "#waitlist" },
+              { text: "Learn more", href: "#features" }
+            ]}
+          />
+        </div>
       </div>
 
       <div id="footer" data-section="footer">