Merge version_2 into main #3
168
src/app/page.tsx
168
src/app/page.tsx
@@ -4,15 +4,15 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import { Activity, Heart, Sun, Timer, Zap, Dumbbell } from "lucide-react";
|
||||
import { Code2, Server, Database, Globe, Layout, Palette } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -32,35 +32,25 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Classes", id: "features"},
|
||||
{
|
||||
name: "Pricing", id: "pricing"},
|
||||
{
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
{ name: "Skills", id: "features" },
|
||||
{ name: "Projects", id: "products" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="TheFit24"
|
||||
brandName="DevPortfolio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "radial-gradient"}}
|
||||
title="Unleash Your Potential at TheFit24"
|
||||
description="24/7 access to premium equipment, expert coaching, and a community built to help you reach your peak performance. Start your journey today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started", href: "#pricing"},
|
||||
]}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Full-Stack Web Developer"
|
||||
description="Building scalable, high-performance web applications with modern technologies. Crafting digital experiences that perform as well as they look."
|
||||
buttons={[{ text: "View Projects", href: "#products" }]}
|
||||
mediaItems={[
|
||||
{imageSrc: "http://img.b2bpic.net/free-photo/woman-takes-dumbbell-from-rack-gym-close-up-her-hand_169016-46934.jpg", imageAlt: "fitness athletes gym weights"},
|
||||
{imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-training-outdoors_23-2150975453.jpg", imageAlt: "athlete workout portrait"},
|
||||
{imageSrc: "http://img.b2bpic.net/free-photo/blurred-bikes_1203-367.jpg", imageAlt: "modern functional training studio"},
|
||||
{imageSrc: "http://img.b2bpic.net/free-photo/people-playing-basketball_23-2149231814.jpg", imageAlt: "People playing basketball"},
|
||||
{imageSrc: "http://img.b2bpic.net/free-photo/group-people-working-out-together-outdoors_23-2149891482.jpg", imageAlt: "Group of people working out together outdoors"}
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010143.jpg", imageAlt: "Coding environment" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-working-laptop_23-2148421874.jpg", imageAlt: "Developer working" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/web-design-concept-with-drawings_1134-77.jpg", imageAlt: "Web design UI" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
@@ -72,85 +62,56 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "24/7", title: "Always Open", items: ["No restrictions", "Your pace", "Flexible access"] },
|
||||
{ id: "m2", value: "50+", title: "Expert Classes", items: ["Yoga", "HIIT", "Strength"] },
|
||||
{ id: "m3", value: "100%", title: "Member First", items: ["Community driven", "Supportive", "Inclusive"] }
|
||||
{ id: "m1", value: "5+ Years", title: "Experience", items: ["Full-stack expertise", "System architecture", "Agile workflows"] },
|
||||
{ id: "m2", value: "50+", title: "Projects", items: ["Enterprise apps", "E-commerce", "SaaS platforms"] },
|
||||
{ id: "m3", value: "100%", title: "Commitment", items: ["Clean code", "Responsive design", "Performance focus"] }
|
||||
]}
|
||||
title="Why TheFit24?"
|
||||
description="We are dedicated to providing the best gym experience in the city."
|
||||
title="Professional Expertise"
|
||||
description="Driven by innovation and efficiency in every line of code."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Strength Training", description: "High-end equipment for all muscle groups.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/training-treadmill_1098-15787.jpg", imageAlt: "fitness athletes gym weights"},
|
||||
items: [
|
||||
{ icon: Dumbbell, text: "Olympic bars" },
|
||||
{ icon: Zap, text: "Power racks" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
title: "Cardio Zone", description: "Latest cardio machines with heart rate tracking.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sportswoman-posing-sportswear-isolated-gray_7502-8024.jpg", imageAlt: "athlete workout portrait"},
|
||||
items: [
|
||||
{ icon: Activity, text: "Smart treadmills" },
|
||||
{ icon: Timer, text: "HIIT bikes" },
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
title: "Recovery Lounge", description: "Saunas, stretching zones, and deep massage chairs.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-view-gym_1048-9960.jpg", imageAlt: "modern functional training studio"},
|
||||
items: [
|
||||
{ icon: Heart, text: "Sauna access" },
|
||||
{ icon: Sun, text: "Stretching areas" },
|
||||
],
|
||||
reverse: false,
|
||||
}
|
||||
{ id: "f1", title: "Frontend Development", author: "Modern UI", description: "Building intuitive interfaces with React, Next.js, and Tailwind CSS.", tags: ["React", "Next.js", "TypeScript"], imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-design-with-sitemap-user-interface-smartphone_23-2149057510.jpg" },
|
||||
{ id: "f2", title: "Backend Architecture", author: "Scalable Systems", description: "Designing robust APIs and database structures with Node.js and PostgreSQL.", tags: ["Node.js", "PostgreSQL", "Redis"], imageSrc: "http://img.b2bpic.net/free-photo/server-room-with-many-racks_23-2149231814.jpg" },
|
||||
{ id: "f3", title: "Full-Stack Integration", author: "Seamless DevOps", description: "End-to-end delivery using cloud infrastructure and CI/CD pipelines.", tags: ["AWS", "Docker", "Vercel"], imageSrc: "http://img.b2bpic.net/free-photo/cloud-computing-concept-with-virtual-server_23-2149231814.jpg" }
|
||||
]}
|
||||
title="World-Class Fitness Features"
|
||||
description="Our facilities offer everything you need to transform your body and mind effectively."
|
||||
title="Core Competencies"
|
||||
description="Deep knowledge in modern web technologies to bring your vision to life."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
textboxLayout="split"
|
||||
title="Portfolio Projects"
|
||||
description="Case studies highlighting complex problem solving and user-centric design."
|
||||
products={[
|
||||
{ id: "p1", brand: "TheFit24", name: "Gym Bag", price: "$45", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/man-traveling-alone-mutriku-while-having-his-essentials-backpack_23-2149118761.jpg" },
|
||||
{ id: "p2", brand: "TheFit24", name: "Pro Gloves", price: "$25", rating: 4, reviewCount: "89", imageSrc: "http://img.b2bpic.net/free-photo/still-life-perfectly-ordered-fitness-gym-accessories_52683-100705.jpg" },
|
||||
{ id: "p3", brand: "TheFit24", name: "Smart Bottle", price: "$30", rating: 5, reviewCount: "205", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-gym-outfit-dumbbells_23-2149872134.jpg" },
|
||||
{ id: "p4", brand: "TheFit24", name: "Dumbbell Set", price: "$120", rating: 5, reviewCount: "450", imageSrc: "http://img.b2bpic.net/free-photo/vintage-lifestyle-health-rack-heavy_1203-5689.jpg" },
|
||||
{ id: "p5", brand: "TheFit24", name: "Resistance Bands", price: "$15", rating: 4, reviewCount: "340", imageSrc: "http://img.b2bpic.net/free-photo/kit-clothes-running-ba-gym_1303-1756.jpg" },
|
||||
{ id: "p6", brand: "TheFit24", name: "Yoga Mat", price: "$50", rating: 5, reviewCount: "150", imageSrc: "http://img.b2bpic.net/free-photo/weight-lifting-concept-with-dumbbell_23-2149267003.jpg" }
|
||||
{ id: "p1", name: "Enterprise E-commerce", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-concept-with-cart_23-2148785055.jpg" },
|
||||
{ id: "p2", name: "Fintech SaaS Platform", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/finance-concept-with-laptop-graphs_23-2148421874.jpg" },
|
||||
{ id: "p3", name: "Health-Tech Dashboard", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/medical-data-concept_23-2148785055.jpg" }
|
||||
]}
|
||||
title="Premium Gear"
|
||||
description="Enhance your workout with our top-rated fitness accessories."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
textboxLayout="split"
|
||||
plans={[
|
||||
{ id: "basic", badge: "Entry", price: "$29/mo", name: "Basic", buttons: [{text: "Select"}], features: ["Gym Access", "Basic Equipment", "24/7 Entry"] },
|
||||
{ id: "pro", badge: "Most Popular", price: "$55/mo", name: "Premium", buttons: [{text: "Select"}], features: ["Everything in Basic", "All Classes", "Sauna & Spa", "Guest Pass"] },
|
||||
{ id: "elite", badge: "Elite", price: "$99/mo", name: "Elite", buttons: [{text: "Select"}], features: ["Everything in Premium", "Personal Trainer", "Priority Booking", "Private Locker"] }
|
||||
{ id: "basic", badge: "Start", price: "Contact", name: "Consultation", buttons: [{text: "Inquire"}], features: ["Requirements Analysis", "Project Roadmap", "Tech Stack Advice"] },
|
||||
{ id: "pro", badge: "Project", price: "Custom", name: "Full Development", buttons: [{text: "Inquire"}], features: ["MVP Development", "Design System", "Deployment", "Support"] },
|
||||
{ id: "elite", badge: "Retainer", price: "Custom", name: "Technical Lead", buttons: [{text: "Inquire"}], features: ["Code Audit", "Architecture Scaling", "Team Coaching", "24/7 Priority"] }
|
||||
]}
|
||||
title="Membership Plans"
|
||||
description="Flexible plans designed to suit your fitness lifestyle."
|
||||
title="Engagement Models"
|
||||
description="Choose the engagement that aligns with your project goals."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -160,33 +121,30 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah J.", role: "Corporate Lead", company: "Tech", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/healthy-fitness-concept-beautiful-african-american-girl-sport-clothes-holding-water-bottle-after-workout-isolated-white-studio-background_1258-105071.jpg" },
|
||||
{ id: "t2", name: "Mike T.", role: "Architect", company: "Studio", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-african-fitness-woman-smiling-holding-sporting-mat-home_171337-8008.jpg" },
|
||||
{ id: "t3", name: "Emily R.", role: "Nurse", company: "Hospital", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-gym_23-2149049763.jpg" },
|
||||
{ id: "t4", name: "David K.", role: "Developer", company: "Code", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-mood-with-great-music-photo-gorgeous-blonde-woman-gym-her-weekend-time_146671-16548.jpg" },
|
||||
{ id: "t5", name: "Alex W.", role: "Student", company: "University", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-sportsman-holds-hand-chin-dark-background_613910-19200.jpg" }
|
||||
{ id: "t1", name: "Alex P.", role: "Founder", company: "InnovateCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-wearing-glasses_23-2148818815.jpg" },
|
||||
{ id: "t2", name: "Sarah K.", role: "Product Manager", company: "ScaleUp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-standing-office_23-2148753896.jpg" },
|
||||
{ id: "t3", name: "Marcus L.", role: "CEO", company: "TechFlow", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-using-laptop-while-working-home_23-2148753907.jpg" }
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "10K+", label: "Happy Members" },
|
||||
{ value: "5M+", label: "Workouts" },
|
||||
{ value: "99%", label: "Satisfaction" }
|
||||
{ value: "98%", label: "Code Quality" },
|
||||
{ value: "50+", label: "Deployed Apps" },
|
||||
{ value: "100%", label: "On-time Delivery" }
|
||||
]}
|
||||
title="Member Success Stories"
|
||||
description="Read what our members say about their journey with us."
|
||||
title="Client Testimonials"
|
||||
description="Working together to build meaningful digital impact."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
textboxLayout="split"
|
||||
faqs={[
|
||||
{ id: "f1", title: "Is the gym open 24/7?", content: "Yes, we are open 24/7 for all members." },
|
||||
{ id: "f2", title: "Can I bring a guest?", content: "Our Premium and Elite plans allow guest passes." },
|
||||
{ id: "f3", title: "Are trainers available?", content: "We offer elite personal training services for all goals." }
|
||||
{ id: "f1", title: "Tech Stack?", content: "Primary: React, Next.js, Node, PostgreSQL, and AWS." },
|
||||
{ id: "f2", title: "Timeline?", content: "Typically 4-12 weeks depending on scope and complexity." },
|
||||
{ id: "f3", title: "Collaboration?", content: "I work using agile methodology with weekly syncs." }
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about joining TheFit24."
|
||||
title="Project FAQs"
|
||||
description="Common questions about my development process."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
@@ -194,23 +152,21 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient"}}
|
||||
tag="Join Us"
|
||||
title="Start Your Fitness Journey"
|
||||
description="Sign up for updates or visit us in person. The best version of you starts today."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Inquiries"
|
||||
title="Let's Build Something Great"
|
||||
description="Reach out to discuss your next big idea or project requirements."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Help", items: [{ label: "Support", href: "#" }, { label: "FAQ", href: "#faq" }] },
|
||||
{ title: "Legal", items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] }
|
||||
{ title: "Navigation", items: [{ label: "Home", href: "#" }, { label: "Skills", href: "#features" }] },
|
||||
{ title: "Work", items: [{ label: "Projects", href: "#products" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Social", items: [{ label: "GitHub", href: "#" }, { label: "LinkedIn", href: "#" }] }
|
||||
]}
|
||||
logoText="TheFit24"
|
||||
copyrightText="© 2025 | TheFit24. All rights reserved."
|
||||
logoText="DevPortfolio"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user