Tax Lawfirm Demo 1

lawfirm-demos/tax-lawfirm-demos/tax-lawfirm-demo-1/app/(root)/page.tsx

@@ -0,0 +1,31 @@
+import {Button} from '@/components/ui/button'
+import Link from 'next/link'
+import {HeroSection} from "@/app/(root)/sections/HeroSection";
+import {ServicesSection} from "@/app/(root)/sections/ServicesSection";
+import {AboutMeSection} from "@/app/(root)/sections/AboutMeSection";
+
+export default function SteuerkanzleiLandingPage() {
+    return (
+        <main className="min-h-screen bg-background text-foreground font-sans">
+            {/* Hero Section */}
+            <HeroSection/>
+
+            {/* Leistungen */}
+            <ServicesSection/>
+
+            {/* Spezialisierungen */}
+            {/*<SpecialServicesSection/>*/}
+
+            <AboutMeSection/>
+
+            {/* Kontakt CTA */}
+            <section id="kontakt" className="py-20 px-6 text-center">
+                <h2 className="text-3xl font-bold mb-6">Kontakt aufnehmen</h2>
+                <p className="mb-8 text-lg">Lassen Sie uns über Ihre steuerlichen Fragen sprechen.</p>
+                <Link href="/kontakt">
+                    <Button size="lg">Jetzt Termin vereinbaren</Button>
+                </Link>
+            </section>
+        </main>
+    )
+}

lawfirm-demos/tax-lawfirm-demos/tax-lawfirm-demo-1/app/(root)/sections/AboutMeSection.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import {
+    VerticalTimeline,
+    VerticalTimelineElement,
+} from 'react-vertical-timeline-component'
+import 'react-vertical-timeline-component/style.min.css'
+import {GraduationCap, Briefcase, Building2} from 'lucide-react'
+
+export function AboutMeSection() {
+    const timeline = [
+        {
+            date: '2010',
+            title: 'Abschluss Bachelor of Laws (LL.B.)',
+            desc: 'Studium der Wirtschaftsjuristik an der Hochschule XYZ.',
+            icon: <GraduationCap className="w-5 h-5"/>,
+        },
+        {
+            date: '2012',
+            title: 'Master Steuerrecht (M.A.)',
+            desc: 'Vertiefung im Bereich nationales und internationales Steuerrecht.',
+            icon: <GraduationCap className="w-5 h-5"/>,
+        },
+        {
+            date: '2014',
+            title: 'Steuerberaterprüfung bestanden',
+            desc: 'Zulassung als Steuerberaterin durch die Steuerberaterkammer ABC.',
+            icon: <Building2 className="w-5 h-5"/>,
+        },
+        {
+            date: '2015–2020',
+            title: 'Tätigkeit in mittelständischer Kanzlei',
+            desc: 'Beratung von Unternehmen, Freiberuflern und Privatpersonen.',
+            icon: <Briefcase className="w-5 h-5"/>,
+        },
+        {
+            date: 'seit 2021',
+            title: 'Eigene Kanzlei in Musterstadt',
+            desc: 'Gründung der Steuerkanzlei Mustermann mit Fokus auf digitale Beratung.',
+            icon: <Briefcase className="w-5 h-5"/>,
+        },
+    ]
+
+    return (
+        <section id="about" className="py-20 px-6 bg-white">
+            <div className="max-w-4xl mx-auto">
+                <h2 className="text-3xl font-bold mb-8 text-left">Über mich</h2>
+                <p className="text-lg mb-12 text-left">
+                    Als erfahrene Steuerberaterin begleite ich seit über zehn Jahren Mandanten in sämtlichen
+                    steuerlichen
+                    Fragen – transparent, digital und auf Augenhöhe. Meine Schwerpunkte liegen in der vorausschauenden
+                    Steuergestaltung sowie der Begleitung von Gründern und mittelständischen Unternehmen.
+                </p>
+
+                <VerticalTimeline lineColor="#e5e7eb">
+                    {timeline.map(({date, title, desc, icon}) => (
+                        <VerticalTimelineElement
+                            key={date}
+                            date={date}
+                            icon={icon}
+                            iconStyle={{background: '#0f172a', color: '#fff'}}
+                            contentStyle={{background: '#f9fafb', color: '#0f172a'}}
+                            contentArrowStyle={{borderRight: '7px solid #f9fafb'}}
+                        >
+                            <h3 className="text-xl font-semibold">{title}</h3>
+                            <p className="text-sm text-muted-foreground">{desc}</p>
+                        </VerticalTimelineElement>
+                    ))}
+                </VerticalTimeline>
+            </div>
+        </section>
+    )
+}

lawfirm-demos/tax-lawfirm-demos/tax-lawfirm-demo-1/app/(root)/sections/HeroSection.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import Image from 'next/image'
+import {Button} from '@/components/ui/button'
+import {motion as m, Variants} from 'framer-motion'
+import Link from 'next/link'
+
+const containerVariants: Variants = {
+    hidden: {opacity: 0},
+    visible: {
+        opacity: 1,
+        transition: {
+            delay: 0.2,
+            staggerChildren: 0.4,
+            ease: 'easeOut',
+        },
+    },
+}
+
+const itemVariants: Variants = {
+    hidden: {opacity: 0, y: 40},
+    visible: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            duration: 0.8,
+            ease: 'easeOut',
+        },
+    },
+}
+
+export function HeroSection() {
+    return (
+        <section className="relative h-[80vh] flex items-center text-white">
+            <Image
+                src="/images/hero.jpeg"
+                alt="Steuerkanzlei Hero"
+                fill
+                className="object-cover brightness-[0.4]"
+                priority
+            />
+            <m.div
+                className="z-10 text-left px-6 md:px-24 max-w-2xl"
+                variants={containerVariants}
+                initial="hidden"
+                animate="visible"
+            >
+                <m.h1
+                    className="text-4xl md:text-6xl font-bold leading-tight"
+                    variants={itemVariants}
+                >
+                    Ihr Partner für<br/>Steuerberatung & Finanzen
+                </m.h1>
+
+                <m.p
+                    className="mt-6 text-lg md:text-xl"
+                    variants={itemVariants}
+                >
+                    Persönlich. Kompetent. Transparent.
+                </m.p>
+
+                <m.div className="mt-8" variants={itemVariants}>
+                    <Link href="/kontakt">
+                        <Button size="lg" variant="secondary">
+                            Jetzt Kontakt aufnehmen
+                        </Button>
+                    </Link>
+                </m.div>
+            </m.div>
+        </section>
+    )
+}

lawfirm-demos/tax-lawfirm-demos/tax-lawfirm-demo-1/app/(root)/sections/ServicesSection.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import {Briefcase, BookOpen, Building2, User, Coins, ReceiptText} from 'lucide-react'
+import {motion as m, Variants} from 'framer-motion'
+
+const containerVariants: Variants = {
+    hidden: {},
+    visible: {
+        transition: {
+            staggerChildren: 0.2,
+            delayChildren: 0.1,
+        },
+    },
+}
+
+const cardVariants: Variants = {
+    hidden: {opacity: 0, y: 30},
+    visible: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            duration: 0.5,
+            ease: 'easeOut',
+        },
+    },
+}
+
+export function ServicesSection() {
+    const services = [
+        {
+            title: 'Einkommensteuer',
+            subtitle: 'Privatpersonen',
+            desc: 'Beratung und Erstellung Ihrer jährlichen Einkommensteuererklärung – digital und unkompliziert.',
+            icon: <User className="w-6 h-6 text-primary"/>,
+        },
+        {
+            title: 'Jahresabschlüsse',
+            subtitle: 'Unternehmen',
+            desc: 'Erstellung von Handels- und Steuerbilanzen für Einzelunternehmen, GmbH & Co. KG oder Kapitalgesellschaften.',
+            icon: <BookOpen className="w-6 h-6 text-primary"/>,
+        },
+        {
+            title: 'Lohnbuchhaltung',
+            subtitle: 'Mitarbeiterabrechnung',
+            desc: 'Abwicklung Ihrer Lohn- und Gehaltsabrechnungen – pünktlich, zuverlässig und digital.',
+            icon: <Coins className="w-6 h-6 text-primary"/>,
+        },
+        {
+            title: 'Existenzgründung',
+            subtitle: 'Startups & Gründer',
+            desc: 'Von der Idee zum Business – steuerliche Beratung, Businessplan und Gründungszuschuss-Anträge.',
+            icon: <Briefcase className="w-6 h-6 text-primary"/>,
+        },
+        {
+            title: 'Unternehmensnachfolge',
+            subtitle: 'Übergabe & Erbe',
+            desc: 'Beratung zur steuerlich optimalen Übergabe an Familie oder Käufer. Langfristige Planung inklusive.',
+            icon: <Building2 className="w-6 h-6 text-primary"/>,
+        },
+        {
+            title: 'Finanzbuchhaltung',
+            subtitle: 'GoBD & DATEV-konform',
+            desc: 'Digitale Finanzbuchhaltung inkl. Belegtransfer, OPOS und monatlichen Auswertungen.',
+            icon: <ReceiptText className="w-6 h-6 text-primary"/>,
+        },
+    ]
+
+    return (
+        <section id="leistungen" className="py-20 px-6 bg-muted/50">
+            <div className="max-w-6xl mx-auto text-left">
+                <h2 className="text-3xl font-bold mb-12 text-center">Unsere Leistungen</h2>
+
+                <m.div
+                    className="grid md:grid-cols-2 gap-10"
+                    variants={containerVariants}
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{once: true, amount: 0.2}}
+                >
+                    {services.map(({title, subtitle, desc, icon}) => (
+                        <m.div
+                            key={title}
+                            variants={cardVariants}
+                            className="p-6 bg-white rounded-xl shadow-sm hover:shadow-md border flex gap-4"
+                        >
+                            <div className="mt-1">{icon}</div>
+                            <div>
+                                <h3 className="text-xl font-semibold">{title}</h3>
+                                <p className="text-sm text-muted-foreground mb-1">{subtitle}</p>
+                                <p className="text-sm">{desc}</p>
+                            </div>
+                        </m.div>
+                    ))}
+                </m.div>
+            </div>
+        </section>
+    )
+}

lawfirm-demos/tax-lawfirm-demos/tax-lawfirm-demo-1/app/(root)/sections/SpecialitiesSection.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import {
+    Globe,
+    Briefcase,
+    Building2,
+    Landmark,
+    Lightbulb,
+    PiggyBank,
+    Users
+} from 'lucide-react'
+
+export function SpecialServicesSection() {
+    const items = [
+        {
+            title: 'Grenzgängerberatung',
+            desc: 'Spezialisierte Beratung für grenzüberschreitende Einkommen und Arbeitsverhältnisse.',
+            icon: <Globe className="w-8 h-8 text-primary"/>,
+        },
+        {
+            title: 'Beratung von Existenzgründern',
+            desc: 'Von der Geschäftsidee über den Businessplan bis zur steuerlichen Erfassung.',
+            icon: <Briefcase className="w-8 h-8 text-primary"/>,
+        },
+        {
+            title: 'Immobilienkaufberatung',
+            desc: 'Begleitung beim Immobilienkauf – steuerliche Optimierung inklusive.',
+            icon: <Building2 className="w-8 h-8 text-primary"/>,
+        },
+        {
+            title: 'Begleitung bei Bankgesprächen',
+            desc: 'Vorbereitung und Teilnahme an Finanzierungsgesprächen mit Ihrer Bank.',
+            icon: <Landmark className="w-8 h-8 text-primary"/>,
+        },
+        {
+            title: 'Steuergestaltung und -planung',
+            desc: 'Vorausschauende Steueroptimierung für Unternehmen und Privatpersonen.',
+            icon: <Lightbulb className="w-8 h-8 text-primary"/>,
+        },
+        {
+            title: 'Betriebsprüfung begleiten',
+            desc: 'Strategische Vorbereitung und persönliche Begleitung von Außenprüfungen.',
+            icon: <Users className="w-8 h-8 text-primary"/>,
+        },
+        {
+            title: 'Vererben & Schenken',
+            desc: 'Steuerliche Gestaltung und Begleitung von Vermögensübertragungen.',
+            icon: <PiggyBank className="w-8 h-8 text-primary"/>,
+        },
+    ]
+
+    return (
+        <section id="special-services" className="py-20 px-6 bg-muted/50 text-center">
+            <h2 className="text-3xl font-bold mb-12">Spezialleistungen</h2>
+            <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto text-left">
+                {items.map(({title, desc, icon}) => (
+                    <div
+                        key={title}
+                        className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition"
+                    >
+                        <div className="mb-4 flex justify-center">{icon}</div>
+                        <h3 className="text-xl font-semibold mb-2 text-center">{title}</h3>
+                        <p className="text-sm text-muted-foreground text-center">{desc}</p>
+                    </div>
+                ))}
+            </div>
+        </section>
+    )
+}

lawfirm-demos/tax-lawfirm-demos/tax-lawfirm-demo-1/app/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

lawfirm-demos/tax-lawfirm-demos/tax-lawfirm-demo-1/app/kontakt/page.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import {useState} from 'react'
+import {Input} from '@/components/ui/input'
+import {Textarea} from '@/components/ui/textarea'
+import {Button} from '@/components/ui/button'
+import {motion as m} from 'framer-motion'
+import {CheckCircle} from 'lucide-react'
+
+export default function KontaktPage() {
+    const [success, setSuccess] = useState(false)
+    const [loading, setLoading] = useState(false)
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        setLoading(true)
+
+        // Simulate delay
+        setTimeout(() => {
+            setLoading(false)
+            setSuccess(true)
+        }, 1000)
+    }
+
+    return (
+        <main className="min-h-screen py-20 px-6 max-w-2xl mx-auto">
+            <m.div
+                initial={{opacity: 0, y: 30}}
+                animate={{opacity: 1, y: 0}}
+                transition={{duration: 0.6}}
+            >
+                <h1 className="text-3xl font-bold mb-4 text-center">Kontakt</h1>
+                <p className="text-center mb-10 text-muted-foreground">
+                    Sie haben Fragen? Schreiben Sie uns direkt über das Formular.
+                </p>
+
+                {success ? (
+                    <div className="text-center">
+                        <CheckCircle className="w-12 h-12 text-green-600 mx-auto mb-4"/>
+                        <p className="text-lg">Vielen Dank! Ihre Nachricht wurde erfolgreich gesendet.</p>
+                    </div>
+                ) : (
+                    <form onSubmit={handleSubmit} className="space-y-6">
+                        <div>
+                            <label htmlFor="name" className="block text-sm font-medium mb-1">Name</label>
+                            <Input id="name" name="name" required/>
+                        </div>
+                        <div>
+                            <label htmlFor="email" className="block text-sm font-medium mb-1">E-Mail</label>
+                            <Input id="email" name="email" type="email" required/>
+                        </div>
+                        <div>
+                            <label htmlFor="message" className="block text-sm font-medium mb-1">Nachricht</label>
+                            <Textarea id="message" name="message" rows={5} required/>
+                        </div>
+                        <Button type="submit" disabled={loading}>
+                            {loading ? 'Senden...' : 'Nachricht senden'}
+                        </Button>
+                    </form>
+                )}
+            </m.div>
+        </main>
+    )
+}

lawfirm-demos/tax-lawfirm-demos/tax-lawfirm-demo-1/app/layout.tsx

@@ -0,0 +1,48 @@
+import type {Metadata} from "next";
+import {Geist, Geist_Mono} from "next/font/google";
+import "./globals.css";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+import React from "react";
+
+const geistSans = Geist({
+    variable: "--font-geist-sans",
+    subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+    variable: "--font-geist-mono",
+    subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+    title: "Steuerberater Mustermann",
+    description: "Ihre Steuerkanzlei für kompetente Beratung in allen Steuerfragen. Wir unterstützen Privatpersonen und Unternehmen mit maßgeschneiderten Steuerlösungen.",
+    keywords: "Steuerkanzlei, Steuerberatung, Steuerberater, Steuererklärung, Buchhaltung, Jahresabschluss",
+    viewport: "width=device-width, initial-scale=1",
+    robots: "index, follow",
+    openGraph: {
+        title: "Steuerberater Mustermann",
+        description: "Ihre Steuerkanzlei für kompetente Beratung in allen Steuerfragen.",
+        locale: "de_DE",
+        type: "website"
+    }
+};
+
+export default function RootLayout({
+                                       children,
+                                   }: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="de">
+        <body
+            className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        >
+        <Navbar/>
+        {children}
+        <Footer/>
+        </body>
+        </html>
+    );
+}