Merge version_2 into main #5
@@ -2,179 +2,153 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import { Gauge, LayoutDashboard, LineChart, Scale, Dumbbell, CalendarDays, Library } from "lucide-react";
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import { Dumbbell, Zap, BarChart, ListTodo, CalendarDays, TrendingUp, Heart, Dumbbell as DumbbellIcon, Flame } from "lucide-react";
|
||||
|
||||
export default function DashboardPage() {
|
||||
// Dummy data for exercises and workouts
|
||||
const exerciseLibrary = [
|
||||
{
|
||||
id: "ex1", name: "Barbell Squats", price: "5 sets of 5 reps", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-person-performing-squats-with-a-barbell-1774476370803-5197824e.png?w=800&h=600", imageAlt: "Person performing barbell squats"},
|
||||
{
|
||||
id: "ex2", name: "Dumbbell Bicep Curls", price: "3 sets of 10-12 reps", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-man-doing-bicep-curls-with-dumbbells-1774476371191-03061219.png?w=800&h=600", imageAlt: "Man doing bicep curls with dumbbells"},
|
||||
{
|
||||
id: "ex3", name: "Push-ups", price: "4 sets to failure", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-person-doing-push-ups-on-the-gym-floor-1774476371147-aa6b4c6e.png?w=800&h=600", imageAlt: "Person doing push-ups on the gym floor"},
|
||||
{
|
||||
id: "ex4", name: "Yoga Flow", price: "30 minute session", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-woman-doing-yoga-on-a-mat-in-a-studio-1774476370535-61266b74.png?w=800&h=600", imageAlt: "Woman doing yoga on a mat in a studio"},
|
||||
{
|
||||
id: "ex5", name: "Plank", price: "3 sets of 60s hold", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-person-in-a-plank-position-on-a-gym-ma-1774476371216-950c0c05.png?w=800&h=600", imageAlt: "Person in a plank position"}
|
||||
];
|
||||
|
||||
const weeklySchedule = {
|
||||
Monday: [exerciseLibrary[0], exerciseLibrary[1]],
|
||||
Tuesday: [exerciseLibrary[3]],
|
||||
Wednesday: [exerciseLibrary[2], exerciseLibrary[4]],
|
||||
Thursday: [],
|
||||
Friday: [exerciseLibrary[0], exerciseLibrary[1], exerciseLibrary[2]],
|
||||
Saturday: [exerciseLibrary[3]],
|
||||
Sunday: [],
|
||||
};
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmall"
|
||||
background="noise"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="semibold"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmall"
|
||||
background="noise"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "home"},
|
||||
{
|
||||
name: "Features", id: "features"},
|
||||
{
|
||||
name: "Progress", id: "metrics"},
|
||||
{
|
||||
name: "Trainers", id: "team"},
|
||||
{
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
{
|
||||
name: "FAQ", id: "faq"},
|
||||
{
|
||||
name: "Pricing", id: "pricing"
|
||||
},
|
||||
{
|
||||
name: "Contact", id: "contact"
|
||||
}
|
||||
]}
|
||||
button={{
|
||||
text: "Start Your Journey", href: "/signup"}}
|
||||
brandName="FitForge AI"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-screen flex flex-col lg:flex-row bg-background">
|
||||
{/* Sidebar (simplified) */}
|
||||
<aside className="w-full lg:w-64 bg-card p-6 border-r border-accent/20 lg:min-h-screen">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-6">Dashboard</h2>
|
||||
<nav>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<a href="#overview" className="flex items-center gap-3 text-foreground hover:text-primary-cta transition-colors">
|
||||
<BarChart className="w-5 h-5" /> Overview
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#my-workouts" className="flex items-center gap-3 text-foreground hover:text-primary-cta transition-colors">
|
||||
<ListTodo className="w-5 h-5" /> My Workouts
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#exercises" className="flex items-center gap-3 text-foreground hover:text-primary-cta transition-colors">
|
||||
<Dumbbell className="w-5 h-5" /> Exercises
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#progress" className="flex items-center gap-3 text-foreground hover:text-primary-cta transition-colors">
|
||||
<TrendingUp className="w-5 h-5" /> Progress
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div id="dashboard-overview" data-section="dashboard-overview">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Real-time Progress Insights", description: "Visualize your gains, track key metrics, and stay motivated with dynamic charts and performance reports.", media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-sleek-dark-ui-dashboard-displaying-rea-1774476371465-f4675a84.png?_wi=2", imageAlt: "Dashboard showing progress tracking"},
|
||||
items: [
|
||||
{
|
||||
icon: LineChart,
|
||||
text: "Performance Trends"},
|
||||
{
|
||||
icon: Gauge,
|
||||
text: "Strength Metrics"},
|
||||
{
|
||||
icon: Scale,
|
||||
text: "Weight & Body Composition"},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "2", title: "Smart Workout Planning", description: "Access your custom AI-generated workout plans, adjust your schedule, and explore new exercises tailored to your goals.", media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/an-immersive-3d-workout-environment-rend-1774476371159-45f36be3.png?_wi=2", imageAlt: "3D workout environment in dashboard"},
|
||||
items: [
|
||||
{
|
||||
icon: Dumbbell,
|
||||
text: "Custom Workout Routines"},
|
||||
{
|
||||
icon: CalendarDays,
|
||||
text: "Flexible Scheduling"},
|
||||
{
|
||||
icon: Library,
|
||||
text: "Vast Exercise Library"},
|
||||
],
|
||||
reverse: true,
|
||||
}
|
||||
]}
|
||||
title="Your Personalized Fitness Hub"
|
||||
description="The FitForge AI Dashboard provides an intuitive overview of your progress, workouts, and nutrition, all in one place."
|
||||
tag="Intelligent Dashboard"
|
||||
tagIcon={LayoutDashboard}
|
||||
/>
|
||||
</div>
|
||||
{/* Main content */}
|
||||
<main className="flex-1 p-8">
|
||||
<h1 className="text-4xl font-extrabold text-foreground mb-8">Workout Planner</h1>
|
||||
|
||||
<div id="key-metrics" data-section="key-metrics">
|
||||
<MetricCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "1", title: "Workouts Completed", subtitle: "Last 30 days", category: "Training", value: "24"},
|
||||
{
|
||||
id: "2", title: "Calorie Burn", subtitle: "Average per session", category: "Activity", value: "650 kcal"},
|
||||
{
|
||||
id: "3", title: "Strength Gain", subtitle: "Overall improvement", category: "Progress", value: "12%"},
|
||||
{
|
||||
id: "4", title: "Consistency Score", subtitle: "Weekly average", category: "Habit", value: "90%"}
|
||||
]}
|
||||
title="Dashboard Key Performance Indicators"
|
||||
description="At a glance, see how you're performing across crucial fitness metrics and stay on track with your ultimate body goals."
|
||||
/>
|
||||
</div>
|
||||
{/* Animated Stats */}
|
||||
<div id="overview" className="mb-12" data-section="overview">
|
||||
<MetricCardSeven
|
||||
animationType="blur-reveal"
|
||||
title="Your Fitness Progress"
|
||||
description="Track your journey, celebrate achievements, and stay motivated."
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "120", title: "Workouts Completed", items: ["Last Week: 5", "This Month: 20"]
|
||||
},
|
||||
{
|
||||
id: "m2", value: "5000+", title: "Calories Burned", items: ["Avg. per workout: 400", "Daily target: 600"]
|
||||
},
|
||||
{
|
||||
id: "m3", value: "+15%", title: "Strength Increase", items: ["Bench Press: +10kg", "Squat: +15kg"]
|
||||
},
|
||||
{
|
||||
id: "m4", value: "30", title: "Personal Bests", items: ["New max: Deadlift", "Faster run time"]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="more-features" data-section="more-features">
|
||||
<FeatureCardThree
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "AI Nutrition Insights", description: "Get smart recommendations for macro and micro-nutrient intake based on your activity and goals.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/an-abstract-glowing-ai-holographic-displ-1774476371379-fc4b75ed.png?_wi=2", imageAlt: "AI nutrition insights"},
|
||||
{
|
||||
id: "2", title: "Wearable Sync", description: "Integrate with your favorite fitness trackers to seamlessly sync data and get a holistic view of your health.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-sleek-dark-ui-dashboard-displaying-rea-1774476371465-f4675a84.png?_wi=3", imageAlt: "Wearable device integration"},
|
||||
{
|
||||
id: "3", title: "Community Challenges", description: "Participate in engaging challenges with the FitForge AI community, earn badges, and stay motivated.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-glowing-futuristic-trophy-or-badge-ico-1774476371090-bdc17671.png?_wi=1", imageAlt: "Community challenges"}
|
||||
]}
|
||||
title="Unlock Advanced Dashboard Capabilities"
|
||||
description="Beyond the basics, our dashboard offers sophisticated tools to fine-tune your fitness journey."
|
||||
/>
|
||||
</div>
|
||||
{/* Weekly Calendar */}
|
||||
<div id="my-workouts" className="mb-12" data-section="my-workouts">
|
||||
<h2 className="text-3xl font-bold text-foreground mb-6 flex items-center gap-3">
|
||||
<CalendarDays className="w-7 h-7" /> Weekly Schedule
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
{Object.entries(weeklySchedule).map(([day, exercises]) => (
|
||||
<div key={day} className="bg-card p-6 rounded-lg shadow-md border border-accent/20 transition-all duration-300 hover:scale-[1.01] hover:shadow-lg">
|
||||
<h3 className="text-xl font-semibold text-primary-cta mb-4 flex items-center gap-2">
|
||||
{day}
|
||||
</h3>
|
||||
{exercises.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{exercises.map((exercise) => (
|
||||
<div key={exercise.id} className="flex items-center gap-4 bg-background-accent p-3 rounded-md shadow-sm border border-accent/10">
|
||||
<img src={exercise.imageSrc} alt={exercise.imageAlt} className="w-16 h-16 object-cover rounded-md" />
|
||||
<div>
|
||||
<p className="font-medium text-foreground">{exercise.name}</p>
|
||||
<p className="text-sm text-foreground/80">{exercise.price}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-foreground/60 italic">No workouts planned.</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{
|
||||
label: "Pricing", href: "/pricing"},
|
||||
{
|
||||
label: "Features", href: "/features"},
|
||||
{
|
||||
label: "Dashboard", href: "/dashboard"}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About Us", href: "/about"},
|
||||
{
|
||||
label: "Trainers", href: "/trainers"},
|
||||
{
|
||||
label: "Contact", href: "/contact"}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{
|
||||
label: "Blog", href: "/blog"},
|
||||
{
|
||||
label: "Support", href: "/support"},
|
||||
{
|
||||
label: "FAQ", href: "/faq"}
|
||||
]
|
||||
}
|
||||
]}
|
||||
logoText="Build Your Ultimate Body"
|
||||
copyrightText="© 2024 Build Your Ultimate Body. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
{/* Exercise Library */}
|
||||
<div id="exercises" data-section="exercises">
|
||||
<h2 className="text-3xl font-bold text-foreground mb-6 flex items-center gap-3">
|
||||
<DumbbellIcon className="w-7 h-7" /> Exercise Library
|
||||
</h2>
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
title="Discover New Exercises"
|
||||
description="Explore a comprehensive library of exercises with detailed instructions and high-quality images."
|
||||
products={exerciseLibrary.map(ex => ({ ...ex, name: ex.name, price: ex.price }))} // Map dummy price to actual price for ProductCardOne
|
||||
uniformGridCustomHeightClasses="min-h-95 2xl:min-h-105"
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
112
src/app/login/page.tsx
Normal file
112
src/app/login/page.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import RotatedRaysBackground from '@/components/background/RotatedRaysBackground';
|
||||
import { Github, Google, Facebook } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function LoginPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmall"
|
||||
background="none"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<RotatedRaysBackground animated={true} showGrid={false} className="fixed inset-0 z-0" />
|
||||
<div className="relative z-10 min-h-screen flex flex-col items-center justify-center p-4">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Features", id: "/#features" },
|
||||
{ name: "Progress", id: "/progress-tracking" },
|
||||
{ name: "Trainers", id: "/trainers" },
|
||||
{ name: "Testimonials", id: "/#testimonials" },
|
||||
{ name: "FAQ", id: "/#faq" },
|
||||
{ name: "Pricing", id: "/#pricing" },
|
||||
{ name: "Contact", id: "/#contact" },
|
||||
{ name: "Login", id: "/login" },
|
||||
{ name: "Sign Up", id: "/signup" }
|
||||
]}
|
||||
button={{ text: "Start Your Journey", href: "/signup" }}
|
||||
brandName="FitForge AI"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-grow flex items-center justify-center w-full max-w-md">
|
||||
<div className="relative p-8 rounded-2xl shadow-xl border border-gray-800 bg-black bg-opacity-30 backdrop-filter backdrop-blur-lg transition-all duration-300 ease-in-out hover:shadow-neon focus-within:shadow-neon w-full">
|
||||
<h2 className="text-3xl font-bold mb-8 text-foreground text-center">Welcome Back!</h2>
|
||||
<form className="space-y-6">
|
||||
<div className="relative group">
|
||||
<input
|
||||
type="email"
|
||||
id="login-email"
|
||||
className="peer w-full p-3 bg-transparent border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-foreground placeholder-transparent transition-all duration-200"
|
||||
placeholder=" "
|
||||
required
|
||||
/>
|
||||
<label
|
||||
htmlFor="login-email"
|
||||
className="absolute left-3 -top-2.5 text-sm text-gray-400 bg-card px-1 transition-all duration-200 ease-in-out
|
||||
peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:bg-transparent
|
||||
peer-focus:-top-2.5 peer-focus:text-accent peer-focus:text-sm peer-focus:bg-card"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
</div>
|
||||
<div className="relative group">
|
||||
<input
|
||||
type="password"
|
||||
id="login-password"
|
||||
className="peer w-full p-3 bg-transparent border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-foreground placeholder-transparent transition-all duration-200"
|
||||
placeholder=" "
|
||||
required
|
||||
/>
|
||||
<label
|
||||
htmlFor="login-password"
|
||||
className="absolute left-3 -top-2.5 text-sm text-gray-400 bg-card px-1 transition-all duration-200 ease-in-out
|
||||
peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:bg-transparent
|
||||
peer-focus:-top-2.5 peer-focus:text-accent peer-focus:text-sm peer-focus:bg-card"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-primary-cta text-primary-cta-text py-3 rounded-lg hover:bg-opacity-90 transition-colors focus:outline-none focus:ring-2 focus:ring-accent text-lg font-semibold"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</form>
|
||||
<div className="text-center my-6 text-gray-400 text-sm">— Or continue with —</div>
|
||||
<div className="flex justify-center space-x-4 mb-6">
|
||||
<button className="p-3 border border-gray-700 rounded-full text-foreground hover:border-accent focus:outline-none focus:ring-2 focus:ring-accent transition-all duration-200">
|
||||
<Google size={24} className="text-white" />
|
||||
</button>
|
||||
<button className="p-3 border border-gray-700 rounded-full text-foreground hover:border-accent focus:outline-none focus:ring-2 focus:ring-accent transition-all duration-200">
|
||||
<Github size={24} className="text-white" />
|
||||
</button>
|
||||
<button className="p-3 border border-gray-700 rounded-full text-foreground hover:border-accent focus:outline-none focus:ring-2 focus:ring-accent transition-all duration-200">
|
||||
<Facebook size={24} className="text-white" />
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-center text-sm text-gray-400">
|
||||
Don't have an account? <Link href="/signup" className="text-accent hover:underline">Sign Up</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -12,12 +12,12 @@ import { Activity, Award, Gauge, Users } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmall"
|
||||
background="noise"
|
||||
background="aurora"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
@@ -32,19 +32,9 @@ export default function LandingPage() {
|
||||
{
|
||||
name: "Features", id: "/#features"},
|
||||
{
|
||||
name: "Progress", id: "/progress-tracking"},
|
||||
name: "About", id: "/#about"},
|
||||
{
|
||||
name: "Trainers", id: "/trainers"},
|
||||
{
|
||||
name: "Testimonials", id: "/#testimonials"},
|
||||
{
|
||||
name: "FAQ", id: "/#faq"},
|
||||
{
|
||||
name: "Pricing", id: "/#pricing"
|
||||
},
|
||||
{
|
||||
name: "Contact", id: "/#contact"
|
||||
}
|
||||
name: "Metrics", id: "/#metrics"}
|
||||
]}
|
||||
button={{
|
||||
text: "Start Your Journey", href: "/signup"}}
|
||||
@@ -117,7 +107,7 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "150%", title: "Strength Gain", description: "Average increase in key lifts across our community.", icon: Award,
|
||||
id: "1", value: "150%", title: "Strength Gain", description: "Average increase in key lifts across our community.", icon: Award
|
||||
},
|
||||
{
|
||||
id: "2", value: "8000+", title: "Workouts Logged", description: "Total workouts tracked on our platform.", icon: Activity
|
||||
@@ -130,4 +120,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -3,8 +3,9 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import { Activity, Award, Gauge, Users, Goal, Dumbbell } from "lucide-react";
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import TextNumberCount from '@/components/text/TextNumberCount';
|
||||
import { ArrowUpCircle, Target, Trophy } from "lucide-react";
|
||||
|
||||
export default function ProgressTrackingPage() {
|
||||
return (
|
||||
@@ -24,30 +25,14 @@ export default function ProgressTrackingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "/"
|
||||
},
|
||||
{
|
||||
name: "Features", id: "/#features"
|
||||
},
|
||||
{
|
||||
name: "Progress", id: "/progress-tracking"
|
||||
},
|
||||
{
|
||||
name: "Trainers", id: "/trainers"
|
||||
},
|
||||
{
|
||||
name: "Testimonials", id: "/#testimonials"
|
||||
},
|
||||
{
|
||||
name: "FAQ", id: "/#faq"
|
||||
},
|
||||
{
|
||||
name: "Pricing", id: "/#pricing"
|
||||
},
|
||||
{
|
||||
name: "Contact", id: "/#contact"
|
||||
}
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Features", id: "/#features" },
|
||||
{ name: "Progress", id: "/progress-tracking" },
|
||||
{ name: "Trainers", id: "/trainers" },
|
||||
{ name: "Testimonials", id: "/#testimonials" },
|
||||
{ name: "FAQ", id: "/#faq" },
|
||||
{ name: "Pricing", id: "/#pricing" },
|
||||
{ name: "Contact", id: "/#contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Start Your Journey", href: "/signup"
|
||||
@@ -56,28 +41,69 @@ export default function ProgressTrackingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="progress-hero" data-section="progress-hero">
|
||||
{/* Placeholder for a hero section specific to progress tracking */}
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
metrics={[
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "animated-grid"
|
||||
}}
|
||||
title="Your Fitness Journey, Visualized"
|
||||
description="Track every workout, measure your progress, and celebrate milestones with interactive dashboards and real-time insights."
|
||||
buttons={[
|
||||
{
|
||||
id: "1", value: "90%", title: "Goals Achieved", description: "Users successfully reaching their fitness targets.", icon: Goal
|
||||
text: "Start Tracking", href: "#metrics-summary"
|
||||
},
|
||||
{
|
||||
id: "2", value: "500k+", title: "Workouts Completed", description: "Total intense workout sessions tracked on the platform.", icon: Dumbbell
|
||||
}
|
||||
]}
|
||||
title="Your Progress, Our Priority"
|
||||
description="Visualize every step of your fitness journey with detailed analytics and motivating insights."
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BSIvIThKQcK006fPu1CF1lDCQ8/a-sleek-dark-ui-dashboard-displaying-rea-1774476371465-f4675a84.png?_wi=1"
|
||||
imageAlt="Sleek dashboard with real-time progress tracking"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Add more sections specific to progress tracking as needed */}
|
||||
<div id="metrics-summary" data-section="metrics-summary" className="py-20 bg-background-accent">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="text-4xl font-bold mb-12 text-foreground">Key Progress Metrics</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="bg-card p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
|
||||
<div className="text-primary-cta text-5xl font-bold mb-4 flex items-center justify-center">
|
||||
<ArrowUpCircle size={48} className="mr-4" />
|
||||
<TextNumberCount value={120} suffix="%" duration={2} animateOnScroll />
|
||||
</div>
|
||||
<p className="text-lg text-foreground-secondary">Strength Gain</p>
|
||||
</div>
|
||||
<div className="bg-card p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
|
||||
<div className="text-primary-cta text-5xl font-bold mb-4 flex items-center justify-center">
|
||||
<Target size={48} className="mr-4" />
|
||||
<TextNumberCount value={25000} duration={2.5} animateOnScroll format={{ notation: 'compact' }} />
|
||||
</div>
|
||||
<p className="text-lg text-foreground-secondary">Workouts Completed</p>
|
||||
</div>
|
||||
<div className="bg-card p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
|
||||
<div className="text-primary-cta text-5xl font-bold mb-4 flex items-center justify-center">
|
||||
<Trophy size={48} className="mr-4" />
|
||||
<TextNumberCount value={500} duration={3} animateOnScroll />
|
||||
</div>
|
||||
<p className="text-lg text-foreground-secondary">Milestones Achieved</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="interactive-charts" data-section="interactive-charts" className="py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<h2 className="text-4xl font-bold text-center mb-12 text-foreground">Interactive Performance Dashboards</h2>
|
||||
<p className="text-lg text-center text-foreground-secondary mb-12">
|
||||
(Interactive Recharts line, area, radial, and bar charts would be displayed here with glassmorphism tooltips and real-time updates.)
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8 h-[600px]">
|
||||
<div className="bg-card p-6 rounded-lg shadow-lg flex items-center justify-center text-foreground-secondary border border-accent/20 backdrop-filter backdrop-blur-md bg-opacity-70">Line Chart Placeholder</div>
|
||||
<div className="bg-card p-6 rounded-lg shadow-lg flex items-center justify-center text-foreground-secondary border border-accent/20 backdrop-filter backdrop-blur-md bg-opacity-70">Area Chart Placeholder</div>
|
||||
<div className="bg-card p-6 rounded-lg shadow-lg flex items-center justify-center text-foreground-secondary border border-accent/20 backdrop-filter backdrop-blur-md bg-opacity-70">Bar Chart Placeholder</div>
|
||||
<div className="bg-card p-6 rounded-lg shadow-lg flex items-center justify-center text-foreground-secondary border border-accent/20 backdrop-filter backdrop-blur-md bg-opacity-70">Radial Bar Chart Placeholder</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
146
src/app/signup/page.tsx
Normal file
146
src/app/signup/page.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import RotatedRaysBackground from '@/components/background/RotatedRaysBackground';
|
||||
import { Github, Google, Facebook } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function SignupPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmall"
|
||||
background="none"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<RotatedRaysBackground animated={true} showGrid={false} className="fixed inset-0 z-0" />
|
||||
<div className="relative z-10 min-h-screen flex flex-col items-center justify-center p-4">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Features", id: "/#features" },
|
||||
{ name: "Progress", id: "/progress-tracking" },
|
||||
{ name: "Trainers", id: "/trainers" },
|
||||
{ name: "Testimonials", id: "/#testimonials" },
|
||||
{ name: "FAQ", id: "/#faq" },
|
||||
{ name: "Pricing", id: "/#pricing" },
|
||||
{ name: "Contact", id: "/#contact" },
|
||||
{ name: "Login", id: "/login" },
|
||||
{ name: "Sign Up", id: "/signup" }
|
||||
]}
|
||||
button={{ text: "Start Your Journey", href: "/signup" }}
|
||||
brandName="FitForge AI"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-grow flex items-center justify-center w-full max-w-md">
|
||||
<div className="relative p-8 rounded-2xl shadow-xl border border-gray-800 bg-black bg-opacity-30 backdrop-filter backdrop-blur-lg transition-all duration-300 ease-in-out hover:shadow-neon focus-within:shadow-neon w-full">
|
||||
<h2 className="text-3xl font-bold mb-8 text-foreground text-center">Create Account</h2>
|
||||
<form className="space-y-6">
|
||||
<div className="relative group">
|
||||
<input
|
||||
type="text"
|
||||
id="signup-username"
|
||||
className="peer w-full p-3 bg-transparent border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-foreground placeholder-transparent transition-all duration-200"
|
||||
placeholder=" "
|
||||
required
|
||||
/>
|
||||
<label
|
||||
htmlFor="signup-username"
|
||||
className="absolute left-3 -top-2.5 text-sm text-gray-400 bg-card px-1 transition-all duration-200 ease-in-out
|
||||
peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:bg-transparent
|
||||
peer-focus:-top-2.5 peer-focus:text-accent peer-focus:text-sm peer-focus:bg-card"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
</div>
|
||||
<div className="relative group">
|
||||
<input
|
||||
type="email"
|
||||
id="signup-email"
|
||||
className="peer w-full p-3 bg-transparent border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-foreground placeholder-transparent transition-all duration-200"
|
||||
placeholder=" "
|
||||
required
|
||||
/>
|
||||
<label
|
||||
htmlFor="signup-email"
|
||||
className="absolute left-3 -top-2.5 text-sm text-gray-400 bg-card px-1 transition-all duration-200 ease-in-out
|
||||
peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:bg-transparent
|
||||
peer-focus:-top-2.5 peer-focus:text-accent peer-focus:text-sm peer-focus:bg-card"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
</div>
|
||||
<div className="relative group">
|
||||
<input
|
||||
type="password"
|
||||
id="signup-password"
|
||||
className="peer w-full p-3 bg-transparent border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-foreground placeholder-transparent transition-all duration-200"
|
||||
placeholder=" "
|
||||
required
|
||||
/>
|
||||
<label
|
||||
htmlFor="signup-password"
|
||||
className="absolute left-3 -top-2.5 text-sm text-gray-400 bg-card px-1 transition-all duration-200 ease-in-out
|
||||
peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:bg-transparent
|
||||
peer-focus:-top-2.5 peer-focus:text-accent peer-focus:text-sm peer-focus:bg-card"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
</div>
|
||||
<div className="relative group">
|
||||
<input
|
||||
type="password"
|
||||
id="signup-confirm-password"
|
||||
className="peer w-full p-3 bg-transparent border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-foreground placeholder-transparent transition-all duration-200"
|
||||
placeholder=" "
|
||||
required
|
||||
/>
|
||||
<label
|
||||
htmlFor="signup-confirm-password"
|
||||
className="absolute left-3 -top-2.5 text-sm text-gray-400 bg-card px-1 transition-all duration-200 ease-in-out
|
||||
peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:bg-transparent
|
||||
peer-focus:-top-2.5 peer-focus:text-accent peer-focus:text-sm peer-focus:bg-card"
|
||||
>
|
||||
Confirm Password
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-primary-cta text-primary-cta-text py-3 rounded-lg hover:bg-opacity-90 transition-colors focus:outline-none focus:ring-2 focus:ring-accent text-lg font-semibold"
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
</form>
|
||||
<div className="text-center my-6 text-gray-400 text-sm">— Or continue with —</div>
|
||||
<div className="flex justify-center space-x-4 mb-6">
|
||||
<button className="p-3 border border-gray-700 rounded-full text-foreground hover:border-accent focus:outline-none focus:ring-2 focus:ring-accent transition-all duration-200">
|
||||
<Google size={24} className="text-white" />
|
||||
</button>
|
||||
<button className="p-3 border border-gray-700 rounded-full text-foreground hover:border-accent focus:outline-none focus:ring-2 focus:ring-accent transition-all duration-200">
|
||||
<Github size={24} className="text-white" />
|
||||
</button>
|
||||
<button className="p-3 border border-gray-700 rounded-full text-foreground hover:border-accent focus:outline-none focus:ring-2 focus:ring-accent transition-all duration-200">
|
||||
<Facebook size={24} className="text-white" />
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-center text-sm text-gray-400">
|
||||
Already have an account? <Link href="/login" className="text-accent hover:underline">Login</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #0A0A0A;
|
||||
--card: #1A1A1A;
|
||||
--foreground: #F5F5F5;
|
||||
--primary-cta: #00BFFF;
|
||||
--primary-cta-text: #000000;
|
||||
--secondary-cta: #FF3131;
|
||||
--secondary-cta-text: #FFFFFF;
|
||||
--accent: #555555;
|
||||
--background-accent: #004F7F;
|
||||
--background: #000000;
|
||||
--card: #0c0c0c;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #106EFB;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #000000;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #535353;
|
||||
--background-accent: #106EFB;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user