175 lines
9.0 KiB
TypeScript
175 lines
9.0 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 TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
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", imageAlt: "Skater landing a kickflip" },
|
|
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/skateboards-stack-blue-background_23-2148849207.jpg", 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}
|
|
title="Why Choose Crooks?"
|
|
description="Premium quality meets relentless street culture."
|
|
features={[
|
|
{ title: "Fast Shipping", description: "Get your gear delivered anywhere in the country lightning-fast.", bentoComponent: "reveal-icon", icon: Zap },
|
|
{ title: "Expert Setup", description: "We build boards that are ready to roll right out of the box.", bentoComponent: "reveal-icon", icon: Wrench },
|
|
{ title: "Pro Quality", description: "Only the industry-leading brands that pro riders trust.", bentoComponent: "reveal-icon", icon: Award }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
title="New Arrivals"
|
|
description="The latest hardware and apparel from the brands you love."
|
|
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" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
title="The Crew's Take"
|
|
description="What our local skaters and loyal riders have to say."
|
|
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" }
|
|
]}
|
|
/>
|
|
</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>
|
|
);
|
|
} |