Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -10,7 +10,8 @@ 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 { Database, Globe, Shield, Sparkles, Zap } from "lucide-react";
+import RadialGradientBackground from "@/components/background/RadialGradientBackground";
+import { Database, Globe, Shield, Sparkles, Zap, ArrowRight, Check } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -39,6 +40,13 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
+        <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."
@@ -48,30 +56,38 @@ export default function LandingPage() {
             buttons={[{ text: "Get early access →", href: "#waitlist" }]}
             carouselItems={[
               {
-              id: "1",              imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-using-trade-market-profit-data-screen-create-financial-investment-looking-stock-charts-statistics-male-broker-analyzing-hedge-hund-trend-forex-exchange_482257-39523.jpg?_wi=1",              imageAlt: "Investment analysis dashboard showing metrics"
+                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: "http://img.b2bpic.net/free-photo/young-businessman-using-trade-market-profit-data-screen-create-financial-investment-looking-stock-charts-statistics-male-broker-analyzing-hedge-hund-trend-forex-exchange_482257-39523.jpg?_wi=2",              imageAlt: "Property investment report interface"
+                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: "http://img.b2bpic.net/free-photo/young-businessman-using-trade-market-profit-data-screen-create-financial-investment-looking-stock-charts-statistics-male-broker-analyzing-hedge-hund-trend-forex-exchange_482257-39523.jpg?_wi=3",              imageAlt: "Real estate market analysis dashboard"
+                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: "http://img.b2bpic.net/free-photo/young-businessman-using-trade-market-profit-data-screen-create-financial-investment-looking-stock-charts-statistics-male-broker-analyzing-hedge-hund-trend-forex-exchange_482257-39523.jpg?_wi=4",              imageAlt: "Investment scenario comparison view"
+                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: "http://img.b2bpic.net/free-photo/young-businessman-using-trade-market-profit-data-screen-create-financial-investment-looking-stock-charts-statistics-male-broker-analyzing-hedge-hund-trend-forex-exchange_482257-39523.jpg?_wi=5",              imageAlt: "Tax breakdown and yield calculation"
+                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: "http://img.b2bpic.net/free-photo/young-businessman-using-trade-market-profit-data-screen-create-financial-investment-looking-stock-charts-statistics-male-broker-analyzing-hedge-hund-trend-forex-exchange_482257-39523.jpg?_wi=6",              imageAlt: "Risk assessment and scoring interface"
+                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">
+        <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"
@@ -84,8 +100,16 @@ export default function LandingPage() {
             showCard={true}
           />
         </div>
+      </div>
 
       <div id="metrics" data-section="metrics">
+        <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"
@@ -100,13 +124,21 @@ export default function LandingPage() {
             ]}
           />
         </div>
+      </div>
 
       <div id="features" data-section="features">
+        <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="http://img.b2bpic.net/free-vector/elegant-web-element-collection_23-2147543852.jpg?_wi=1"
+            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}
@@ -124,8 +156,16 @@ export default function LandingPage() {
             ]}
           />
         </div>
+      </div>
 
       <div id="demo" data-section="demo">
+        <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"
@@ -134,22 +174,38 @@ export default function LandingPage() {
             buttons={[{ text: "Analyze →", href: "#analyze" }]}
           />
         </div>
+      </div>
 
       <div id="markets" data-section="markets">
+        <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="http://img.b2bpic.net/free-vector/elegant-web-element-collection_23-2147543852.jpg?_wi=2"
+            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">
+        <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."
@@ -182,12 +238,20 @@ export default function LandingPage() {
             ]}
           />
         </div>
+      </div>
 
       <div id="final-cta" data-section="final-cta">
+        <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: "radial-gradient" }}
+            background={{ variant: "animated-grid" }}
             useInvertedBackground={true}
             buttons={[
               { text: "Join waitlist", href: "#waitlist" },
@@ -195,6 +259,7 @@ export default function LandingPage() {
             ]}
           />
         </div>
+      </div>
 
       <div id="footer" data-section="footer">
         <FooterSimple

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-sf-pro-display), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-sf-pro-display), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
+  --background: #0a0a0a;
-  --card: #ffffff;
+  --card: #1a1a1a;
-  --foreground: #25190c;
+  --foreground: #ffffff;
-  --primary-cta: #ff6207;
+  --primary-cta: #ff6b35;
   --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #0a0a0a;
   --secondary-cta-text: #25190c;
-  --accent: #ffce93;
+  --accent: #1f7cff;
-  --background-accent: #e8cfa8;
+  --background-accent: #ff6b35;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);