Update src/app/page.tsx
This commit is contained in:
351
src/app/page.tsx
351
src/app/page.tsx
@@ -27,259 +27,118 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Etusivu",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Palvelut",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Tietoa",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Yhteystiedot",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="MetalliKunnossapito"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Etusivu", id: "hero" },
|
||||
{ name: "Palvelut", id: "features" },
|
||||
{ name: "Tietoa", id: "about" },
|
||||
{ name: "Yhteystiedot", id: "contact" },
|
||||
]}
|
||||
brandName="MetalliKunnossapito"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Asiantuntevaa metallialan kunnossapitoa ja hitsausta"
|
||||
description="Tarjoamme korkealaatuisia hitsausratkaisuja ja teollisuuden kunnossapitopalveluita ammattitaidolla. Luotettava kumppani metallitöissä."
|
||||
buttons={[
|
||||
{
|
||||
text: "Ota yhteyttä",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-fitter-working-doing-polishing-metal_651396-96.jpg"
|
||||
showDimOverlay={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/team-diverse-analysts-consultants-reviewing-data-checklists_482257-125957.jpg",
|
||||
alt: "Asiakas 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-builder-hardhat_1398-1726.jpg",
|
||||
alt: "Asiakas 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/factory-personnel-inspecting-steel-machinery-warehouse-plant-highlighting-professional-job_482257-135643.jpg",
|
||||
alt: "Asiakas 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/confident-male-worker-standing-warehouse_107420-96550.jpg",
|
||||
alt: "Asiakas 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-solar-panel-manufacturing-facility-presents-green-energy-production_482257-119910.jpg",
|
||||
alt: "Asiakas 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Yli 500 tyytyväistä asiakasta"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Asiantuntevaa metallialan kunnossapitoa ja hitsausta"
|
||||
description="Tarjoamme korkealaatuisia hitsausratkaisuja ja teollisuuden kunnossapitopalveluita ammattitaidolla. Luotettava kumppani metallitöissä."
|
||||
buttons={[{ text: "Ota yhteyttä", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-fitter-working-doing-polishing-metal_651396-96.jpg"
|
||||
showDimOverlay={true}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/team-diverse-analysts-consultants-reviewing-data-checklists_482257-125957.jpg", alt: "Asiakas 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-builder-hardhat_1398-1726.jpg", alt: "Asiakas 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/factory-personnel-inspecting-steel-machinery-warehouse-plant-highlighting-professional-job_482257-135643.jpg", alt: "Asiakas 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/confident-male-worker-standing-warehouse_107420-96550.jpg", alt: "Asiakas 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-solar-panel-manufacturing-facility-presents-green-energy-production_482257-119910.jpg", alt: "Asiakas 5" },
|
||||
]}
|
||||
avatarText="Yli 500 tyytyväistä asiakasta"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Luotettavaa metalliosaamista"
|
||||
description="Olemme erikoistuneet metallialan hitsaustöihin ja teollisuuden kunnossapitoon. Varmistamme, että laitteistonne ja rakenteenne pysyvät toimintakunnossa. Kokemuksemme takaa kestävät ja laadukkaat lopputulokset vaativissakin kohteissa."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/dark-workshop-experienced-worker-protective-uniform-is-working-with-metal_613910-17236.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Luotettavaa metalliosaamista"
|
||||
description="Olemme erikoistuneet metallialan hitsaustöihin ja teollisuuden kunnossapitoon. Varmistamme, että laitteistonne ja rakenteenne pysyvät toimintakunnossa. Kokemuksemme takaa kestävät ja laadukkaat lopputulokset vaativissakin kohteissa."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/dark-workshop-experienced-worker-protective-uniform-is-working-with-metal_613910-17236.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "Teollisuuden kunnossapito",
|
||||
description: "Ennakoiva kunnossapito ja nopeat korjaustyöt tuotannon jatkuvuuden varmistamiseksi.",
|
||||
},
|
||||
{
|
||||
icon: Flame,
|
||||
title: "Vaativat hitsaustyöt",
|
||||
description: "TIG-, MIG- ja puikkohitsaus ammattitaidolla teräs- ja metallirakenteisiin.",
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: "Asennus ja huolto",
|
||||
description: "Metallirakenteiden asennukset ja huoltopalvelut yrityksille ja yhteisöille.",
|
||||
},
|
||||
{
|
||||
icon: Cog,
|
||||
title: "Metallikoneistus",
|
||||
description: "Tarkkuutta vaativat koneistustyöt nykyaikaisella kalustolla.",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Laadunvarmistus",
|
||||
description: "Standardien mukainen laadunvalvonta ja dokumentointi jokaisessa projektissa.",
|
||||
},
|
||||
]}
|
||||
title="Palvelumme"
|
||||
description="Kattavat ratkaisut teollisuuden ja rakentamisen tarpeisiin."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Wrench, title: "Teollisuuden kunnossapito", description: "Ennakoiva kunnossapito ja nopeat korjaustyöt tuotannon jatkuvuuden varmistamiseksi." },
|
||||
{ icon: Flame, title: "Vaativat hitsaustyöt", description: "TIG-, MIG- ja puikkohitsaus ammattitaidolla teräs- ja metallirakenteisiin." },
|
||||
{ icon: Building2, title: "Asennus ja huolto", description: "Metallirakenteiden asennukset ja huoltopalvelut yrityksille ja yhteisöille." },
|
||||
{ icon: Cog, title: "Metallikoneistus", description: "Tarkkuutta vaativat koneistustyöt nykyaikaisella kalustolla." },
|
||||
{ icon: ShieldCheck, title: "Laadunvarmistus", description: "Standardien mukainen laadunvalvonta ja dokumentointi jokaisessa projektissa." },
|
||||
]}
|
||||
title="Palvelumme"
|
||||
description="Kattavat ratkaisut teollisuuden ja rakentamisen tarpeisiin."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15+",
|
||||
title: "Vuotta kokemusta",
|
||||
items: [
|
||||
"Pitkäjänteistä osaamista",
|
||||
"Kokeneet tekijät",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "500+",
|
||||
title: "Projektia valmistunut",
|
||||
items: [
|
||||
"Monipuoliset kohteet",
|
||||
"Tyytyväiset asiakkaat",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "Asiakastyytyväisyys",
|
||||
items: [
|
||||
"Laadunvarmistus",
|
||||
"Luotettavuus",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "24/7",
|
||||
title: "Tukipalvelu",
|
||||
items: [
|
||||
"Päivystys",
|
||||
"Nopea vaste",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m5",
|
||||
value: "50",
|
||||
title: "Asiantuntijaa",
|
||||
items: [
|
||||
"Sertifioidut hitsaajat",
|
||||
"Työnjohto",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Avainlukumme"
|
||||
description="Laadun ja osaamisen takuuna."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "15+", title: "Vuotta kokemusta", items: ["Pitkäjänteistä osaamista", "Kokeneet tekijät"] },
|
||||
{ id: "m2", value: "500+", title: "Projektia valmistunut", items: ["Monipuoliset kohteet", "Tyytyväiset asiakkaat"] },
|
||||
{ id: "m3", value: "100%", title: "Asiakastyytyväisyys", items: ["Laadunvarmistus", "Luotettavuus"] },
|
||||
{ id: "m4", value: "24/7", title: "Tukipalvelu", items: ["Päivystys", "Nopea vaste"] },
|
||||
{ id: "m5", value: "50", title: "Asiantuntijaa", items: ["Sertifioidut hitsaajat", "Työnjohto"] },
|
||||
]}
|
||||
title="Avainlukumme"
|
||||
description="Laadun ja osaamisen takuuna."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Ville Virtanen",
|
||||
handle: "Tuotantopäällikkö",
|
||||
testimonial: "Erittäin laadukasta ja nopeaa palvelua. Hitsaustyöt sujuivat aikataulussa.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/team-diverse-analysts-consultants-reviewing-data-checklists_482257-125957.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Matti Meikäläinen",
|
||||
handle: "Toimitusjohtaja",
|
||||
testimonial: "Kunnossapitopalvelu on ollut korvaamaton osa tehtaamme toimintaa.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-builder-hardhat_1398-1726.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Liisa Laitinen",
|
||||
handle: "Työmaapäällikkö",
|
||||
testimonial: "Luotettava kumppani, jonka osaamiseen voi aina luottaa rakennusprojekteissa.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/factory-personnel-inspecting-steel-machinery-warehouse-plant-highlighting-professional-job_482257-135643.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Pekka Pomo",
|
||||
handle: "Projektijohtaja",
|
||||
testimonial: "Ammattitaito näkyy työn jäljessä. Suosittelen lämpimästi.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-male-worker-standing-warehouse_107420-96550.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Anna Asentaja",
|
||||
handle: "Työnjohtaja",
|
||||
testimonial: "Erinomaista työtä hitsauksissa ja asennuksissa. Luottamus on 100%.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-solar-panel-manufacturing-facility-presents-green-energy-production_482257-119910.jpg",
|
||||
},
|
||||
]}
|
||||
title="Asiakkaidemme kokemuksia"
|
||||
description="Luotettavuus ja laatu ovat keskiössä jokaisessa projektissamme."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Ville Virtanen", handle: "Tuotantopäällikkö", testimonial: "Erittäin laadukasta ja nopeaa palvelua. Hitsaustyöt sujuivat aikataulussa.", imageSrc: "http://img.b2bpic.net/free-photo/team-diverse-analysts-consultants-reviewing-data-checklists_482257-125957.jpg" },
|
||||
{ id: "t2", name: "Matti Meikäläinen", handle: "Toimitusjohtaja", testimonial: "Kunnossapitopalvelu on ollut korvaamaton osa tehtaamme toimintaa.", imageSrc: "http://img.b2bpic.net/free-photo/happy-builder-hardhat_1398-1726.jpg" },
|
||||
{ id: "t3", name: "Liisa Laitinen", handle: "Työmaapäällikkö", testimonial: "Luotettava kumppani, jonka osaamiseen voi aina luottaa rakennusprojekteissa.", imageSrc: "http://img.b2bpic.net/free-photo/factory-personnel-inspecting-steel-machinery-warehouse-plant-highlighting-professional-job_482257-135643.jpg" },
|
||||
{ id: "t4", name: "Pekka Pomo", handle: "Projektijohtaja", testimonial: "Ammattitaito näkyy työn jäljessä. Suosittelen lämpimästi.", imageSrc: "http://img.b2bpic.net/free-photo/confident-male-worker-standing-warehouse_107420-96550.jpg" },
|
||||
{ id: "t5", name: "Anna Asentaja", handle: "Työnjohtaja", testimonial: "Erinomaista työtä hitsauksissa ja asennuksissa. Luottamus on 100%.", imageSrc: "http://img.b2bpic.net/free-photo/man-solar-panel-manufacturing-facility-presents-green-energy-production_482257-119910.jpg" },
|
||||
]}
|
||||
title="Asiakkaidemme kokemuksia"
|
||||
description="Luotettavuus ja laatu ovat keskiössä jokaisessa projektissamme."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Pyydä tarjous tai kysy lisää"
|
||||
description="Ota yhteyttä, niin kartoitetaan yhdessä tarpeenne metallialan palveluihin."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Nimi",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Sähköposti",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Viesti",
|
||||
rows: 4,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/architectural-blueprints_1359-423.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Pyydä tarjous tai kysy lisää"
|
||||
description="Ota yhteyttä, niin kartoitetaan yhdessä tarpeenne metallialan palveluihin."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Nimi", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Sähköposti", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Viesti", rows: 4 }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/architectural-blueprints_1359-423.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="MetalliKunnossapito"
|
||||
leftLink={{
|
||||
text: "Käyttöehdot",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Yhteystiedot",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="MetalliKunnossapito"
|
||||
leftLink={{ text: "Käyttöehdot", href: "#" }}
|
||||
rightLink={{ text: "Yhteystiedot", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user