372 lines
20 KiB
TypeScript
372 lines
20 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { Award, CheckCircle, Sparkles, Package, Linkedin, Twitter, Instagram, Mail } from "lucide-react";
|
|
import React, { useState } from "react";
|
|
|
|
const TestimonialCardFlipped = ({ testimonial, onFlip }: { testimonial: any; onFlip: (id: string) => void }) => {
|
|
const [isFlipped, setIsFlipped] = useState(false);
|
|
|
|
const handleMouseEnter = () => {
|
|
setIsFlipped(true);
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
setIsFlipped(false);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
className="h-full"
|
|
>
|
|
<div
|
|
className="relative w-full h-full transition-transform duration-500 preserve-3d"
|
|
style={{
|
|
transformStyle: 'preserve-3d',
|
|
transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
|
|
}}
|
|
>
|
|
{/* Front side */}
|
|
<div
|
|
className="absolute w-full h-full bg-card rounded-theme p-6 flex flex-col justify-between border border-accent/20"
|
|
style={{
|
|
backfaceVisibility: 'hidden',
|
|
WebkitBackfaceVisibility: 'hidden',
|
|
}}
|
|
>
|
|
<div>
|
|
<p className="text-foreground mb-6 text-sm leading-relaxed">{testimonial.testimonial}</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
{testimonial.imageSrc && (
|
|
<img
|
|
src={testimonial.imageSrc}
|
|
alt={testimonial.imageAlt || testimonial.name}
|
|
className="w-12 h-12 rounded-full object-cover"
|
|
/>
|
|
)}
|
|
<div>
|
|
<p className="font-semibold text-foreground text-sm">{testimonial.name}</p>
|
|
<p className="text-accent text-xs">{testimonial.role}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Back side */}
|
|
<div
|
|
className="absolute w-full h-full bg-primary-cta rounded-theme p-6 flex flex-col items-center justify-center gap-6 border border-accent/20"
|
|
style={{
|
|
backfaceVisibility: 'hidden',
|
|
WebkitBackfaceVisibility: 'hidden',
|
|
transform: 'rotateY(180deg)',
|
|
}}
|
|
>
|
|
<p className="text-primary-cta-text font-semibold text-center text-sm">Connect with {testimonial.name}</p>
|
|
<div className="flex gap-4">
|
|
<a
|
|
href="#"
|
|
className="text-primary-cta-text hover:opacity-80 transition-opacity"
|
|
title="LinkedIn"
|
|
>
|
|
<Linkedin size={24} />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="text-primary-cta-text hover:opacity-80 transition-opacity"
|
|
title="Twitter"
|
|
>
|
|
<Twitter size={24} />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="text-primary-cta-text hover:opacity-80 transition-opacity"
|
|
title="Instagram"
|
|
>
|
|
<Instagram size={24} />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="text-primary-cta-text hover:opacity-80 transition-opacity"
|
|
title="Email"
|
|
>
|
|
<Mail size={24} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default function LandingPage() {
|
|
const testimonialData = [
|
|
{
|
|
id: "1", name: "Marcus T.", role: "Software Engineer", testimonial: "I went from feeling invisible to commanding attention in any room. The skincare protocol cleared my skin, the training program built muscle, and the style guidance transformed how people perceive me. Best investment I've made.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Marcus after transformation"
|
|
},
|
|
{
|
|
id: "2", name: "James K.", role: "Sales Executive", testimonial: "Within 8 weeks, my confidence skyrocketed. Clients and colleagues noticed the change immediately. The comprehensive approach meant I didn't have to figure it out alone—every pillar was covered professionally.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "James after transformation"
|
|
},
|
|
{
|
|
id: "3", name: "Derek M.", role: "Entrepreneur", testimonial: "This isn't just about looking better; it's about becoming the best version of yourself. The accountability and expert guidance made all the difference. I recommend Maxximize to every serious man.", imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3797.jpg?_wi=1", imageAlt: "Derek after transformation"
|
|
},
|
|
{
|
|
id: "4", name: "Ryan P.", role: "Marketing Manager", testimonial: "The transformation exceeded my expectations. Clear skin, visible muscle, sharp style, and grooming expertise—I feel like a completely new person. This program delivers.", imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3797.jpg?_wi=2", imageAlt: "Ryan after transformation"
|
|
},
|
|
{
|
|
id: "5", name: "Alex V.", role: "Fitness Professional", testimonial: "Even as someone in the fitness industry, I learned so much about the holistic approach to personal optimization. The skincare and style components I was missing have made a huge difference.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "Alex after transformation"
|
|
},
|
|
{
|
|
id: "6", name: "Chris N.", role: "Consultant", testimonial: "The most comprehensive looksmaxxing program available. Not just gym hacks or skincare tips—this is a complete system. Worth every penny and then some.", imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3797.jpg?_wi=3", imageAlt: "Chris after transformation"
|
|
}
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmall"
|
|
background="noise"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Maxximize"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Results", id: "results" },
|
|
{ name: "Products", id: "products" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Start Transformation", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="MAXXIMIZE"
|
|
description="Transform your appearance, elevate your confidence, dominate your potential. We combine science-backed optimization across skincare, fitness, style, and grooming to unlock your best self."
|
|
buttons={[
|
|
{ text: "Begin Your Transformation", href: "#contact" },
|
|
{ text: "Explore Services", href: "#services" }
|
|
]}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/slim-sexy-blonde-young-sportswoman-with-athletic-body-pumped-press-poses-gym-looking-camera-black-sportswear-full-length-portrait_7502-8729.jpg"
|
|
imageAlt="Confident transformation showcase"
|
|
mediaAnimation="slide-up"
|
|
frameStyle="card"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="Our Approach"
|
|
title="Science-Backed Personal Optimization"
|
|
description="We believe every man has untapped potential. Our comprehensive looksmaxxing methodology focuses on maximizing your attractiveness through proven strategies in skincare, fitness programming, personal styling, and grooming. Over 500+ successful transformations speak to our system's effectiveness."
|
|
metrics={[
|
|
{ value: "500+", title: "Successful Transformations" },
|
|
{ value: "98%", title: "Client Satisfaction Rate" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/indian-man-doing-excercisses-special-equipment-gym-with-personal-trainer_1157-51767.jpg?_wi=1"
|
|
imageAlt="Personal coaching session"
|
|
mediaAnimation="opacity"
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyFour
|
|
title="Complete Optimization Suite"
|
|
description="Our four-pillar system addresses every aspect of masculine appeal and personal presentation."
|
|
features={[
|
|
{
|
|
id: "1", title: "Advanced Skincare Protocol", author: "Dermatology-Backed", description: "Custom skincare routines designed by experts. We identify your skin type, address acne, texture, and aging concerns with science-backed treatments and products.", tags: ["Skincare", "Expert-Led"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/caucasian-blonde-girl-applies-anti-aging-cream-skin-aging-her-mother-s-face-indoors-concept-natural-cosmetics-wrinkle-smoothing_197531-31469.jpg", imageAlt: "Skincare consultation"
|
|
},
|
|
{
|
|
id: "2", title: "Strategic Fitness Programming", author: "Certified Trainers", description: "Hypertrophy-focused training programs designed to build the masculine physique. Personalized nutrition plans and workout progressions for maximum aesthetic gains.", tags: ["Fitness", "Nutrition"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/indian-man-doing-excercisses-special-equipment-gym-with-personal-trainer_1157-51767.jpg?_wi=2", imageAlt: "Fitness training session"
|
|
},
|
|
{
|
|
id: "3", title: "Personal Style Mastery", author: "Fashion Consultants", description: "Wardrobe curation, color theory, and outfit construction that elevates your style. Learn how fit, fabric, and fashion psychology amplify your masculine presence.", tags: ["Style", "Wardrobe"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fulllength-portrait-stylish-darkskinned-curly-woman-white-pants-jacket-top-posing-dressing-room-young-lady-leans-hanger_197531-27803.jpg", imageAlt: "Fashion styling consultation"
|
|
},
|
|
{
|
|
id: "4", title: "Grooming Excellence", author: "Grooming Specialists", description: "Professional grooming guidance: haircut selection, beard optimization, facial hair styling. Learn maintenance routines that keep you looking sharp every day.", tags: ["Grooming", "Presentation"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/stylish-haircut-barbershop_1163-2012.jpg", imageAlt: "Professional grooming session"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="results" data-section="results">
|
|
<MetricCardSeven
|
|
title="Transformation Metrics"
|
|
description="Real numbers from real clients."
|
|
metrics={[
|
|
{
|
|
id: "1", value: "8 weeks", title: "Average Time to Visible Results", items: [
|
|
"Skin clarity improved", "First muscle gains visible", "Style confidence boost"
|
|
]
|
|
},
|
|
{
|
|
id: "2", value: "3.2x", title: "Average Confidence Increase", items: [
|
|
"Measured by client surveys", "Social interaction growth", "Personal presence elevation"
|
|
]
|
|
},
|
|
{
|
|
id: "3", value: "89%", title: "Maintain Results Long-Term", items: [
|
|
"Sustainable habits learned", "Ongoing support provided", "Community accountability"
|
|
]
|
|
}
|
|
]}
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
title="Maxximize Kits"
|
|
description="Complete personal optimization kits designed to accelerate your transformation journey."
|
|
products={[
|
|
{
|
|
id: "lite", name: "Looks Lite", price: "$149", variant: "Essential Essentials 5 Items", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34YrpHTNyoPHUh85bjA10KHfDge/tmp/generate-an-image-of-a-looksmaxxing-prod-1772150424151-77a31ef6.png", imageAlt: "Looks Lite Kit", isFavorited: false
|
|
},
|
|
{
|
|
id: "mid", name: "Looks Mid", price: "$299", variant: "Complete System 12 Items", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34YrpHTNyoPHUh85bjA10KHfDge/tmp/generate-an-image-of-a-looksmaxxing-prod-1772150203310-33014b9b.png", imageAlt: "Looks Mid Kit", isFavorited: false
|
|
},
|
|
{
|
|
id: "max", name: "Looks MAX", price: "$499", variant: "Premium Bundle 20 Items", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34YrpHTNyoPHUh85bjA10KHfDge/tmp/generate-an-image-of-a-looksmaxxing-prod-1772150463609-8d918126.png", imageAlt: "Looks MAX Kit", isFavorited: false
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<div className="w-full py-20 px-6">
|
|
<div className="w-full max-w-7xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-4xl md:text-5xl font-semibold text-foreground mb-4">Client Success Stories</h2>
|
|
<p className="text-foreground/70 text-lg">Real transformations from real men who took control of their image.</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-max">
|
|
{testimonialData.map((testimonial) => (
|
|
<div key={testimonial.id} className="h-80">
|
|
<TestimonialCardFlipped testimonial={testimonial} onFlip={() => {}} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Common Questions"
|
|
sideDescription="Everything you need to know about transforming your appearance."
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How long does a typical transformation take?", content: "Most clients see visible results within 4-8 weeks with consistent effort. Significant transformations typically manifest over 12-16 weeks. Results depend on your starting point, consistency, and program tier."
|
|
},
|
|
{
|
|
id: "2", title: "Do I need gym experience to join?", content: "No! Our programs start from where you are. Whether you're completely new to fitness or experienced, we customize everything to your current level and progressively build from there."
|
|
},
|
|
{
|
|
id: "3", title: "What if I have sensitive skin or specific skin conditions?", content: "Our skincare protocol is customized based on your skin type and any conditions. We work with dermatology principles and can adjust for acne, eczema, rosacea, or other concerns."
|
|
},
|
|
{
|
|
id: "4", title: "Is this program sustainable long-term?", content: "Absolutely. We teach sustainable habits, not quick fixes. The goal is building a lifestyle where you maintain your transformation. 89% of our clients successfully maintain results long-term."
|
|
},
|
|
{
|
|
id: "5", title: "Can I get a refund if I'm not satisfied?", content: "Yes. We offer a 30-day money-back guarantee if you don't see progress. We're confident in our system, and your satisfaction is paramount. Elite members have a results guarantee."
|
|
},
|
|
{
|
|
id: "6", title: "How often will I interact with coaches?", content: "Pro plan includes weekly check-ins. Elite includes weekly 1-on-1 video calls. Starter includes email support. You control the cadence and can request additional support anytime."
|
|
}
|
|
]}
|
|
textPosition="left"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Start Now"
|
|
title="Begin Your Transformation"
|
|
description="Join 500+ men who've already claimed their best selves. Fill out the form below, and our team will reach out within 24 hours to discuss which program is right for you."
|
|
background={{ variant: "radial-gradient" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/athlete-swings-triceps-with-dumbbells-gym-healthy-sports-lifestyle_169016-59110.jpg"
|
|
imageAlt="Transformation journey"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Get Started"
|
|
termsText="We respect your privacy. Your transformation journey is confidential."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Navigate", items: [
|
|
{ label: "Home", href: "#" },
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "Products", href: "#products" },
|
|
{ label: "Results", href: "#results" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Community", href: "#" },
|
|
{ label: "Support", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Disclaimer", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 Maxximize. All rights reserved."
|
|
bottomRightText="Transforming men, one result at a time"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |