356 lines
15 KiB
TypeScript
356 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
|
|
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
|
|
import AboutMetric from "@/components/sections/about/AboutMetric";
|
|
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
|
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
|
import { Skateboard, Users, MessageSquare, ShoppingCart, MapPin } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Trick School", id: "tricks" },
|
|
{ name: "Hardware", id: "hardware" },
|
|
{ name: "Gear Reviews", id: "gear" },
|
|
{ name: "Spot Map", id: "spots" },
|
|
{ name: "Community", id: "community" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Explore",
|
|
items: [
|
|
{ label: "Trick School", href: "/tricks" },
|
|
{ label: "Hardware Guide", href: "/tricks" },
|
|
{ label: "Gear Reviews", href: "/tricks" },
|
|
{ label: "Spot Map", href: "/tricks" },
|
|
],
|
|
},
|
|
{
|
|
title: "Community",
|
|
items: [
|
|
{ label: "Forum", href: "/tricks" },
|
|
{ label: "Bazaar", href: "/tricks" },
|
|
{ label: "Events", href: "/tricks" },
|
|
{ label: "Connect", href: "/tricks" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources",
|
|
items: [
|
|
{ label: "Learning Guides", href: "/tricks" },
|
|
{ label: "Setup Tips", href: "/tricks" },
|
|
{ label: "Brand Links", href: "/tricks" },
|
|
{ label: "FAQ", href: "/" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Contact", href: "#" },
|
|
{ label: "About SKATE-CORE", href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple brandName="SKATE-CORE" navItems={navItems} />
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
title="From the Czech scene for Czech riders"
|
|
description="Master skateboarding tricks with pro tips from Czech legends, explore the best hardware setups, test gear durability, find perfect spots, and connect with your local skate community."
|
|
tag="Czech Skateboarding Culture"
|
|
tagIcon={Skateboard}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "glowing-orb" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/boy-riding-skate_1112-633.jpg"
|
|
imageAlt="Professional skater performing trick"
|
|
mediaAnimation="blur-reveal"
|
|
imagePosition="right"
|
|
testimonials={[
|
|
{
|
|
name: "Maxim Habanec",
|
|
handle: "Pro Skater, Trick Master",
|
|
testimonial: "This platform captures everything about Czech skate culture. A game-changer for learning.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-cheerful-young-african-male-teenager_171337-9551.jpg",
|
|
},
|
|
{
|
|
name: "Martin Pek",
|
|
handle: "Community Leader",
|
|
testimonial: "Finally, a dedicated space for Czech riders to share knowledge and progress together.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/friends-with-skateboards-ramp_23-2147678195.jpg",
|
|
},
|
|
{
|
|
name: "Tomáš Novák",
|
|
handle: "Equipment Expert",
|
|
testimonial: "The hardware guides helped me find the perfect board for my style. Highly recommended.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-london-streets_23-2149377167.jpg",
|
|
},
|
|
{
|
|
name: "Petra Svobodová",
|
|
handle: "Street Skater",
|
|
testimonial: "Love the trick library with pro tips. Learning tricks has never been easier.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-woman-with-longboard-against-green-wall_23-2148138776.jpg",
|
|
},
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
buttons={[
|
|
{ text: "Explore Tricks", href: "/tricks" },
|
|
{ text: "Find Your Setup", href: "/tricks" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="tricks-overview" data-section="tricks-overview">
|
|
<FeatureCardMedia
|
|
title="Trick School - Minivideos & Pro-Tips"
|
|
description="Our comprehensive trick library features 10-second instructional videos with pro tips from renowned Czech skaters. Each trick is rated by difficulty and includes common mistakes to avoid."
|
|
tag="Video Learning"
|
|
tagAnimation="blur-reveal"
|
|
features={[
|
|
{
|
|
id: "kickflip",
|
|
title: "Kickflip",
|
|
description: "Master the fundamental flip trick with slow-motion foot close-ups and rider's eye view. Learn the exact foot positioning and timing.",
|
|
tag: "Fundamental",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-skateboarder-park_23-2147678272.jpg?_wi=1",
|
|
imageAlt: "Kickflip trick demonstration",
|
|
buttons: [{ text: "Watch Video", href: "#" }],
|
|
},
|
|
{
|
|
id: "heelflip",
|
|
title: "Heelflip",
|
|
description: "Progress to the heelflip with detailed instructions. Understand the heel positioning difference from kickflips.",
|
|
tag: "Intermediate",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-skate-park-training_23-2149157378.jpg?_wi=1",
|
|
imageAlt: "Heelflip trick demonstration",
|
|
buttons: [{ text: "Watch Video", href: "#" }],
|
|
},
|
|
{
|
|
id: "shove-it",
|
|
title: "Shove-It",
|
|
description: "Learn the shove-it technique with expert tips on board spin mechanics and foot placement for consistency.",
|
|
tag: "Intermediate",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-skate-park-training_23-2149157383.jpg?_wi=1",
|
|
imageAlt: "Shove-It trick demonstration",
|
|
buttons: [{ text: "Watch Video", href: "#" }],
|
|
},
|
|
{
|
|
id: "ollie",
|
|
title: "Ollie",
|
|
description: "The foundation of skateboarding. Perfect your ollie with step-by-step guidance and common mistake corrections.",
|
|
tag: "Beginner",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-skate-park-training_23-2149157388.jpg?_wi=1",
|
|
imageAlt: "Ollie trick demonstration",
|
|
buttons: [{ text: "Watch Video", href: "#" }],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hardware-guide" data-section="hardware-guide">
|
|
<ProductCardFour
|
|
title="Hardware & Setup Guide"
|
|
description="Comprehensive shopping guide with expert recommendations. Find the ideal board width based on your height and shoe size. Compare Czech brands with world legends."
|
|
tag="Setup Configurator"
|
|
tagAnimation="blur-reveal"
|
|
products={[
|
|
{
|
|
id: "deck-setup",
|
|
name: "Skateboard Deck Selection",
|
|
price: "Learn Guide",
|
|
variant: "Width: 8.0\" - 8.5\" | Material: 7-ply maple",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-skateboarders-feet-skating_171337-9160.jpg?_wi=1",
|
|
imageAlt: "Skateboard deck variety",
|
|
},
|
|
{
|
|
id: "trucks-guide",
|
|
name: "Trucks Analysis",
|
|
price: "Compare Specs",
|
|
variant: "Height: High vs Low | Bushings: Hardness guide",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-practicing-skateboarding_23-2148721094.jpg?_wi=1",
|
|
imageAlt: "Different skateboard truck styles",
|
|
},
|
|
{
|
|
id: "wheels-guide",
|
|
name: "Wheels & Durability",
|
|
price: "Hardness Table",
|
|
variant: "Indoor: 96A-101A | Street: 99A-104A",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/picture-young-man-skateboard-outdoors_171337-6376.jpg?_wi=1",
|
|
imageAlt: "Various skateboard wheel options",
|
|
},
|
|
{
|
|
id: "brands-czech",
|
|
name: "Czech Skate Brands",
|
|
price: "Local Pride",
|
|
variant: "Supporting Czech manufacturers & shops",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/rebel-teen-skater-having-fun-skate-park_52683-92785.jpg?_wi=1",
|
|
imageAlt: "Czech skateboard brand products",
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="two-columns-alternating-heights"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="gear-comparison" data-section="gear-comparison">
|
|
<MetricCardTen
|
|
title="Gear Comparison & Durability Tests"
|
|
description="See how different skate shoes and pants hold up to real-world skating. Compare durability, flexibility, and wear rates across popular brands."
|
|
tag="Performance Tested"
|
|
tagAnimation="blur-reveal"
|
|
metrics={[
|
|
{
|
|
id: "shoes-vans",
|
|
title: "Vans Old Skool",
|
|
subtitle: "Classic skate shoe | Multiple colorways available",
|
|
category: "Shoes",
|
|
value: "45-60 hours",
|
|
buttons: [{ text: "Details", href: "#" }],
|
|
},
|
|
{
|
|
id: "shoes-last-resort",
|
|
title: "Last Resort AB VM001",
|
|
subtitle: "Premium durability | Professional tested",
|
|
category: "Shoes",
|
|
value: "80-100 hours",
|
|
buttons: [{ text: "Details", href: "#" }],
|
|
},
|
|
{
|
|
id: "pants-dickies",
|
|
title: "Dickies 874 Work Pants",
|
|
subtitle: "Flexible wear-resistant material",
|
|
category: "Pants",
|
|
value: "Very Durable",
|
|
buttons: [{ text: "Details", href: "#" }],
|
|
},
|
|
{
|
|
id: "pants-carhartt",
|
|
title: "Carhartt Double Front Pant",
|
|
subtitle: "Heavy-duty construction | Built for impact",
|
|
category: "Pants",
|
|
value: "Excellent",
|
|
buttons: [{ text: "Details", href: "#" }],
|
|
},
|
|
{
|
|
id: "shoes-nike",
|
|
title: "Nike SB Zoom Blazer",
|
|
subtitle: "Technical features | Responsive sole",
|
|
category: "Shoes",
|
|
value: "50-65 hours",
|
|
buttons: [{ text: "Details", href: "#" }],
|
|
},
|
|
{
|
|
id: "socks-skate",
|
|
title: "Premium Skate Socks",
|
|
subtitle: "Cushioned protection | Moisture-wicking",
|
|
category: "Accessories",
|
|
value: "Long-lasting",
|
|
buttons: [{ text: "Shop", href: "#" }],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="community" data-section="community">
|
|
<AboutMetric
|
|
title="Community Hub - Bazaar, Forum & Connection"
|
|
metrics={[
|
|
{ icon: Users, label: "Active Skaters", value: "5,000+" },
|
|
{ icon: MessageSquare, label: "Forum Posts", value: "25,000+" },
|
|
{ icon: ShoppingCart, label: "Bazaar Listings", value: "1,500+" },
|
|
{ icon: MapPin, label: "Mapped Spots", value: "200+" },
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Everything you need to know about SKATE-CORE, our tutorials, hardware guides, and community features."
|
|
textPosition="left"
|
|
faqs={[
|
|
{
|
|
id: "faq-1",
|
|
title: "How do I use the trick videos?",
|
|
content: "Each trick features a 10-second looped video showing slow-motion foot close-ups and rider's eye view. Watch multiple times to understand the movement, then practice with the pro tips in mind.",
|
|
},
|
|
{
|
|
id: "faq-2",
|
|
title: "What's the hardware configurator?",
|
|
content: "Enter your height and shoe size, and the configurator recommends the ideal board width for your size. We also provide detailed comparisons of trucks, wheels, and Czech vs. international brands.",
|
|
},
|
|
{
|
|
id: "faq-3",
|
|
title: "Can I compare gear durability?",
|
|
content: "Yes! Our gear test section shows durability ratings for shoes (hours until toe wear) and pants (flexibility and impact resistance). You can compare two brands side-by-side.",
|
|
},
|
|
{
|
|
id: "faq-4",
|
|
title: "How do I find skating spots?",
|
|
content: "Check our interactive Spot Map feature to discover the best places to skate across the Czech Republic. Filter by location, difficulty level, and type of spot.",
|
|
},
|
|
{
|
|
id: "faq-5",
|
|
title: "Can I buy directly on SKATE-CORE?",
|
|
content: "We don't sell directly. Instead, we provide shopping guides with links to trusted Czech skate shops like Ambassadors, Picnic, and Horsefeathers.",
|
|
},
|
|
{
|
|
id: "faq-6",
|
|
title: "Is there a community forum?",
|
|
content: "Yes! Visit our Bazaar & Community section to connect with other Czech riders, discuss tricks, share spots, and participate in discussions.",
|
|
},
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={footerColumns}
|
|
bottomLeftText="© 2025 SKATE-CORE.CZ. All rights reserved. From the Czech scene for Czech riders."
|
|
bottomRightText="Made with passion for skateboarding culture"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |