194 lines
7.9 KiB
TypeScript
194 lines
7.9 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import { ShoppingBag, Truck, Users } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Over Ons", id: "about"},
|
|
{
|
|
name: "Aanbod", id: "product"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="ST"
|
|
button={{ text: "Bestel Nu", href: "#product" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{
|
|
variant: "downward-rays-static"}}
|
|
title="Welcome to ST. "
|
|
description="Welcome to our ST — your spot for clothes, accessories, and more! "
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/black-shopping-bags-red-dots-top-view_23-2148663134.jpg", imageAlt: "ST deal 1"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-real-estate-agent-showing-house_23-2150225242.jpg", imageAlt: "ST deal 2"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/black-gift-with-discount-tag-cart_23-2148283760.jpg", imageAlt: "ST deal 3"},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
title="Who are we? "
|
|
description="“At ST, we bring style, quality, and everyday essentials together — made to inspire confidence and elevate your lifestyle.” "
|
|
imageSrc="http://img.b2bpic.net/free-photo/delivery-robot-futuristic-environment_23-2151189309.jpg"
|
|
imageAlt="Over topverkoopdeal.nl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="feature" data-section="feature">
|
|
<FeatureCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Sharp prices", description: "Always the lowest price for the best products. ", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-hand-holding-gold-stars-business-concept_107791-15942.jpg", imageAlt: "Prijzen"},
|
|
{
|
|
title: "delivery. ", description: "Ordered today, delivered to your home as quickly as possible via our partners.", imageSrc: "http://img.b2bpic.net/free-photo/delivery-icon-left-side_187299-39628.jpg", imageAlt: "Levering"},
|
|
{
|
|
title: "Quality Guarantee ", description: "Every product has been thoroughly checked for quality. ", imageSrc: "http://img.b2bpic.net/free-vector/colorful-set-delivery-elements_23-2147672486.jpg", imageAlt: "Garantie"},
|
|
]}
|
|
title="Why choose ST"
|
|
description="ST is all about style — bold, modern, and made to stand out. "
|
|
/>
|
|
</div>
|
|
|
|
<div id="product" data-section="product">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="one-large-left-three-stacked-right"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1", name: "", price: "", variant: "", imageSrc: "http://img.b2bpic.net/free-photo/gray-stage-background-pedestal-podium-product-display-show-product-white-background-3d-rendering_56104-1496.jpg"},
|
|
{
|
|
id: "p2", name: "", price: "", variant: "", imageSrc: "http://img.b2bpic.net/free-photo/kitchen-still-life_23-2152009917.jpg"},
|
|
{
|
|
id: "p3", name: "", price: "", variant: "", imageSrc: "http://img.b2bpic.net/free-photo/rear-view-very-busy-man_329181-14548.jpg"},
|
|
]}
|
|
title="A webshop of peace. "
|
|
description="Check out our current range of high-quality products. "
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Jan de Vries", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021809.jpg"},
|
|
{
|
|
id: "2", name: "Annelies Bakker", imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg"},
|
|
{
|
|
id: "3", name: "Mark Jansen", imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-using-tablet-celebrating-success-outdoor-cafe_1262-18867.jpg"},
|
|
]}
|
|
cardTitle="Wat klanten zeggen"
|
|
cardTag="Reviews"
|
|
cardAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metric" data-section="metric">
|
|
<MetricCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", title: "Tevreden Klanten", value: "5.000+", icon: Users,
|
|
},
|
|
{
|
|
id: "m2", title: "Producten", value: "500+", icon: ShoppingBag,
|
|
},
|
|
{
|
|
id: "m3", title: "Landelijk Verzonden", value: "100%", icon: Truck,
|
|
},
|
|
]}
|
|
title="ST in Cijfers"
|
|
description="Onze groei en impact op de markt."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "f1", title: "How do you send the product? ", content: "Wij werken samen met betrouwbare logistieke partners voor snelle levering."},
|
|
{
|
|
id: "f2", title: "", content: "Je kunt binnen 14 dagen zorgeloos retourneren."},
|
|
{
|
|
id: "f3", title: "Are the products real? ", content: "Wij verkopen uitsluitend nieuwe kwalitatieve producten."},
|
|
]}
|
|
title="Most ask questions. "
|
|
description="Heb je een vraag over onze werkwijze?"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Contact"
|
|
title="Do you have questions? "
|
|
description="Neem contact op met het team van ST. Wij staan klaar om je te helpen."
|
|
imageSrc="http://img.b2bpic.net/free-photo/student-desk-with-computer-books-notepads-table_169016-49023.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText=""
|
|
copyrightText="© 2025 ST - topverkoopdeal.nl"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|