458 lines
17 KiB
TypeScript
458 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
|
|
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
|
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import { Sparkles, Award, Star, Heart, Shirt, ThumbsUp, Clock, Zap, Maximize2 } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Collection", id: "collection" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
const navLinks = [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "Collection", href: "/collection" },
|
|
{ label: "Services", href: "/" },
|
|
{ label: "About", href: "/" },
|
|
{ label: "Contact", href: "/" },
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="large"
|
|
background="circleGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Men's Suits King"
|
|
navItems={navItems}
|
|
button={{
|
|
text: "Call Now",
|
|
href: "tel:+16618771967",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
title="Premium Suits. Perfect Fit. Same-Day Alterations."
|
|
description="Ontario's destination for premium suits, tuxedo rentals, and expert tailoring. Over 5,000 five-star reviews from satisfied customers."
|
|
tag="Luxury Fashion"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "radial-gradient" }}
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/elegant-young-handsome-man-classic-black-costume-studio-fashion-portrait_1328-2218.jpg",
|
|
imageAlt: "Premium black tuxedo",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-groom-with-white-flower-suit_181624-25387.jpg",
|
|
imageAlt: "groom wedding suit formal portrait",
|
|
},
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1651.jpg",
|
|
imageAlt: "business suit professional man office",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-buisness-man_23-2148479585.jpg",
|
|
imageAlt: "navy formal suit men professional",
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Shop Suits",
|
|
href: "/collection",
|
|
},
|
|
{
|
|
text: "Book Alterations",
|
|
href: "/",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg",
|
|
alt: "Customer review",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-vector/professional-avatars-with-fun-style_23-2147667859.jpg",
|
|
alt: "professional man avatar portrait",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/view-female-school-teacher_23-2151110050.jpg",
|
|
alt: "woman happy customer avatar",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-model-sexy-man-dressed-pink-tshirt-trousers-fashion-male-isolated-blue-wall-studio_158538-26677.jpg",
|
|
alt: "man customer avatar portrait",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg",
|
|
alt: "professional person avatar portrait",
|
|
},
|
|
]}
|
|
avatarText="5,000+ Five-Star Reviews"
|
|
ariaLabel="Hero section showcasing premium suits"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyThree
|
|
title="Our Services"
|
|
description="Complete solutions for all your formal wear needs, from everyday suits to special occasions."
|
|
tag="Premium Services"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
id: "suits",
|
|
title: "Suit Sales",
|
|
tags: ["Premium Quality", "All Sizes"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-shopping-buying-consumer-goods_23-2151669854.jpg",
|
|
imageAlt: "men's suit store display premium",
|
|
},
|
|
{
|
|
id: "rentals",
|
|
title: "Tuxedo Rentals",
|
|
tags: ["Weddings", "Events"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-groom-standing-near-car_23-2149540028.jpg",
|
|
imageAlt: "tuxedo rental event formal wear",
|
|
},
|
|
{
|
|
id: "alterations",
|
|
title: "Same-Day Alterations",
|
|
tags: ["Fast Service", "Expert Tailors"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-business-owners-preparing-their-store_23-2149300887.jpg",
|
|
imageAlt: "tailoring alterations professional fitting",
|
|
},
|
|
{
|
|
id: "wedding",
|
|
title: "Wedding Packages",
|
|
tags: ["Group Fittings", "Custom"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/group-smiling-groomsmen-bridesmaids-walking_1153-2564.jpg",
|
|
imageAlt: "wedding groomsmen suits group fitting",
|
|
},
|
|
{
|
|
id: "big-tall",
|
|
title: "Big & Tall Sizes",
|
|
tags: ["Extended Sizes", "Perfect Fit"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-blond-young-man-posing-studio_158595-3385.jpg",
|
|
imageAlt: "men's formal suit extended sizes large",
|
|
},
|
|
{
|
|
id: "kids",
|
|
title: "Kids Suits",
|
|
tags: ["Prom Ready", "Quality"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smartly-dressed-caucasian-boy-standing-office-slamming-fists-desk_1098-20295.jpg",
|
|
imageAlt: "kids formal suit prom elegant",
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
ariaLabel="Services section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
title="Why Choose Men's Suits King"
|
|
description="Trusted by thousands for quality, style, and exceptional service."
|
|
tag="Proven Excellence"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "reviews",
|
|
icon: ThumbsUp,
|
|
title: "5,000+ Google Reviews",
|
|
value: "5.0★",
|
|
},
|
|
{
|
|
id: "experience",
|
|
icon: Clock,
|
|
title: "20+ Years Experience",
|
|
value: "Expert",
|
|
},
|
|
{
|
|
id: "same-day",
|
|
icon: Zap,
|
|
title: "Same-Day Alterations",
|
|
value: "Fast",
|
|
},
|
|
{
|
|
id: "sizes",
|
|
icon: Maximize2,
|
|
title: "All Sizes Available",
|
|
value: "XS-5XL",
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
ariaLabel="Key metrics section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="Customer Testimonials"
|
|
description="See what our satisfied customers have to say about our premium suits and exceptional service."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
tag="Customer Love"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "James Mitchell",
|
|
handle: "@james_weddings",
|
|
testimonial: "Perfect suit for my wedding. The alterations were done same-day and fit like a glove. Highly recommended!",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-leaning-cafe-counter_1262-1969.jpg",
|
|
imageAlt: "happy customer satisfied smile portrait",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "David Chen",
|
|
handle: "@david_professional",
|
|
testimonial: "Best quality suits in the area. Staff is knowledgeable and helpful. I'll definitely be back for more.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-business-man-city_23-2148479568.jpg",
|
|
imageAlt: "professional businessman confident portrait",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Michael Rodriguez",
|
|
handle: "@michael_groom",
|
|
testimonial: "Amazing service for my groomsmen. Everyone looked incredible and the rental process was seamless.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/wedding-couple_23-2148105908.jpg",
|
|
imageAlt: "groom happy wedding day portrait",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Sarah Thompson",
|
|
handle: "@sarah_fashion",
|
|
testimonial: "The attention to detail is unmatched. My husband's suit was tailored perfectly. Worth every penny!",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-happy-gorgeous-woman-with-relaxed-smile-spending-nice-time-cafe_273609-9043.jpg",
|
|
imageAlt: "woman satisfied happy portrait",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Thomas Park",
|
|
handle: "@thomas_executive",
|
|
testimonial: "Premium quality fabrics and expert tailoring. This is my go-to place for all formal wear.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/coffee-time-me-please_329181-17310.jpg",
|
|
imageAlt: "executive professional man portrait",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "Christopher Lee",
|
|
handle: "@chris_prom",
|
|
testimonial: "Got my prom suit here and I felt like a million bucks. Fantastic selection and great prices!",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-standing-outdoors_1262-20546.jpg",
|
|
imageAlt: "young man prom formal suit",
|
|
icon: Star,
|
|
},
|
|
]}
|
|
speed={40}
|
|
ariaLabel="Customer testimonials section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
title="Featured Suit Collection"
|
|
description="Handpicked premium suits for every occasion. Premium fabrics and expert craftsmanship."
|
|
tag="Premium Selection"
|
|
tagIcon={Shirt}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
products={[
|
|
{
|
|
id: "black-tux-1",
|
|
name: "Midnight Black Tuxedo",
|
|
price: "$399",
|
|
variant: "Premium Wool",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-fies-black-bow-tie-white-shirt_8353-52.jpg",
|
|
imageAlt: "black tuxedo premium formal wear",
|
|
},
|
|
{
|
|
id: "navy-business-1",
|
|
name: "Navy Business Suit",
|
|
price: "$349",
|
|
variant: "Wool Blend",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-men-carry-laptops-office-building_1359-1389.jpg",
|
|
imageAlt: "navy business suit professional office",
|
|
},
|
|
{
|
|
id: "charcoal-formal-1",
|
|
name: "Charcoal Formal Suit",
|
|
price: "$379",
|
|
variant: "Premium Blend",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-man-break-with-cup-coffee_23-2148242639.jpg",
|
|
imageAlt: "charcoal gray formal suit elegant",
|
|
},
|
|
{
|
|
id: "wedding-white-1",
|
|
name: "Wedding White Suit",
|
|
price: "$429",
|
|
variant: "Pure Wool",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-dinner-jacket-holding-pocket-watch-confetti_23-2147972075.jpg",
|
|
imageAlt: "white wedding suit groom formal",
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
ariaLabel="Featured suit collection"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact-cta" data-section="contact-cta">
|
|
<ContactText
|
|
text="Need a suit today? Our expert tailors offer fast same-day alterations so you can look sharp for any last-minute event."
|
|
animationType="entrance-slide"
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{
|
|
text: "Call Now",
|
|
href: "tel:+16618771967",
|
|
},
|
|
{
|
|
text: "Book Alterations",
|
|
href: "/",
|
|
},
|
|
]}
|
|
ariaLabel="Contact call-to-action section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Men's Suits King"
|
|
columns={[
|
|
{
|
|
title: "Services",
|
|
items: [
|
|
{
|
|
label: "Suit Sales",
|
|
href: "/",
|
|
},
|
|
{
|
|
label: "Tuxedo Rentals",
|
|
href: "/",
|
|
},
|
|
{
|
|
label: "Alterations",
|
|
href: "/",
|
|
},
|
|
{
|
|
label: "Wedding Packages",
|
|
href: "/",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Collections",
|
|
items: [
|
|
{
|
|
label: "Business Suits",
|
|
href: "/collection",
|
|
},
|
|
{
|
|
label: "Wedding Suits",
|
|
href: "/collection",
|
|
},
|
|
{
|
|
label: "Prom Suits",
|
|
href: "/collection",
|
|
},
|
|
{
|
|
label: "Big & Tall",
|
|
href: "/collection",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "/",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "/",
|
|
},
|
|
{
|
|
label: "Reviews",
|
|
href: "/",
|
|
},
|
|
{
|
|
label: "Book Appointment",
|
|
href: "/",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Contact Info",
|
|
items: [
|
|
{
|
|
label: "Phone: +1 661-877-1967",
|
|
href: "tel:+16618771967",
|
|
},
|
|
{
|
|
label: "4323 Mills Cir #103, Ontario, CA 91764",
|
|
href: "https://maps.google.com",
|
|
},
|
|
{
|
|
label: "Get Directions",
|
|
href: "https://maps.google.com",
|
|
},
|
|
{
|
|
label: "Email: hello@suitsking.com",
|
|
href: "mailto:hello@suitsking.com",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 Men's Suits King. All rights reserved."
|
|
ariaLabel="Site footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |