463 lines
17 KiB
TypeScript
463 lines
17 KiB
TypeScript
"use client";
|
||
|
||
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 PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
||
import FaqBase from "@/components/sections/faq/FaqBase";
|
||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import Link from "next/link";
|
||
import { Zap } from "lucide-react";
|
||
|
||
export default function HomePage() {
|
||
const 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" },
|
||
];
|
||
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="elastic-effect"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="soft"
|
||
contentWidth="compact"
|
||
sizing="mediumLarge"
|
||
background="grid"
|
||
cardStyle="outline"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="normal"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingOverlay
|
||
brandName="FORMA"
|
||
navItems={navItems}
|
||
button={{
|
||
text: "Start Free Trial",
|
||
href: "/app/upload",
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroCarouselLogo
|
||
logoText="FORMA"
|
||
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=1",
|
||
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=1",
|
||
imageAlt:
|
||
"Anatomical figure of lean athletic male (front view) rendered in Da Vinci anatomical sketch style wi",
|
||
},
|
||
{
|
||
imageSrc:
|
||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/analysis-output-card-with-four-scored-se-1772824175098-c1661045.png?_wi=1",
|
||
imageAlt:
|
||
"Analysis output card with four scored sections (Muscle Development 78/100, Body Composition 82/100, ",
|
||
},
|
||
]}
|
||
autoplayDelay={4000}
|
||
showDimOverlay={true}
|
||
/>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<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=2"
|
||
imageAlt="FORMA analysis output card"
|
||
mediaAnimation="slide-up"
|
||
useInvertedBackground={false}
|
||
mediaPosition="right"
|
||
buttons={[]}
|
||
/>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardTwelve
|
||
cardTitle="Real athletes. Real results. Real feedback."
|
||
cardTag="What users say"
|
||
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=1",
|
||
imageAlt:
|
||
"Professional headshot photo of athletic male Marcus T., confident expression, dark professional back",
|
||
},
|
||
{
|
||
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=1",
|
||
imageAlt:
|
||
"Professional headshot of competitive bodybuilder Ryan K., muscular build visible, serious focused ex",
|
||
},
|
||
{
|
||
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=1",
|
||
imageAlt:
|
||
"Professional headshot of Daniel S., friendly approachable expression, fitness enthusiast, dark profe",
|
||
},
|
||
{
|
||
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=2",
|
||
imageAlt:
|
||
"Professional headshot photo of athletic male Marcus T., confident expression, dark professional back",
|
||
},
|
||
{
|
||
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=2",
|
||
imageAlt:
|
||
"Professional headshot of competitive bodybuilder Ryan K., muscular build visible, serious focused ex",
|
||
},
|
||
{
|
||
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=2",
|
||
imageAlt:
|
||
"Professional headshot of Daniel S., friendly approachable expression, fitness enthusiast, dark profe",
|
||
},
|
||
]}
|
||
cardAnimation="blur-reveal"
|
||
useInvertedBackground={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="pricing" data-section="pricing">
|
||
<PricingCardTwo
|
||
title="One Plan. All Features."
|
||
description="Unlimited analyses. Full precision. One price."
|
||
tag="Pricing"
|
||
plans={[
|
||
{
|
||
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",
|
||
},
|
||
],
|
||
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",
|
||
],
|
||
},
|
||
]}
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqBase
|
||
title="Frequently Asked Questions"
|
||
description="Everything you need to know about FORMA."
|
||
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: "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: "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: "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"
|
||
useInvertedBackground={true}
|
||
animationType="smooth"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseReveal
|
||
columns={[
|
||
{
|
||
title: "Product",
|
||
items: [
|
||
{
|
||
label: "Features",
|
||
href: "#features",
|
||
},
|
||
{
|
||
label: "How It Works",
|
||
href: "#how-it-works",
|
||
},
|
||
{
|
||
label: "Pricing",
|
||
href: "/pricing",
|
||
},
|
||
{
|
||
label: "App",
|
||
href: "/app",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Company",
|
||
items: [
|
||
{
|
||
label: "About",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Blog",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Contact",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Careers",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Legal",
|
||
items: [
|
||
{
|
||
label: "Privacy Policy",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Terms of Service",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Cookie Policy",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Data Security",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
copyrightText="© 2025 FORMA. Know your body. Change it."
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
} |