Update src/app/app/upload/page.tsx
This commit is contained in:
@@ -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: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user