Merge version_1 into main #2
231
src/app/page.tsx
231
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { CheckCircle, Zap, Shield } from "lucide-react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
@@ -13,149 +14,109 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Over Ons",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Klantportal",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Raamstyling B.V."
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Over Ons", id: "about" },
|
||||
{ name: "Klantportal", id: "contact" },
|
||||
]}
|
||||
brandName="Raamstyling B.V."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Raamstyling B.V. Klantportal"
|
||||
description="Log in met je bedrijfsgegevens om direct toegang te krijgen tot je bestellingen, prijzen en exclusieve projectoverzichten."
|
||||
buttons={[
|
||||
{
|
||||
text: "Inloggen",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-interior-styling-consultati-1774874013953-e5f3bd3e.png?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Raamstyling B.V. Klantportal"
|
||||
description="Log in met je bedrijfsgegevens om direct toegang te krijgen tot je bestellingen, prijzen en exclusieve projectoverzichten."
|
||||
buttons={[{ text: "Inloggen", href: "#contact" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-interior-styling-consultati-1774874013953-e5f3bd3e.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Uw partner in professionele raamstyling"
|
||||
description="Wij bieden zakelijke klanten volledige transparantie en controle over projecten. Met ons portaal beheert u offertes, orders en voorraadbeheer efficiënter dan ooit."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/clean-software-dashboard-interface-on-a--1774874014375-8bbd1904.png?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Uw partner in professionele raamstyling"
|
||||
description="Wij bieden zakelijke klanten volledige transparantie en controle over projecten. Met ons portaal beheert u offertes, orders en voorraadbeheer efficiënter dan ooit."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/clean-software-dashboard-interface-on-a--1774874014375-8bbd1904.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Real-time Orderstatus",
|
||||
description: "Volg uw bestellingen van productie tot aflevering direct via uw persoonlijke dashboard.",
|
||||
buttonIcon: "CheckCircle",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-interior-styling-consultati-1774874013953-e5f3bd3e.png?_wi=2",
|
||||
imageAlt: "Professional interior styling consultation setting with modern office furniture and window treatment",
|
||||
},
|
||||
{
|
||||
title: "Exclusieve Prijzen",
|
||||
description: "Bekijk altijd uw actuele zakelijke nettoprijzen zonder tussenkomst van onze afdeling.",
|
||||
buttonIcon: "Zap",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/clean-software-dashboard-interface-on-a--1774874014375-8bbd1904.png?_wi=2",
|
||||
imageAlt: "Clean software dashboard interface on a laptop screen, B2B styling portal, analytical charts, data m",
|
||||
},
|
||||
{
|
||||
title: "Documentatie & Offertes",
|
||||
description: "Al uw documenten, technische tekeningen en offertes op één veilige plek.",
|
||||
buttonIcon: "Shield",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-customer-support-desk-moder-1774874013688-34cf7111.png?_wi=1",
|
||||
imageAlt: "Professional customer support desk, modern B2B office environment, bright and clean office space, mi",
|
||||
},
|
||||
]}
|
||||
title="Uw voordelen in het portal"
|
||||
description="Ontdek waarom zakelijke partners kiezen voor onze digitale workflow."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Real-time Orderstatus", description: "Volg uw bestellingen van productie tot aflevering direct via uw persoonlijke dashboard.", buttonIcon: CheckCircle,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-interior-styling-consultati-1774874013953-e5f3bd3e.png", imageAlt: "Professional interior styling consultation"
|
||||
},
|
||||
{
|
||||
title: "Exclusieve Prijzen", description: "Bekijk altijd uw actuele zakelijke nettoprijzen zonder tussenkomst van onze afdeling.", buttonIcon: Zap,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/clean-software-dashboard-interface-on-a--1774874014375-8bbd1904.png", imageAlt: "Clean software dashboard interface"
|
||||
},
|
||||
{
|
||||
title: "Documentatie & Offertes", description: "Al uw documenten, technische tekeningen en offertes op één veilige plek.", buttonIcon: Shield,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-customer-support-desk-moder-1774874013688-34cf7111.png", imageAlt: "Professional customer support desk"
|
||||
}
|
||||
]}
|
||||
title="Uw voordelen in het portal"
|
||||
description="Ontdek waarom zakelijke partners kiezen voor onze digitale workflow."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Direct toegang aanvragen"
|
||||
description="Nog geen account? Neem vandaag nog contact met ons op om uw account te activeren."
|
||||
inputs={[
|
||||
{
|
||||
name: "Bedrijfsnaam",
|
||||
type: "text",
|
||||
placeholder: "Bedrijfsnaam",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "Email",
|
||||
type: "email",
|
||||
placeholder: "offerte@raamstyling.nl",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "Bericht",
|
||||
placeholder: "Wat is uw vraag?",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-customer-support-desk-moder-1774874013688-34cf7111.png?_wi=2"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Direct toegang aanvragen"
|
||||
description="Nog geen account? Neem vandaag nog contact met ons op om uw account te activeren."
|
||||
inputs={[
|
||||
{ name: "Bedrijfsnaam", type: "text", placeholder: "Bedrijfsnaam", required: true },
|
||||
{ name: "Email", type: "email", placeholder: "offerte@raamstyling.nl", required: true },
|
||||
]}
|
||||
textarea={{
|
||||
name: "Bericht", placeholder: "Wat is uw vraag?", rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfJ2DovNo1xgzGdmeHFtfc23bA/professional-customer-support-desk-moder-1774874013688-34cf7111.png"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="legal" data-section="legal">
|
||||
<LegalSection
|
||||
layout="section"
|
||||
title="Algemene Voorwaarden"
|
||||
sections={[
|
||||
{
|
||||
heading: "Toegang",
|
||||
content: {
|
||||
type: "paragraph",
|
||||
text: "Dit portaal is uitsluitend bedoeld voor geregistreerde zakelijke relaties van Raamstyling B.V.",
|
||||
},
|
||||
},
|
||||
{
|
||||
heading: "Privacybeleid",
|
||||
content: {
|
||||
type: "list",
|
||||
items: [
|
||||
"Persoonsgegevens worden verwerkt conform de AVG-wetgeving.",
|
||||
"Gegevens worden enkel gebruikt voor offertetrajecten en orderverwerking.",
|
||||
"U heeft recht op inzage en correctie van uw bedrijfsgegevens.",
|
||||
],
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="legal" data-section="legal">
|
||||
<LegalSection
|
||||
layout="section"
|
||||
title="Algemene Voorwaarden"
|
||||
sections={[
|
||||
{
|
||||
heading: "Toegang", content: { text: "Dit portaal is uitsluitend bedoeld voor geregistreerde zakelijke relaties van Raamstyling B.V." }
|
||||
},
|
||||
{
|
||||
heading: "Privacybeleid", content: { items: ["Persoonsgegevens worden verwerkt conform de AVG-wetgeving.", "Gegevens worden enkel gebruikt voor offertetrajecten en orderverwerking.", "U heeft recht op inzage en correctie van uw bedrijfsgegevens."] }
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Raamstyling B.V."
|
||||
copyrightText="© 2025 Raamstyling B.V. Alle rechten voorbehouden."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Raamstyling B.V."
|
||||
copyrightText="© 2025 Raamstyling B.V. Alle rechten voorbehouden."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user