353 lines
11 KiB
TypeScript
353 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import { Award, Film, Instagram, Twitter, Wrench, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Shop",
|
|
id: "#products",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "#about",
|
|
},
|
|
{
|
|
name: "Community",
|
|
id: "#testimonials",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
brandName="Crooks"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
background={{
|
|
variant: "rotated-rays-animated",
|
|
}}
|
|
title="Built for the Streets."
|
|
description="Your ultimate destination for premium skate decks, hardware, and authentic apparel. Crafted for skaters, by skaters."
|
|
buttons={[
|
|
{
|
|
text: "Shop Now",
|
|
href: "#products",
|
|
},
|
|
]}
|
|
carouselItems={[
|
|
{
|
|
id: "1",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-skateboard_23-2148435990.jpg?_wi=1",
|
|
imageAlt: "Skater landing a kickflip",
|
|
},
|
|
{
|
|
id: "2",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/skateboards-stack-blue-background_23-2148849207.jpg?_wi=1",
|
|
imageAlt: "Custom skateboard decks",
|
|
},
|
|
{
|
|
id: "3",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/view-skateboard-with-wheels-outdoors_23-2150407520.jpg",
|
|
imageAlt: "Skateboard hardware parts",
|
|
},
|
|
{
|
|
id: "4",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-people-skateboarding-japan_23-2149331771.jpg",
|
|
imageAlt: "Skater resting",
|
|
},
|
|
{
|
|
id: "5",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/couple-together-outdoors-with-skateboard_23-2148749245.jpg",
|
|
imageAlt: "Skate shop interior",
|
|
},
|
|
{
|
|
id: "6",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/surfer-sits-longboard-city-skatepark-hugging-his-brown-white-basenji-dog-looking-city-landscape-shot-from-back_346278-1749.jpg",
|
|
imageAlt: "Skate grinding rail",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
title="From the Ground Up"
|
|
description="Crooks Skate Shop was founded with a single mission: to provide the local scene with the highest quality gear. We've grown from a small basement shop to a hub for riders and creators."
|
|
bulletPoints={[
|
|
{
|
|
title: "Premium Decks",
|
|
description: "Hand-picked selection of the most durable and stylish decks.",
|
|
},
|
|
{
|
|
title: "Hardware Experts",
|
|
description: "Custom setup advice to keep your ride dialed in perfectly.",
|
|
},
|
|
{
|
|
title: "Community Focus",
|
|
description: "Supporting local skaters with events, workshops, and meetups.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-hugging-couple-hipsters-with-skateboards_23-2148138795.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Fast Shipping",
|
|
description: "Get your gear delivered anywhere in the country lightning-fast.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Zap,
|
|
imageSrc: "http://img.b2bpic.net/free-vector/skateboarding-emblem-label-set-with-descriptions-skate-die-skateboard-street-contest-freestyle-skateboarding-vector-illustration_1284-33451.jpg",
|
|
imageAlt: "minimalist skate brand logo",
|
|
},
|
|
{
|
|
title: "Expert Setup",
|
|
description: "We build boards that are ready to roll right out of the box.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Wrench,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-skateboard_23-2148435990.jpg?_wi=2",
|
|
imageAlt: "minimalist skate brand logo",
|
|
},
|
|
{
|
|
title: "Pro Quality",
|
|
description: "Only the industry-leading brands that pro riders trust.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Award,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/skateboards-stack-blue-background_23-2148849207.jpg?_wi=2",
|
|
imageAlt: "minimalist skate brand logo",
|
|
},
|
|
]}
|
|
title="Why Choose Crooks?"
|
|
description="Premium quality meets relentless street culture."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Pro Series Deck",
|
|
price: "$65",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/skater-s-legs-ready-make-trick_23-2147665409.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Classic Wheels",
|
|
price: "$40",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-boy-holding-skateboard_23-2148478742.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Street Hoodie",
|
|
price: "$85",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/skate-parkteens-skate-park_23-2149836884.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Performance Shoes",
|
|
price: "$110",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/skater-girl-urban-sitting-stairs-side-view_23-2148787219.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "Titanium Trucks",
|
|
price: "$55",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/teenage-boy-with-skateboard-close-up_23-2148937842.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "Skate Multi-tool",
|
|
price: "$25",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-cheerful-woman-sunglasses_171337-11851.jpg",
|
|
},
|
|
]}
|
|
title="New Arrivals"
|
|
description="The latest hardware and apparel from the brands you love."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Alex R.",
|
|
role: "Rider",
|
|
company: "Local Squad",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-skateboarder-black-hoodie-cap-sits-ramp-skatepark-summer-time_613910-20869.jpg",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Ben M.",
|
|
role: "Skater",
|
|
company: "Urban Club",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-teen-sitting-skatepark_23-2149854332.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Chloe S.",
|
|
role: "Pro",
|
|
company: "Street Pro",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/life-after-covid-freedom-concept_23-2149068550.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Dave K.",
|
|
role: "Enthusiast",
|
|
company: "Riders Co",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/teens-holding-skateboards-full-shot_23-2149854313.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Erica T.",
|
|
role: "Coach",
|
|
company: "Skate Academy",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-young-smiling-african-male-teenager_171337-9543.jpg",
|
|
},
|
|
]}
|
|
title="The Crew's Take"
|
|
description="What our local skaters and loyal riders have to say."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "Do you offer international shipping?",
|
|
content: "Yes, we ship globally.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "How do I choose the right deck size?",
|
|
content: "Check our sizing guide or visit the shop for an expert recommendation.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "What's the return policy?",
|
|
content: "We offer returns within 30 days of purchase for unused products.",
|
|
},
|
|
]}
|
|
sideTitle="Common Questions"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Santa Cruz",
|
|
"Independent",
|
|
"Thrasher",
|
|
"Spitfire",
|
|
"Bones",
|
|
"Vans",
|
|
"Nike SB",
|
|
]}
|
|
title="Trusted by Pros"
|
|
description="We only stock the brands that defined the culture."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "rotated-rays-animated",
|
|
}}
|
|
text="Visit us in the heart of the downtown district for custom setups and authentic skate gear."
|
|
buttons={[
|
|
{
|
|
text: "Get Directions",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Crooks Skate"
|
|
copyrightText="© 2025 Crooks Skate Shop"
|
|
socialLinks={[
|
|
{
|
|
icon: Instagram,
|
|
href: "#",
|
|
ariaLabel: "Instagram",
|
|
},
|
|
{
|
|
icon: Twitter,
|
|
href: "#",
|
|
ariaLabel: "Twitter",
|
|
},
|
|
{
|
|
icon: Film,
|
|
href: "#",
|
|
ariaLabel: "Youtube",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|