Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| dd9b9d60d0 | |||
| f7c9acfe92 | |||
| 14f80979e3 | |||
| 22fd17837e | |||
| 6af0112ec5 | |||
| 95104288c3 | |||
| 367c51df06 | |||
| c97fe62c24 | |||
| 89f3277bb5 |
@@ -2,11 +2,16 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
|
||||
export default function AnalysisPage() {
|
||||
const navItems = [
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
@@ -20,55 +25,43 @@ export default function AnalysisPage() {
|
||||
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>
|
||||
|
||||
{/* Analysis Hero Section */}
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="FORMA"
|
||||
description="Your analysis is complete. View your muscle breakdown, weak points, and training priorities below."
|
||||
<HeroSplitTestimonial
|
||||
title="Your Analysis Complete"
|
||||
description="View your muscle breakdown, weak points, and training priorities below. Upload another photo to track your progress."
|
||||
background={{ variant: "plain" }}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/analysis-output-card-with-four-scored-se-1772824175098-c1661045.png?_wi=5"
|
||||
imageAlt="Analysis output card with four scored sections"
|
||||
imagePosition="right"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Marcus T.", handle: "Bodybuilder", testimonial: "The precision is unmatched. I know exactly what to focus on.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/professional-headshot-photo-of-athletic--1772824174347-5ac4230a.png?_wi=5"},
|
||||
{
|
||||
name: "Ryan K.", handle: "Coach", testimonial: "My clients see results faster with targeted feedback.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/professional-headshot-of-competitive-bod-1772824176102-f26d3b3f.png?_wi=5"},
|
||||
{
|
||||
name: "Sarah M.", handle: "Athlete", testimonial: "This beats paying for a coach. The analysis is detailed and actionable.", 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=5"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Analyze Another Photo →",
|
||||
href: "/app/upload",
|
||||
},
|
||||
text: "Analyze Another Photo →", href: "/app/upload"},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/analysis-output-card-with-four-scored-se-1772824175098-c1661045.png?_wi=5",
|
||||
imageAlt: "Analysis output card with four scored sections",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/app-analysis-screen-with-header-a-1772824175215-8a1f52f2.png?_wi=1",
|
||||
imageAlt: "App analysis output screen with scores and recommendations",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/app-progress-history-screen-with-chronol-1772824175692-b36928e8.png",
|
||||
imageAlt: "App progress history screen with past analyses",
|
||||
},
|
||||
]}
|
||||
autoplayDelay={5000}
|
||||
showDimOverlay={true}
|
||||
mediaAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Analysis Breakdown Section */}
|
||||
<div id="analysis-breakdown" data-section="analysis-breakdown">
|
||||
<FeatureCardTwentyOne
|
||||
title="Your Physique Analysis"
|
||||
@@ -76,29 +69,17 @@ export default function AnalysisPage() {
|
||||
tag="Results"
|
||||
accordionItems={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Muscle Development Score: 78/100",
|
||||
content:
|
||||
"Your overall muscle development is solid with good definition across major muscle groups. Upper chest development is strong, but lower chest and rear delts need attention. Continue progressive overload on compound movements.",
|
||||
},
|
||||
id: "1", title: "Muscle Development Score: 78/100", content:
|
||||
"Your overall muscle development is solid with good definition across major muscle groups. Upper chest development is strong, but lower chest and rear delts need attention. Continue progressive overload on compound movements."},
|
||||
{
|
||||
id: "2",
|
||||
title: "Body Composition Score: 82/100",
|
||||
content:
|
||||
"Excellent body composition at 12.4% body fat. Muscle definition is clear and symmetry is well-balanced. Maintain current nutrition and training consistency to preserve lean mass.",
|
||||
},
|
||||
id: "2", title: "Body Composition Score: 82/100", content:
|
||||
"Excellent body composition at 12.4% body fat. Muscle definition is clear and symmetry is well-balanced. Maintain current nutrition and training consistency to preserve lean mass."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Proportionality Score: 71/100",
|
||||
content:
|
||||
"Good overall balance but with notable weak points. Left shoulder appears slightly smaller than right. Quadriceps development is good but calves lag behind. Address these imbalances with targeted volume.",
|
||||
},
|
||||
id: "3", title: "Proportionality Score: 71/100", content:
|
||||
"Good overall balance but with notable weak points. Left shoulder appears slightly smaller than right. Quadriceps development is good but calves lag behind. Address these imbalances with targeted volume."},
|
||||
{
|
||||
id: "4",
|
||||
title: "Your Top 3 Training Priorities",
|
||||
content:
|
||||
"<strong>1. Lower Chest Development</strong> - Add 2-3 decline bench sessions per week with controlled tempo. Priority rank: HIGH<br><strong>2. Rear Deltoid Hypertrophy</strong> - Incorporate face pulls and reverse pec deck work 2x/week. Priority rank: HIGH<br><strong>3. Left Shoulder Symmetry</strong> - Unilateral work on left side for 4 weeks minimum. Priority rank: MEDIUM",
|
||||
},
|
||||
id: "4", title: "Your Top 3 Training Priorities", content:
|
||||
"<strong>1. Lower Chest Development</strong> - Add 2-3 decline bench sessions per week with controlled tempo. Priority rank: HIGH<br><strong>2. Rear Deltoid Hypertrophy</strong> - Incorporate face pulls and reverse pec deck work 2x/week. Priority rank: HIGH<br><strong>3. Left Shoulder Symmetry</strong> - Unilateral work on left side for 4 weeks minimum. Priority rank: MEDIUM"},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/app-analysis-screen-with-header-a-1772824175215-8a1f52f2.png?_wi=2"
|
||||
imageAlt="FORMA analysis output screen with all scores and metrics"
|
||||
@@ -107,78 +88,38 @@ export default function AnalysisPage() {
|
||||
mediaPosition="right"
|
||||
buttons={[
|
||||
{
|
||||
text: "Export Analysis",
|
||||
href: "#",
|
||||
},
|
||||
text: "Export Analysis", href: "#"},
|
||||
]}
|
||||
/>
|
||||
</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: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -1,47 +1,34 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
|
||||
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
|
||||
export default function HistoryPage() {
|
||||
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" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "App", href: "/app" },
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "/app/upload" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
title: "Company", items: [
|
||||
{ label: "Contact", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Data Security", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -64,9 +51,7 @@ export default function HistoryPage() {
|
||||
brandName="FORMA"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Start Free Trial",
|
||||
href: "/app/upload",
|
||||
}}
|
||||
text: "Start Free Trial", href: "/app/upload"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -77,23 +62,14 @@ export default function HistoryPage() {
|
||||
tag="History"
|
||||
accordionItems={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Track Every Analysis",
|
||||
content:
|
||||
"Every time you upload a photo, FORMA saves the analysis results to your history. View past breakdowns, compare scores, and track your exact progress over weeks and months. See what improved, what needs work, and celebrate your gains.",
|
||||
},
|
||||
id: "1", title: "Track Every Analysis", content:
|
||||
"Every time you upload a photo, FORMA saves the analysis results to your history. View past breakdowns, compare scores, and track your exact progress over weeks and months. See what improved, what needs work, and celebrate your gains."},
|
||||
{
|
||||
id: "2",
|
||||
title: "Compare Snapshots",
|
||||
content:
|
||||
"Side-by-side comparison of analyses from different dates. Track changes in muscle development, body composition, proportionality, and weak points. See the delta in your training priorities as your weak points shift.",
|
||||
},
|
||||
id: "2", title: "Compare Snapshots", content:
|
||||
"Side-by-side comparison of analyses from different dates. Track changes in muscle development, body composition, proportionality, and weak points. See the delta in your training priorities as your weak points shift."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Visual Timeline",
|
||||
content:
|
||||
"Chronological feed of all your analyses with photo thumbnails and summary insights. Scroll through your transformation journey. Export individual analyses or your full progress report for sharing with coaches or trainers.",
|
||||
},
|
||||
id: "3", title: "Visual Timeline", content:
|
||||
"Chronological feed of all your analyses with photo thumbnails and summary insights. Scroll through your transformation journey. Export individual analyses or your full progress report for sharing with coaches or trainers."},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/app-history-screen-with-chronol-1772824175692-b36928e8.png"
|
||||
imageAlt="App progress history screen with chronological feed of past analyses"
|
||||
@@ -104,53 +80,6 @@ export default function HistoryPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
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=5",
|
||||
},
|
||||
{
|
||||
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=5",
|
||||
},
|
||||
{
|
||||
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=5",
|
||||
},
|
||||
{
|
||||
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=6",
|
||||
},
|
||||
{
|
||||
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=6",
|
||||
},
|
||||
{
|
||||
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=6",
|
||||
},
|
||||
]}
|
||||
cardTitle="Athletes see their progress. That's what keeps them coming back."
|
||||
cardTag="Real results"
|
||||
cardAnimation="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
|
||||
@@ -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: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
399
src/app/page.tsx
399
src/app/page.tsx
@@ -1,26 +1,17 @@
|
||||
"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 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 { 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 (
|
||||
@@ -41,261 +32,35 @@ export default function HomePage() {
|
||||
brandName="FORMA"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Start Free Trial",
|
||||
href: "/app/upload",
|
||||
}}
|
||||
text: "Start Free Trial", href: "/app/upload"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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=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"
|
||||
background={{ variant: "plain" }}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaI3bVZAjB9bZyI3Ta0WXumoTQ/uploaded-1772825627671-db628gmx.png"
|
||||
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=1",
|
||||
imageAlt:
|
||||
"Professional headshot photo of athletic male Marcus T., confident expression, dark professional back",
|
||||
},
|
||||
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=1"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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=1"},
|
||||
{
|
||||
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",
|
||||
},
|
||||
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=1"},
|
||||
]}
|
||||
cardAnimation="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Analyze My Physique →", href: "/app/upload"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -306,30 +71,13 @@ export default function HomePage() {
|
||||
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"
|
||||
@@ -345,41 +93,23 @@ export default function HomePage() {
|
||||
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"
|
||||
@@ -392,66 +122,29 @@ export default function HomePage() {
|
||||
<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: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
||||
import FaqBase from "@/components/sections/faq/FaqBase";
|
||||
@@ -10,39 +9,28 @@ import { Zap } from "lucide-react";
|
||||
|
||||
export default function PricingPage() {
|
||||
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" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "App", href: "/app" },
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "/app/upload" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
title: "Company", items: [
|
||||
{ label: "Contact", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Data Security", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -65,9 +53,7 @@ export default function PricingPage() {
|
||||
brandName="FORMA"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Start Free Trial",
|
||||
href: "/app/upload",
|
||||
}}
|
||||
text: "Start Free Trial", href: "/app/upload"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -78,30 +64,13 @@ export default function PricingPage() {
|
||||
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"
|
||||
@@ -117,41 +86,23 @@ export default function PricingPage() {
|
||||
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"
|
||||
|
||||
Reference in New Issue
Block a user