Improve project structure.
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:
@@ -1,28 +1,18 @@
|
||||
'use client';
|
||||
|
||||
import React, {useEffect} from "react";
|
||||
import HomeServices from "@/app/(root)/sections/HomeServices";
|
||||
import {motion} from "framer-motion";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useScrollToSection } from "@/hooks/useScrollToSection";
|
||||
import Hero from "@/app/(root)/sections/Hero";
|
||||
import HomeServices from "@/app/(root)/sections/HomeServices";
|
||||
import About from "@/app/(root)/sections/About";
|
||||
import ProcessSection from "@/app/(root)/sections/ProcessSection";
|
||||
import WhyUs from "@/app/(root)/sections/WhyUs";
|
||||
import Faq from "@/app/(root)/sections/Faq";
|
||||
import ReferralSection from "@/app/(root)/sections/ReferralSection";
|
||||
import Faq from "@/app/(root)/sections/Faq";
|
||||
|
||||
const Home = () => {
|
||||
useEffect(() => {
|
||||
const scrollToId = localStorage.getItem('scrollToId')
|
||||
if (scrollToId) {
|
||||
localStorage.removeItem('scrollToId')
|
||||
const el = document.getElementById(scrollToId)
|
||||
if (el) {
|
||||
setTimeout(() => {
|
||||
el.scrollIntoView({behavior: 'smooth', block: 'start'})
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
useScrollToSection();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import {motion} from 'framer-motion';
|
||||
import { motion } from 'framer-motion';
|
||||
import { SectionTitle } from '@/components/ui/SectionTitle';
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
@@ -9,23 +10,9 @@ const About = () => {
|
||||
className="relative w-full py-24 bg-background text-foreground transition-colors duration-700 ease-in-out">
|
||||
<div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
|
||||
<div className="flex flex-col">
|
||||
{/* Title */}
|
||||
<motion.h2
|
||||
className="text-3xl md:text-4xl font-bold mb-1 text-left"
|
||||
initial={{opacity: 0, y: 10}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.4}}
|
||||
>
|
||||
Über uns
|
||||
</motion.h2>
|
||||
|
||||
<motion.div
|
||||
className="w-12 h-[2px] mt-2 mb-6 bg-amber-500"
|
||||
initial={{opacity: 0, x: -20}}
|
||||
whileInView={{opacity: 1, x: 0}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.4, delay: 0.1}}
|
||||
<SectionTitle
|
||||
title="Über uns"
|
||||
className="mb-6"
|
||||
/>
|
||||
|
||||
{/* Text */}
|
||||
|
||||
@@ -1,74 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import {motion} from 'framer-motion';
|
||||
import Image from 'next/image';
|
||||
import {Typewriter} from 'react-simple-typewriter';
|
||||
import PulsatingButton from "@/components/PulsatingButton";
|
||||
import { HeroBackground } from '@/components/Hero/HeroBackground';
|
||||
import { HeroContent } from '@/components/Hero/HeroContent';
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<section id="start" className="relative w-full h-screen overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/home_hero.jpg"
|
||||
alt="Rhein river aerial view"
|
||||
fill
|
||||
className="object-cover scale-105 blur-sm"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/60"/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div
|
||||
className="relative z-10 flex flex-col justify-center items-start h-full w-[90%] sm:w-[80%] max-w-6xl mx-auto text-white">
|
||||
<motion.h1
|
||||
className="text-3xl sm:text-5xl font-bold mb-6 leading-tight"
|
||||
initial={{opacity: 0, y: 40}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.6}}
|
||||
>
|
||||
Digitale Lösungen, <br/> die wirklich passen.
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
className="text-lg sm:text-xl text-gray-300 mb-6 max-w-2xl"
|
||||
initial={{opacity: 0, y: 20}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.6, delay: 0.2}}
|
||||
>
|
||||
Wir entwickeln individuelle Softwarelösungen für Unternehmen und Startups.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
className="text-xl font-semibold text-white"
|
||||
initial={{opacity: 0}}
|
||||
animate={{opacity: 1}}
|
||||
transition={{delay: 0.6}}
|
||||
>
|
||||
<Typewriter
|
||||
words={['Webdesign', 'App-Entwicklung', 'Interne Tools']}
|
||||
loop={true}
|
||||
cursor
|
||||
cursorStyle="_"
|
||||
typeSpeed={60}
|
||||
deleteSpeed={40}
|
||||
delaySpeed={2000}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<div className="mt-10 relative flex items-center justify-center">
|
||||
<PulsatingButton
|
||||
label="Jetzt Kontakt aufnehmen"
|
||||
href="/contact"
|
||||
color="#2563eb" // Tailwind blue-600
|
||||
width={256}
|
||||
pulse
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<HeroBackground
|
||||
imageSrc="/images/home_hero.jpg"
|
||||
imageAlt="Rhein river aerial view"
|
||||
/>
|
||||
<HeroContent />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,101 +1,35 @@
|
||||
'use client';
|
||||
|
||||
import {motion} from 'framer-motion';
|
||||
import {ChevronRight} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Link from 'next/link';
|
||||
|
||||
const services = [
|
||||
{
|
||||
title: 'Webdesign',
|
||||
description: 'Moderne Websites, die Vertrauen schaffen und verkaufen.',
|
||||
bullets: [
|
||||
'Maßgeschneidertes Design',
|
||||
'Klare Struktur & überzeugende Inhalte',
|
||||
'Nutzerführung mit System & Strategie',
|
||||
'Für alle Geräte optimiert',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'App-Entwicklung',
|
||||
description: 'Skalierbare Apps für Web und Mobile – von der Idee bis zum Launch.',
|
||||
bullets: [
|
||||
'Plattformübergreifend mit modernen Technologien',
|
||||
'Backend & API-Entwicklung inklusive',
|
||||
'Individuelle Funktionen & Logik',
|
||||
'Stabil, performant & wartbar',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Interne Tools',
|
||||
description: 'Digitale Werkzeuge, die Prozesse vereinfachen und Zeit sparen.',
|
||||
bullets: [
|
||||
'Prozessdigitalisierung & Automatisierung',
|
||||
'Zugeschnitten auf eure Workflows',
|
||||
'Skalierbar & zukunftssicher',
|
||||
'Intuitiv & effizient bedienbar',
|
||||
],
|
||||
},
|
||||
];
|
||||
import { SectionTitle } from '@/components/ui/SectionTitle';
|
||||
import { ServiceCard } from '@/components/ui/ServiceCard';
|
||||
import { servicesData } from '@/constant/ServicesData';
|
||||
|
||||
const HomeServices = () => {
|
||||
return (
|
||||
<section id="services"
|
||||
className="w-full py-24 bg-background text-foreground">
|
||||
<section id="services" className="w-full py-24 bg-background text-foreground">
|
||||
<div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
|
||||
<motion.h2
|
||||
className="text-3xl md:text-4xl font-bold mb-1 text-left"
|
||||
initial={{opacity: 0, y: 10}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.4}}
|
||||
>
|
||||
Leistungen
|
||||
</motion.h2>
|
||||
|
||||
<motion.div
|
||||
className="w-12 h-[2px] mt-2 mb-10 bg-amber-500"
|
||||
initial={{opacity: 0, x: -20}}
|
||||
whileInView={{opacity: 1, x: 0}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.4, delay: 0.1}}
|
||||
/>
|
||||
<SectionTitle title="Leistungen" />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{services.map((service, index) => (
|
||||
<motion.div
|
||||
{servicesData.map((service, index) => (
|
||||
<ServiceCard
|
||||
key={service.title}
|
||||
className="flex flex-col justify-between h-full p-6 rounded-3xl border bg-muted text-foreground"
|
||||
initial={{opacity: 0, y: 20}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.4, delay: index * 0.1}}
|
||||
whileHover={{
|
||||
scale: 1.03,
|
||||
boxShadow: '0px 12px 30px rgba(0, 0, 0, 0.08)',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold mb-2">{service.title}</h3>
|
||||
<p className="text-muted-foreground mb-4">{service.description}</p>
|
||||
<ul className="space-y-3">
|
||||
{service.bullets.map((point, i) => (
|
||||
<li key={i} className="flex items-start gap-2">
|
||||
<ChevronRight className="w-4 h-4 text-primary mt-1"/>
|
||||
<span className="text-sm text-foreground">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.div>
|
||||
title={service.title}
|
||||
description={service.description}
|
||||
bullets={service.bullets}
|
||||
index={index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="mt-12 text-center"
|
||||
initial={{opacity: 0}}
|
||||
whileInView={{opacity: 1}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.4, delay: 0.3}}
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: 0.3 }}
|
||||
>
|
||||
<p className="text-muted-foreground mb-4 text-base md:text-lg">
|
||||
Du möchtest mehr über unsere Leistungen erfahren oder hast ein konkretes Projekt im Kopf?
|
||||
|
||||
Reference in New Issue
Block a user