Merge version_1 into main #2
249
src/app/page.tsx
249
src/app/page.tsx
@@ -37,7 +37,7 @@ export default function HomePage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
background="circleGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
@@ -60,16 +60,12 @@ export default function HomePage() {
|
||||
<HeroLogoBillboardSplit
|
||||
logoText="Betrouwbare Dakdekker"
|
||||
description="Daklekkage, renovatie of isolatie nodig? Onze experts staan klaar. 30+ jaar ervaring, gratis offerte, garantie op werk."
|
||||
background={{ variant: "noiseDiagonalGradient" }}
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "📞 Bel direct",
|
||||
href: "tel:085-0607091",
|
||||
},
|
||||
text: "📞 Bel direct", href: "tel:085-0607091"},
|
||||
{
|
||||
text: "📩 Gratis offerte",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "📩 Gratis offerte", href: "#contact"},
|
||||
]}
|
||||
layoutOrder="default"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/engineers-helmets-standing-by-factory_1157-35351.jpg"
|
||||
@@ -86,93 +82,63 @@ export default function HomePage() {
|
||||
tag="Specialisaties"
|
||||
features={[
|
||||
{
|
||||
title: "Daklekkage Reparatie",
|
||||
description:
|
||||
"Snelle en betrouwbare reparatie van daklekkages met garantie op het werk",
|
||||
icon: Droplets,
|
||||
title: "Daklekkage Reparatie", description:
|
||||
"Snelle en betrouwbare reparatie van daklekkages met garantie op het werk", icon: Droplets,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-man-painting-car-door_23-2149714299.jpg?_wi=1",
|
||||
imageAlt: "Daklekkage reparatie",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/side-view-man-painting-car-door_23-2149714299.jpg", imageAlt: "Daklekkage reparatie"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg?_wi=1",
|
||||
imageAlt: "Roof leak sealing",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg", imageAlt: "Roof leak sealing"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Dakrenovatie",
|
||||
description:
|
||||
"Volledige dakerrenovatie met moderne materialen en duurzame oplossingen",
|
||||
icon: Hammer,
|
||||
title: "Dakrenovatie", description:
|
||||
"Volledige dakerrenovatie met moderne materialen en duurzame oplossingen", icon: Hammer,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg?_wi=2",
|
||||
imageAlt: "Dakrenovatie project",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg", imageAlt: "Dakrenovatie project"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks-working-tablet-computer_342744-441.jpg?_wi=1",
|
||||
imageAlt: "Roof renovation work",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks-working-tablet-computer_342744-441.jpg", imageAlt: "Roof renovation work"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Dakisolatie",
|
||||
description:
|
||||
"Energiezuinige isolatieoplossingen om uw energiekosten te verlagen",
|
||||
icon: Zap,
|
||||
title: "Dakisolatie", description:
|
||||
"Energiezuinige isolatieoplossingen om uw energiekosten te verlagen", icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/sky-modern-building_23-2147694760.jpg?_wi=1",
|
||||
imageAlt: "Dakisolatie installatie",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/sky-modern-building_23-2147694760.jpg", imageAlt: "Dakisolatie installatie"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-man-painting-car-door_23-2149714299.jpg?_wi=2",
|
||||
imageAlt: "Insulation work",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/side-view-man-painting-car-door_23-2149714299.jpg", imageAlt: "Insulation work"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Platte Daken",
|
||||
description:
|
||||
"Gespecialiseerde installatie en onderhoud van platte daken",
|
||||
icon: SquareStack,
|
||||
title: "Platte Daken", description:
|
||||
"Gespecialiseerde installatie en onderhoud van platte daken", icon: SquareStack,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks-working-tablet-computer_342744-441.jpg?_wi=2",
|
||||
imageAlt: "Platte dak installatie",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks-working-tablet-computer_342744-441.jpg", imageAlt: "Platte dak installatie"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/sky-modern-building_23-2147694760.jpg?_wi=2",
|
||||
imageAlt: "Flat roof maintenance",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/sky-modern-building_23-2147694760.jpg", imageAlt: "Flat roof maintenance"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Zink- en Loodwerk",
|
||||
description:
|
||||
"Traditionele metaalwerking voor duurzame en esthetische afwerking",
|
||||
icon: Wrench,
|
||||
title: "Zink- en Loodwerk", description:
|
||||
"Traditionele metaalwerking voor duurzame en esthetische afwerking", icon: Wrench,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-16096.jpg",
|
||||
imageAlt: "Zink- en loodwerk",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-16096.jpg", imageAlt: "Zink- en loodwerk"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks-working-tablet-computer_342744-441.jpg?_wi=3",
|
||||
imageAlt: "Metal roofing detail",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks-working-tablet-computer_342744-441.jpg", imageAlt: "Metal roofing detail"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -188,24 +154,16 @@ export default function HomePage() {
|
||||
metrics={[
|
||||
{
|
||||
icon: Users,
|
||||
label: "Ervaren Vakmensen",
|
||||
value: "30+",
|
||||
},
|
||||
label: "Ervaren Vakmensen", value: "30+"},
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Snelle Service",
|
||||
value: "24u",
|
||||
},
|
||||
label: "Snelle Service", value: "24u"},
|
||||
{
|
||||
icon: FileText,
|
||||
label: "Gratis Offerte",
|
||||
value: "100%",
|
||||
},
|
||||
label: "Gratis Offerte", value: "100%"},
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Garantie",
|
||||
value: "100%",
|
||||
},
|
||||
label: "Garantie", value: "100%"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
@@ -218,32 +176,14 @@ export default function HomePage() {
|
||||
description="Drie eenvoudige stappen naar een dak in perfecte staat"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "Stap 1",
|
||||
title: "Inspectie",
|
||||
description: "Grondige inspectie van uw dak",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-man-painting-car-door_23-2149714299.jpg?_wi=3",
|
||||
imageAlt: "Dak inspectie",
|
||||
},
|
||||
id: "1", value: "Stap 1", title: "Inspectie", description: "Grondige inspectie van uw dak", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-man-painting-car-door_23-2149714299.jpg", imageAlt: "Dak inspectie"},
|
||||
{
|
||||
id: "2",
|
||||
value: "Stap 2",
|
||||
title: "Offerte",
|
||||
description: "Gedetailleerde en bindende offerte",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg?_wi=3",
|
||||
imageAlt: "Offerte presentatie",
|
||||
},
|
||||
id: "2", value: "Stap 2", title: "Offerte", description: "Gedetailleerde en bindende offerte", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg", imageAlt: "Offerte presentatie"},
|
||||
{
|
||||
id: "3",
|
||||
value: "Stap 3",
|
||||
title: "Uitvoering",
|
||||
description: "Professionele uitvoering met garantie",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/sky-modern-building_23-2147694760.jpg?_wi=3",
|
||||
imageAlt: "Werkuitvoering",
|
||||
},
|
||||
id: "3", value: "Stap 3", title: "Uitvoering", description: "Professionele uitvoering met garantie", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/sky-modern-building_23-2147694760.jpg", imageAlt: "Werkuitvoering"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -255,47 +195,23 @@ export default function HomePage() {
|
||||
<TestimonialCardTwelve
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Jan de Vries",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",
|
||||
imageAlt: "Jan de Vries",
|
||||
},
|
||||
id: "1", name: "Jan de Vries", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", imageAlt: "Jan de Vries"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Maria Garcia",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-woman-showing-double-thumbs-up-white-shirt-looking-happy_176474-17469.jpg",
|
||||
imageAlt: "Maria Garcia",
|
||||
},
|
||||
id: "2", name: "Maria Garcia", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-woman-showing-double-thumbs-up-white-shirt-looking-happy_176474-17469.jpg", imageAlt: "Maria Garcia"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Peter Jansen",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/ophthalmologist-patient-trying-new-glasses_23-2150923375.jpg",
|
||||
imageAlt: "Peter Jansen",
|
||||
},
|
||||
id: "3", name: "Peter Jansen", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/ophthalmologist-patient-trying-new-glasses_23-2150923375.jpg", imageAlt: "Peter Jansen"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sophie Klein",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/smiling-brunette-girl-with-confetti_23-2148135990.jpg",
|
||||
imageAlt: "Sophie Klein",
|
||||
},
|
||||
id: "4", name: "Sophie Klein", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/smiling-brunette-girl-with-confetti_23-2148135990.jpg", imageAlt: "Sophie Klein"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Ruben Voort",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/portrait-blonde-woman-eyeglasses-black-dress-holding-tea-cup-documents_197531-18145.jpg",
|
||||
imageAlt: "Ruben Voort",
|
||||
},
|
||||
id: "5", name: "Ruben Voort", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/portrait-blonde-woman-eyeglasses-black-dress-holding-tea-cup-documents_197531-18145.jpg", imageAlt: "Ruben Voort"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Linda Vermeer",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/mature-couple-with-insurance-agent_1398-4340.jpg",
|
||||
imageAlt: "Linda Vermeer",
|
||||
},
|
||||
id: "6", name: "Linda Vermeer", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/mature-couple-with-insurance-agent_1398-4340.jpg", imageAlt: "Linda Vermeer"},
|
||||
]}
|
||||
cardTitle="Over 500 tevreden klanten vertrouwen ons voor hun dakproblemen"
|
||||
cardTag="4.9/5 sterren"
|
||||
@@ -310,15 +226,7 @@ export default function HomePage() {
|
||||
description="Wij zijn actief in het hele Randstadgebied en omstreken"
|
||||
tag="Waar we werken"
|
||||
names={[
|
||||
"Rotterdam",
|
||||
"Breda",
|
||||
"Den Haag",
|
||||
"Utrecht",
|
||||
"Eindhoven",
|
||||
"Dordrecht",
|
||||
"Delft",
|
||||
"Zoetermeer",
|
||||
]}
|
||||
"Rotterdam", "Breda", "Den Haag", "Utrecht", "Eindhoven", "Dordrecht", "Delft", "Zoetermeer"]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
showCard={true}
|
||||
@@ -332,13 +240,9 @@ export default function HomePage() {
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "📞 Bel Nu",
|
||||
href: "tel:085-0607091",
|
||||
},
|
||||
text: "📞 Bel Nu", href: "tel:085-0607091"},
|
||||
{
|
||||
text: "📩 Offerte Aanvragen",
|
||||
href: "/contact",
|
||||
},
|
||||
text: "📩 Offerte Aanvragen", href: "#contact"},
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
@@ -346,68 +250,43 @@ export default function HomePage() {
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/industrial-facilities-with-commercial-residential-buildings_1268-15551.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/industrial-facilities-with-commercial-residential-buildings_1268-15551.jpg"
|
||||
imageAlt="Dak en Isolatie team aan het werk"
|
||||
logoText="Dak en Isolatie B.V."
|
||||
copyrightText="© 2024 Dak en Isolatie B.V. Alle rechten voorbehouden."
|
||||
columns={[
|
||||
{
|
||||
title: "Diensten",
|
||||
items: [
|
||||
title: "Diensten", items: [
|
||||
{
|
||||
label: "Daklekkage Reparatie",
|
||||
href: "/#services",
|
||||
},
|
||||
label: "Daklekkage Reparatie", href: "/#services"},
|
||||
{
|
||||
label: "Dakrenovatie",
|
||||
href: "/#services",
|
||||
},
|
||||
label: "Dakrenovatie", href: "/#services"},
|
||||
{
|
||||
label: "Dakisolatie",
|
||||
href: "/#services",
|
||||
},
|
||||
label: "Dakisolatie", href: "/#services"},
|
||||
{
|
||||
label: "Platte Daken",
|
||||
href: "/#services",
|
||||
},
|
||||
label: "Platte Daken", href: "/#services"},
|
||||
{
|
||||
label: "Zink- en Loodwerk",
|
||||
href: "/#services",
|
||||
},
|
||||
label: "Zink- en Loodwerk", href: "/#services"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Bedrijf",
|
||||
items: [
|
||||
title: "Bedrijf", items: [
|
||||
{
|
||||
label: "Over Ons",
|
||||
href: "/about",
|
||||
},
|
||||
label: "Over Ons", href: "/about"},
|
||||
{
|
||||
label: "Reviews",
|
||||
href: "/#testimonials",
|
||||
},
|
||||
label: "Reviews", href: "/#testimonials"},
|
||||
{
|
||||
label: "Werkgebied",
|
||||
href: "/#service-areas",
|
||||
},
|
||||
label: "Werkgebied", href: "/#service-areas"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
title: "Contact", items: [
|
||||
{
|
||||
label: "📞 085-0607091",
|
||||
href: "tel:085-0607091",
|
||||
},
|
||||
label: "📞 085-0607091", href: "tel:085-0607091"},
|
||||
{
|
||||
label: "📧 dakenisolatiebv@gmail.com",
|
||||
href: "mailto:dakenisolatiebv@gmail.com",
|
||||
},
|
||||
label: "📧 dakenisolatiebv@gmail.com", href: "mailto:dakenisolatiebv@gmail.com"},
|
||||
{
|
||||
label: "📍 Posthoornstraat 17, 3011 WD Rotterdam",
|
||||
href: "/contact",
|
||||
},
|
||||
label: "📍 Posthoornstraat 17, 3011 WD Rotterdam", href: "#contact"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -1,51 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import React from "react";
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
text: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({ text, className = "" }) => {
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
viewBox="0 0 400 100"
|
||||
className={`w-full h-auto ${className}`}
|
||||
aria-label={text}
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
x="50%"
|
||||
y="50%"
|
||||
dominantBaseline="middle"
|
||||
textAnchor="middle"
|
||||
fontSize="48"
|
||||
fontWeight="bold"
|
||||
fill="currentColor"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
};
|
||||
|
||||
export default SvgTextLogo;
|
||||
|
||||
Reference in New Issue
Block a user