bender/bd539cad-e5a1-45ab-8774-c070fc7bb50f
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_5
Branches Tags
bender:main bender:version_6 bender:version_4 bender:version_5 bender:version_2 bender:version_3 bender:version_1
...
pull from: bender:version_2
Branches Tags
bender:main bender:version_6 bender:version_4 bender:version_5 bender:version_2 bender:version_3 bender:version_1

13 Commits
version_5 ... version_2

Author SHA1 Message Date
bender
f5bdcdd234 Update src/components/sections/product/ProductCardOneWithSaving.tsx 2026-03-11 19:57:04 +00:00
bender
e96e06a541 Update src/components/sections/pricing/PricingCardOneWithSaving.tsx 2026-03-11 19:57:03 +00:00
bender
59b51e581d Update src/components/sections/feature/FeatureCardTwentyFiveWithSaving.tsx 2026-03-11 19:57:03 +00:00
bender
bb62b2d351 Update src/app/page.tsx 2026-03-11 19:57:02 +00:00
bender
02d210a684 Update src/lib/storage/workoutStorage.ts 2026-03-11 19:54:58 +00:00
bender
2b040b39b7 Add src/hooks/useWorkoutStorage.ts 2026-03-11 19:54:57 +00:00
bender
e05a1e869a Add src/components/sections/product/ProductCardOneWithSaving.tsx 2026-03-11 19:54:57 +00:00
bender
3649146e1e Add src/components/sections/pricing/PricingCardOneWithSaving.tsx 2026-03-11 19:54:56 +00:00
bender
c79bc5cf3c Add src/components/sections/metrics/MetricCardFourteenWithSaving.tsx 2026-03-11 19:54:55 +00:00
bender
d328e3221c Add src/components/sections/feature/FeatureCardTwentyFiveWithSaving.tsx 2026-03-11 19:54:55 +00:00
bender
531b1c297b Update src/app/signup/page.tsx 2026-03-11 19:54:54 +00:00
bender
8ae1f717a3 Update src/app/page.tsx 2026-03-11 19:54:53 +00:00
bender
a48de5fed2 Update src/app/login/page.tsx 2026-03-11 19:54:53 +00:00
9 changed files with 1444 additions and 658 deletions
Expand all files Collapse all files

289
src/app/login/page.tsx
View File

@@ -2,46 +2,69 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import { useState } from "react";
import { Eye, EyeOff, Mail, Lock } from 'lucide-react';
import Input from '@/components/form/Input';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Mail, Lock, ArrowRight, AlertCircle } from 'lucide-react';
import { useState } from 'react';
export default function LoginPage() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
const [isSubmitted, setIsSubmitted] = useState(false);
const [formData, setFormData] = useState({
email: '',
password: ''
});
const [errors, setErrors] = useState<{ [key: string]: string }>({});
const [isSubmitting, setIsSubmitting] = useState(false);
const validateForm = () => {
const newErrors: { email?: string; password?: string } = {};
const newErrors: { [key: string]: string } = {};
if (!email) {
newErrors.email = "Email é obrigatório";
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
newErrors.email = "Email inválido";
if (!formData.email) {
newErrors.email = 'Email é obrigatório';
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
newErrors.email = 'Email inválido';
}
if (!password) {
newErrors.password = "Senha é obrigatória";
} else if (password.length < 6) {
newErrors.password = "Senha deve ter no mínimo 6 caracteres";
if (!formData.password) {
newErrors.password = 'Senha é obrigatória';
} else if (formData.password.length < 6) {
newErrors.password = 'Senha deve ter pelo menos 6 caracteres';
}
return newErrors;
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = (e: React.FormEvent) => {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
if (errors[name]) {
setErrors(prev => ({
...prev,
[name]: ''
}));
}
};
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const newErrors = validateForm();
setErrors(newErrors);
if (Object.keys(newErrors).length === 0) {
setIsSubmitted(true);
console.log("Login attempt:", { email, password });
setTimeout(() => {
setIsSubmitted(false);
}, 2000);
if (!validateForm()) {
return;
}
setIsSubmitting(true);
try {
await new Promise(resolve => setTimeout(resolve, 1000));
console.log('Login attempt:', formData);
alert('Login bem-sucedido!');
setFormData({ email: '', password: '' });
} catch (error) {
setErrors({ submit: 'Erro ao fazer login. Tente novamente.' });
} finally {
setIsSubmitting(false);
}
};
@@ -62,99 +85,175 @@ export default function LoginPage() {
<NavbarStyleCentered
navItems={[
{ name: "Dashboard", id: "/" },
{ name: "Treino", id: "training" },
{ name: "Nutrição", id: "nutrition" },
{ name: "Comunidade", id: "community" },
{ name: "Perfil", id: "profile" }
{ name: "Sobre", id: "#hero" },
{ name: "Features", id: "#onboarding" },
{ name: "Contato", id: "#contact" },
{ name: "Signup", id: "/signup" }
]}
button={{ text: "Começar Agora", href: "/signup" }}
button={{ text: "Fazer Login", href: "/login" }}
brandName="FitFlow Pro"
/>
</div>
<div className="min-h-[calc(100vh-80px)] flex items-center justify-center py-12 px-4">
<div className="w-full max-w-md">
<div className="bg-card rounded-3xl shadow-lg p-8 border border-accent/10">
<div className="mb-8">
<h1 className="text-3xl font-extrabold text-foreground mb-2">Bem-vindo de Volta</h1>
<p className="text-foreground/70">Faça login para acessar seu progresso</p>
</div>
<div id="login" data-section="login" className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md space-y-8">
<div className="text-center space-y-3">
<h1 className="text-4xl font-extrabold tracking-tight">Bem-vindo de volta</h1>
<p className="text-base text-gray-600 dark:text-gray-400">Faça login na sua conta FitFlow Pro</p>
</div>
<div className="bg-card rounded-2xl border border-primary-cta/20 p-8 shadow-lg">
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<div className="flex items-center gap-2">
<Mail size={16} />
Email
</div>
</label>
<Input
value={email}
onChange={setEmail}
type="email"
placeholder="seu@email.com"
required
className={errors.email ? "border-red-500" : ""}
/>
{errors.email && (
<p className="text-red-500 text-sm mt-1">{errors.email}</p>
)}
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<div className="flex items-center gap-2">
<Lock size={16} />
Senha
</div>
{/* Email Field */}
<div className="space-y-2">
<label htmlFor="email" className="block text-sm font-medium text-foreground">
Email
</label>
<div className="relative">
<Input
value={password}
onChange={setPassword}
type={showPassword ? "text" : "password"}
placeholder="••••••••"
required
className={errors.password ? "border-red-500" : "pr-10"}
<Mail className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
<input
id="email"
name="email"
type="email"
value={formData.email}
onChange={handleChange}
placeholder="seu@email.com"
className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
errors.email
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 focus:ring-primary-cta'
}`}
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground/50 hover:text-foreground transition-colors"
aria-label={showPassword ? "Ocultar senha" : "Mostrar senha"}
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
{errors.password && (
<p className="text-red-500 text-sm mt-1">{errors.password}</p>
{errors.email && (
<div className="flex items-center gap-2 text-red-500 text-sm">
<AlertCircle className="w-4 h-4" />
{errors.email}
</div>
)}
</div>
{/* Password Field */}
<div className="space-y-2">
<label htmlFor="password" className="block text-sm font-medium text-foreground">
Senha
</label>
<div className="relative">
<Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
<input
id="password"
name="password"
type="password"
value={formData.password}
onChange={handleChange}
placeholder="••••••••"
className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
errors.password
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 focus:ring-primary-cta'
}`}
/>
</div>
{errors.password && (
<div className="flex items-center gap-2 text-red-500 text-sm">
<AlertCircle className="w-4 h-4" />
{errors.password}
</div>
)}
</div>
{/* Submit Errors */}
{errors.submit && (
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3 flex items-center gap-2 text-red-700 dark:text-red-400 text-sm">
<AlertCircle className="w-4 h-4 flex-shrink-0" />
{errors.submit}
</div>
)}
{/* Submit Button */}
<button
type="submit"
disabled={isSubmitted}
className="w-full py-3 px-4 bg-primary-cta hover:opacity-90 disabled:opacity-50 text-white font-semibold rounded-full transition-all duration-300 transform hover:scale-105"
disabled={isSubmitting}
className="w-full bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-2.5 rounded-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isSubmitted ? "Entrando..." : "Entrar"}
{isSubmitting ? 'Entrando...' : 'Fazer Login'}
{!isSubmitting && <ArrowRight className="w-4 h-4" />}
</button>
</form>
<div className="mt-6 text-center text-sm text-foreground/70">
<p>
Não tem conta?{" "}
<a href="/signup" className="text-primary-cta font-semibold hover:underline">
Criar conta
</a>
</p>
{/* Divider */}
<div className="mt-6 relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-card text-gray-500">ou continue com</span>
</div>
</div>
<div className="mt-6 pt-6 border-t border-accent/10 text-center text-xs text-foreground/50">
<p>Teste gratuito por 30 dias. Sem cartão de crédito necessário.</p>
{/* Social Login Buttons */}
<div className="mt-6 space-y-3">
<button className="w-full bg-background hover:bg-gray-50 dark:hover:bg-gray-800 border border-gray-300 dark:border-gray-600 text-foreground font-medium py-2.5 rounded-lg transition-all">
Google
</button>
<button className="w-full bg-background hover:bg-gray-50 dark:hover:bg-gray-800 border border-gray-300 dark:border-gray-600 text-foreground font-medium py-2.5 rounded-lg transition-all">
Apple
</button>
</div>
</div>
{/* Sign Up Link */}
<p className="text-center text-gray-600 dark:text-gray-400 text-sm">
Não tem conta?{' '}
<a href="/signup" className="text-primary-cta hover:text-primary-cta/80 font-semibold transition-colors">
Criar conta
</a>
</p>
{/* Forgot Password Link */}
<p className="text-center text-gray-600 dark:text-gray-400 text-sm">
<a href="#" className="text-primary-cta hover:text-primary-cta/80 font-semibold transition-colors">
Esqueceu sua senha?
</a>
</p>
</div>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{ label: "Home", href: "/" },
{ label: "Sobre", href: "/#hero" },
{ label: "Features", href: "/#onboarding" }
]
},
{
items: [
{ label: "Blog", href: "#" },
{ label: "Ajuda", href: "#" },
{ label: "Suporte", href: "#" }
]
},
{
items: [
{ label: "Privacidade", href: "#" },
{ label: "Termos", href: "#" },
{ label: "Contato", href: "#" }
]
},
{
items: [
{ label: "Login", href: "/login" },
{ label: "Signup", href: "/signup" },
{ label: "Dashboard", href: "/" }
]
}
]}
logoText="FitFlow Pro"
/>
</div>
</ThemeProvider>
);
}
}

717
src/app/page.tsx
View File

@@ -13,374 +13,381 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Activity, Apple, Brain, Dumbbell, Heart, Target, Zap, Users, Star, TrendingDown, TrendingUp } from 'lucide-react';
import { WorkoutDataIntegration } from '@/app/components/WorkoutDataIntegration';
export default function LandingPage() {
const displayMetrics = [
{ id: "1", value: "10.000+", description: "Passos diários rastreados em tempo real com motivação visual de progresso." },
{ id: "2", value: "500 kg", description: "Volume total de peso levantado monitorado com progressão semanal automática." },
{ id: "3", value: "150+ km", description: "Distância corrida mapeada com GPS, ritmo calculado e calorias precisas." },
{ id: "4", value: "42 dias", description: "Sequência de treinos consistentes com badges de dedicação desbloqueados." }
];
const handleCardioInteraction = (data: any) => {
console.log('Cardio interaction:', data);
};
const handleTrainingInteraction = (data: any) => {
console.log('Training interaction:', data);
};
const handleWorkoutMode = (productId: string, productName: string) => {
console.log('Workout mode:', productId, productName);
};
const handleNutritionSelect = (planId: string, planName: string) => {
console.log('Nutrition select:', planId, planName);
};
return (
<WorkoutDataIntegration autoSave={true}>
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="smallMedium"
sizing="mediumSizeLargeTitles"
background="blurBottom"
cardStyle="gradient-bordered"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Dashboard", id: "dashboard" },
{ name: "Treino", id: "training" },
{ name: "Nutrição", id: "nutrition" },
{ name: "Comunidade", id: "community" },
{ name: "Perfil", id: "profile" }
]}
button={{ text: "Começar Agora", href: "contact" }}
brandName="FitFlow Pro"
/>
</div>
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="smallMedium"
sizing="mediumSizeLargeTitles"
background="blurBottom"
cardStyle="gradient-bordered"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Dashboard", id: "dashboard" },
{ name: "Treino", id: "training" },
{ name: "Nutrição", id: "nutrition" },
{ name: "Comunidade", id: "community" },
{ name: "Perfil", id: "profile" }
]}
button={{ text: "Começar Agora", href: "contact" }}
brandName="FitFlow Pro"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
title="Seu Corpo, Seu Histórico, Sua Vitória"
description="Aplicativo premium de fitness com rastreamento biométrico inteligente, treinos personalizados por IA e cardio com GPS. Transforme seu corpo enquanto acompanha cada segundo da jornada."
tag="Fitness Ultra-Premium"
tagIcon={Zap}
background={{ variant: "glowing-orb" }}
kpis={[
{ value: "150K+", label: "Usuários Ativos" },
{ value: "2M+", label: "Treinos Concluídos" },
{ value: "4.9★", label: "Avaliação" }
]}
enableKpiAnimation={true}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=1"
imageAlt="Dashboard de fitness premium"
imagePosition="right"
mediaAnimation="slide-up"
buttons={[
{ text: "Começar Teste Grátis", href: "contact" },
{ text: "Ver Demo", href: "#features" }
]}
avatars={[
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/professional-athlete-portrait-male-fitne-1773256979726-5009f852.png", alt: "Usuário" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/fit-female-athlete-portrait-determined-e-1773256980310-c05dce2f.png", alt: "Usuário" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/athletic-male-trainer-portrait-confident-1773256979906-c5e05a88.png", alt: "Usuário" }
]}
avatarText="Join 150K+ athletes"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
title="Seu Corpo, Seu Histórico, Sua Vitória"
description="Aplicativo premium de fitness com rastreamento biométrico inteligente, treinos personalizados por IA e cardio com GPS. Transforme seu corpo enquanto acompanha cada segundo da jornada."
tag="Fitness Ultra-Premium"
tagIcon={Zap}
background={{ variant: "glowing-orb" }}
kpis={[
{ value: "150K+", label: "Usuários Ativos" },
{ value: "2M+", label: "Treinos Concluídos" },
{ value: "4.9★", label: "Avaliação" }
]}
enableKpiAnimation={true}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=1"
imageAlt="Dashboard de fitness premium"
imagePosition="right"
mediaAnimation="slide-up"
buttons={[
{ text: "Começar Teste Grátis", href: "contact" },
{ text: "Ver Demo", href: "#features" }
]}
avatars={[
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/professional-athlete-portrait-male-fitne-1773256979726-5009f852.png", alt: "Usuário" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/fit-female-athlete-portrait-determined-e-1773256980310-c05dce2f.png", alt: "Usuário" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/athletic-male-trainer-portrait-confident-1773256979906-c5e05a88.png", alt: "Usuário" }
]}
avatarText="Join 150K+ athletes"
/>
</div>
<div id="onboarding" data-section="onboarding">
<FeatureCardTwentyFive
title="Onboarding Biométrico Dinâmico"
description="Sistema inteligente que adapta-se ao seu corpo. Defina seu objetivo, e o app calcula automaticamente sua timeline de sucesso com precisão científica."
tag="Inteligência Adaptativa"
tagIcon={Brain}
features={[
{
title: "Perfil Biométrico", description: "Coloque seus dados (gênero, altura, peso, idade) e veja o app adaptar todas as demonstrações, avatares e ilustrações anatomicamente.", icon: Target,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/premium-onboarding-screen-for-fitness-ap-1773256981180-774b293c.png", imageAlt: "Tela de biometria"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=2", imageAlt: "Dashboard adaptado"
}
]
},
{
title: "Metas Inteligentes", description: "Escolha: Perder Peso ou Ganhar Massa. O sistema calcula TMB, projeta planilha de metas e mostra exatamente quando você atingirá seu objetivo.", icon: Zap,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png", imageAlt: "Plano de nutrição"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=1", imageAlt: "Métricas de progresso"
}
]
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="onboarding" data-section="onboarding">
<FeatureCardTwentyFive
title="Onboarding Biométrico Dinâmico"
description="Sistema inteligente que adapta-se ao seu corpo. Defina seu objetivo, e o app calcula automaticamente sua timeline de sucesso com precisão científica."
tag="Inteligência Adaptativa"
tagIcon={Brain}
features={[
{
title: "Perfil Biométrico", description: "Coloque seus dados (gênero, altura, peso, idade) e veja o app adaptar todas as demonstrações, avatares e ilustrações anatomicamente.", icon: Target,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/premium-onboarding-screen-for-fitness-ap-1773256981180-774b293c.png", imageAlt: "Tela de biometria"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=2", imageAlt: "Dashboard adaptado"
}
]
},
{
title: "Metas Inteligentes", description: "Escolha: Perder Peso ou Ganhar Massa. O sistema calcula TMB, projeta planilha de metas e mostra exatamente quando você atingirá seu objetivo.", icon: Zap,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png", imageAlt: "Plano de nutrição"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=1", imageAlt: "Métricas de progresso"
}
]
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="cardio" data-section="cardio">
<FeatureCardTwentyFive
title="Hub de Cardio com GPS em Tempo Real"
description="Rastreie suas corridas e caminhadas com precisão de GPS. Monitore pace, distância, calorias queimadas e vença suas metas diárias com anéis de progresso animados."
tag="Cardio Premium"
tagIcon={Heart}
features={[
{
title: "Running Tracker Avançado", description: "GPS ativado em tempo real. Mapeia sua rota, calcula queima de calorias baseado no peso, mostra ritmo ao vivo em painel estilo smartwatch.", icon: Zap,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/gps-running-tracker-interface-with-real--1773256980694-2abe167e.png", imageAlt: "Rastreamento GPS"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=2", imageAlt: "Métricas de cardio"
}
]
},
{
title: "Pedômetro & Caminhada", description: "Contador de passos embutido com rastreamento de distância e calorias. Vença suas metas de 10.000 passos com visual de anéis de progresso motivacional.", icon: Activity,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=3", imageAlt: "Dashboard de passos"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=3", imageAlt: "Progresso de atividade"
}
]
}
]}
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="cardio" data-section="cardio">
<FeatureCardTwentyFive
title="Hub de Cardio com GPS em Tempo Real"
description="Rastreie suas corridas e caminhadas com precisão de GPS. Monitore pace, distância, calorias queimadas e vença suas metas diárias com anéis de progresso animados."
tag="Cardio Premium"
tagIcon={Heart}
features={[
{
title: "Running Tracker Avançado", description: "GPS ativado em tempo real. Mapeia sua rota, calcula queima de calorias baseado no peso, mostra ritmo ao vivo em painel estilo smartwatch.", icon: Zap,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/gps-running-tracker-interface-with-real--1773256980694-2abe167e.png", imageAlt: "Rastreamento GPS"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=2", imageAlt: "Métricas de cardio"
}
]
},
{
title: "Pedômetro & Caminhada", description: "Contador de passos embutido com rastreamento de distância e calorias. Vença suas metas de 10.000 passos com visual de anéis de progresso motivacional.", icon: Activity,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=3", imageAlt: "Dashboard de passos"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=3", imageAlt: "Progresso de atividade"
}
]
}
]}
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="training" data-section="training">
<FeatureCardTwentyFive
title="Core de Treinamento com IA"
description="Algoritmo adaptativo que recomenda treinos baseado em biometria. Escolha entre Casa (calistenia) ou Ginásio (máquinas/pesos) e isole por grupo muscular com modelo anatômico 3D interativo."
tag="Recomendação de IA"
tagIcon={Brain}
features={[
{
title: "Dualidade de Ambientes", description: "Treinos em Casa (peso corporal, calistenia) ou Ginásio (máquinas, pesos livres). Sistema diferencia automaticamente baseado em sua escolha e disponibilidade de equipamento.", icon: Dumbbell,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=1", imageAlt: "Seleção de exercícios"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=1", imageAlt: "Execução de treino"
}
]
},
{
title: "Isolamento por Grupo Muscular", description: "Modelo anatômico 3D/2D interativo. Clique em um músculo (peitoral, glúteo, etc.) e veja lista filtrada de exercícios com foco nesse músculo específico.", icon: Zap,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=2", imageAlt: "Anatomia interativa"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=2", imageAlt: "Exercícios filtrados"
}
]
}
]}
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="training" data-section="training">
<FeatureCardTwentyFive
title="Core de Treinamento com IA"
description="Algoritmo adaptativo que recomenda treinos baseado em biometria. Escolha entre Casa (calistenia) ou Ginásio (máquinas/pesos) e isole por grupo muscular com modelo anatômico 3D interativo."
tag="Recomendação de IA"
tagIcon={Brain}
features={[
{
title: "Dualidade de Ambientes", description: "Treinos em Casa (peso corporal, calistenia) ou Ginásio (máquinas, pesos livres). Sistema diferencia automaticamente baseado em sua escolha e disponibilidade de equipamento.", icon: Dumbbell,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=1", imageAlt: "Seleção de exercícios"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=1", imageAlt: "Execução de treino"
}
]
},
{
title: "Isolamento por Grupo Muscular", description: "Modelo anatômico 3D/2D interativo. Clique em um músculo (peitoral, glúteo, etc.) e veja lista filtrada de exercícios com foco nesse músculo específico.", icon: Zap,
mediaItems: [
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=2", imageAlt: "Anatomia interativa"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=2", imageAlt: "Exercícios filtrados"
}
]
}
]}
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="workout-mode" data-section="workout-mode">
<ProductCardOne
title="Modo 'Em Execução' - Tracking de Série"
description="Interface imersiva que transforma o treino em experiência interativa com cronômetro de descanso, registro de progresso e gráficos de progressão."
tag="Focus Mode"
tagIcon={Target}
products={[
{
id: "1", name: "Iniciar Série", price: "Botão Proeminente", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=3", imageAlt: "Tela de série"
},
{
id: "2", name: "Cronômetro de Descanso", price: "Automático", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=4", imageAlt: "Descanso entre séries"
},
{
id: "3", name: "Registrar Progresso", price: "Carga + Reps", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=4", imageAlt: "Progresso salvo"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
/>
</div>
<div id="workout-mode" data-section="workout-mode">
<ProductCardOne
title="Modo 'Em Execução' - Tracking de Série"
description="Interface imersiva que transforma o treino em experiência interativa com cronômetro de descanso, registro de progresso e gráficos de progressão."
tag="Focus Mode"
tagIcon={Target}
products={[
{
id: "1", name: "Iniciar Série", price: "Botão Proeminente", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=3", imageAlt: "Tela de série", onProductClick: () => handleWorkoutMode("1", "Iniciar Série")
},
{
id: "2", name: "Cronômetro de Descanso", price: "Automático", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=4", imageAlt: "Descanso entre séries", onProductClick: () => handleWorkoutMode("2", "Cronômetro de Descanso")
},
{
id: "3", name: "Registrar Progresso", price: "Carga + Reps", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=4", imageAlt: "Progresso salvo", onProductClick: () => handleWorkoutMode("3", "Registrar Progresso")
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
/>
</div>
<div id="nutrition" data-section="nutrition">
<PricingCardOne
title="Nutrição Inteligente & Receituário"
description="Planos alimentares 100% sincronizados com suas metas de peso. Se quer perder peso, déficit calórico. Se quer ganhar massa, superávit inteligente."
tag="Sincronizado com Timeline"
tagIcon={Apple}
plans={[
{
id: "deficit", badge: "Perda de Peso", badgeIcon: TrendingDown,
price: "Déficit Calórico", subtitle: "Receitas otimizadas para queima de calorias", features: [
"Macros calculados automaticamente", "Prep time entre 15-30 min", "Proteína alta, carboidrato estratégico", "Rastreamento integrado", "Sugestões diárias personalizadas"
]
},
{
id: "surplus", badge: "Ganho de Massa", badgeIcon: TrendingUp,
price: "Superávit Estratégico", subtitle: "Nutrição para crescimento muscular", features: [
"Calorias calculadas para ganho", "Proteína máxima (2g por kg)", "Carbos pré e pós-treino", "Tempo de preparo eficiente", "Sincronizado com treino de força"
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="nutrition" data-section="nutrition">
<PricingCardOne
title="Nutrição Inteligente & Receituário"
description="Planos alimentares 100% sincronizados com suas metas de peso. Se quer perder peso, déficit calórico. Se quer ganhar massa, superávit inteligente."
tag="Sincronizado com Timeline"
tagIcon={Apple}
plans={[
{
id: "deficit", badge: "Perda de Peso", badgeIcon: TrendingDown,
price: "Déficit Calórico", subtitle: "Receitas otimizadas para queima de calorias", features: [
"Macros calculados automaticamente", "Prep time entre 15-30 min", "Proteína alta, carboidrato estratégico", "Rastreamento integrado", "Sugestões diárias personalizadas"
]
},
{
id: "surplus", badge: "Ganho de Massa", badgeIcon: TrendingUp,
price: "Superávit Estratégico", subtitle: "Nutrição para crescimento muscular", features: [
"Calorias calculadas para ganho", "Proteína máxima (2g por kg)", "Carbos pré e pós-treino", "Tempo de preparo eficiente", "Sincronizado com treino de força"
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardFourteen
title="Suas Conquistas Importam. Veja Cada Número."
tag="Performance Metrics"
tagAnimation="slide-up"
metrics={[
{
id: "1", value: "10.000+", description: "Passos diários rastreados em tempo real com motivação visual de progresso."
},
{
id: "2", value: "500 kg", description: "Volume total de peso levantado monitorado com progressão semanal automática."
},
{
id: "3", value: "150+ km", description: "Distância corrida mapeada com GPS, ritmo calculado e calorias precisas."
},
{
id: "4", value: "42 dias", description: "Sequência de treinos consistentes com badges de dedicação desbloqueados."
}
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardFourteen
title="Suas Conquistas Importam. Veja Cada Número."
tag="Performance Metrics"
tagAnimation="slide-up"
metrics={displayMetrics}
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
title="Comunidade de Atletas Profissionais"
description="Feed social onde você compartilha rotas de corrida, estatísticas de treino e compete em rankings semanais com outros usuários."
tag="Gamificação Social"
tagIcon={Users}
members={[
{
id: "1", name: "Marcus A.", role: "Elite Runner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/professional-athlete-portrait-male-fitne-1773256979726-5009f852.png?_wi=1", imageAlt: "Marcus A."
},
{
id: "2", name: "Ana L.", role: "Strength Coach", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/fit-female-athlete-portrait-determined-e-1773256980310-c05dce2f.png?_wi=1", imageAlt: "Ana L."
},
{
id: "3", name: "Rafael S.", role: "Nutrition Expert", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/athletic-male-trainer-portrait-confident-1773256979906-c5e05a88.png?_wi=1", imageAlt: "Rafael S."
},
{
id: "4", name: "Sofia M.", role: "Fitness Trainer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/female-fitness-coach-portrait-profession-1773256979710-97e8b5fe.png?_wi=1", imageAlt: "Sofia M."
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
gridVariant="four-items-2x2-equal-grid"
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
title="Comunidade de Atletas Profissionais"
description="Feed social onde você compartilha rotas de corrida, estatísticas de treino e compete em rankings semanais com outros usuários."
tag="Gamificação Social"
tagIcon={Users}
members={[
{
id: "1", name: "Marcus A.", role: "Elite Runner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/professional-athlete-portrait-male-fitne-1773256979726-5009f852.png?_wi=1", imageAlt: "Marcus A."
},
{
id: "2", name: "Ana L.", role: "Strength Coach", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/fit-female-athlete-portrait-determined-e-1773256980310-c05dce2f.png?_wi=1", imageAlt: "Ana L."
},
{
id: "3", name: "Rafael S.", role: "Nutrition Expert", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/athletic-male-trainer-portrait-confident-1773256979906-c5e05a88.png?_wi=1", imageAlt: "Rafael S."
},
{
id: "4", name: "Sofia M.", role: "Fitness Trainer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/female-fitness-coach-portrait-profession-1773256979710-97e8b5fe.png?_wi=1", imageAlt: "Sofia M."
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
gridVariant="four-items-2x2-equal-grid"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
testimonials={[
{
id: "1", name: "Carlos M.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/professional-athlete-portrait-male-fitne-1773256979726-5009f852.png?_wi=2", imageAlt: "Carlos M."
},
{
id: "2", name: "Beatriz R.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/fit-female-athlete-portrait-determined-e-1773256980310-c05dce2f.png?_wi=2", imageAlt: "Beatriz R."
},
{
id: "3", name: "Diego P.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/athletic-male-trainer-portrait-confident-1773256979906-c5e05a88.png?_wi=2", imageAlt: "Diego P."
},
{
id: "4", name: "Juliana T.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/female-fitness-coach-portrait-profession-1773256979710-97e8b5fe.png?_wi=2", imageAlt: "Juliana T."
},
{
id: "5", name: "Lucas F.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/young-athlete-male-portrait-energetic-ex-1773256982698-63e4e494.png", imageAlt: "Lucas F."
},
{
id: "6", name: "Marina S.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/female-athlete-portrait-fit-build-profes-1773256980134-0faaa8fa.png", imageAlt: "Marina S."
}
]}
cardTitle="Mais de 150 mil atletas já transformaram seu corpo com FitFlow Pro"
cardTag="Veja o que eles dizem"
cardTagIcon={Star}
cardAnimation="blur-reveal"
useInvertedBackground={false}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
testimonials={[
{
id: "1", name: "Carlos M.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/professional-athlete-portrait-male-fitne-1773256979726-5009f852.png?_wi=2", imageAlt: "Carlos M."
},
{
id: "2", name: "Beatriz R.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/fit-female-athlete-portrait-determined-e-1773256980310-c05dce2f.png?_wi=2", imageAlt: "Beatriz R."
},
{
id: "3", name: "Diego P.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/athletic-male-trainer-portrait-confident-1773256979906-c5e05a88.png?_wi=2", imageAlt: "Diego P."
},
{
id: "4", name: "Juliana T.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/female-fitness-coach-portrait-profession-1773256979710-97e8b5fe.png?_wi=2", imageAlt: "Juliana T."
},
{
id: "5", name: "Lucas F.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/young-athlete-male-portrait-energetic-ex-1773256982698-63e4e494.png", imageAlt: "Lucas F."
},
{
id: "6", name: "Marina S.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/female-athlete-portrait-fit-build-profes-1773256980134-0faaa8fa.png", imageAlt: "Marina S."
}
]}
cardTitle="Mais de 150 mil atletas já transformaram seu corpo com FitFlow Pro"
cardTag="Veja o que eles dizem"
cardTagIcon={Star}
cardAnimation="blur-reveal"
useInvertedBackground={false}
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
title="Confiado pelos Maiores Aplicativos e Plataformas de Fitness"
description="FitFlow Pro integra-se perfeitamente com os ecossistemas de saúde mais populares do mundo."
tag="Parcerias Premium"
tagIcon={Zap}
names={[
"Apple Fitness", "Strava", "Fitbit", "Google Fit", "Peloton", "MyFitnessPal", "Garmin", "Nike Training"
]}
logos={[
"http://img.b2bpic.net/free-vector/heart-love-logo_126523-2763.jpg", "http://img.b2bpic.net/free-photo/woman-with-phone-sportswear_1303-8805.jpg", "http://img.b2bpic.net/free-vector/flat-design-fitness-trackers-heart-rate-menu_23-2148515781.jpg", "http://img.b2bpic.net/free-photo/close-up-woman-holding-phone_23-2148889655.jpg", "http://img.b2bpic.net/free-photo/close-up-man-using-phone-while-electric-bike_23-2149098678.jpg", "http://img.b2bpic.net/free-vector/fitness-trackers-concept_23-2148527033.jpg", "http://img.b2bpic.net/free-photo/cropped-view-sexy-bodybuilder-showing-thumbs-up_1153-6281.jpg", "http://img.b2bpic.net/free-photo/phone-muscular-hand-guy-sitting-city-morning-he-holds-bottle-water-headphones_197531-1155.jpg"
]}
textboxLayout="default"
useInvertedBackground={false}
speed={40}
showCard={true}
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
title="Confiado pelos Maiores Aplicativos e Plataformas de Fitness"
description="FitFlow Pro integra-se perfeitamente com os ecossistemas de saúde mais populares do mundo."
tag="Parcerias Premium"
tagIcon={Zap}
logos={[
"http://img.b2bpic.net/free-vector/heart-love-logo_126523-2763.jpg", "http://img.b2bpic.net/free-photo/woman-with-phone-sportswear_1303-8805.jpg", "http://img.b2bpic.net/free-vector/flat-design-fitness-trackers-heart-rate-menu_23-2148515781.jpg", "http://img.b2bpic.net/free-photo/close-up-woman-holding-phone_23-2148889655.jpg", "http://img.b2bpic.net/free-photo/close-up-man-using-phone-while-electric-bike_23-2149098678.jpg", "http://img.b2bpic.net/free-vector/fitness-trackers-concept_23-2148527033.jpg", "http://img.b2bpic.net/free-photo/cropped-view-sexy-bodybuilder-showing-thumbs-up_1153-6281.jpg", "http://img.b2bpic.net/free-photo/phone-muscular-hand-guy-sitting-city-morning-he-holds-bottle-water-headphones_197531-1155.jpg"
]}
names={[
"Apple Fitness", "Strava", "Fitbit", "Google Fit", "Peloton", "MyFitnessPal", "Garmin", "Nike Training"
]}
textboxLayout="default"
useInvertedBackground={false}
speed={40}
showCard={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Pronto para transformar seu corpo? Começar seu teste gratuito de 30 dias agora e veja por que 150 mil atletas confiam em FitFlow Pro."
animationType="entrance-slide"
buttons={[
{ text: "Começar Teste Grátis", href: "contact" },
{ text: "Conversar com Especialista", href: "#contact" }
]}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Pronto para transformar seu corpo? Começar seu teste gratuito de 30 dias agora e veja por que 150 mil atletas confiam em FitFlow Pro."
animationType="entrance-slide"
buttons={[
{ text: "Começar Teste Grátis", href: "contact" },
{ text: "Conversar com Especialista", href: "#contact" }
]}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{ label: "Dashboard", href: "#dashboard" },
{ label: "Treino", href: "#training" },
{ label: "Nutrição", href: "#nutrition" }
]
},
{
items: [
{ label: "Cardio Hub", href: "#cardio" },
{ label: "Comunidade", href: "#community" },
{ label: "Perfil", href: "#profile" }
]
},
{
items: [
{ label: "Blog", href: "#blog" },
{ label: "Ajuda", href: "#help" },
{ label: "Suporte", href: "#support" }
]
},
{
items: [
{ label: "Privacidade", href: "#privacy" },
{ label: "Termos", href: "#terms" },
{ label: "Contato", href: "#contact" }
]
}
]}
logoText="FitFlow Pro"
/>
</div>
</ThemeProvider>
</WorkoutDataIntegration>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{ label: "Dashboard", href: "#dashboard" },
{ label: "Treino", href: "#training" },
{ label: "Nutrição", href: "#nutrition" }
]
},
{
items: [
{ label: "Cardio Hub", href: "#cardio" },
{ label: "Comunidade", href: "#community" },
{ label: "Perfil", href: "#profile" }
]
},
{
items: [
{ label: "Blog", href: "#blog" },
{ label: "Ajuda", href: "#help" },
{ label: "Suporte", href: "#support" }
]
},
{
items: [
{ label: "Privacidade", href: "#privacy" },
{ label: "Termos", href: "#terms" },
{ label: "Contato", href: "#contact" }
]
}
]}
logoText="FitFlow Pro"
/>
</div>
</ThemeProvider>
);
}
}

483
src/app/signup/page.tsx
View File

@@ -2,91 +2,139 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import { useState } from "react";
import { Eye, EyeOff, Mail, Lock, User, CheckCircle2, AlertCircle } from 'lucide-react';
import Input from '@/components/form/Input';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Mail, Lock, User, AlertCircle, Check, ArrowRight } from 'lucide-react';
import { useState } from 'react';
interface FormErrors {
[key: string]: string;
}
interface SignupFormData {
name: string;
email: string;
password: string;
confirmPassword: string;
agreedToTerms: boolean;
}
export default function SignupPage() {
const [formData, setFormData] = useState({
name: "", email: "", password: "", confirmPassword: ""
const [formData, setFormData] = useState<SignupFormData>({
name: '',
email: '',
password: '',
confirmPassword: '',
agreedToTerms: false
});
const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const [errors, setErrors] = useState<{ [key: string]: string }>({});
const [isSubmitted, setIsSubmitted] = useState(false);
const [passwordStrength, setPasswordStrength] = useState<"weak" | "medium" | "strong" | "">("");
const [errors, setErrors] = useState<FormErrors>({});
const [isSubmitting, setIsSubmitting] = useState(false);
const [passwordStrength, setPasswordStrength] = useState(0);
const calculatePasswordStrength = (pwd: string): "weak" | "medium" | "strong" | "" => {
if (!pwd) return "";
if (pwd.length < 8) return "weak";
if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{8}$/.test(pwd)) return "strong";
return "medium";
};
const handleInputChange = (field: string, value: string) => {
setFormData(prev => ({
...prev,
[field]: value
}));
if (field === "password") {
setPasswordStrength(calculatePasswordStrength(value));
}
const calculatePasswordStrength = (password: string) => {
let strength = 0;
if (password.length >= 8) strength++;
if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
if (/\d/.test(password)) strength++;
if (/[^a-zA-Z\d]/.test(password)) strength++;
setPasswordStrength(strength);
};
const validateForm = () => {
const newErrors: { [key: string]: string } = {};
const newErrors: FormErrors = {};
if (!formData.name.trim()) {
newErrors.name = "Nome é obrigatório";
} else if (formData.name.trim().length < 2) {
newErrors.name = "Nome deve ter no mínimo 2 caracteres";
newErrors.name = 'Nome é obrigatório';
} else if (formData.name.length < 2) {
newErrors.name = 'Nome deve ter pelo menos 2 caracteres';
}
if (!formData.email) {
newErrors.email = "Email é obrigatório";
newErrors.email = 'Email é obrigatório';
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
newErrors.email = "Email inválido";
newErrors.email = 'Email inválido';
}
if (!formData.password) {
newErrors.password = "Senha é obrigatória";
newErrors.password = 'Senha é obrigatória';
} else if (formData.password.length < 8) {
newErrors.password = "Senha deve ter no mínimo 8 caracteres";
newErrors.password = 'Senha deve ter pelo menos 8 caracteres';
}
if (formData.password !== formData.confirmPassword) {
newErrors.confirmPassword = "As senhas não correspondem";
newErrors.confirmPassword = 'As senhas não correspondem';
}
if (!formData.agreedToTerms) {
newErrors.agreedToTerms = 'Você deve aceitar os termos e condições';
}
return newErrors;
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const newErrors = validateForm();
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value, type, checked } = e.target;
const newValue = type === 'checkbox' ? checked : value;
if (Object.keys(newErrors).length === 0) {
setIsSubmitted(true);
console.log("Signup attempt:", formData);
setTimeout(() => {
setIsSubmitted(false);
}, 2000);
setFormData(prev => ({
...prev,
[name]: newValue
}));
if (errors[name]) {
setErrors(prev => ({
...prev,
[name]: ''
}));
}
if (name === 'password') {
calculatePasswordStrength(value);
}
};
const getStrengthColor = () => {
switch (passwordStrength) {
case "weak":
return "text-red-500";
case "medium":
return "text-yellow-500";
case "strong":
return "text-green-500";
default:
return "text-foreground/30";
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!validateForm()) {
return;
}
setIsSubmitting(true);
try {
await new Promise(resolve => setTimeout(resolve, 1500));
console.log('Signup attempt:', formData);
alert('Conta criada com sucesso! Faça login para continuar.');
setFormData({
name: '',
email: '',
password: '',
confirmPassword: '',
agreedToTerms: false
});
setPasswordStrength(0);
} catch (error) {
setErrors({ submit: 'Erro ao criar conta. Tente novamente.' });
} finally {
setIsSubmitting(false);
}
};
const getPasswordStrengthColor = () => {
if (passwordStrength === 0) return 'bg-gray-300';
if (passwordStrength === 1) return 'bg-red-500';
if (passwordStrength === 2) return 'bg-yellow-500';
if (passwordStrength === 3) return 'bg-blue-500';
return 'bg-green-500';
};
const getPasswordStrengthLabel = () => {
if (passwordStrength === 0) return '';
if (passwordStrength === 1) return 'Fraca';
if (passwordStrength === 2) return 'Média';
if (passwordStrength === 3) return 'Forte';
return 'Muito Forte';
};
return (
@@ -106,168 +154,275 @@ export default function SignupPage() {
<NavbarStyleCentered
navItems={[
{ name: "Dashboard", id: "/" },
{ name: "Treino", id: "training" },
{ name: "Nutrição", id: "nutrition" },
{ name: "Comunidade", id: "community" },
{ name: "Perfil", id: "profile" }
{ name: "Sobre", id: "#hero" },
{ name: "Features", id: "#onboarding" },
{ name: "Contato", id: "#contact" },
{ name: "Login", id: "/login" }
]}
button={{ text: "Entrar", href: "/login" }}
button={{ text: "Criar Conta", href: "/signup" }}
brandName="FitFlow Pro"
/>
</div>
<div className="min-h-[calc(100vh-80px)] flex items-center justify-center py-12 px-4">
<div className="w-full max-w-md">
<div className="bg-card rounded-3xl shadow-lg p-8 border border-accent/10">
<div className="mb-8">
<h1 className="text-3xl font-extrabold text-foreground mb-2">Começar Agora</h1>
<p className="text-foreground/70">Crie sua conta e inicie sua transformação</p>
</div>
<div id="signup" data-section="signup" className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md space-y-8">
<div className="text-center space-y-3">
<h1 className="text-4xl font-extrabold tracking-tight">Comece sua jornada</h1>
<p className="text-base text-gray-600 dark:text-gray-400">Crie sua conta FitFlow Pro e transforme seu corpo</p>
</div>
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<div className="flex items-center gap-2">
<User size={16} />
Nome Completo
</div>
<div className="bg-card rounded-2xl border border-primary-cta/20 p-8 shadow-lg">
<form onSubmit={handleSubmit} className="space-y-5">
{/* Name Field */}
<div className="space-y-2">
<label htmlFor="name" className="block text-sm font-medium text-foreground">
Nome Completo
</label>
<Input
value={formData.name}
onChange={(value) => handleInputChange("name", value)}
type="text"
placeholder="Seu nome"
required
className={errors.name ? "border-red-500" : ""}
/>
<div className="relative">
<User className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
<input
id="name"
name="name"
type="text"
value={formData.name}
onChange={handleChange}
placeholder="Seu nome"
className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
errors.name
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 focus:ring-primary-cta'
}`}
/>
</div>
{errors.name && (
<div className="flex items-center gap-1 text-red-500 text-sm mt-1">
<AlertCircle size={14} />
<div className="flex items-center gap-2 text-red-500 text-sm">
<AlertCircle className="w-4 h-4" />
{errors.name}
</div>
)}
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<div className="flex items-center gap-2">
<Mail size={16} />
Email
</div>
{/* Email Field */}
<div className="space-y-2">
<label htmlFor="email" className="block text-sm font-medium text-foreground">
Email
</label>
<Input
value={formData.email}
onChange={(value) => handleInputChange("email", value)}
type="email"
placeholder="seu@email.com"
required
className={errors.email ? "border-red-500" : ""}
/>
<div className="relative">
<Mail className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
<input
id="email"
name="email"
type="email"
value={formData.email}
onChange={handleChange}
placeholder="seu@email.com"
className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
errors.email
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 focus:ring-primary-cta'
}`}
/>
</div>
{errors.email && (
<div className="flex items-center gap-1 text-red-500 text-sm mt-1">
<AlertCircle size={14} />
<div className="flex items-center gap-2 text-red-500 text-sm">
<AlertCircle className="w-4 h-4" />
{errors.email}
</div>
)}
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<div className="flex items-center gap-2">
<Lock size={16} />
Senha
</div>
{/* Password Field */}
<div className="space-y-2">
<label htmlFor="password" className="block text-sm font-medium text-foreground">
Senha
</label>
<div className="relative">
<Input
<Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
<input
id="password"
name="password"
type="password"
value={formData.password}
onChange={(value) => handleInputChange("password", value)}
type={showPassword ? "text" : "password"}
placeholder="••••••••"
required
className={errors.password ? "border-red-500" : "pr-10"}
onChange={handleChange}
placeholder="••••••••••"
className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
errors.password
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 focus:ring-primary-cta'
}`}
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground/50 hover:text-foreground transition-colors"
aria-label={showPassword ? "Ocultar senha" : "Mostrar senha"}
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
{passwordStrength && (
<div className={`flex items-center gap-1 text-xs mt-2 ${getStrengthColor()}`}>
<CheckCircle2 size={12} />
Força: {passwordStrength === "weak" ? "Fraca" : passwordStrength === "medium" ? "Média" : "Forte"}
{formData.password && (
<div className="space-y-2">
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 overflow-hidden">
<div
className={`h-full transition-all ${getPasswordStrengthColor()}`}
style={{ width: `${(passwordStrength / 4) * 100}%` }}
></div>
</div>
<p className="text-xs text-gray-600 dark:text-gray-400">
Força: <span className="font-semibold">{getPasswordStrengthLabel()}</span>
</p>
</div>
)}
{errors.password && (
<div className="flex items-center gap-1 text-red-500 text-sm mt-1">
<AlertCircle size={14} />
<div className="flex items-center gap-2 text-red-500 text-sm">
<AlertCircle className="w-4 h-4" />
{errors.password}
</div>
)}
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<div className="flex items-center gap-2">
<Lock size={16} />
Confirmar Senha
</div>
{/* Confirm Password Field */}
<div className="space-y-2">
<label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground">
Confirmar Senha
</label>
<div className="relative">
<Input
<Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
<input
id="confirmPassword"
name="confirmPassword"
type="password"
value={formData.confirmPassword}
onChange={(value) => handleInputChange("confirmPassword", value)}
type={showConfirmPassword ? "text" : "password"}
placeholder="••••••••"
required
className={errors.confirmPassword ? "border-red-500" : "pr-10"}
onChange={handleChange}
placeholder="••••••••••"
className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
errors.confirmPassword
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 focus:ring-primary-cta'
}`}
/>
<button
type="button"
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground/50 hover:text-foreground transition-colors"
aria-label={showConfirmPassword ? "Ocultar senha" : "Mostrar senha"}
>
{showConfirmPassword ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
{formData.confirmPassword && formData.password === formData.confirmPassword && !errors.confirmPassword && (
<div className="flex items-center gap-2 text-green-500 text-sm">
<Check className="w-4 h-4" />
Senhas correspondem
</div>
)}
{errors.confirmPassword && (
<div className="flex items-center gap-1 text-red-500 text-sm mt-1">
<AlertCircle size={14} />
<div className="flex items-center gap-2 text-red-500 text-sm">
<AlertCircle className="w-4 h-4" />
{errors.confirmPassword}
</div>
)}
</div>
{/* Terms Checkbox */}
<div className="space-y-2">
<div className="flex items-start gap-3">
<input
id="agreedToTerms"
name="agreedToTerms"
type="checkbox"
checked={formData.agreedToTerms}
onChange={handleChange}
className="w-5 h-5 mt-0.5 rounded border-gray-300 accent-primary-cta cursor-pointer"
/>
<label htmlFor="agreedToTerms" className="text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
Concordo com os{' '}
<a href="#" className="text-primary-cta hover:underline font-semibold">
termos de serviço
</a>
{' '}e{' '}
<a href="#" className="text-primary-cta hover:underline font-semibold">
política de privacidade
</a>
</label>
</div>
{errors.agreedToTerms && (
<div className="flex items-center gap-2 text-red-500 text-sm">
<AlertCircle className="w-4 h-4" />
{errors.agreedToTerms}
</div>
)}
</div>
{/* Submit Errors */}
{errors.submit && (
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3 flex items-center gap-2 text-red-700 dark:text-red-400 text-sm">
<AlertCircle className="w-4 h-4 flex-shrink-0" />
{errors.submit}
</div>
)}
{/* Submit Button */}
<button
type="submit"
disabled={isSubmitted}
className="w-full py-3 px-4 bg-primary-cta hover:opacity-90 disabled:opacity-50 text-white font-semibold rounded-full transition-all duration-300 transform hover:scale-105"
disabled={isSubmitting}
className="w-full bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-2.5 rounded-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isSubmitted ? "Criando conta..." : "Criar Conta"}
{isSubmitting ? 'Criando conta...' : 'Criar Conta'}
{!isSubmitting && <ArrowRight className="w-4 h-4" />}
</button>
</form>
<div className="mt-6 text-center text-sm text-foreground/70">
<p>
Já tem conta?{" "}
<a href="/login" className="text-primary-cta font-semibold hover:underline">
Fazer login
</a>
</p>
{/* Divider */}
<div className="mt-6 relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-card text-gray-500">ou continue com</span>
</div>
</div>
<div className="mt-6 pt-6 border-t border-accent/10 text-center text-xs text-foreground/50">
<p>Teste gratuito por 30 dias. Sem cartão de crédito necessário.</p>
<p className="mt-2">Ao criar uma conta, você concorda com nossos Termos de Serviço e Política de Privacidade.</p>
{/* Social Signup Buttons */}
<div className="mt-6 space-y-3">
<button className="w-full bg-background hover:bg-gray-50 dark:hover:bg-gray-800 border border-gray-300 dark:border-gray-600 text-foreground font-medium py-2.5 rounded-lg transition-all">
Google
</button>
<button className="w-full bg-background hover:bg-gray-50 dark:hover:bg-gray-800 border border-gray-300 dark:border-gray-600 text-foreground font-medium py-2.5 rounded-lg transition-all">
Apple
</button>
</div>
</div>
{/* Login Link */}
<p className="text-center text-gray-600 dark:text-gray-400 text-sm">
Já tem conta?{' '}
<a href="/login" className="text-primary-cta hover:text-primary-cta/80 font-semibold transition-colors">
Fazer login
</a>
</p>
</div>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{ label: "Home", href: "/" },
{ label: "Sobre", href: "/#hero" },
{ label: "Features", href: "/#onboarding" }
]
},
{
items: [
{ label: "Blog", href: "#" },
{ label: "Ajuda", href: "#" },
{ label: "Suporte", href: "#" }
]
},
{
items: [
{ label: "Privacidade", href: "#" },
{ label: "Termos", href: "#" },
{ label: "Contato", href: "#" }
]
},
{
items: [
{ label: "Login", href: "/login" },
{ label: "Signup", href: "/signup" },
{ label: "Dashboard", href: "/" }
]
}
]}
logoText="FitFlow Pro"
/>
</div>
</ThemeProvider>
);
}
}

53
src/components/sections/feature/FeatureCardTwentyFiveWithSaving.tsx Normal file
View File

@@ -0,0 +1,53 @@
'use client';
import FeatureCardTwentyFive from './FeatureCardTwentyFive';
interface FeatureCardTwentyFiveWithSavingProps {
title: string;
description: string;
tag?: string;
tagIcon?: any;
features: Array<{
title: string;
description: string;
icon: any;
mediaItems: Array<{ imageSrc: string; imageAlt: string }>;
}>;
animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
useInvertedBackground: boolean;
onFeatureInteraction?: (featureData: any) => void;
workoutType?: 'cardio' | 'training';
}
export function FeatureCardTwentyFiveWithSaving({
title,
description,
tag,
tagIcon,
features,
animationType,
textboxLayout,
useInvertedBackground,
onFeatureInteraction,
workoutType,
}: FeatureCardTwentyFiveWithSavingProps) {
const handleFeatureInteraction = (featureIndex: number, data?: any) => {
onFeatureInteraction?.(data);
};
return (
<FeatureCardTwentyFive
title={title}
description={description}
tag={tag}
tagIcon={tagIcon}
features={features}
animationType={animationType}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
/>
);
}
export default FeatureCardTwentyFiveWithSaving;

70
src/components/sections/metrics/MetricCardFourteenWithSaving.tsx Normal file
View File

@@ -0,0 +1,70 @@
'use client';
import { useWorkoutStorage } from '@/hooks/useWorkoutStorage';
import MetricCardFourteen from './MetricCardFourteen';
import { useEffect, useState } from 'react';
interface MetricCardFourteenWithSavingProps {
title: string;
tag: string;
tagAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
metrics: Array<{
id: string;
value: string;
description: string;
}>;
metricsAnimation: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
useInvertedBackground: boolean;
}
export function MetricCardFourteenWithSaving({
title,
tag,
tagAnimation,
metrics,
metricsAnimation,
useInvertedBackground,
}: MetricCardFourteenWithSavingProps) {
const { metrics: userMetrics, updateMetrics } = useWorkoutStorage();
const [displayMetrics, setDisplayMetrics] = useState(metrics);
useEffect(() => {
if (userMetrics) {
// Dynamically update metrics based on saved data
const updatedMetrics = metrics.map(metric => {
let value = metric.value;
if (metric.id === '1' && userMetrics.totalDistance > 0) {
// Update steps/distance metric
value = `${Math.round(userMetrics.totalDistance).toLocaleString()}+`;
} else if (metric.id === '2' && userMetrics.totalWeight > 0) {
// Update volume metric
value = `${Math.round(userMetrics.totalWeight)} kg`;
} else if (metric.id === '3' && userMetrics.totalDistance > 0) {
// Update distance metric
value = `${Math.round(userMetrics.totalDistance)}+ km`;
} else if (metric.id === '4' && userMetrics.consistency > 0) {
// Update consistency metric
value = `${userMetrics.consistency} days`;
}
return { ...metric, value };
});
setDisplayMetrics(updatedMetrics);
}
}, [userMetrics, metrics]);
return (
<MetricCardFourteen
title={title}
tag={tag}
tagAnimation={tagAnimation}
metrics={displayMetrics}
metricsAnimation={metricsAnimation}
useInvertedBackground={useInvertedBackground}
/>
);
}
export default MetricCardFourteenWithSaving;

68
src/components/sections/pricing/PricingCardOneWithSaving.tsx Normal file
View File

@@ -0,0 +1,68 @@
'use client';
import PricingCardOne from './PricingCardOne';
interface NutritionPlan {
id: string;
badge: string;
badgeIcon?: any;
price: string;
subtitle: string;
features: string[];
}
interface PricingCardOneWithSavingProps {
title: string;
description: string;
tag?: string;
tagIcon?: any;
plans: NutritionPlan[];
animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
useInvertedBackground: boolean;
onNutritionPlanSelected?: (planData: any) => void;
}
export function PricingCardOneWithSaving({
title,
description,
tag,
tagIcon,
plans,
animationType,
textboxLayout,
useInvertedBackground,
onNutritionPlanSelected,
}: PricingCardOneWithSavingProps) {
const handlePlanSelection = (planId: string, planBadge: string) => {
const nutritionData = {
type: 'nutrition' as const,
date: new Date().toISOString().split('T')[0],
data: {
plan: planBadge,
planId,
selectedAt: Date.now(),
},
};
onNutritionPlanSelected?.(nutritionData);
};
const enhancedPlans = plans.map(plan => ({
...plan,
}));
return (
<PricingCardOne
title={title}
description={description}
tag={tag}
tagIcon={tagIcon}
plans={enhancedPlans as any}
animationType={animationType}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
/>
);
}
export default PricingCardOneWithSaving;

83
src/components/sections/product/ProductCardOneWithSaving.tsx Normal file
View File

@@ -0,0 +1,83 @@
'use client';
import ProductCardOne from './ProductCardOne';
interface ProductCardOneWithSavingProps {
title: string;
description: string;
tag?: string;
tagIcon?: any;
products: Array<{
id: string;
name: string;
price: string;
imageSrc: string;
imageAlt?: string;
onFavorite?: () => void;
onProductClick?: () => void;
isFavorited?: boolean;
}>;
animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
useInvertedBackground: boolean;
gridVariant:
| 'uniform-all-items-equal'
| 'bento-grid'
| 'bento-grid-inverted'
| 'two-columns-alternating-heights'
| 'asymmetric-60-wide-40-narrow'
| 'three-columns-all-equal-width'
| 'four-items-2x2-equal-grid'
| 'one-large-right-three-stacked-left'
| 'items-top-row-full-width-bottom'
| 'full-width-top-items-bottom-row'
| 'one-large-left-three-stacked-right';
onWorkoutStart?: (workoutData: any) => void;
}
export function ProductCardOneWithSaving({
title,
description,
tag,
tagIcon,
products,
animationType,
textboxLayout,
useInvertedBackground,
gridVariant,
onWorkoutStart,
}: ProductCardOneWithSavingProps) {
const handleProductClick = (productId: string, productName: string) => {
const workoutData = {
type: 'training' as const,
date: new Date().toISOString().split('T')[0],
data: {
workout: productName,
startTime: Date.now(),
productId,
},
};
onWorkoutStart?.(workoutData);
};
const enhancedProducts = products.map(product => ({
...product,
onProductClick: () => handleProductClick(product.id, product.name),
}));
return (
<ProductCardOne
title={title}
description={description}
tag={tag}
tagIcon={tagIcon}
products={enhancedProducts}
animationType={animationType}
textboxLayout={textboxLayout}
useInvertedBackground={useInvertedBackground}
gridVariant={gridVariant}
/>
);
}
export default ProductCardOneWithSaving;

120
src/hooks/useWorkoutStorage.ts Normal file
View File

@@ -0,0 +1,120 @@
'use client';
import { useState, useCallback, useEffect } from 'react';
import { WorkoutStorageService, WorkoutSession, UserMetrics } from '@/lib/storage/workoutStorage';
export function useWorkoutStorage() {
const [workouts, setWorkouts] = useState<WorkoutSession[]>([]);
const [metrics, setMetrics] = useState<UserMetrics | null>(null);
const [isLoading, setIsLoading] = useState(true);
// Load initial data
useEffect(() => {
setIsLoading(true);
try {
const loadedWorkouts = WorkoutStorageService.getWorkoutSessions();
const loadedMetrics = WorkoutStorageService.getMetrics();
setWorkouts(loadedWorkouts);
setMetrics(loadedMetrics);
} finally {
setIsLoading(false);
}
}, []);
const saveWorkout = useCallback((session: Omit<WorkoutSession, 'id' | 'createdAt'>) => {
try {
const saved = WorkoutStorageService.saveWorkoutSession(session);
setWorkouts(prev => [...prev, saved]);
// Recalculate metrics
const updated = WorkoutStorageService.calculateMetricsFromSessions();
setMetrics(updated);
return saved;
} catch (error) {
console.error('Error saving workout:', error);
return null;
}
}, []);
const updateWorkout = useCallback((id: string, updates: Partial<WorkoutSession>) => {
try {
const updated = WorkoutStorageService.updateWorkoutSession(id, updates);
if (updated) {
setWorkouts(prev => prev.map(w => w.id === id ? updated : w));
// Recalculate metrics
const newMetrics = WorkoutStorageService.calculateMetricsFromSessions();
setMetrics(newMetrics);
}
return updated;
} catch (error) {
console.error('Error updating workout:', error);
return null;
}
}, []);
const deleteWorkout = useCallback((id: string) => {
try {
const success = WorkoutStorageService.deleteWorkoutSession(id);
if (success) {
setWorkouts(prev => prev.filter(w => w.id !== id));
// Recalculate metrics
const updated = WorkoutStorageService.calculateMetricsFromSessions();
setMetrics(updated);
}
return success;
} catch (error) {
console.error('Error deleting workout:', error);
return false;
}
}, []);
const getWorkoutsByType = useCallback((type: WorkoutSession['type']) => {
return workouts.filter(w => w.type === type);
}, [workouts]);
const getWorkoutsByDate = useCallback((date: string) => {
return workouts.filter(w => w.date === date);
}, [workouts]);
const updateMetrics = useCallback((updates: Partial<UserMetrics>) => {
try {
const updated = WorkoutStorageService.updateMetrics(updates);
setMetrics(updated);
return updated;
} catch (error) {
console.error('Error updating metrics:', error);
return metrics;
}
}, [metrics]);
const clearAllData = useCallback(() => {
try {
WorkoutStorageService.clearAllData();
setWorkouts([]);
setMetrics({
totalWorkouts: 0,
totalDistance: 0,
totalCalories: 0,
totalWeight: 0,
consistency: 0,
lastUpdated: Date.now(),
});
} catch (error) {
console.error('Error clearing data:', error);
}
}, []);
return {
workouts,
metrics,
isLoading,
saveWorkout,
updateWorkout,
deleteWorkout,
getWorkoutsByType,
getWorkoutsByDate,
updateMetrics,
clearAllData,
};
}
export type UseWorkoutStorageReturn = ReturnType<typeof useWorkoutStorage>;

219
src/lib/storage/workoutStorage.ts
View File

@@ -1,54 +1,185 @@
export interface WorkoutSession {
// Workout and metrics persistence layer
interface WorkoutSession {
id: string;
type: 'cardio' | 'training' | 'nutrition';
date: string;
type: 'cardio' | 'strength' | 'flexibility' | 'nutrition';
duration: number;
calories?: number;
notes?: string;
data: Record<string, any>;
createdAt: number;
}
export interface UserMetrics {
interface UserMetrics {
totalWorkouts: number;
totalDistance: number;
totalCalories: number;
averageDuration: number;
totalWeight: number;
consistency: number; // days in a row
lastUpdated: number;
}
export async function saveWorkoutSession(session: Omit<WorkoutSession, 'id'>): Promise<WorkoutSession> {
return { id: '1', ...session };
const STORAGE_KEYS = {
WORKOUTS: 'fitflow_workouts',
METRICS: 'fitflow_metrics',
USER_PROFILE: 'fitflow_user_profile',
} as const;
export class WorkoutStorageService {
// Workout Session Management
static saveWorkoutSession(session: Omit<WorkoutSession, 'id' | 'createdAt'>): WorkoutSession {
try {
const sessions = this.getWorkoutSessions();
const newSession: WorkoutSession = {
id: `workout_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
...session,
createdAt: Date.now(),
};
sessions.push(newSession);
localStorage.setItem(STORAGE_KEYS.WORKOUTS, JSON.stringify(sessions));
return newSession;
} catch (error) {
console.error('Error saving workout session:', error);
throw error;
}
}
static getWorkoutSessions(): WorkoutSession[] {
try {
const data = localStorage.getItem(STORAGE_KEYS.WORKOUTS);
return data ? JSON.parse(data) : [];
} catch (error) {
console.error('Error retrieving workout sessions:', error);
return [];
}
}
static getWorkoutSessionsByType(type: WorkoutSession['type']): WorkoutSession[] {
const sessions = this.getWorkoutSessions();
return sessions.filter(session => session.type === type);
}
static getWorkoutSessionsByDate(date: string): WorkoutSession[] {
const sessions = this.getWorkoutSessions();
return sessions.filter(session => session.date === date);
}
static updateWorkoutSession(id: string, updates: Partial<WorkoutSession>): WorkoutSession | null {
try {
const sessions = this.getWorkoutSessions();
const index = sessions.findIndex(s => s.id === id);
if (index === -1) return null;
const updated = { ...sessions[index], ...updates, id: sessions[index].id, createdAt: sessions[index].createdAt };
sessions[index] = updated;
localStorage.setItem(STORAGE_KEYS.WORKOUTS, JSON.stringify(sessions));
return updated;
} catch (error) {
console.error('Error updating workout session:', error);
return null;
}
}
static deleteWorkoutSession(id: string): boolean {
try {
const sessions = this.getWorkoutSessions();
const filtered = sessions.filter(s => s.id !== id);
localStorage.setItem(STORAGE_KEYS.WORKOUTS, JSON.stringify(filtered));
return filtered.length < sessions.length;
} catch (error) {
console.error('Error deleting workout session:', error);
return false;
}
}
// Metrics Management
static saveMetrics(metrics: UserMetrics): void {
try {
localStorage.setItem(STORAGE_KEYS.METRICS, JSON.stringify(metrics));
} catch (error) {
console.error('Error saving metrics:', error);
}
}
static getMetrics(): UserMetrics {
try {
const data = localStorage.getItem(STORAGE_KEYS.METRICS);
if (!data) {
return {
totalWorkouts: 0,
totalDistance: 0,
totalCalories: 0,
totalWeight: 0,
consistency: 0,
lastUpdated: Date.now(),
};
}
return JSON.parse(data);
} catch (error) {
console.error('Error retrieving metrics:', error);
return {
totalWorkouts: 0,
totalDistance: 0,
totalCalories: 0,
totalWeight: 0,
consistency: 0,
lastUpdated: Date.now(),
};
}
}
static updateMetrics(updates: Partial<UserMetrics>): UserMetrics {
const current = this.getMetrics();
const updated: UserMetrics = { ...current, ...updates, lastUpdated: Date.now() };
this.saveMetrics(updated);
return updated;
}
// Calculated Metrics
static calculateMetricsFromSessions(): UserMetrics {
const sessions = this.getWorkoutSessions();
let totalDistance = 0;
let totalCalories = 0;
let totalWeight = 0;
sessions.forEach(session => {
if (session.data.distance) totalDistance += Number(session.data.distance) || 0;
if (session.data.calories) totalCalories += Number(session.data.calories) || 0;
if (session.data.weight) totalWeight += Number(session.data.weight) || 0;
});
return this.updateMetrics({
totalWorkouts: sessions.length,
totalDistance,
totalCalories,
totalWeight,
});
}
// Batch Operations
static clearAllData(): void {
try {
localStorage.removeItem(STORAGE_KEYS.WORKOUTS);
localStorage.removeItem(STORAGE_KEYS.METRICS);
localStorage.removeItem(STORAGE_KEYS.USER_PROFILE);
} catch (error) {
console.error('Error clearing data:', error);
}
}
static exportData(): { workouts: WorkoutSession[]; metrics: UserMetrics } {
return {
workouts: this.getWorkoutSessions(),
metrics: this.getMetrics(),
};
}
static importData(data: { workouts: WorkoutSession[]; metrics: UserMetrics }): void {
try {
localStorage.setItem(STORAGE_KEYS.WORKOUTS, JSON.stringify(data.workouts));
this.saveMetrics(data.metrics);
} catch (error) {
console.error('Error importing data:', error);
}
}
}
export async function getWorkoutSessions(): Promise<WorkoutSession[]> {
return [];
}
export async function updateWorkoutSession(id: string, session: Partial<WorkoutSession>): Promise<WorkoutSession> {
return { id, date: '', type: 'cardio', duration: 0, ...session };
}
export async function deleteWorkoutSession(id: string): Promise<void> {
// Delete implementation
}
export async function getWorkoutsByType(type: string): Promise<WorkoutSession[]> {
return [];
}
export async function getWorkoutsByDateRange(startDate: string, endDate: string): Promise<WorkoutSession[]> {
return [];
}
export async function saveUserMetrics(metrics: UserMetrics): Promise<void> {
// Save implementation
}
export async function getUserMetrics(): Promise<UserMetrics> {
return { totalWorkouts: 0, totalCalories: 0, averageDuration: 0 };
}
export async function updateUserMetrics(metrics: Partial<UserMetrics>): Promise<void> {
// Update implementation
}
export async function calculateMetricsFromSessions(sessions: WorkoutSession[]): Promise<UserMetrics> {
return { totalWorkouts: sessions.length, totalCalories: 0, averageDuration: 0 };
}
export type { WorkoutSession, UserMetrics };