From 95104288c34c613e086c1da2fa3d10e342c7dbdd Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 6 Mar 2026 19:19:35 +0000
Subject: [PATCH] Update src/app/app/upload/page.tsx

---
 src/app/app/upload/page.tsx | 400 +++++-------------------------------
 1 file changed, 52 insertions(+), 348 deletions(-)

diff --git a/src/app/app/upload/page.tsx b/src/app/app/upload/page.tsx
index bc952f5..2cc0b8f 100644
--- a/src/app/app/upload/page.tsx
+++ b/src/app/app/upload/page.tsx
@@ -2,18 +2,18 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
-import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import { Zap } from 'lucide-react';
 
 export default function UploadPage() {
+  const navItems = [
+    { name: "Pricing", id: "pricing" },
+    { name: "FAQ", id: "faq" },
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -27,265 +27,43 @@ export default function UploadPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="normal"
     >
-      {/* Navbar */}
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
           brandName="FORMA"
-          navItems={[
-            { name: "Features", id: "features" },
-            { name: "Pricing", id: "pricing" },
-            { name: "How It Works", id: "how-it-works" },
-            { name: "FAQ", id: "faq" },
-            { name: "Contact", id: "contact" },
-          ]}
+          navItems={navItems}
           button={{
-            text: "Start Free Trial",
-            href: "/app/upload",
-          }}
+            text: "Start Free Trial",            href: "/app/upload"}}
         />
       </div>
 
-      {/* Hero Section */}
       <div id="hero" data-section="hero">
-        <HeroCarouselLogo
-          logoText="FORMA"
+        <HeroSplitTestimonial
+          title="Know Exactly What Your Body Needs"
           description="Upload a photo. Get a detailed breakdown of your muscle development, weak points, and what to prioritize next."
-          buttons={[
-            {
-              text: "Analyze My Physique →",
-              href: "/app/upload",
-            },
-          ]}
-          slides={[
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/modern-mobile-ui-mockup-showing-drag-and-1772824174718-40998ae2.png?_wi=2",
-              imageAlt: "Modern mobile UI mockup showing drag-and-drop upload interface with front and back photo silhouettes",
-            },
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/anatomical-figure-of-lean-athletic-male--1772824174970-73cbcfb2.png?_wi=2",
-              imageAlt: "Anatomical figure of lean athletic male (front view) rendered in Da Vinci anatomical sketch style with muscle labels",
-            },
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/analysis-output-card-with-four-scored-se-1772824175098-c1661045.png?_wi=3",
-              imageAlt: "Analysis output card with four scored sections (Muscle Development 78/100, Body Composition 82/100)",
-            },
-          ]}
-          autoplayDelay={4000}
-          showDimOverlay={true}
-        />
-      </div>
-
-      {/* Problem Section */}
-      <div id="problem" data-section="problem">
-        <InlineImageSplitTextAbout
-          heading={[
-            {
-              type: "text",
-              content: "Most people train for months without knowing which muscles are actually lagging.",
-            },
-          ]}
-          useInvertedBackground={true}
-          buttons={[]}
-        />
-      </div>
-
-      {/* Agitate Section */}
-      <div id="agitate" data-section="agitate">
-        <InlineImageSplitTextAbout
-          heading={[
-            {
-              type: "text",
-              content: "They guess. They plateau. They wonder why nothing is changing.",
-            },
-          ]}
-          useInvertedBackground={false}
-          buttons={[]}
-        />
-      </div>
-
-      {/* Urgency Section */}
-      <div id="urgency" data-section="urgency">
-        <InlineImageSplitTextAbout
-          heading={[
-            {
-              type: "text",
-              content: "There's never been a way to see it clearly — until now.",
-            },
-          ]}
-          useInvertedBackground={true}
-          buttons={[]}
-        />
-      </div>
-
-      {/* How It Works Section */}
-      <div id="how-it-works" data-section="how-it-works">
-        <FeatureCardTwentyOne
-          title="How FORMA Works"
-          description="Three simple steps from photo to precision breakdown."
-          tag="Process"
-          accordionItems={[
-            {
-              id: "1",
-              title: "Upload Your Photo",
-              content:
-                "Front, back, or side angle. The more clearly visible your musculature, the more precise the analysis. Well-lit photos in fitted clothing yield the best results.",
-            },
-            {
-              id: "2",
-              title: "AI Analyzes Your Physique",
-              content:
-                "Claude, Anthropic's frontier AI model with vision capability, scans muscle development, body composition, proportionality, and visible weak points at a specificity level not possible from text-based assessment.",
-            },
-            {
-              id: "3",
-              title: "Get Your Training Priorities",
-              content:
-                "Receive a full breakdown scored across four dimensions plus three specific, actionable training priorities. No guesswork. No generic advice. Your exact weak points, ranked by impact.",
-            },
-          ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/analysis-output-card-with-four-scored-se-1772824175098-c1661045.png?_wi=4"
-          imageAlt="FORMA analysis output card"
-          mediaAnimation="slide-up"
-          useInvertedBackground={false}
-          mediaPosition="right"
-          buttons={[]}
-        />
-      </div>
-
-      {/* Comparison Section */}
-      <div id="comparison" data-section="comparison">
-        <MetricCardTen
-          title="FORMA vs Personal Trainer"
-          description="Specificity. Scale. Price."
-          tag="Comparison"
-          metrics={[
-            {
-              id: "cost",
-              title: "Cost Per Session",
-              subtitle: "Traditional approach vs FORMA",
-              category: "Pricing",
-              value: "$80–150 vs $5.99/mo",
-              buttons: [],
-            },
-            {
-              id: "monthly",
-              title: "Monthly Cost",
-              subtitle: "Total investment comparison",
-              category: "Budget",
-              value: "$320–600 vs $5.99",
-              buttons: [],
-            },
-            {
-              id: "availability",
-              title: "Availability",
-              subtitle: "When you need analysis",
-              category: "Access",
-              value: "Book ahead vs 24/7",
-              buttons: [],
-            },
-            {
-              id: "frequency",
-              title: "Feedback Frequency",
-              subtitle: "How often you get insights",
-              category: "Frequency",
-              value: "Weekly vs Every upload",
-              buttons: [],
-            },
-            {
-              id: "type",
-              title: "Analysis Type",
-              subtitle: "Quality of assessment",
-              category: "Quality",
-              value: "Opinion vs Data-driven",
-              buttons: [],
-            },
-            {
-              id: "tracking",
-              title: "Progress Tracking",
-              subtitle: "Your improvement history",
-              category: "Tracking",
-              value: "Manual vs Automatic",
-              buttons: [],
-            },
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-        />
-      </div>
-
-      {/* Social Proof Section */}
-      <div id="social-proof" data-section="social-proof">
-        <SocialProofOne
-          title="Trusted by Athletes & Coaches"
-          description="From competitive bodybuilders to casual lifters, FORMA is the standard for specificity."
-          tag="Social Proof"
-          names={[
-            "Marcus T.",
-            "Ryan K.",
-            "Daniel S.",
-            "Sarah M.",
-            "James P.",
-            "Alex T.",
-            "Chris H.",
-            "Nathan R.",
-          ]}
-          textboxLayout="default"
-          useInvertedBackground={false}
-          showCard={true}
-          speed={40}
-        />
-      </div>
-
-      {/* Testimonials Section */}
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwelve
+          background={{ variant: "plain" }}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/modern-mobile-ui-mockup-showing-drag-and-1772824174718-40998ae2.png?_wi=2"
+          imageAlt="Modern mobile UI mockup showing drag-and-drop upload interface"
+          imagePosition="right"
           testimonials={[
             {
-              id: "1",
-              name: "Marcus T.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/professional-headshot-photo-of-athletic--1772824174347-5ac4230a.png?_wi=3",
-              imageAlt: "Marcus T. professional headshot",
-            },
+              name: "Marcus T.",              handle: "Competitive Bodybuilder",              testimonial: "Finally seeing exactly where I need to focus. Game changer for my training.",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/professional-headshot-photo-of-athletic--1772824174347-5ac4230a.png?_wi=2"},
             {
-              id: "2",
-              name: "Ryan K.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/professional-headshot-of-competitive-bod-1772824176102-f26d3b3f.png?_wi=3",
-              imageAlt: "Ryan K. professional headshot",
-            },
+              name: "Ryan K.",              handle: "Fitness Coach",              testimonial: "My clients love the precision. No more guessing about weak points.",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/professional-headshot-of-competitive-bod-1772824176102-f26d3b3f.png?_wi=2"},
             {
-              id: "3",
-              name: "Daniel S.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/professional-headshot-of-daniel-s-friend-1772824174548-a76403f2.png?_wi=3",
-              imageAlt: "Daniel S. professional headshot",
-            },
-            {
-              id: "4",
-              name: "Sarah M.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/professional-headshot-photo-of-athletic--1772824174347-5ac4230a.png?_wi=4",
-              imageAlt: "Sarah M. professional headshot",
-            },
-            {
-              id: "5",
-              name: "James P.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/professional-headshot-of-competitive-bod-1772824176102-f26d3b3f.png?_wi=4",
-              imageAlt: "James P. professional headshot",
-            },
-            {
-              id: "6",
-              name: "Alex T.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/professional-headshot-of-daniel-s-friend-1772824174548-a76403f2.png?_wi=4",
-              imageAlt: "Alex T. professional headshot",
-            },
+              name: "Sarah M.",              handle: "Athlete",              testimonial: "The analysis is spot-on. I've never had feedback this specific before.",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/professional-headshot-of-daniel-s-friend-1772824174548-a76403f2.png?_wi=2"},
           ]}
-          cardTitle="Real athletes. Real results. Real feedback."
-          cardTag="What users say"
-          cardAnimation="blur-reveal"
-          useInvertedBackground={true}
+          buttons={[
+            {
+              text: "Analyze My Physique →",              href: "/app/upload"},
+          ]}
+          mediaAnimation="slide-up"
+          buttonAnimation="slide-up"
         />
       </div>
 
-      {/* Pricing Section */}
       <div id="pricing" data-section="pricing">
         <PricingCardTwo
           title="One Plan. All Features."
@@ -293,30 +71,13 @@ export default function UploadPage() {
           tag="Pricing"
           plans={[
             {
-              id: "forma-monthly",
-              badge: "Monthly Subscription",
-              badgeIcon: Zap,
-              price: "$5.99/month",
-              subtitle: "Everything you need to know your body.",
-              buttons: [
+              id: "forma-monthly",              badge: "Monthly Subscription",              badgeIcon: Zap,
+              price: "$5.99/month",              subtitle: "Everything you need to know your body.",              buttons: [
                 {
-                  text: "Start Free Trial",
-                  href: "/app/upload",
-                },
-                {
-                  text: "Learn More",
-                  href: "#faq",
-                },
+                  text: "Start Free Trial",                  href: "/app/upload"},
               ],
               features: [
-                "Unlimited physique analyses",
-                "Muscle group breakdown with scores",
-                "Weak point identification",
-                "Training priority recommendations",
-                "Full progress history",
-                "AI-powered via Claude Vision",
-                "Cancel anytime, no questions",
-              ],
+                "Unlimited physique analyses",                "Muscle group breakdown with scores",                "Weak point identification",                "Training priority recommendations",                "Full progress history",                "AI-powered via Claude Vision",                "Cancel anytime, no questions"],
             },
           ]}
           animationType="slide-up"
@@ -325,7 +86,6 @@ export default function UploadPage() {
         />
       </div>
 
-      {/* FAQ Section */}
       <div id="faq" data-section="faq">
         <FaqBase
           title="Frequently Asked Questions"
@@ -333,41 +93,23 @@ export default function UploadPage() {
           tag="Help"
           faqs={[
             {
-              id: "1",
-              title: "Is my photo private?",
-              content:
-                "Yes. Photos are processed for analysis only and never stored beyond your session. They are never shared, sold, or used for any other purpose. Your privacy is absolute.",
-            },
+              id: "1",              title: "Is my photo private?",              content:
+                "Yes. Photos are processed for analysis only and never stored beyond your session. They are never shared, sold, or used for any other purpose. Your privacy is absolute."},
             {
-              id: "2",
-              title: "How accurate is the analysis?",
-              content:
-                "FORMA uses Claude, Anthropic's frontier AI model with vision capability. It analyzes muscle definition, symmetry, and composition at a level of specificity not possible from a text-based assessment. Results are clinical, not decorative.",
-            },
+              id: "2",              title: "How accurate is the analysis?",              content:
+                "FORMA uses Claude, Anthropic's frontier AI model with vision capability. It analyzes muscle definition, symmetry, and composition at a level of specificity not possible from a text-based assessment. Results are clinical, not decorative."},
             {
-              id: "3",
-              title: "Can I cancel anytime?",
-              content:
-                "Yes. Instant cancellation, no questions asked, no penalties. Cancel from your account settings at any time. Your subscription ends at the end of your billing cycle.",
-            },
+              id: "3",              title: "Can I cancel anytime?",              content:
+                "Yes. Instant cancellation, no questions asked, no penalties. Cancel from your account settings at any time. Your subscription ends at the end of your billing cycle."},
             {
-              id: "4",
-              title: "What kind of photo should I upload?",
-              content:
-                "A well-lit front, back, or side photo in fitted clothing or fewer. The more visible your musculature, the more precise the analysis. Natural lighting is ideal; avoid shadows or extreme angles.",
-            },
+              id: "4",              title: "What kind of photo should I upload?",              content:
+                "A well-lit front, back, or side photo in fitted clothing or fewer. The more visible your musculature, the more precise the analysis. Natural lighting is ideal; avoid shadows or extreme angles."},
             {
-              id: "5",
-              title: "How long does analysis take?",
-              content:
-                "Most analyses complete in 30-60 seconds. Processing time depends on image quality and server load. Complex analyses may take up to 2 minutes.",
-            },
+              id: "5",              title: "How long does analysis take?",              content:
+                "Most analyses complete in 30-60 seconds. Processing time depends on image quality and server load. Complex analyses may take up to 2 minutes."},
             {
-              id: "6",
-              title: "Do you offer refunds?",
-              content:
-                "We offer a 7-day money-back guarantee if you're not satisfied. No refunds after 7 days, but you can cancel and avoid future charges anytime.",
-            },
+              id: "6",              title: "Do you offer refunds?",              content:
+                "We offer a 7-day money-back guarantee if you're not satisfied. No refunds after 7 days, but you can cancel and avoid future charges anytime."},
           ]}
           faqsAnimation="slide-up"
           textboxLayout="default"
@@ -376,71 +118,33 @@ export default function UploadPage() {
         />
       </div>
 
-      {/* Footer */}
       <div id="footer" data-section="footer">
         <FooterBaseReveal
           columns={[
             {
-              title: "Product",
-              items: [
+              title: "Product",              items: [
                 {
-                  label: "Features",
-                  href: "#features",
-                },
+                  label: "Features",                  href: "/app/upload"},
                 {
-                  label: "How It Works",
-                  href: "#how-it-works",
-                },
+                  label: "Pricing",                  href: "#pricing"},
                 {
-                  label: "Pricing",
-                  href: "/pricing",
-                },
-                {
-                  label: "App",
-                  href: "/app",
-                },
+                  label: "FAQ",                  href: "#faq"},
               ],
             },
             {
-              title: "Company",
-              items: [
+              title: "Company",              items: [
                 {
-                  label: "About",
-                  href: "#",
-                },
+                  label: "Contact",                  href: "#"},
                 {
-                  label: "Blog",
-                  href: "#",
-                },
-                {
-                  label: "Contact",
-                  href: "#",
-                },
-                {
-                  label: "Careers",
-                  href: "#",
-                },
+                  label: "Blog",                  href: "#"},
               ],
             },
             {
-              title: "Legal",
-              items: [
+              title: "Legal",              items: [
                 {
-                  label: "Privacy Policy",
-                  href: "#",
-                },
+                  label: "Privacy Policy",                  href: "#"},
                 {
-                  label: "Terms of Service",
-                  href: "#",
-                },
-                {
-                  label: "Cookie Policy",
-                  href: "#",
-                },
-                {
-                  label: "Data Security",
-                  href: "#",
-                },
+                  label: "Terms of Service",                  href: "#"},
               ],
             },
           ]}