5 Commits

Author SHA1 Message Date
a2f1c43314 Update src/app/page.tsx 2026-03-05 19:31:53 +00:00
94b8ced16c Update src/app/styles/variables.css 2026-03-05 19:30:26 +00:00
8ed8020a1d Update src/app/page.tsx 2026-03-05 19:30:26 +00:00
a766689754 Update src/app/layout.tsx 2026-03-05 19:30:25 +00:00
23e1a0c186 Merge version_2 into main
Merge version_2 into main
2026-03-05 19:22:33 +00:00
3 changed files with 63 additions and 62 deletions

View File

@@ -5,7 +5,8 @@ import "./globals.css";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = { 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({ export default function RootLayout({
children, children,
@@ -13,7 +14,7 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<html lang="en"> <html lang="de">
<body className={inter.className}>{children} <body className={inter.className}>{children}
<script <script
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{

View File

@@ -28,49 +28,49 @@ export default function LandingPage() {
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleFullscreen
navItems={[ navItems={[
{ name: "Services", id: "services" }, { name: "Dienstleistungen", id: "services" },
{ name: "Portfolio", id: "portfolio" }, { name: "Portfolio", id: "portfolio" },
{ name: "About", id: "about" }, { name: "Über uns", id: "about" },
{ name: "Contact", id: "contact" }, { name: "Kontakt", id: "contact" },
]} ]}
brandName="BESTRONG" brandName="BESTRONG"
bottomLeftText="Bern, Switzerland" bottomLeftText="Bern, Schweiz"
bottomRightText="hello@bestrong.ch" bottomRightText="hello@bestrong.ch"
/> />
</div> </div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardTestimonial <HeroBillboardTestimonial
title="Precision Metalwork Crafted with Care" title="Präzisions-Metallverarbeitung mit Sorgfalt"
description="Custom steel and metal fabrication services for residential, commercial, and industrial projects in Bern" description="Maßgeschneiderte Stahl- und Metallverarbeitungsdienste für Wohn-, Gewerbe- und Industrieprojekte in Bern"
background={{ variant: "plain" }} background={{ variant: "plain" }}
imageSrc="http://img.b2bpic.net/free-photo/blacksmith-work-his-forge_23-2152021020.jpg" 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" mediaAnimation="slide-up"
testimonials={[ 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" 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" 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" 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" imageSrc: "/placeholders/placeholder1.webp?_wi=4"
}, },
]} ]}
buttons={[ buttons={[
{ text: "Get Free Quote", href: "contact" }, { text: "Kostenloses Angebot", href: "contact" },
{ text: "View Our Work", href: "portfolio" }, { text: "Unsere Arbeiten ansehen", href: "portfolio" },
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
tag="Swiss Craftsmanship" tag="Schweizer Handwerkskunst"
tagAnimation="slide-up" tagAnimation="slide-up"
useInvertedBackground={false} useInvertedBackground={false}
/> />
@@ -78,39 +78,39 @@ export default function LandingPage() {
<div id="about" data-section="about"> <div id="about" data-section="about">
<AboutMetric <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} useInvertedBackground={false}
metricsAnimation="slide-up" metricsAnimation="slide-up"
metrics={[ metrics={[
{ icon: Award, label: "Years Experience", value: "20+" }, { icon: Award, label: "Jahre Erfahrung", value: "20+" },
{ icon: Factory, label: "Projects Completed", value: "500+" }, { icon: Factory, label: "Abgeschlossene Projekte", value: "500+" },
{ icon: Users, label: "Satisfied Clients", value: "400+" }, { icon: Users, label: "Zufriedene Kunden", value: "400+" },
{ icon: Zap, label: "Custom Designs", value: "100%" }, { icon: Zap, label: "Maßgeschneiderte Designs", value: "100%" },
]} ]}
/> />
</div> </div>
<div id="services" data-section="services"> <div id="services" data-section="services">
<FeatureCardTwentySix <FeatureCardTwentySix
title="Our Services" title="Unsere Dienstleistungen"
description="Comprehensive metalworking solutions tailored to your specific needs and vision" description="Umfassende Metallverarbeitungslösungen, die auf Ihre spezifischen Anforderungen und Vorstellungen zugeschnitten sind"
features={[ 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" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
tag="Services" tag="Dienstleistungen"
tagAnimation="slide-up" tagAnimation="slide-up"
buttonAnimation="slide-up" buttonAnimation="slide-up"
/> />
@@ -120,20 +120,20 @@ export default function LandingPage() {
<ProductCardTwo <ProductCardTwo
products={[ products={[
{ {
id: "1", brand: "Residential", name: "Modern Steel Entry Gates", price: "CHF 4,500", rating: 5, 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: "Modern steel entry gates with geometric design" 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, 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: "Industrial steel staircase framework" 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, 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: "Architectural metal panels with precision detail" 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" title="Aktuelle Projekte"
description="Showcase of our finest metalwork installations and custom fabrications" description="Schauplatz unserer feinsten Metallarbeit Installationen und maßgeschneiderten Verarbeitungen"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
animationType="slide-up" animationType="slide-up"
@@ -147,25 +147,25 @@ export default function LandingPage() {
<MetricCardOne <MetricCardOne
metrics={[ 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" title="Unsere Möglichkeiten"
description="Industry-leading standards for quality, precision, and reliability" description="Branchenführende Standards für Qualität, Präzision und Zuverlässigkeit"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
animationType="slide-up" animationType="slide-up"
gridVariant="uniform-all-items-equal" gridVariant="uniform-all-items-equal"
tag="Quality Metrics" tag="Qualitätsmetriken"
tagAnimation="slide-up" tagAnimation="slide-up"
/> />
</div> </div>
@@ -174,27 +174,27 @@ export default function LandingPage() {
<ContactFaq <ContactFaq
faqs={[ 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 12 Wochen, während komplexe Designs in der Regel 36 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?" ctaTitle="Bereit, Ihr Projekt zu starten?"
ctaDescription="Contact us today for a free consultation and project estimate. We respond within 24 hours." ctaDescription="Kontaktieren Sie uns noch heute für eine kostenlose Beratung und Projektschätzung. Wir antworten innerhalb von 24 Stunden."
ctaButton={{ text: "Request Quote", href: "mailto:hello@bestrong.ch" }} ctaButton={{ text: "Angebot anfordern", href: "mailto:hello@bestrong.ch" }}
ctaIcon={Mail} ctaIcon={Mail}
useInvertedBackground={false} useInvertedBackground={false}
animationType="slide-up" animationType="slide-up"
@@ -205,11 +205,11 @@ export default function LandingPage() {
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterCard <FooterCard
logoText="BESTRONG" logoText="BESTRONG"
copyrightText="© 2025 BESTRONG Metalworks | Precision • Craft • Excellence" copyrightText="© 2025 BESTRONG Metallarbeiten | Präzision • Handwerk • Exzellenz"
socialLinks={[ socialLinks={[
{ icon: Linkedin, href: "https://linkedin.com/company/bestrong-metalworks", ariaLabel: "LinkedIn" }, { icon: Linkedin, href: "https://linkedin.com/company/bestrong-metalworks", ariaLabel: "LinkedIn" },
{ icon: Mail, href: "mailto:hello@bestrong.ch", ariaLabel: "Email" }, { icon: Mail, href: "mailto:hello@bestrong.ch", ariaLabel: "E-Mail" },
{ icon: Phone, href: "tel:+41313334455", ariaLabel: "Phone" }, { icon: Phone, href: "tel:+41313334455", ariaLabel: "Telefon" },
]} ]}
/> />
</div> </div>

View File

@@ -10,15 +10,15 @@
--accent: #ffffff; --accent: #ffffff;
--background-accent: #ffffff; */ --background-accent: #ffffff; */
--background: #efebe5; --background: #0a0a0a;
--card: #f7f2ea; --card: #1a1a1a;
--foreground: #1a1a1a; --foreground: #ffffffe6;
--primary-cta: #2c3e50; --primary-cta: #e6e6e6;
--primary-cta-text: #efebe5; --primary-cta-text: #efebe5;
--secondary-cta: #efebe5; --secondary-cta: #1a1a1a;
--secondary-cta-text: #1a1a1a; --secondary-cta-text: #1a1a1a;
--accent: #ffffff; --accent: #737373;
--background-accent: #2c3e50; --background-accent: #737373;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);