2026-03-06 19:12:47 +00:00
3 changed files with 119 additions and 77 deletions
--- a/src/app/app/analysis/page.tsx
+++ b/src/app/app/analysis/page.tsx
@@ -53,7 +53,7 @@ export default function AnalysisPage() {
          ]}
          buttonAnimation="blur-reveal"
          background={{
-            variant: "circleGradient"}}
+            variant: "sparkles-gradient"}}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APwwOLAi7FRFmXwzrAtyS9aqHm/minimalist-smartphone-ui-mockup-with-dra-1772824074568-0432c972.jpg"
          imageAlt="FORMA upload interface demo"
          mediaAnimation="slide-up"
--- a/src/app/app/upload/page.tsx
+++ b/src/app/app/upload/page.tsx
@@ -1,49 +1,16 @@
 "use client";

-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
 import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
+import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
+import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { Sparkles } from "lucide-react";
+import Link from "next/link";

 export default function UploadPage() {
-  const navItems = [
-    { name: "Features", id: "features" },
-    { name: "How It Works", id: "how-it-works" },
-    { name: "Pricing", id: "pricing" },
-    { name: "FAQ", id: "faq" },
-  ];
-
-  const footerColumns = [
-    {
-      title: "Product",
-      items: [
-        { label: "Features", href: "/" },
-        { label: "Pricing", href: "/#pricing" },
-        { label: "FAQ", href: "/#faq" },
-        { label: "Home", href: "/" },
-      ],
-    },
-    {
-      title: "Company",
-      items: [
-        { label: "About", href: "#" },
-        { label: "Blog", href: "/blog" },
-        { label: "Careers", href: "/careers" },
-        { label: "Contact", href: "/contact" },
-      ],
-    },
-    {
-      title: "Legal",
-      items: [
-        { label: "Privacy", href: "/privacy" },
-        { label: "Terms", href: "/terms" },
-        { label: "Status", href: "https://status.forma.app" },
-      ],
-    },
-  ];
-
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
@@ -60,11 +27,14 @@ export default function UploadPage() {
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="FORMA"
-          navItems={navItems}
+          navItems={[
+            { name: "Features", id: "features" },
+            { name: "How It Works", id: "how-it-works" },
+            { name: "Pricing", id: "pricing" },
+            { name: "FAQ", id: "faq" },
+          ]}
          button={{
-            text: "Sign In",
-            href: "/auth/login",
-          }}
+            text: "Sign In",            href: "/auth/login"}}
          animateOnLoad={true}
          className="bg-black/80 backdrop-blur-md border border-white/10"
          navItemClassName="text-white/80 hover:text-white transition-colors"
@@ -73,24 +43,19 @@ export default function UploadPage() {
        />
      </div>

-      <div id="upload-hero" data-section="upload-hero">
+      <div id="hero" data-section="hero">
        <HeroLogoBillboard
-          logoText="Upload & Analyze"
-          description="Upload your physique photo. Our AI will analyze your muscle development, identify weak points, and give you three specific training priorities to focus on next."
+          logoText="FORMA"
+          description="Know Exactly What Your Body Needs to Change. Upload a photo. Get a detailed breakdown of your muscle development, weak points, and what to prioritize next."
          buttons={[
            {
-              text: "Choose Photo",
-              href: "#upload-section",
-            },
-            {
-              text: "Back to Home",
-              href: "/",
-            },
+              text: "Analyze My Physique →",              href: "/auth/signup"},
          ]}
          buttonAnimation="blur-reveal"
-          background={{ variant: "circleGradient" }}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APwwOLAi7FRFmXwzrAtyS9aqHm/minimalist-smartphone-ui-mockup-with-dra-1772824074568-0432c972.jpg?_wi=3"
-          imageAlt="FORMA upload interface"
+          background={{
+            variant: "sparkles-gradient"}}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APwwOLAi7FRFmXwzrAtyS9aqHm/minimalist-smartphone-ui-mockup-with-dra-1772824074568-0432c972.jpg"
+          imageAlt="FORMA upload interface demo"
          mediaAnimation="slide-up"
          frameStyle="card"
          className="min-h-screen"
@@ -105,31 +70,19 @@ export default function UploadPage() {
        />
      </div>

-      <div id="upload-guide" data-section="upload-guide">
+      <div id="features" data-section="features">
        <FeatureCardOne
-          title="Upload Guidelines"
-          description="Follow these steps to get the most accurate analysis of your physique."
-          tag="How To Upload"
          features={[
            {
-              title: "Front View Photo",
-              description: "Take a clear front-facing photo in good natural lighting. Wear fitted clothing or be shirtless for optimal muscle visibility.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APwwOLAi7FRFmXwzrAtyS9aqHm/minimalist-smartphone-ui-mockup-with-dra-1772824074568-0432c972.jpg?_wi=4",
-              imageAlt: "Front view guidelines",
-            },
+              title: "Upload Your Photo",              description: "Front, back, or side view in good lighting. That's it.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APwwOLAi7FRFmXwzrAtyS9aqHm/minimalist-smartphone-ui-mockup-with-dra-1772824074568-0432c972.jpg",              imageAlt: "Upload interface"},
            {
-              title: "Ensure Good Lighting",
-              description: "Use natural daylight or bright indoor lighting to show muscle definition clearly. Shadows and poor lighting reduce analysis accuracy.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APwwOLAi7FRFmXwzrAtyS9aqHm/anatomical-figure-front-view-in-da-vinci-1772824074504-507324b5.png?_wi=2",
-              imageAlt: "Lighting setup",
-            },
+              title: "AI Analyzes Your Physique",              description: "Powered by Claude vision AI. Muscle development, body composition, proportionality, and weak points identified.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APwwOLAi7FRFmXwzrAtyS9aqHm/anatomical-figure-front-view-in-da-vinci-1772824074504-507324b5.png",              imageAlt: "AI analysis scanning"},
            {
-              title: "Stand Naturally",
-              description: "Stand with arms relaxed at your sides. No flexing or posing needed — the AI analyzes your natural physique for accurate results.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APwwOLAi7FRFmXwzrAtyS9aqHm/dark-card-showing-analysis-results-with--1772824073575-87574b91.png?_wi=2",
-              imageAlt: "Posture guidance",
-            },
+              title: "Get Your Breakdown & Priorities",              description: "Four scored dimensions plus three specific training priorities. Actionable, data-driven insights.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APwwOLAi7FRFmXwzrAtyS9aqHm/dark-card-showing-analysis-results-with--1772824073575-87574b91.png",              imageAlt: "Analysis results dashboard"},
          ]}
+          title="Three Simple Steps to Transformation"
+          description="Get your complete physique breakdown in seconds. No guesswork. No opinions. Pure data."
+          tag="How It Works"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          textboxLayout="default"
@@ -139,9 +92,98 @@ export default function UploadPage() {
        />
      </div>

-      <div id="footer" data-section="footer">
+      <div id="how-it-works" data-section="how-it-works">
+        <PricingCardTwo
+          plans={[
+            {
+              id: "1",              badge: "FORMA Unlimited",              badgeIcon: Sparkles,
+              price: "$5.99",              subtitle: "/month or $59.99/year",              buttons: [
+                {
+                  text: "Start Analyzing →",                  href: "/auth/signup"},
+              ],
+              features: [
+                "Unlimited physique analyses",                "Muscle group breakdown with scores",                "Weak point identification",                "Training priority recommendations",                "Full progress history",                "AI-powered by Claude vision"],
+            },
+          ]}
+          title="$5.99 / Month"
+          description="Everything included. No hidden fees. Cancel anytime."
+          tag="Pricing"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          className="py-24 bg-gradient-to-b from-black to-indigo-950/20"
+          containerClassName="max-w-2xl mx-auto text-center"
+        />
+      </div>
+
+      <div id="pricing" data-section="pricing">
+        <FaqSplitMedia
+          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 or used for any other purpose. Your privacy is paramount."},
+            {
+              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. However, it's a tool to complement, not replace, professional coaching."},
+            {
+              id: "3",              title: "Can I cancel anytime?",              content: "Yes. Instant cancellation, no questions asked, from your account settings. If you cancel before your next billing date, you won't be charged again."},
+            {
+              id: "4",              title: "What kind of photo should I upload?",              content: "A well-lit front or back photo in fitted clothing or fewer. The more visible the musculature, the more precise the analysis. We recommend natural lighting and a clear view of your full physique."},
+            {
+              id: "5",              title: "How often can I upload?",              content: "Unlimited. Upload as often as you want. Track your progress daily, weekly, or monthly. The progress history automatically organizes all your analyses."},
+            {
+              id: "6",              title: "Do I need special equipment?",              content: "No. Just your smartphone. FORMA works on any device with a camera and browser. No special lighting or equipment required."},
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APwwOLAi7FRFmXwzrAtyS9aqHm/dark-minimalist-mockup-of-forma-app-inte-1772824076297-3bd3877b.png"
+          imageAlt="FORMA app interface"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          faqsAnimation="slide-up"
+          title="Frequently Asked Questions"
+          description="Everything you need to know."
+          tag="FAQ"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          className="py-24 bg-black"
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
        <FooterBaseReveal
-          columns={footerColumns}
+          columns={[
+            {
+              title: "Product",              items: [
+                {
+                  label: "Features",                  href: "#features"},
+                {
+                  label: "Pricing",                  href: "#pricing"},
+                {
+                  label: "FAQ",                  href: "#faq"},
+                {
+                  label: "App",                  href: "/app"},
+              ],
+            },
+            {
+              title: "Company",              items: [
+                {
+                  label: "About",                  href: "#"},
+                {
+                  label: "Blog",                  href: "/blog"},
+                {
+                  label: "Careers",                  href: "/careers"},
+                {
+                  label: "Contact",                  href: "/contact"},
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                {
+                  label: "Privacy",                  href: "/privacy"},
+                {
+                  label: "Terms",                  href: "/terms"},
+                {
+                  label: "Status",                  href: "https://status.forma.app"},
+              ],
+            },
+          ]}
          copyrightText="© 2025 FORMA. Know your body. Change it."
          className="bg-black border-t border-white/10"
          containerClassName="max-w-6xl mx-auto"
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -84,7 +84,7 @@ export default function HomePage() {
          ]}
          buttonAnimation="blur-reveal"
          background={{
-            variant: "circleGradient"}}
+            variant: "sparkles-gradient"}}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APwwOLAi7FRFmXwzrAtyS9aqHm/minimalist-smartphone-ui-mockup-with-dra-1772824074568-0432c972.jpg"
          imageAlt="FORMA upload interface demo"
          mediaAnimation="slide-up"