Update src/app/page.tsx
This commit is contained in:
391
src/app/page.tsx
391
src/app/page.tsx
@@ -2,15 +2,13 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import { DollarSign, Facebook, Instagram, LifeBuoy, Star, Twitter } from "lucide-react";
|
||||
import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import { Instagram, Twitter, Facebook } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -20,327 +18,82 @@ export default function LandingPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="fluid"
|
||||
background="none"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Shop",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Community",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Yacht Toys Mafia"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Shop", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Yacht Toys Mafia"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Yacht gear for captains who know better"
|
||||
description="Curated water sports, diving, and platform equipment trusted by 100 South Florida yachts. No gatekeeping—just the real thing."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-port_72229-527.jpg?_wi=1",
|
||||
imageAlt: "Luxury yacht deck",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-yacht_1401-343.jpg?_wi=1",
|
||||
imageAlt: "Diving gear usage",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-port_72229-527.jpg?_wi=2",
|
||||
imageAlt: "Luxury yacht deck",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-yacht_1401-343.jpg?_wi=2",
|
||||
imageAlt: "Diving gear usage",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-port_72229-527.jpg?_wi=3",
|
||||
imageAlt: "Luxury yacht deck",
|
||||
},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-yacht_1401-343.jpg?_wi=3",
|
||||
imageAlt: "Diving gear usage",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-port_72229-527.jpg?_wi=4",
|
||||
imageAlt: "Luxury yacht deck",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-yacht_1401-343.jpg?_wi=4",
|
||||
imageAlt: "Diving gear usage",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-port_72229-527.jpg?_wi=5",
|
||||
imageAlt: "Luxury yacht deck",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-yacht_1401-343.jpg?_wi=5",
|
||||
imageAlt: "Diving gear usage",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop the collection",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/old-general-uniform-front-view_23-2149742906.jpg",
|
||||
alt: "Captain Member",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-pretty-woman-portrait-outdoor_624325-1834.jpg",
|
||||
alt: "Owner Member",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/purposeful-man-deep-thoughts-resting-pier_1262-6199.jpg",
|
||||
alt: "Manager Member",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/technician-optimizing-data-center-equipment-maximum-efficiency_482257-117650.jpg",
|
||||
alt: "Charter Member",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/successful-stylish-man-dressed-modern-elegant-clothes-sitting-table-outdoor-cafe-against-background-city-wharf_613910-21030.jpg",
|
||||
alt: "Owner Member",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 100+ captains in Florida"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Grade",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Marine Certified",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Captain Approved",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "South Florida Base",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Performance Focused",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Yacht Toys Mafia"
|
||||
description="Premium marine gear for those who navigate with precision. Elite equipment, zero gatekeeping."
|
||||
buttons={[{ text: "Shop Now", href: "#products" }]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/side-view-yacht_1401-343.jpg?_wi=1" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/girl-port_72229-527.jpg?_wi=2" }
|
||||
]}
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="Our Story"
|
||||
title="A Neighborhood Gem in the Marine Space"
|
||||
description="We started Yacht Toys Mafia because we were tired of the pretension that defines high-end marine retail. We believe that if you own a vessel, you deserve equipment that performs without needing a massive markup."
|
||||
subdescription="Our community in South Florida is our heart. Every product we stock is vetted by captains, for captains."
|
||||
icon={Star}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/multi-ethnic-team-business-trip_1098-15488.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
gridVariant="bento-grid"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Curated Gear"
|
||||
description="Hand-selected yacht essentials."
|
||||
products={[
|
||||
{ id: "1", name: "Pro Platform", price: "$3,200", variant: "Carbon", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-boat-sailing-sea-surrounded-by-greenery_181624-13668.jpg" },
|
||||
{ id: "2", name: "Elite Sea Scooter", price: "$4,500", variant: "Performance", imageSrc: "http://img.b2bpic.net/free-photo/serious-handsome-young-man-sitting-beach-putting-knee-prosthesis_74855-16448.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Floating Water Platform",
|
||||
price: "$3,200",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-boat-sailing-sea-surrounded-by-greenery_181624-13668.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sea Scooter Elite",
|
||||
price: "$4,500",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-handsome-young-man-sitting-beach-putting-knee-prosthesis_74855-16448.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Pro Wakeboard",
|
||||
price: "$850",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-balloon-twist-sculpture_23-2151657535.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Elite Snorkel Set",
|
||||
price: "$295",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-blue-background-with-diving-gear_23-2148255941.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Lounge Island",
|
||||
price: "$1,100",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sunglasses-rings-boat_23-2151995459.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Comm-Radio Set",
|
||||
price: "$600",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/active-summer-rest-concept-outdoor-shot-attractive-young-woman-bathing-suit-fixes-leash-surf-board-ready-fight-current_273609-17666.jpg",
|
||||
},
|
||||
]}
|
||||
title="Curated Collections"
|
||||
description="Premium gear selected for reliability and performance."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
title="Proven Results"
|
||||
metrics={[
|
||||
{ id: "m1", value: "100+", title: "Yacht Partners", items: ["South Florida based", "Global reach"] },
|
||||
{ id: "m2", value: "42%", title: "Avg Savings", items: ["Direct wholesale", "No markups"] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Chance Rose",
|
||||
handle: "Captain, 'Sea Whisper'",
|
||||
testimonial: "Finally, gear that works as hard as my crew does. No nonsense, just great quality gear.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/old-general-uniform-front-view_23-2149742906.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Maria Elena",
|
||||
handle: "Vessel Owner",
|
||||
testimonial: "Yacht Toys Mafia felt like a local discovery. Exceptional advice and pricing.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-portrait-outdoor_624325-1834.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "David Thorne",
|
||||
handle: "Marina Manager",
|
||||
testimonial: "My go-to supplier for bulk upgrades. Always reliable and always professional.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/purposeful-man-deep-thoughts-resting-pier_1262-6199.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Jack Peterson",
|
||||
handle: "Charter Op",
|
||||
testimonial: "They know what we need before we even ask. Truly a trusted partner.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technician-optimizing-data-center-equipment-maximum-efficiency_482257-117650.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Sarah Jenkins",
|
||||
handle: "Private Owner",
|
||||
testimonial: "The best selection in South Florida. I won't buy anywhere else.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-stylish-man-dressed-modern-elegant-clothes-sitting-table-outdoor-cafe-against-background-city-wharf_613910-21030.jpg",
|
||||
},
|
||||
]}
|
||||
title="Trusted by the Fleet"
|
||||
description="Read what our South Florida yacht captains have to say."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Inquire Now"
|
||||
description="Secure your gear today."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Captain Name" },
|
||||
{ name: "email", type: "email", placeholder: "Email Address" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/shanghai-china-march-25-pudong-district-view-from-bund-waterfront-area-march-25-2016-shanghai-china-pudong-is-district-shanghai-located-east-huangpu-river_1127-3131.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: LifeBuoy,
|
||||
title: "Yachts Served",
|
||||
value: "100+",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: DollarSign,
|
||||
title: "Avg Savings",
|
||||
value: "42%",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Star,
|
||||
title: "Community Rating",
|
||||
value: "4.9/5",
|
||||
},
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Results that speak for themselves."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Get In Touch"
|
||||
description="Have questions about a specific piece of gear? Let's chat."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Captain Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email Address",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/shanghai-china-march-25-pudong-district-view-from-bund-waterfront-area-march-25-2016-shanghai-china-pudong-is-district-shanghai-located-east-huangpu-river_1127-3131.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Yacht Toys Mafia"
|
||||
copyrightText="© 2025 Yacht Toys Mafia | South Florida"
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "#",
|
||||
ariaLabel: "Facebook",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[{ title: "Company", items: [{ label: "About" }, { label: "Contact" }] }]}
|
||||
bottomLeftText="© 2025 Yacht Toys Mafia"
|
||||
bottomRightText="Built for Captains"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user