Merge version_3 into main #5
@@ -5,7 +5,8 @@ import "./globals.css";
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "BESTRONG Metalworks", description: "Custom steel and metal fabrication services for residential, commercial, and industrial projects in Bern"};
|
||||
title: "BESTRONG Metalworks", description: "Custom steel and metal fabrication services for residential, commercial, and industrial projects in Bern"
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
@@ -13,7 +14,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="de">
|
||||
<body className={inter.className}>{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
|
||||
107
src/app/page.tsx
107
src/app/page.tsx
@@ -28,49 +28,50 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Dienstleistungen", id: "services" },
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Über uns", id: "about" },
|
||||
{ name: "Kontakt", id: "contact" },
|
||||
]}
|
||||
brandName="BESTRONG"
|
||||
bottomLeftText="Bern, Switzerland"
|
||||
bottomLeftText="Bern, Schweiz"
|
||||
bottomRightText="hello@bestrong.ch"
|
||||
showNavItems={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
title="Precision Metalwork Crafted with Care"
|
||||
description="Custom steel and metal fabrication services for residential, commercial, and industrial projects in Bern"
|
||||
title="Präzisions-Metallverarbeitung mit Sorgfalt"
|
||||
description="Maßgeschneiderte Stahl- und Metallverarbeitungsdienste für Wohn-, Gewerbe- und Industrieprojekte in Bern"
|
||||
background={{ variant: "plain" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blacksmith-work-his-forge_23-2152021020.jpg"
|
||||
imageAlt="Professional metalworking workshop with skilled craftsman"
|
||||
imageAlt="Professionelle Metallverarbeitungswerkstatt mit erfahrenem Handwerker"
|
||||
mediaAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Thomas Mueller", handle: "Homeowner, Bern", testimonial: "Exceptional craftsmanship. They transformed our vision into stunning metal gates with perfect attention to detail.", rating: 5,
|
||||
name: "Thomas Mueller", handle: "Hausbesitzer, Bern", testimonial: "Außergewöhnliche Handwerkskunst. Sie haben unsere Vision in wunderbare Metalltor mit perfekter Liebe zum Detail umgewandelt.", rating: 5,
|
||||
imageSrc: "/placeholders/placeholder1.webp?_wi=1"
|
||||
},
|
||||
{
|
||||
name: "Sarah Schneider", handle: "Architect, Interlaken", testimonial: "Reliable partner for all our metal fabrication needs. Quality work, professional team, always on time.", rating: 5,
|
||||
name: "Sarah Schneider", handle: "Architektin, Interlaken", testimonial: "Zuverlässiger Partner für alle unsere Metallverarbeitungsbedürfnisse. Hochwertige Arbeit, professionelles Team, immer pünktlich.", rating: 5,
|
||||
imageSrc: "/placeholders/placeholder1.webp?_wi=2"
|
||||
},
|
||||
{
|
||||
name: "Klaus Weber", handle: "Factory Owner, Bern", testimonial: "Outstanding industrial metalwork solutions. They understand precision and deadlines completely.", rating: 5,
|
||||
name: "Klaus Weber", handle: "Fabrikbesitzer, Bern", testimonial: "Hervorragende Lösungen für Industrie-Metallarbeiten. Sie verstehen Präzision und Fristen vollständig.", rating: 5,
|
||||
imageSrc: "/placeholders/placeholder1.webp?_wi=3"
|
||||
},
|
||||
{
|
||||
name: "Emma Keller", handle: "Interior Designer, Zurich", testimonial: "Creative solutions with impeccable execution. Every project exceeds our expectations.", rating: 5,
|
||||
name: "Emma Keller", handle: "Innenarchitektin, Zürich", testimonial: "Kreative Lösungen mit tadellosen Ausführung. Jedes Projekt übertrifft unsere Erwartungen.", rating: 5,
|
||||
imageSrc: "/placeholders/placeholder1.webp?_wi=4"
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Get Free Quote", href: "contact" },
|
||||
{ text: "View Our Work", href: "portfolio" },
|
||||
{ text: "Kostenloses Angebot", href: "contact" },
|
||||
{ text: "Unsere Arbeiten ansehen", href: "portfolio" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
tag="Swiss Craftsmanship"
|
||||
tag="Schweizer Handwerkskunst"
|
||||
tagAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
@@ -78,39 +79,39 @@ export default function LandingPage() {
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
title="Twenty years of excellence in steel and metalworking. We combine traditional craftsmanship with modern precision techniques to deliver exceptional results for every project."
|
||||
title="Zwanzig Jahre Exzellenz in Stahl- und Metallverarbeitung. Wir kombinieren traditionelle Handwerkskunst mit modernen Präzisionstechniken, um außergewöhnliche Ergebnisse für jedes Projekt zu liefern."
|
||||
useInvertedBackground={false}
|
||||
metricsAnimation="slide-up"
|
||||
metrics={[
|
||||
{ icon: Award, label: "Years Experience", value: "20+" },
|
||||
{ icon: Factory, label: "Projects Completed", value: "500+" },
|
||||
{ icon: Users, label: "Satisfied Clients", value: "400+" },
|
||||
{ icon: Zap, label: "Custom Designs", value: "100%" },
|
||||
{ icon: Award, label: "Jahre Erfahrung", value: "20+" },
|
||||
{ icon: Factory, label: "Abgeschlossene Projekte", value: "500+" },
|
||||
{ icon: Users, label: "Zufriedene Kunden", value: "400+" },
|
||||
{ icon: Zap, label: "Maßgeschneiderte Designs", value: "100%" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentySix
|
||||
title="Our Services"
|
||||
description="Comprehensive metalworking solutions tailored to your specific needs and vision"
|
||||
title="Unsere Dienstleistungen"
|
||||
description="Umfassende Metallverarbeitungslösungen, die auf Ihre spezifischen Anforderungen und Vorstellungen zugeschnitten sind"
|
||||
features={[
|
||||
{
|
||||
title: "Custom Gates & Fencing", description: "Bespoke decorative and functional metal gates with geometric precision", imageSrc: "http://img.b2bpic.net/free-photo/entrance-old-luxury-mansion-bucharest-romania-golden-details-facade-fence_1268-19825.jpg?_wi=1", imageAlt: "Custom metal gates", buttonIcon: ArrowRight,
|
||||
title: "Maßgeschneiderte Tore & Zäune", description: "Bespoke dekorative und funktionale Metalltore mit geometrischer Präzision", imageSrc: "http://img.b2bpic.net/free-photo/entrance-old-luxury-mansion-bucharest-romania-golden-details-facade-fence_1268-19825.jpg?_wi=1", imageAlt: "Maßgeschneiderte Metalltore", buttonIcon: ArrowRight,
|
||||
},
|
||||
{
|
||||
title: "Steel Fabrication", description: "Industrial-grade steel cutting, bending, and welding for structural projects", imageSrc: "http://img.b2bpic.net/free-photo/one-working-day-modern-automatic-bus-trolleybus-car-production-with-unfinished-cars-workers-protective-uniform-factory-background-automobile-assembly-line-welding-arm_645730-373.jpg?_wi=1", imageAlt: "Steel fabrication work", buttonIcon: ArrowRight,
|
||||
title: "Stahlverarbeitung", description: "Industriequalität Stahlschneiden, Biegen und Schweißen für Strukturprojekte", imageSrc: "http://img.b2bpic.net/free-photo/one-working-day-modern-automatic-bus-trolleybus-car-production-with-unfinished-cars-workers-protective-uniform-factory-background-automobile-assembly-line-welding-arm_645730-373.jpg?_wi=1", imageAlt: "Stahlverarbeitungsarbeit", buttonIcon: ArrowRight,
|
||||
},
|
||||
{
|
||||
title: "Welding & Joining", description: "Expert welding techniques for durable, seamless metal connections", imageSrc: "http://img.b2bpic.net/free-photo/process-creating-new-metal-parts-busy-workshop-made-by-worker_613910-17216.jpg", imageAlt: "Professional welding", buttonIcon: ArrowRight,
|
||||
title: "Schweißen & Verbinden", description: "Professionelle Schweißtechniken für langlebige, nahtlose Metallverbindungen", imageSrc: "http://img.b2bpic.net/free-photo/process-creating-new-metal-parts-busy-workshop-made-by-worker_613910-17216.jpg", imageAlt: "Professionelles Schweißen", buttonIcon: ArrowRight,
|
||||
},
|
||||
{
|
||||
title: "Custom Design", description: "Bespoke designs that translate your vision into geometric metalwork", imageSrc: "http://img.b2bpic.net/free-photo/macro-photography-metal-object-with-diamond-pattern_91008-525.jpg?_wi=1", imageAlt: "Custom metal design details", buttonIcon: ArrowRight,
|
||||
title: "Maßgeschneidertes Design", description: "Bespoke Designs, die Ihre Vision in geometrische Metallarbeiten übersetzen", imageSrc: "http://img.b2bpic.net/free-photo/macro-photography-metal-object-with-diamond-pattern_91008-525.jpg?_wi=1", imageAlt: "Details zum maßgeschneiderten Metalldesign", buttonIcon: ArrowRight,
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tag="Services"
|
||||
tag="Dienstleistungen"
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
@@ -120,20 +121,20 @@ export default function LandingPage() {
|
||||
<ProductCardTwo
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "Residential", name: "Modern Steel Entry Gates", price: "CHF 4,500", rating: 5,
|
||||
reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/entrance-old-luxury-mansion-bucharest-romania-golden-details-facade-fence_1268-19825.jpg?_wi=2", imageAlt: "Modern steel entry gates with geometric design"
|
||||
id: "1", brand: "Wohngebäude", name: "Modernes Stahleingangstüren", price: "CHF 4.500", rating: 5,
|
||||
reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/entrance-old-luxury-mansion-bucharest-romania-golden-details-facade-fence_1268-19825.jpg?_wi=2", imageAlt: "Moderne Stahleingangstüren mit geometrischem Design"
|
||||
},
|
||||
{
|
||||
id: "2", brand: "Commercial", name: "Industrial Staircase Frame", price: "CHF 7,200", rating: 5,
|
||||
reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/one-working-day-modern-automatic-bus-trolleybus-car-production-with-unfinished-cars-workers-protective-uniform-factory-background-automobile-assembly-line-welding-arm_645730-373.jpg?_wi=2", imageAlt: "Industrial steel staircase framework"
|
||||
id: "2", brand: "Gewerblich", name: "Industrielle Treppenschachtrahmen", price: "CHF 7.200", rating: 5,
|
||||
reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/one-working-day-modern-automatic-bus-trolleybus-car-production-with-unfinished-cars-workers-protective-uniform-factory-background-automobile-assembly-line-welding-arm_645730-373.jpg?_wi=2", imageAlt: "Industrielle Stahltreppenschacht-Rahmenkonstruktion"
|
||||
},
|
||||
{
|
||||
id: "3", brand: "Custom", name: "Architectural Metal Panel System", price: "CHF 9,800", rating: 5,
|
||||
reviewCount: "6", imageSrc: "http://img.b2bpic.net/free-photo/macro-photography-metal-object-with-diamond-pattern_91008-525.jpg?_wi=2", imageAlt: "Architectural metal panels with precision detail"
|
||||
id: "3", brand: "Maßgeschneidert", name: "Architektonisches Metallpanelsystem", price: "CHF 9.800", rating: 5,
|
||||
reviewCount: "6", imageSrc: "http://img.b2bpic.net/free-photo/macro-photography-metal-object-with-diamond-pattern_91008-525.jpg?_wi=2", imageAlt: "Architektonische Metallpanele mit Präzisionsdetails"
|
||||
},
|
||||
]}
|
||||
title="Recent Projects"
|
||||
description="Showcase of our finest metalwork installations and custom fabrications"
|
||||
title="Aktuelle Projekte"
|
||||
description="Schauplatz unserer feinsten Metallarbeit Installationen und maßgeschneiderten Verarbeitungen"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
@@ -147,25 +148,25 @@ export default function LandingPage() {
|
||||
<MetricCardOne
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "99.8", title: "percent", description: "Quality assurance accuracy in all projects", icon: CheckCircle,
|
||||
id: "1", value: "99.8", title: "Prozent", description: "Qualitätssicherungsgenauigkeit bei allen Projekten", icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "2", value: "1000+", title: "tons", description: "Steel processed annually with precision", icon: Package,
|
||||
id: "2", value: "1000+", title: "Tonnen", description: "Jährlich mit Präzision verarbeiteter Stahl", icon: Package,
|
||||
},
|
||||
{
|
||||
id: "3", value: "48h", title: "turnaround", description: "Express fabrication on select projects", icon: Zap,
|
||||
id: "3", value: "48h", title: "Umschlag", description: "Schnellverarbeitung bei ausgewählten Projekten", icon: Zap,
|
||||
},
|
||||
{
|
||||
id: "4", value: "10yr", title: "warranty", description: "Structural integrity guarantee on all work", icon: Shield,
|
||||
id: "4", value: "10j", title: "Garantie", description: "Strukturelle Integritätsgarantie bei allen Arbeiten", icon: Shield,
|
||||
},
|
||||
]}
|
||||
title="Our Capabilities"
|
||||
description="Industry-leading standards for quality, precision, and reliability"
|
||||
title="Unsere Möglichkeiten"
|
||||
description="Branchenführende Standards für Qualität, Präzision und Zuverlässigkeit"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
tag="Quality Metrics"
|
||||
tag="Qualitätsmetriken"
|
||||
tagAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
@@ -174,27 +175,27 @@ export default function LandingPage() {
|
||||
<ContactFaq
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "What types of metal do you work with?", content: "We specialize in steel, stainless steel, aluminum, and iron. Each material is selected based on project requirements for durability, aesthetics, and structural integrity."
|
||||
id: "1", title: "Mit welchen Arten von Metallen arbeiten Sie?", content: "Wir spezialisieren uns auf Stahl, Edelstahl, Aluminium und Eisen. Jedes Material wird je nach Projektanforderungen für Langlebigkeit, Ästhetik und strukturelle Integrität ausgewählt."
|
||||
},
|
||||
{
|
||||
id: "2", title: "Do you offer custom design services?", content: "Yes, absolutely. Our design team works directly with you to create bespoke metalwork that matches your vision. We provide 3D renderings before fabrication begins."
|
||||
id: "2", title: "Bieten Sie maßgeschneiderte Designdienste an?", content: "Ja, absolut. Unser Designteam arbeitet direkt mit Ihnen zusammen, um maßgeschneiderte Metallarbeiten zu erstellen, die Ihrer Vision entsprechen. Wir stellen 3D-Renderings vor der Verarbeitung bereit."
|
||||
},
|
||||
{
|
||||
id: "3", title: "How long does a typical project take?", content: "Timeline varies based on project complexity. Simple projects take 1-2 weeks, while complex custom designs typically require 3-6 weeks. Express options available."
|
||||
id: "3", title: "Wie lange dauert ein typisches Projekt?", content: "Die Zeitleiste variiert je nach Projektkomplexität. Einfache Projekte dauern 1–2 Wochen, während komplexe Designs in der Regel 3–6 Wochen dauern. Schnelle Optionen verfügbar."
|
||||
},
|
||||
{
|
||||
id: "4", title: "Do you provide installation services?", content: "Yes, we handle complete installation for all projects. Our skilled team ensures perfect alignment and finishing touches. Installation is coordinated with your schedule."
|
||||
id: "4", title: "Bieten Sie Installationsdienste an?", content: "Ja, wir kümmern uns um die vollständige Installation für alle Projekte. Unser erfahrenes Team gewährleistet perfekte Ausrichtung und Veredelung. Die Installation wird nach Ihrem Zeitplan koordiniert."
|
||||
},
|
||||
{
|
||||
id: "5", title: "What is your service area?", content: "We're based in Bern and serve the entire Bern region and surrounding cantons. For larger projects, we can arrange logistics to other Swiss locations."
|
||||
id: "5", title: "Wie ist Ihr Servicegebiet?", content: "Wir haben unseren Sitz in Bern und bedienen die gesamte Region Bern und die umgebenden Kantone. Für größere Projekte können wir die Logistik an andere Schweizer Standorte arrangieren."
|
||||
},
|
||||
{
|
||||
id: "6", title: "Do you offer maintenance and repair?", content: "Yes, we provide ongoing maintenance, repair, and restoration services for all metalwork, whether we fabricated it or not. Regular maintenance keeps your investment in top condition."
|
||||
id: "6", title: "Bieten Sie Wartungs- und Reparaturdienste an?", content: "Ja, wir bieten laufende Wartungs-, Reparatur- und Restaurierungsdienste für alle Metallarbeiten, unabhängig davon, ob wir diese hergestellt haben oder nicht. Regelmäßige Wartung hält Ihre Investition in Top-Zustand."
|
||||
},
|
||||
]}
|
||||
ctaTitle="Ready to Start Your Project?"
|
||||
ctaDescription="Contact us today for a free consultation and project estimate. We respond within 24 hours."
|
||||
ctaButton={{ text: "Request Quote", href: "mailto:hello@bestrong.ch" }}
|
||||
ctaTitle="Bereit, Ihr Projekt zu starten?"
|
||||
ctaDescription="Kontaktieren Sie uns noch heute für eine kostenlose Beratung und Projektschätzung. Wir antworten innerhalb von 24 Stunden."
|
||||
ctaButton={{ text: "Angebot anfordern", href: "mailto:hello@bestrong.ch" }}
|
||||
ctaIcon={Mail}
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
@@ -205,11 +206,11 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="BESTRONG"
|
||||
copyrightText="© 2025 BESTRONG Metalworks | Precision • Craft • Excellence"
|
||||
copyrightText="© 2025 BESTRONG Metallarbeiten | Präzision • Handwerk • Exzellenz"
|
||||
socialLinks={[
|
||||
{ icon: Linkedin, href: "https://linkedin.com/company/bestrong-metalworks", ariaLabel: "LinkedIn" },
|
||||
{ icon: Mail, href: "mailto:hello@bestrong.ch", ariaLabel: "Email" },
|
||||
{ icon: Phone, href: "tel:+41313334455", ariaLabel: "Phone" },
|
||||
{ icon: Mail, href: "mailto:hello@bestrong.ch", ariaLabel: "E-Mail" },
|
||||
{ icon: Phone, href: "tel:+41313334455", ariaLabel: "Telefon" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #efebe5;
|
||||
--card: #f7f2ea;
|
||||
--foreground: #1a1a1a;
|
||||
--primary-cta: #2c3e50;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffffe6;
|
||||
--primary-cta: #e6e6e6;
|
||||
--primary-cta-text: #efebe5;
|
||||
--secondary-cta: #efebe5;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta-text: #1a1a1a;
|
||||
--accent: #ffffff;
|
||||
--background-accent: #2c3e50;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user