Gitlab-Migration/rheinsw-mono-repo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve project structure.

Browse Source 
New Project Structure:
  - Created reusable UI components (ServiceCard, AnimatedSection, SectionTitle)
  - Split large components into smaller, focused ones
  - Extracted shared hooks for common functionality
  - Organized constants into separate files

Key Improvements:
  - Hooks: useScrollNavigation, useScrollToSection, useCookieSettings
  - UI Components: Modular components for consistent styling and behavior
  - Constants: Centralized data management (ServicesData, NavigationData)
  - Component Split: Navbar, Hero, and Footer broken into logical sub-components
This commit is contained in:
Thatsaphorn
2025-08-08 19:38:12 +02:00
parent a5d59cbd64
commit d9ff535ac0
20 changed files with 490 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/components/Footer/Footer.tsx
View File

@@ -2,13 +2,13 @@
import React from 'react';
import Link from 'next/link';
import {motion} from 'framer-motion';
import {Mail, Gavel, ShieldCheck, Cookie} from 'lucide-react';
import { motion } from 'framer-motion';
import { Mail, Gavel, ShieldCheck, Cookie } from 'lucide-react';
import { FooterSection } from './FooterSection';
import { useCookieSettings } from '@/hooks/useCookieSettings';
const Footer = () => {
const openCookieSettings = () => {
window.dispatchEvent(new Event('show-cookie-banner'));
};
const { openCookieSettings } = useCookieSettings();
return (
<motion.footer
@@ -42,56 +42,38 @@ const Footer = () => {
</p>
</motion.div>
{/* Informationen */}
<motion.div
initial={{opacity: 0, y: 10}}
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
transition={{duration: 0.5, delay: 0.4}}
>
<h3 className="text-lg font-semibold mb-4">Informationen</h3>
<ul className="space-y-3 text-sm text-gray-300">
<li className="flex items-center gap-2">
<Mail className="w-4 h-4"/>
<Link href="/contact" className="hover:underline">
Kontakt
</Link>
</li>
</ul>
</motion.div>
<FooterSection title="Informationen" delay={0.4}>
<li className="flex items-center gap-2">
<Mail className="w-4 h-4" />
<Link href="/contact" className="hover:underline">
Kontakt
</Link>
</li>
</FooterSection>
{/* Rechtliches */}
<motion.div
initial={{opacity: 0, y: 10}}
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
transition={{duration: 0.5, delay: 0.5}}
>
<h3 className="text-lg font-semibold mb-4">Rechtliches</h3>
<ul className="space-y-3 text-sm text-gray-300">
<li className="flex items-center gap-2">
<ShieldCheck className="w-4 h-4"/>
<Link href="/legal/privacy" className="hover:underline">
Datenschutz
</Link>
</li>
<li className="flex items-center gap-2">
<Gavel className="w-4 h-4"/>
<Link href="/legal/imprint" className="hover:underline">
Impressum
</Link>
</li>
<li className="flex items-center gap-2">
<Cookie className="w-4 h-4"/>
<button
onClick={openCookieSettings}
className="hover:underline text-left"
>
Cookie-Einstellungen
</button>
</li>
</ul>
</motion.div>
<FooterSection title="Rechtliches" delay={0.5}>
<li className="flex items-center gap-2">
<ShieldCheck className="w-4 h-4" />
<Link href="/legal/privacy" className="hover:underline">
Datenschutz
</Link>
</li>
<li className="flex items-center gap-2">
<Gavel className="w-4 h-4" />
<Link href="/legal/imprint" className="hover:underline">
Impressum
</Link>
</li>
<li className="flex items-center gap-2">
<Cookie className="w-4 h-4" />
<button
onClick={openCookieSettings}
className="hover:underline text-left"
>
Cookie-Einstellungen
</button>
</li>
</FooterSection>
</div>
<motion.div

26
frontend/components/Footer/FooterSection.tsx Normal file
View File

@@ -0,0 +1,26 @@
'use client';
import { motion } from 'framer-motion';
import { ReactNode } from 'react';
interface FooterSectionProps {
title: string;
children: ReactNode;
delay: number;
}
export const FooterSection = ({ title, children, delay }: FooterSectionProps) => {
return (
<motion.div
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay }}
>
<h3 className="text-lg font-semibold mb-4">{title}</h3>
<ul className="space-y-3 text-sm text-gray-300">
{children}
</ul>
</motion.div>
);
};