Merge version_1 into main #2
@@ -19,8 +19,7 @@ export default function BlogPage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Diensten",
|
||||
items: [
|
||||
title: "Diensten", items: [
|
||||
{ label: "Webdesign & Branding", href: "/professionals" },
|
||||
{ label: "Foto- en Videoshoots", href: "/professionals" },
|
||||
{ label: "Influencer Marketing", href: "/creators" },
|
||||
@@ -28,8 +27,7 @@ export default function BlogPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Voor",
|
||||
items: [
|
||||
title: "Voor", items: [
|
||||
{ label: "Professionals", href: "/professionals" },
|
||||
{ label: "Creators", href: "/creators" },
|
||||
{ label: "Ondernemers", href: "/professionals" },
|
||||
@@ -37,8 +35,7 @@ export default function BlogPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Bedrijf",
|
||||
items: [
|
||||
title: "Bedrijf", items: [
|
||||
{ label: "Over Ons", href: "#about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
@@ -54,7 +51,7 @@ export default function BlogPage() {
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="grid"
|
||||
background="circleGradient"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
@@ -68,47 +65,17 @@ export default function BlogPage() {
|
||||
<ProductCardOne
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Crazymove - Fitness Brand",
|
||||
price: "Branding & Marketing",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t5tsis&_wi=2",
|
||||
imageAlt: "Crazymove fitness brand visual identity",
|
||||
},
|
||||
id: "1", name: "Crazymove - Fitness Brand", price: "Branding & Marketing", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t5tsis", imageAlt: "Crazymove fitness brand visual identity"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Barber Berkane - Salon",
|
||||
price: "Web & Branding",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6rrewn&_wi=3",
|
||||
imageAlt: "Barber Berkane modern salon branding",
|
||||
},
|
||||
id: "2", name: "Barber Berkane - Salon", price: "Web & Branding", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6rrewn", imageAlt: "Barber Berkane modern salon branding"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Sonia Schoonmaak - Services",
|
||||
price: "Website Development",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9xmifa&_wi=3",
|
||||
imageAlt: "Sonia Schoonmaak service website",
|
||||
},
|
||||
id: "3", name: "Sonia Schoonmaak - Services", price: "Website Development", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9xmifa", imageAlt: "Sonia Schoonmaak service website"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Chakeb - Restaurant",
|
||||
price: "Complete Rebrand",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zqwupf&_wi=3",
|
||||
imageAlt: "Chakeb restaurant branding and website",
|
||||
},
|
||||
id: "4", name: "Chakeb - Restaurant", price: "Complete Rebrand", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zqwupf", imageAlt: "Chakeb restaurant branding and website"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Design Studio Antwerp - Portfolio",
|
||||
price: "Web & Brand Identity",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=josv4d",
|
||||
imageAlt: "Design Studio Antwerp portfolio website",
|
||||
},
|
||||
id: "5", name: "Design Studio Antwerp - Portfolio", price: "Web & Brand Identity", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=josv4d", imageAlt: "Design Studio Antwerp portfolio website"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Fitnessstudio Zentrum - Rebranding",
|
||||
price: "Complete Visual Identity",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tf8h7h",
|
||||
imageAlt: "Fitnessstudio Zentrum rebranding project",
|
||||
},
|
||||
id: "6", name: "Fitnessstudio Zentrum - Rebranding", price: "Complete Visual Identity", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tf8h7h", imageAlt: "Fitnessstudio Zentrum rebranding project"},
|
||||
]}
|
||||
title="Ons Portfolio"
|
||||
description="Bekijk alle succesvolle projecten die we voor Antwerp bedrijven hebben voltooid. Van kleine lokale bedrijven tot grotere ondernemingen, wij hebben ervaring in diverse sectoren."
|
||||
@@ -126,42 +93,28 @@ export default function BlogPage() {
|
||||
<FaqSplitText
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Hoe hebben we Crazymove van startup tot trendy fitness merk gemaakt?",
|
||||
content: "Door een holistische aanpak: we definieerden hun unique selling proposition, creëerden een impactvolle visual identity met energieke kleuren en geometrische vormen, en lanceerden een social media campaign met lokale fitness influencers. De resultaten spraken voor zich: 300% groei in followers en 250% stijging in klanten.",
|
||||
},
|
||||
id: "1", title: "Hoe hebben we Crazymove van startup tot trendy fitness merk gemaakt?", content: "Door een holistische aanpak: we definieerden hun unique selling proposition, creëerden een impactvolle visual identity met energieke kleuren en geometrische vormen, en lanceerden een social media campaign met lokale fitness influencers. De resultaten spraken voor zich: 300% groei in followers en 250% stijging in klanten."},
|
||||
{
|
||||
id: "2",
|
||||
title: "Wat was de strategie voor Barber Berkane's rebrand?",
|
||||
content: "Barber Berkane wilde uit de kraam lopen met een ouderwets imago. We creëerden een moderne, minimalist visual identity met vintage touches. Het nieuwe logo en website trokken een jonger publiek, en de social media presence werd verhoogd. Ze rapporteerden een 180% stijging in online appointments.",
|
||||
},
|
||||
id: "2", title: "Wat was de strategie voor Barber Berkane's rebrand?", content: "Barber Berkane wilde uit de kraam lopen met een ouderwets imago. We creëerden een moderne, minimalist visual identity met vintage touches. Het nieuwe logo en website trokken een jonger publiek, en de social media presence werd verhoogd. Ze rapporteerden een 180% stijging in online appointments."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Hoe ondersteunden we Sonia Schoonmaak met web development?",
|
||||
content: "Sonia had geen online aanwezigheid. We bouwden een professionele website met duidelijke service offerings, pricing, en gemakkelijke boekingsfunctie. SEO-optimalisatie zorgde ervoor dat ze nu high ranken voor 'schoonmaak Antwerpen'. Ze ontvangen nu meer dan 50 online aanvragen per maand.",
|
||||
},
|
||||
id: "3", title: "Hoe ondersteunden we Sonia Schoonmaak met web development?", content: "Sonia had geen online aanwezigheid. We bouwden een professionele website met duidelijke service offerings, pricing, en gemakkelijke boekingsfunctie. SEO-optimalisatie zorgde ervoor dat ze nu high ranken voor 'schoonmaak Antwerpen'. Ze ontvangen nu meer dan 50 online aanvragen per maand."},
|
||||
{
|
||||
id: "4",
|
||||
title: "Wat maakte Chakeb's complete rebrand zo succesvol?",
|
||||
content: "Restaurant Chakeb voelde gedateerd. We herontworpen volledig: nieuw logo, nieuwe menukaart design, en een aantrekkelijke website met reserveringssysteem. Ook introduceerden we zij aan influencer collaborations. De gevolgen: media coverage, 40% meer reserveringen, en 4.8-sterren rating online.",
|
||||
},
|
||||
id: "4", title: "Wat maakte Chakeb's complete rebrand zo succesvol?", content: "Restaurant Chakeb voelde gedateerd. We herontworpen volledig: nieuw logo, nieuwe menukaart design, en een aantrekkelijke website met reserveringssysteem. Ook introduceerden we zij aan influencer collaborations. De gevolgen: media coverage, 40% meer reserveringen, en 4.8-sterren rating online."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Hoe kunnen we met uw bedrijf vergelijkbare resultaten bereiken?",
|
||||
content: "Elke project begint met een diepgaande analyse van uw huidige positie, doelen, en target audience. We creëren dan een strategie op maat, implementeren step-by-step, en monitoren resultaten continu. Wil je dit voor je bedrijf? Neem contact op voor een gratis consulentie.",
|
||||
},
|
||||
id: "5", title: "Hoe kunnen we met uw bedrijf vergelijkbare resultaten bereiken?", content: "Elke project begint met een diepgaande analyse van uw huidige positie, doelen, en target audience. We creëren dan een strategie op maat, implementeren step-by-step, en monitoren resultaten continu. Wil je dit voor je bedrijf? Neem contact op voor een gratis consulentie."},
|
||||
]}
|
||||
sideTitle="Projecten & Verhalen"
|
||||
sideDescription="Lees hoe we verschillende Antwerp bedrijven hebben geholpen groeien via strategie en creativiteit"
|
||||
textPosition="left"
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=sppitx&_wi=5"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=sppitx"
|
||||
imageAlt="PirAmine creative agency team"
|
||||
logoText="PirAmine"
|
||||
copyrightText="© 2024 PirAmine. Creatief Marketingbureau in Antwerpen."
|
||||
|
||||
251
src/app/page.tsx
251
src/app/page.tsx
@@ -29,7 +29,7 @@ export default function HomePage() {
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="grid"
|
||||
background="circleGradient"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
@@ -49,42 +49,26 @@ export default function HomePage() {
|
||||
tag="PirAmine Antwerpen"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "grid" }}
|
||||
background={{ variant: "plain" }}
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7csyz9&_wi=1",
|
||||
imageAlt: "creative agency workspace collaboration",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7csyz9", imageAlt: "creative agency workspace collaboration"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ytw5hx&_wi=1",
|
||||
imageAlt: "graphic designer working on computer",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ytw5hx", imageAlt: "graphic designer working on computer"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v4d08a&_wi=1",
|
||||
imageAlt: "web designer developing website",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v4d08a", imageAlt: "web designer developing website"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zyv76j&_wi=1",
|
||||
imageAlt: "video production camera setup studio",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zyv76j", imageAlt: "video production camera setup studio"},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zyv76j&_wi=2",
|
||||
imageAlt: "video production camera setup studio",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zyv76j", imageAlt: "video production camera setup studio"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7csyz9&_wi=2",
|
||||
imageAlt: "creative agency workspace collaboration",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7csyz9", imageAlt: "creative agency workspace collaboration"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ytw5hx&_wi=2",
|
||||
imageAlt: "graphic designer working on computer",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ytw5hx", imageAlt: "graphic designer working on computer"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v4d08a&_wi=2",
|
||||
imageAlt: "web designer developing website",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v4d08a", imageAlt: "web designer developing website"},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Plan een kennismaking", href: "#contact" },
|
||||
@@ -104,51 +88,23 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "webdesign",
|
||||
label: "Web",
|
||||
title: "Webdesign & Branding",
|
||||
items: [
|
||||
"Professionele websites die converteren",
|
||||
"Visuele identiteit en merkstrategie",
|
||||
"Responsive design voor alle devices",
|
||||
"SEO-geoptimaliseerd",
|
||||
],
|
||||
id: "webdesign", label: "Web", title: "Webdesign & Branding", items: [
|
||||
"Professionele websites die converteren", "Visuele identiteit en merkstrategie", "Responsive design voor alle devices", "SEO-geoptimaliseerd"],
|
||||
buttons: [{ text: "Meer info", href: "/professionals" }],
|
||||
},
|
||||
{
|
||||
id: "fotovideo",
|
||||
label: "Foto",
|
||||
title: "Foto- en Videoshoots",
|
||||
items: [
|
||||
"Professionele fotografie voor producten",
|
||||
"Corporate video content creatie",
|
||||
"Social media content production",
|
||||
"Brand storytelling through media",
|
||||
],
|
||||
id: "fotovideo", label: "Foto", title: "Foto- en Videoshoots", items: [
|
||||
"Professionele fotografie voor producten", "Corporate video content creatie", "Social media content production", "Brand storytelling through media"],
|
||||
buttons: [{ text: "Meer info", href: "/professionals" }],
|
||||
},
|
||||
{
|
||||
id: "influencer",
|
||||
label: "Social",
|
||||
title: "Influencer Marketing",
|
||||
items: [
|
||||
"Connectie met relevante content creators",
|
||||
"Authentieke brand collaborations",
|
||||
"Kampagnes met bereik en engagement",
|
||||
"Community growth strategie",
|
||||
],
|
||||
id: "influencer", label: "Social", title: "Influencer Marketing", items: [
|
||||
"Connectie met relevante content creators", "Authentieke brand collaborations", "Kampagnes met bereik en engagement", "Community growth strategie"],
|
||||
buttons: [{ text: "Meer info", href: "/creators" }],
|
||||
},
|
||||
{
|
||||
id: "print",
|
||||
label: "Print",
|
||||
title: "Print & Drukwerk",
|
||||
items: [
|
||||
"Business cards en briefpapier",
|
||||
"Flyers en brochures",
|
||||
"Packaging en verpakking",
|
||||
"Premium kwaliteit druk",
|
||||
],
|
||||
id: "print", label: "Print", title: "Print & Drukwerk", items: [
|
||||
"Business cards en briefpapier", "Flyers en brochures", "Packaging en verpakking", "Premium kwaliteit druk"],
|
||||
buttons: [{ text: "Meer info", href: "/professionals" }],
|
||||
},
|
||||
]}
|
||||
@@ -167,33 +123,13 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Crazymove - Fitness Brand",
|
||||
price: "Branding & Marketing",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t5tsis&_wi=1",
|
||||
imageAlt: "fitness brand marketing energy",
|
||||
},
|
||||
id: "1", name: "Crazymove - Fitness Brand", price: "Branding & Marketing", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t5tsis", imageAlt: "fitness brand marketing energy"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Barber Berkane - Salon",
|
||||
price: "Web & Branding",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6rrewn&_wi=1",
|
||||
imageAlt: "barbershop branding salon design",
|
||||
},
|
||||
id: "2", name: "Barber Berkane - Salon", price: "Web & Branding", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6rrewn", imageAlt: "barbershop branding salon design"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Sonia Schoonmaak - Services",
|
||||
price: "Website Development",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9xmifa&_wi=1",
|
||||
imageAlt: "cleaning service business branding",
|
||||
},
|
||||
id: "3", name: "Sonia Schoonmaak - Services", price: "Website Development", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9xmifa", imageAlt: "cleaning service business branding"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Chakeb - Restaurant",
|
||||
price: "Complete Rebrand",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zqwupf&_wi=1",
|
||||
imageAlt: "restaurant branding food service",
|
||||
},
|
||||
id: "4", name: "Chakeb - Restaurant", price: "Complete Rebrand", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zqwupf", imageAlt: "restaurant branding food service"},
|
||||
]}
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
@@ -211,7 +147,7 @@ export default function HomePage() {
|
||||
description="Gegrondvest in Antwerpen"
|
||||
subdescription="Sinds 2020 helpen we lokale bedrijven hun potentieel uit te putten"
|
||||
icon={Heart}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=sppitx&_wi=1"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=sppitx"
|
||||
imageAlt="creative team collaboration meeting"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
@@ -226,24 +162,9 @@ export default function HomePage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Crazymove",
|
||||
"Barber Berkane",
|
||||
"Sonia Schoonmaak",
|
||||
"Chakeb Restaurant",
|
||||
"Fitnessstudio Zentrum",
|
||||
"Design Studio Antwerp",
|
||||
"Retail Express",
|
||||
"Coaching Academy",
|
||||
]}
|
||||
"Crazymove", "Barber Berkane", "Sonia Schoonmaak", "Chakeb Restaurant", "Fitnessstudio Zentrum", "Design Studio Antwerp", "Retail Express", "Coaching Academy"]}
|
||||
logos={[
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jy61k8",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3bsx6q",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tf8h7h",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=josv4d",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0azajz",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=znfcpl",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hc4hsz",
|
||||
]}
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jy61k8", "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3bsx6q", "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tf8h7h", "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=josv4d", "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0azajz", "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=znfcpl", "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hc4hsz"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
@@ -257,50 +178,20 @@ export default function HomePage() {
|
||||
tagIcon={Quote}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Tom Jacobs",
|
||||
role: "Eigenaar",
|
||||
company: "Fitnessstudio Zentrum",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8i7rwy",
|
||||
imageAlt: "professional business man portrait",
|
||||
},
|
||||
id: "1", name: "Tom Jacobs", role: "Eigenaar", company: "Fitnessstudio Zentrum", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8i7rwy", imageAlt: "professional business man portrait"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Emma Vermeulen",
|
||||
role: "Manager",
|
||||
company: "Retail Express",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x4h4pd&_wi=1",
|
||||
imageAlt: "professional woman business portrait",
|
||||
},
|
||||
id: "2", name: "Emma Vermeulen", role: "Manager", company: "Retail Express", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x4h4pd", imageAlt: "professional woman business portrait"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Karim Aït Moussa",
|
||||
role: "Ondernemer",
|
||||
company: "Barber Berkane",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mtmv5f&_wi=1",
|
||||
imageAlt: "diverse professional man portrait",
|
||||
},
|
||||
id: "3", name: "Karim Aït Moussa", role: "Ondernemer", company: "Barber Berkane", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mtmv5f", imageAlt: "diverse professional man portrait"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Lien De Smet",
|
||||
role: "Directeur",
|
||||
company: "Design Studio Antwerp",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qcqt9h&_wi=1",
|
||||
imageAlt: "professional woman business headshot",
|
||||
},
|
||||
id: "4", name: "Lien De Smet", role: "Directeur", company: "Design Studio Antwerp", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qcqt9h", imageAlt: "professional woman business headshot"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Youssef Ziani",
|
||||
role: "Eigenaar",
|
||||
company: "Coaching Academy",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=beb4kv&_wi=1",
|
||||
imageAlt: "professional man diverse portrait",
|
||||
},
|
||||
id: "5", name: "Youssef Ziani", role: "Eigenaar", company: "Coaching Academy", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=beb4kv", imageAlt: "professional man diverse portrait"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
@@ -316,39 +207,22 @@ export default function HomePage() {
|
||||
sideDescription="Alles wat u moet weten over onze diensten en hoe we u kunnen helpen."
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Wat is het proces voor een nieuw project?",
|
||||
content: "We beginnen altijd met een kennismakingsgesprek om uw doelen en visie te begrijpen. Daarna maken we een strategie, presenteren we concepten, en implementeren we stap voor stap. U bent altijd betrokken in het proces.",
|
||||
},
|
||||
id: "1", title: "Wat is het proces voor een nieuw project?", content: "We beginnen altijd met een kennismakingsgesprek om uw doelen en visie te begrijpen. Daarna maken we een strategie, presenteren we concepten, en implementeren we stap voor stap. U bent altijd betrokken in het proces."},
|
||||
{
|
||||
id: "2",
|
||||
title: "Hoeveel kost een website?",
|
||||
content: "De kosten variëren afhankelijk van complexiteit en functionaliteit. We bieden offerte na ons eerste gesprek. Van eenvoudige sites tot e-commerce platforms, we hebben oplossingen voor elk budget.",
|
||||
},
|
||||
id: "2", title: "Hoeveel kost een website?", content: "De kosten variëren afhankelijk van complexiteit en functionaliteit. We bieden offerte na ons eerste gesprek. Van eenvoudige sites tot e-commerce platforms, we hebben oplossingen voor elk budget."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Kan ik als content creator met PirAmine samenwerken?",
|
||||
content: "Ja! We hebben een actieve Creator Community. Creators kunnen zich aanmelden om toegang te krijgen tot brand collaborations, groeimogelijkheden en professionele begeleiding. Stuur ons een bericht voor meer info.",
|
||||
},
|
||||
id: "3", title: "Kan ik als content creator met PirAmine samenwerken?", content: "Ja! We hebben een actieve Creator Community. Creators kunnen zich aanmelden om toegang te krijgen tot brand collaborations, groeimogelijkheden en professionele begeleiding. Stuur ons een bericht voor meer info."},
|
||||
{
|
||||
id: "4",
|
||||
title: "Hoelang duurt een compleet rebrand?",
|
||||
content: "Een complete rebrand (logo, huisstijl, website) neemt meestal 6-12 weken, afhankelijk van scope. We werken in fases en houden u op de hoogte van elke stap.",
|
||||
},
|
||||
id: "4", title: "Hoelang duurt een compleet rebrand?", content: "Een complete rebrand (logo, huisstijl, website) neemt meestal 6-12 weken, afhankelijk van scope. We werken in fases en houden u op de hoogte van elke stap."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Bieden jullie ook social media management?",
|
||||
content: "Ja, we helpen met social media strategie en content creatie. Door ons Creator Network kunnen we authentieke content makers inzetten om uw bereik te vergroten en engagement te stimuleren.",
|
||||
},
|
||||
id: "5", title: "Bieden jullie ook social media management?", content: "Ja, we helpen met social media strategie en content creatie. Door ons Creator Network kunnen we authentieke content makers inzetten om uw bereik te vergroten en engagement te stimuleren."},
|
||||
{
|
||||
id: "6",
|
||||
title: "Hoe neem ik contact op voor een offerte?",
|
||||
content: "U kunt ons bellen, mailen of het contactformulier invullen. We nemen snel contact op voor een gratis kennismakingsgesprek. Dit gesprek helpt ons uw behoeften beter te begrijpen.",
|
||||
},
|
||||
id: "6", title: "Hoe neem ik contact op voor een offerte?", content: "U kunt ons bellen, mailen of het contactformulier invullen. We nemen snel contact op voor een gratis kennismakingsgesprek. Dit gesprek helpt ons uw behoeften beter te begrijpen."},
|
||||
]}
|
||||
textPosition="left"
|
||||
useInvertedBackground={true}
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -360,36 +234,18 @@ export default function HomePage() {
|
||||
tagIcon={Zap}
|
||||
features={[
|
||||
{
|
||||
id: "phone",
|
||||
label: "Bel",
|
||||
title: "Telefoongesprek",
|
||||
items: [
|
||||
"Direct contact met ons team",
|
||||
"Vragen en antwoorden",
|
||||
"Snelle reactie",
|
||||
],
|
||||
id: "phone", label: "Bel", title: "Telefoongesprek", items: [
|
||||
"Direct contact met ons team", "Vragen en antwoorden", "Snelle reactie"],
|
||||
buttons: [{ text: "Bel Nu", href: "tel:+32123456789" }],
|
||||
},
|
||||
{
|
||||
id: "form",
|
||||
label: "Form",
|
||||
title: "Contactformulier",
|
||||
items: [
|
||||
"Beschrijf uw project",
|
||||
"Ontvang offerte",
|
||||
"Geen verplichtingen",
|
||||
],
|
||||
id: "form", label: "Form", title: "Contactformulier", items: [
|
||||
"Beschrijf uw project", "Ontvang offerte", "Geen verplichtingen"],
|
||||
buttons: [{ text: "Verstuur Bericht", href: "/contact" }],
|
||||
},
|
||||
{
|
||||
id: "meeting",
|
||||
label: "Meet",
|
||||
title: "Plan een Kennismaking",
|
||||
items: [
|
||||
"Gratis adviesgesprek",
|
||||
"Strategie bespreken",
|
||||
"Volgende stappen bepalen",
|
||||
],
|
||||
id: "meeting", label: "Meet", title: "Plan een Kennismaking", items: [
|
||||
"Gratis adviesgesprek", "Strategie bespreken", "Volgende stappen bepalen"],
|
||||
buttons: [{ text: "Plan een Afspraak", href: "#contact" }],
|
||||
},
|
||||
]}
|
||||
@@ -401,14 +257,13 @@ export default function HomePage() {
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=sppitx&_wi=2"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=sppitx"
|
||||
imageAlt="creative team collaboration meeting"
|
||||
logoText="PirAmine"
|
||||
copyrightText="© 2024 PirAmine. Creatief Marketingbureau in Antwerpen."
|
||||
columns={[
|
||||
{
|
||||
title: "Diensten",
|
||||
items: [
|
||||
title: "Diensten", items: [
|
||||
{ label: "Webdesign & Branding", href: "/professionals" },
|
||||
{ label: "Foto- en Videoshoots", href: "/professionals" },
|
||||
{ label: "Influencer Marketing", href: "/creators" },
|
||||
@@ -416,8 +271,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Voor",
|
||||
items: [
|
||||
title: "Voor", items: [
|
||||
{ label: "Professionals", href: "/professionals" },
|
||||
{ label: "Creators", href: "/creators" },
|
||||
{ label: "Ondernemers", href: "/professionals" },
|
||||
@@ -425,8 +279,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Bedrijf",
|
||||
items: [
|
||||
title: "Bedrijf", items: [
|
||||
{ label: "Over Ons", href: "#about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
|
||||
@@ -25,7 +25,7 @@ export default function ProfessionalsPage() {
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="grid"
|
||||
background="circleGradient"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
@@ -47,42 +47,18 @@ export default function ProfessionalsPage() {
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "webdesign",
|
||||
label: "Web",
|
||||
title: "Webdesign & Digitale Branding",
|
||||
items: [
|
||||
"Maatwerk websites met hoog conversie potentieel",
|
||||
"Compleet merk identiteit systeem",
|
||||
"Responsive design voor alle apparaten",
|
||||
"SEO optimalisatie en snelheid",
|
||||
"Regelmatig onderhoud en updates",
|
||||
],
|
||||
id: "webdesign", label: "Web", title: "Webdesign & Digitale Branding", items: [
|
||||
"Maatwerk websites met hoog conversie potentieel", "Compleet merk identiteit systeem", "Responsive design voor alle apparaten", "SEO optimalisatie en snelheid", "Regelmatig onderhoud en updates"],
|
||||
buttons: [{ text: "Offerte aanvragen", href: "/contact" }],
|
||||
},
|
||||
{
|
||||
id: "fotovideo",
|
||||
label: "Media",
|
||||
title: "Professionele Foto- en Video",
|
||||
items: [
|
||||
"Productfotografie met studio kwaliteit",
|
||||
"Corporate video's voor marketing",
|
||||
"Eventdocumentatie en testimonials",
|
||||
"Social media content production",
|
||||
"Post-production en editing",
|
||||
],
|
||||
id: "fotovideo", label: "Media", title: "Professionele Foto- en Video", items: [
|
||||
"Productfotografie met studio kwaliteit", "Corporate video's voor marketing", "Eventdocumentatie en testimonials", "Social media content production", "Post-production en editing"],
|
||||
buttons: [{ text: "Offerte aanvragen", href: "/contact" }],
|
||||
},
|
||||
{
|
||||
id: "print",
|
||||
label: "Print",
|
||||
title: "Print & Bedrijfsmaterialen",
|
||||
items: [
|
||||
"Business cards en professioneel briefpapier",
|
||||
"Brochures en marketing materialen",
|
||||
"Packaging ontwerp en druk",
|
||||
"Promotionele items en goodies",
|
||||
"Premium kwaliteit en snelle doorlooptijd",
|
||||
],
|
||||
id: "print", label: "Print", title: "Print & Bedrijfsmaterialen", items: [
|
||||
"Business cards en professioneel briefpapier", "Brochures en marketing materialen", "Packaging ontwerp en druk", "Promotionele items en goodies", "Premium kwaliteit en snelle doorlooptijd"],
|
||||
buttons: [{ text: "Offerte aanvragen", href: "/contact" }],
|
||||
},
|
||||
]}
|
||||
@@ -101,26 +77,11 @@ export default function ProfessionalsPage() {
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Barber Berkane - Complete Salon Rebrand",
|
||||
price: "Web + Branding + Marketing",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6rrewn&_wi=2",
|
||||
imageAlt: "barbershop branding salon design",
|
||||
},
|
||||
id: "1", name: "Barber Berkane - Complete Salon Rebrand", price: "Web + Branding + Marketing", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6rrewn", imageAlt: "barbershop branding salon design"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sonia Schoonmaak - Service Website",
|
||||
price: "Website Development + SEO",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9xmifa&_wi=2",
|
||||
imageAlt: "cleaning service business branding",
|
||||
},
|
||||
id: "2", name: "Sonia Schoonmaak - Service Website", price: "Website Development + SEO", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9xmifa", imageAlt: "cleaning service business branding"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Chakeb Restaurant - Digital Transformation",
|
||||
price: "Complete Brand Identity + Website",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zqwupf&_wi=2",
|
||||
imageAlt: "restaurant branding food service",
|
||||
},
|
||||
id: "3", name: "Chakeb Restaurant - Digital Transformation", price: "Complete Brand Identity + Website", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zqwupf", imageAlt: "restaurant branding food service"},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
@@ -135,39 +96,22 @@ export default function ProfessionalsPage() {
|
||||
sideDescription="Antwoorden op veelgestelde vragen van ondernemers en professionals."
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Wat is het verschil tussen een logo en volledige branding?",
|
||||
content: "Een logo is slechts één element. Volledige branding omvat logo, kleurenpalet, typografie, richtlijnen en alle toepassingen. Dit zorgt voor consistentie en professionele uitstraling.",
|
||||
},
|
||||
id: "1", title: "Wat is het verschil tussen een logo en volledige branding?", content: "Een logo is slechts één element. Volledige branding omvat logo, kleurenpalet, typografie, richtlijnen en alle toepassingen. Dit zorgt voor consistentie en professionele uitstraling."},
|
||||
{
|
||||
id: "2",
|
||||
title: "Hoe lang duurt een complete website?",
|
||||
content: "Voor kleine tot middelgrote bedrijven duurt een website doorgaans 6-10 weken. Dit hangt af van complexiteit, aantal pagina's en gewenste functionaliteiten.",
|
||||
},
|
||||
id: "2", title: "Hoe lang duurt een complete website?", content: "Voor kleine tot middelgrote bedrijven duurt een website doorgaans 6-10 weken. Dit hangt af van complexiteit, aantal pagina's en gewenste functionaliteiten."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Kunnen jullie helpen met SEO?",
|
||||
content: "Ja! Alle websites die we bouwen zijn SEO-geoptimaliseerd. We voeren ook SEO audits uit en bieden ongoing optimalisatie voor betere zoekmachine rankings.",
|
||||
},
|
||||
id: "3", title: "Kunnen jullie helpen met SEO?", content: "Ja! Alle websites die we bouwen zijn SEO-geoptimaliseerd. We voeren ook SEO audits uit en bieden ongoing optimalisatie voor betere zoekmachine rankings."},
|
||||
{
|
||||
id: "4",
|
||||
title: "Werken jullie met bestaande bedrijven of alleen startups?",
|
||||
content: "We werken met beide! Of u nu een nieuw bedrijf opstart of uw bestaande merk wilt transformeren, we hebben ervaring en expertise.",
|
||||
},
|
||||
id: "4", title: "Werken jullie met bestaande bedrijven of alleen startups?", content: "We werken met beide! Of u nu een nieuw bedrijf opstart of uw bestaande merk wilt transformeren, we hebben ervaring en expertise."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Wat gebeurt er na de website launch?",
|
||||
content: "We bieden ondersteuning, onderhoud en updates. We helpen ook met social media strategie, content creation en verdere marketing.",
|
||||
},
|
||||
id: "5", title: "Wat gebeurt er na de website launch?", content: "We bieden ondersteuning, onderhoud en updates. We helpen ook met social media strategie, content creation en verdere marketing."},
|
||||
{
|
||||
id: "6",
|
||||
title: "Hoe bepaal je wat de website kost?",
|
||||
content: "Kosten hangen af van scope, complexiteit, aantal pages en functionaliteiten. Na het eerste gesprek geven we een gedetailleerde offerte.",
|
||||
},
|
||||
id: "6", title: "Hoe bepaal je wat de website kost?", content: "Kosten hangen af van scope, complexiteit, aantal pages en functionaliteiten. Na het eerste gesprek geven we een gedetailleerde offerte."},
|
||||
]}
|
||||
textPosition="left"
|
||||
useInvertedBackground={true}
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -179,36 +123,18 @@ export default function ProfessionalsPage() {
|
||||
tagIcon={Zap}
|
||||
features={[
|
||||
{
|
||||
id: "email",
|
||||
label: "Email",
|
||||
title: "Mail ons direct",
|
||||
items: [
|
||||
"Uitgebreid bericht",
|
||||
"Gratis offerte",
|
||||
"Snelle respons",
|
||||
],
|
||||
id: "email", label: "Email", title: "Mail ons direct", items: [
|
||||
"Uitgebreid bericht", "Gratis offerte", "Snelle respons"],
|
||||
buttons: [{ text: "Stuur Email", href: "/contact" }],
|
||||
},
|
||||
{
|
||||
id: "phone",
|
||||
label: "Bel",
|
||||
title: "Direct telefoongesprek",
|
||||
items: [
|
||||
"Persoonlijk contact",
|
||||
"Direct advies",
|
||||
"Snelle planning",
|
||||
],
|
||||
id: "phone", label: "Bel", title: "Direct telefoongesprek", items: [
|
||||
"Persoonlijk contact", "Direct advies", "Snelle planning"],
|
||||
buttons: [{ text: "Bel Nu", href: "tel:+32123456789" }],
|
||||
},
|
||||
{
|
||||
id: "meeting",
|
||||
label: "Meet",
|
||||
title: "Kennismakingsgesprek",
|
||||
items: [
|
||||
"30 minuten advies",
|
||||
"Project planning",
|
||||
"Geen verplichtingen",
|
||||
],
|
||||
id: "meeting", label: "Meet", title: "Kennismakingsgesprek", items: [
|
||||
"30 minuten advies", "Project planning", "Geen verplichtingen"],
|
||||
buttons: [{ text: "Plan een Afspraak", href: "/contact" }],
|
||||
},
|
||||
]}
|
||||
@@ -220,14 +146,13 @@ export default function ProfessionalsPage() {
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=sppitx&_wi=3"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=sppitx"
|
||||
imageAlt="creative team collaboration meeting"
|
||||
logoText="PirAmine"
|
||||
copyrightText="© 2024 PirAmine. Creatief Marketingbureau in Antwerpen."
|
||||
columns={[
|
||||
{
|
||||
title: "Diensten",
|
||||
items: [
|
||||
title: "Diensten", items: [
|
||||
{ label: "Webdesign & Branding", href: "/professionals" },
|
||||
{ label: "Foto- en Videoshoots", href: "/professionals" },
|
||||
{ label: "Influencer Marketing", href: "/creators" },
|
||||
@@ -235,8 +160,7 @@ export default function ProfessionalsPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Voor",
|
||||
items: [
|
||||
title: "Voor", items: [
|
||||
{ label: "Professionals", href: "/professionals" },
|
||||
{ label: "Creators", href: "/creators" },
|
||||
{ label: "Ondernemers", href: "/professionals" },
|
||||
@@ -244,8 +168,7 @@ export default function ProfessionalsPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Bedrijf",
|
||||
items: [
|
||||
title: "Bedrijf", items: [
|
||||
{ label: "Over Ons", href: "#about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
|
||||
@@ -1,51 +1,47 @@
|
||||
"use client";
|
||||
import React, { SVGProps } from 'react';
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
className?: string;
|
||||
interface SvgTextLogoProps extends SVGProps<SVGSVGElement> {
|
||||
text: string;
|
||||
fontSize?: number;
|
||||
fontFamily?: string;
|
||||
fontWeight?: number | string;
|
||||
fill?: string;
|
||||
strokeWidth?: number;
|
||||
stroke?: 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,
|
||||
fontSize = 48,
|
||||
fontFamily = 'Arial, sans-serif',
|
||||
fontWeight = 700,
|
||||
fill = 'currentColor',
|
||||
strokeWidth = 0,
|
||||
stroke = 'none',
|
||||
...props
|
||||
}) => {
|
||||
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 ${text.length * fontSize * 0.6} ${fontSize * 1.5}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<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%"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
fontSize={fontSize}
|
||||
fontFamily={fontFamily}
|
||||
fontWeight={fontWeight}
|
||||
fill={fill}
|
||||
strokeWidth={strokeWidth}
|
||||
stroke={stroke}
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user