feat: Add Section layout component and refactor page.tsx with updated styling and new Button variants.
This commit is contained in:
1elle1
+42
-59
@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/Button";
|
||||
import { SectionHeading } from "@/components/ui/SectionHeading";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import { FadeIn } from "@/components/ui/FadeIn";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
import { Dumbbell, Users, Clock, Heart } from "lucide-react";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
@@ -67,48 +68,41 @@ export default function HomePage() {
|
||||
return (
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="relative flex items-center min-h-screen bg-primary text-secondary">
|
||||
<Container className="py-32 md:py-40">
|
||||
<Section className="flex items-center min-h-[90vh] bg-primary text-secondary">
|
||||
<Container className="py-20 md:py-32">
|
||||
<FadeIn>
|
||||
<p className="text-sm uppercase tracking-[0.2em] text-secondary/60 mb-6">
|
||||
<p className="text-sm uppercase tracking-[0.2em] opacity-80 mb-6">
|
||||
Fitnessstudio in Reutte, Tirol
|
||||
</p>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<h1
|
||||
className="font-bold max-w-3xl"
|
||||
style={{
|
||||
fontSize: "clamp(var(--text-4xl), 5vw, var(--text-6xl))",
|
||||
lineHeight: "1.1",
|
||||
letterSpacing: "var(--text-5xl-letter-spacing)",
|
||||
}}
|
||||
>
|
||||
<h1 className="font-bold max-w-4xl text-5xl md:text-6xl lg:text-[5rem] leading-[1.1] tracking-tight mb-6">
|
||||
Dein Weg zu mehr
|
||||
<br />
|
||||
Fitness beginnt hier.
|
||||
</h1>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.2}>
|
||||
<p className="mt-6 max-w-xl text-secondary/70" style={{ fontSize: "var(--text-lg)" }}>
|
||||
<p className="mt-6 max-w-xl text-lg md:text-xl text-secondary/80 leading-relaxed">
|
||||
Individuelle Trainingspläne, persönliche Betreuung und eine
|
||||
motivierende Community. Willkommen bei Sportbox Reutte.
|
||||
</p>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.3}>
|
||||
<div className="mt-10 flex flex-col sm:flex-row gap-4">
|
||||
<Button href="/leistungen#kontakt" variant="secondary" className="border-secondary text-secondary hover:bg-secondary hover:text-primary">
|
||||
<Button href="/leistungen#kontakt" variant="outline-white">
|
||||
Jetzt Termin buchen
|
||||
</Button>
|
||||
<Button href="/über-uns" variant="ghost" className="text-secondary/80 hover:text-secondary">
|
||||
<Button href="/über-uns" variant="ghost-white">
|
||||
Mehr über uns erfahren
|
||||
</Button>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</Container>
|
||||
</section>
|
||||
</Section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
|
||||
<Section>
|
||||
<Container>
|
||||
<FadeIn>
|
||||
<SectionHeading
|
||||
@@ -116,52 +110,45 @@ export default function HomePage() {
|
||||
subtitle="Wir bieten mehr als nur ein Fitnessstudio – wir sind Ihr Partner auf dem Weg zu einem gesünderen Leben."
|
||||
/>
|
||||
</FadeIn>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{FEATURES.map((feature, index) => (
|
||||
<FadeIn key={feature.title} delay={index * 0.1}>
|
||||
<Card className="text-center h-full">
|
||||
{/* Simplified Card usage since it might be just a div in this specialized case or reuse Card */}
|
||||
<Card className="text-center h-full p-6 bg-background border border-border shadow-sm">
|
||||
<feature.icon
|
||||
size={32}
|
||||
className="mx-auto mb-4 text-primary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h3 className="text-base font-bold mb-2">{feature.title}</h3>
|
||||
<p className="text-sm text-muted">{feature.description}</p>
|
||||
<h3 className="text-lg font-bold mb-2">{feature.title}</h3>
|
||||
<p className="text-sm text-muted leading-relaxed">{feature.description}</p>
|
||||
</Card>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</Section>
|
||||
|
||||
{/* About Teaser Section */}
|
||||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)] bg-neutral">
|
||||
<Section className="bg-neutral">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
<FadeIn>
|
||||
<div
|
||||
className="aspect-[4/3] bg-accent/40 flex items-center justify-center"
|
||||
style={{ borderRadius: "var(--radius-md)" }}
|
||||
className="aspect-[4/3] bg-accent/40 flex items-center justify-center rounded-2xl overflow-hidden shadow-lg"
|
||||
>
|
||||
<p className="text-muted text-sm">PLACEHOLDER: Studio-Bild</p>
|
||||
<div className="text-muted text-sm font-medium">PLACEHOLDER: Studio-Bild</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.15}>
|
||||
<div>
|
||||
<p className="text-sm uppercase tracking-[0.2em] text-muted mb-4">
|
||||
<p className="text-sm uppercase tracking-[0.2em] text-muted mb-4 font-semibold">
|
||||
Über uns
|
||||
</p>
|
||||
<h2
|
||||
className="font-bold mb-6"
|
||||
style={{
|
||||
fontSize: "var(--text-3xl)",
|
||||
lineHeight: "var(--text-3xl-line-height)",
|
||||
letterSpacing: "var(--text-3xl-letter-spacing)",
|
||||
}}
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6 tracking-tight">
|
||||
Mehr als nur Training – eine Gemeinschaft.
|
||||
</h2>
|
||||
<p className="text-muted mb-6 leading-relaxed">
|
||||
<p className="text-muted mb-8 leading-relaxed text-lg">
|
||||
Bei Sportbox Reutte stehen Sie im Mittelpunkt. Unser erfahrenes
|
||||
Team begleitet Sie auf Ihrem individuellen Weg – ob Einsteiger
|
||||
oder Fortgeschrittener. Gemeinsam erreichen wir Ihre Ziele.
|
||||
@@ -173,10 +160,10 @@ export default function HomePage() {
|
||||
</FadeIn>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</Section>
|
||||
|
||||
{/* Services Preview Section */}
|
||||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)]">
|
||||
<Section>
|
||||
<Container>
|
||||
<FadeIn>
|
||||
<SectionHeading
|
||||
@@ -184,49 +171,45 @@ export default function HomePage() {
|
||||
subtitle="Entdecken Sie unser vielfältiges Angebot für Ihre persönlichen Fitnessziele."
|
||||
/>
|
||||
</FadeIn>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{SERVICES_PREVIEW.map((service, index) => (
|
||||
<FadeIn key={service.title} delay={index * 0.1}>
|
||||
<Card className="h-full">
|
||||
<h3 className="text-lg font-bold mb-3">{service.title}</h3>
|
||||
<p className="text-sm text-muted mb-4">{service.description}</p>
|
||||
<Button href="/leistungen" variant="ghost" className="text-sm">
|
||||
Mehr erfahren
|
||||
</Button>
|
||||
<Card className="h-full flex flex-col p-8 bg-background border border-border shadow-sm hover:shadow-md transition-shadow">
|
||||
<h3 className="text-xl font-bold mb-3">{service.title}</h3>
|
||||
<p className="text-sm text-muted mb-6 flex-grow leading-relaxed">{service.description}</p>
|
||||
<div className="mt-auto">
|
||||
<Button href="/leistungen" variant="ghost" className="px-0 hover:bg-transparent">
|
||||
Mehr erfahren →
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</Section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-[var(--spacing-section)] md:py-[var(--spacing-4xl)] bg-primary text-secondary">
|
||||
<Container className="text-center">
|
||||
<Section className="bg-primary text-secondary text-center">
|
||||
<Container>
|
||||
<FadeIn>
|
||||
<h2
|
||||
className="font-bold mb-4"
|
||||
style={{
|
||||
fontSize: "var(--text-3xl)",
|
||||
lineHeight: "var(--text-3xl-line-height)",
|
||||
}}
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6 tracking-tight">
|
||||
Bereit für den ersten Schritt?
|
||||
</h2>
|
||||
<p className="text-secondary/70 mb-8 max-w-lg mx-auto">
|
||||
<p className="text-secondary/80 mb-10 max-w-xl mx-auto text-lg">
|
||||
Vereinbaren Sie jetzt einen unverbindlichen Termin und lernen Sie
|
||||
Sportbox Reutte kennen.
|
||||
</p>
|
||||
<Button
|
||||
href="/leistungen#kontakt"
|
||||
variant="secondary"
|
||||
className="border-secondary text-secondary hover:bg-secondary hover:text-primary"
|
||||
variant="outline-white"
|
||||
className="px-8 py-4 text-base"
|
||||
>
|
||||
Jetzt Termin buchen
|
||||
</Button>
|
||||
</FadeIn>
|
||||
</Container>
|
||||
</section>
|
||||
</Section>
|
||||
|
||||
{/* JSON-LD Structured Data */}
|
||||
<script
|
||||
|
||||
Reference in New Issue
Block a user