Initial Commit.

2025-02-10 23:50:36 +01:00 · 2025-02-10 23:50:36 +01:00 · 664f5b1b77
commit 664f5b1b77
46 changed files with 5978 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,54 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 # Dependencies
 node_modules
 .pnp
 .pnp.js
 # Testing
 coverage
 # Production
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
 # TypeScript
 *.tsbuildinfo
 # Environment files
 .env
 .env.*
 !.env.example
 # Vite
 .vite/
 # Cache
 .cache
 .eslintcache
 .stylelintcache
 # System Files
 Thumbs.db
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,28 @@
 import js from '@eslint/js';
 import globals from 'globals';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
 import tseslint from 'typescript-eslint';
 export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  }
 );
--- a/index.html
+++ b/index.html
@ -0,0 +1,18 @@
 <!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logos/technologie-team-favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Das Technologie Team ist eine mittelständische Unternehmensgruppe, die sich auf den IT- und Technologiesektor spezialisiert hat." />
    <meta name="keywords" content="IT, Technologie, Unternehmensgruppe, Deutschland, Oberhausen" />
    <meta property="og:title" content="Technologie Team - IT-/Technologie-Unternehmensgruppe" />
    <meta property="og:description" content="Das Technologie Team ist eine mittelständische Unternehmensgruppe, die sich auf den IT- und Technologiesektor spezialisiert hat." />
    <meta property="og:image" content="/logos/technologie-team.png" />
    <title>Technologie Team - IT-/Technologie-Unternehmensgruppe</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,33 @@
 {
  "name": "technologie-team-landing",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "lucide-react": "^0.263.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.29.0"
  },
  "devDependencies": {
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",
    "@vitejs/plugin-react": "^4.3.4",
    "autoprefixer": "^10.4.20",
    "eslint": "^8.57.1",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.19",
    "postcss": "^8.5.2",
    "tailwindcss": "^3.4.17",
    "typescript": "^5.7.3",
    "vite": "^5.4.14"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
 export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 };
--- a/public/images/2gdigital.png
+++ b/public/images/2gdigital.png
--- a/public/images/bocitsec.png
+++ b/public/images/bocitsec.png
--- a/public/images/gis.png
+++ b/public/images/gis.png
--- a/public/images/hero.png
+++ b/public/images/hero.png
--- a/public/images/linkedin.svg
+++ b/public/images/linkedin.svg
@ -0,0 +1,4 @@
 <?xml version="1.0"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="60px" height="60px">
    <path fill="#FFFFFF" d="M24,4H6C4.895,4,4,4.895,4,6v18c0,1.105,0.895,2,2,2h18c1.105,0,2-0.895,2-2V6C26,4.895,25.105,4,24,4z M10.954,22h-2.95 v-9.492h2.95V22z M9.449,11.151c-0.951,0-1.72-0.771-1.72-1.72c0-0.949,0.77-1.719,1.72-1.719c0.948,0,1.719,0.771,1.719,1.719 C11.168,10.38,10.397,11.151,9.449,11.151z M22.004,22h-2.948v-4.616c0-1.101-0.02-2.517-1.533-2.517 c-1.535,0-1.771,1.199-1.771,2.437V22h-2.948v-9.492h2.83v1.297h0.04c0.394-0.746,1.356-1.533,2.791-1.533 c2.987,0,3.539,1.966,3.539,4.522V22z"/>
 </svg>
--- a/public/images/linqit.png
+++ b/public/images/linqit.png
--- a/public/images/netrix.png
+++ b/public/images/netrix.png
--- a/public/images/peter.png
+++ b/public/images/peter.png
--- a/public/images/rittec.png
+++ b/public/images/rittec.png
--- a/public/images/ritterdigital.png
+++ b/public/images/ritterdigital.png
--- a/public/images/tech01.png
+++ b/public/images/tech01.png
--- a/public/images/tech02.png
+++ b/public/images/tech02.png
--- a/public/images/tech03.png
+++ b/public/images/tech03.png
--- a/public/images/tech04.png
+++ b/public/images/tech04.png
--- a/public/images/zentrale.png
+++ b/public/images/zentrale.png
--- a/public/logos/technologie-team-favicon.svg
+++ b/public/logos/technologie-team-favicon.svg
@ -0,0 +1,7 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="32" height="32" rx="4" fill="#C25B3F"/>
  <path d="M8 8H24V12H8V8Z" fill="white"/>
  <path d="M8 14H16V26H8V14Z" fill="white"/>
  <path d="M18 14H24V18H18V14Z" fill="white"/>
  <path d="M18 20H24V26H18V20Z" fill="white"/>
 </svg>
--- a/public/logos/tteamdunkel.png
+++ b/public/logos/tteamdunkel.png
--- a/public/logos/tteamhell.png
+++ b/public/logos/tteamhell.png
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,67 @@
 import { BrowserRouter as Router } from 'react-router-dom';
 import { useEffect, useCallback } from 'react';
 import Navbar from './components/Navbar';
 import Hero from './components/Hero';
 import Mission from './components/Mission';
 import Technologies from './components/Technologies';
 import GroupValue from './components/GroupValue';
 import GroupCompanies from './components/GroupCompanies';
 import ExtendedGroup from './components/ExtendedGroup';
 import Footer from './components/Footer';
 import ScrollProgress from './components/ScrollProgress';
 import ScrollToTop from './components/ScrollToTop';
 function App() {
  const initializeObserver = useCallback(() => {
    const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              entry.target.classList.add('animate-fade-in');
              observer.unobserve(entry.target);
            }
          });
        },
        {
          threshold: 0.1,
          rootMargin: '0px',
        }
    );
    const sections = document.querySelectorAll('section');
    sections.forEach((section) => {
      observer.observe(section);
    });
    return () => {
      sections.forEach((section) => observer.unobserve(section));
      observer.disconnect();
    };
  }, []);
  useEffect(() => {
    const cleanup = initializeObserver();
    return cleanup;
  }, [initializeObserver]);
  return (
      <Router>
        <div className="min-h-screen bg-white flex flex-col">
          <ScrollProgress />
          <Navbar />
          <main className="flex-grow">
            <Hero />
            <Mission />
            <Technologies />
            <GroupValue />
            <GroupCompanies />
            <ExtendedGroup />
          </main>
          <Footer />
          <ScrollToTop />
        </div>
      </Router>
  );
 }
 export default App;
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@ -0,0 +1,48 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
 interface Props {
  children: ReactNode;
 }
 interface State {
  hasError: boolean;
 }
 export default class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    hasError: false
  };
  public static getDerivedStateFromError(): State {
    return { hasError: true };
  }
  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Uncaught error:', error, errorInfo);
  }
  public render() {
    if (this.state.hasError) {
      return (
        <div className="min-h-screen flex items-center justify-center bg-gray-50">
          <div className="text-center p-8">
            <h1 className="text-2xl font-bold text-gray-900 mb-4">
              Etwas ist schiefgelaufen
            </h1>
            <p className="text-gray-600 mb-4">
              Bitte laden Sie die Seite neu oder versuchen Sie es später erneut.
            </p>
            <button
              onClick={() => window.location.reload()}
              className="bg-[#C25B3F] hover:bg-[#A34832] text-white px-6 py-2 rounded-md transition-colors"
            >
              Seite neu laden
            </button>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
 }
--- a/src/components/ExtendedGroup.tsx
+++ b/src/components/ExtendedGroup.tsx
@ -0,0 +1,102 @@
 import { useState, useEffect } from 'react';
 export default function ExtendedGroup() {
  const [isVisible, setIsVisible] = useState(false);
  const [isHovered, setIsHovered] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
          }
        },
        { threshold: 0.1 }
    );
    const section = document.getElementById('extended-group');
    if (section) {
      observer.observe(section);
    }
    return () => {
      if (section) {
        observer.unobserve(section);
      }
    };
  }, []);
  const stats = [
    { text: 'seit 1984 am Markt', highlight: '1984' },
    { text: 'ca. 140 Unternehmen', highlight: '140' },
    { text: '6500 Mitarbeiter', highlight: '6500' }
  ];
  return (
      <section id="extended-group" className="py-12 sm:py-16 lg:py-24 bg-white overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className={`transition-all duration-700 ${
              isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
          }`}>
            <h2 className="font-outfit text-3xl sm:text-4xl lg:text-5xl font-bold text-[#C25B3F]
                       mb-4 sm:mb-6 section-enter section-enter-active">
              Die erweiterte Unternehmensgruppe
            </h2>
            <p className="font-outfit text-base sm:text-lg text-gray-600 mb-8 sm:mb-12 max-w-4xl
                     leading-relaxed section-enter section-enter-active delay-100">
              Das Technologie Team und deren Beteiligungen werden selbstständig und unabhängig geführt.
              Gleichzeitig können die Beteiligungen aber auf die Leistungen und Netzwerke der anderen
              Gesellschafterunternehmen zurückgreifen.
            </p>
            <div className="relative rounded-2xl overflow-hidden shadow-lg group"
                 onMouseEnter={() => setIsHovered(true)}
                 onMouseLeave={() => setIsHovered(false)}>
              {/* Image Container */}
              <div className="relative">
                <img
                    src="/images/zentrale.png"
                    alt="Zentrale Oberhausen"
                    className="w-full aspect-[2/1] object-cover transition-transform duration-700
                         group-hover:scale-105 will-change-transform"
                    loading="lazy"
                />
                {/* Dark Overlay */}
                <div className={`absolute inset-0 bg-black/20 transition-opacity duration-500 
                           ${isHovered ? 'opacity-0' : 'opacity-100'}`} />
              </div>
              {/* Info Section */}
              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90
                         via-black/60 to-transparent p-4 sm:p-6 lg:p-8 transform transition-all
                         duration-500 translate-y-0 group-hover:translate-y-0">
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-white">
                  {stats.map((stat, index) => (
                      <div key={index} className="flex flex-col items-center sm:items-start
                                          transform transition-all duration-500
                                          group-hover:translate-y-0 opacity-90
                                          group-hover:opacity-100">
                        <p className="font-outfit text-base sm:text-lg text-center sm:text-left">
                          <span className="font-semibold text-orange-400">{stat.highlight}</span>
                          {' ' + stat.text.replace(stat.highlight, '')}
                        </p>
                      </div>
                  ))}
                </div>
              </div>
              {/* Location Badge */}
              <div className="absolute top-4 left-4 bg-white/90 backdrop-blur-sm px-4 py-2
                         rounded-full shadow-lg transform transition-all duration-300
                         group-hover:scale-105">
                <p className="font-outfit text-sm font-medium text-gray-800">
                  Zentrale: Oberhausen
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
  );
 }
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@ -0,0 +1,151 @@
 import { Link } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 type FooterSection = {
  title: string;
  content: React.ReactNode;
 };
 const links = [
  { href: '#technologies', text: 'Unterstütze Technologien' },
  { href: '#group', text: 'Gruppenbeitritt' },
  { href: '#impressum', text: 'Impressum' },
 ];
 export default function Footer() {
  const [isVisible, setIsVisible] = useState(false);
  const [hoveredLink, setHoveredLink] = useState<string | null>(null);
  useEffect(() => {
    const observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
          }
        },
        { threshold: 0.1 }
    );
    const footer = document.querySelector('footer');
    if (footer) {
      observer.observe(footer);
    }
    return () => {
      if (footer) {
        observer.unobserve(footer);
      }
    };
  }, []);
  const sections: FooterSection[] = [
    {
      title: 'Links',
      content: (
          <div className="space-y-3">
            {links.map((link) => (
                <a
                    key={link.href}
                    href={link.href}
                    className="block transform transition-all duration-300 hover:text-white
                       hover:translate-x-1 focus:outline-none focus:text-white
                       group relative"
                    onMouseEnter={() => setHoveredLink(link.href)}
                    onMouseLeave={() => setHoveredLink(null)}
                >
                  <span className="relative z-10 inline-block">{link.text}</span>
                  <span className={`absolute left-0 bottom-0 w-0 h-0.5 bg-[#C25B3F] 
                            transition-all duration-300 group-hover:w-full
                            ${hoveredLink === link.href ? 'w-full' : 'w-0'}`} />
                </a>
            ))}
          </div>
      ),
    },
    {
      title: 'Ort',
      content: (
          <address className="not-italic space-y-2">
            <p className="transition-colors duration-300 hover:text-white">
              Essener Straße 2-24
            </p>
            <p className="transition-colors duration-300 hover:text-white">
              46047 Oberhausen
            </p>
          </address>
      ),
    },
    {
      title: 'Mailkontakt',
      content: (
          <div>
            <a href="mailto:kontakt@technologie.team"
               className="block mb-4 transition-all duration-300 hover:text-white
                      hover:translate-x-1 relative group">
              <span>kontakt@technologie.team</span>
              <span className="absolute left-0 bottom-0 w-0 h-0.5 bg-[#C25B3F]
                         transition-all duration-300 group-hover:w-full" />
            </a>
            <a
                href="https://linkedin.com"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-block transform transition-all duration-300
                     hover:scale-110 focus:outline-none focus:scale-110"
                aria-label="Besuchen Sie uns auf LinkedIn"
            >
              <img
                  src="/images/linkedin.svg"
                  alt="LinkedIn"
                  className="h-8 w-8 sm:h-10 sm:w-10"
              />
            </a>
          </div>
      ),
    },
  ];
  return (
      <footer className="bg-gray-900 text-gray-400 py-12 sm:py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className={`flex flex-col space-y-12 sm:space-y-16 
                      transition-all duration-700 transform
                      ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
            {/* Logo */}
            <Link to="/"
                  className="block transition-transform duration-300 hover:scale-105
                         focus:outline-none focus:scale-105">
              <img
                  src="/logos/tteamhell.png"
                  alt="Technologie Team Logo"
                  className="h-12 sm:h-15"
                  loading="lazy"
              />
            </Link>
            {/* Navigation Section */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-12">
              {sections.map((section, index) => (
                  <div key={section.title}
                       className={`transition-all duration-500 delay-${index * 100}
                           ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
                    <h3 className="font-outfit text-white font-semibold mb-4 text-base sm:text-lg
                           transform transition-all duration-300 hover:text-[#C25B3F]">
                      {section.title}
                    </h3>
                    {section.content}
                  </div>
              ))}
            </div>
          </div>
          <div className="border-t border-gray-800 mt-12 sm:mt-16 pt-6 sm:pt-8
                     text-center text-sm text-gray-500">
            <p className="transition-colors duration-300 hover:text-gray-400">
              Copyright © {new Date().getFullYear()} TechnologieTeam
            </p>
          </div>
        </div>
      </footer>
  );
 }
--- a/src/components/GroupCompanies.tsx
+++ b/src/components/GroupCompanies.tsx
@ -0,0 +1,127 @@
 import { useState, useEffect } from 'react';
 const companies = [
  {
    name: 'b.o.c. IT-SECURITY',
    logo: '/images/bocitsec.png',
    link: '#'
  },
  {
    name: 'GIS',
    logo: '/images/gis.png',
    link: '#'
  },
  {
    name: 'RITTER TECHNOLOGIE',
    logo: '/images/rittec.png',
    link: '#'
  },
  {
    name: 'NETRIX',
    logo: '/images/netrix.png',
    link: '#'
  },
  {
    name: 'RITTER digital',
    logo: '/images/ritterdigital.png',
    link: '#'
  },
  {
    name: 'LINQ-IT',
    logo: '/images/linqit.png',
    link: '#'
  },
  {
    name: '2G.digital',
    logo: '/images/2gdigital.png',
    link: '#'
  }
 ];
 export default function GroupCompanies() {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
  const [isVisible, setIsVisible] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
          }
        },
        { threshold: 0.1 }
    );
    const section = document.getElementById('companies');
    if (section) {
      observer.observe(section);
    }
    return () => {
      if (section) {
        observer.unobserve(section);
      }
    };
  }, []);
  return (
      <section id="companies" className="py-12 sm:py-16 lg:py-24 bg-white overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className={`font-outfit text-3xl sm:text-4xl lg:text-5xl font-bold text-[#C25B3F] 
                     mb-8 sm:mb-12 lg:mb-16 transition-all duration-700
                     ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
            Unsere IT-/Technologie Gruppenunternehmen
          </h2>
          {/* Angepasstes Grid für 2 Spalten auf Mobile */}
          <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-6 lg:gap-8">
            {companies.map((company, index) => (
                <a
                    key={index}
                    href={company.link}
                    className={`
                relative bg-white rounded-xl p-4 sm:p-6 lg:p-8
                transition-all duration-500 ease-out
                hover:shadow-xl hover:-translate-y-1
                flex items-center justify-center
                aspect-[4/3] group
                border border-gray-100
                ${hoveredIndex === index ? 'shadow-lg scale-[1.02]' : 'shadow-sm'}
                ${isVisible ? 'animate-fade-in' : 'opacity-0'}
                animate-delay-${(index + 1) * 100}
              `}
                    onMouseEnter={() => setHoveredIndex(index)}
                    onMouseLeave={() => setHoveredIndex(null)}
                    aria-label={`Besuchen Sie ${company.name}`}
                >
                  {/* Logo */}
                  <img
                      src={company.logo}
                      alt={company.name}
                      className="w-full max-w-[85%] max-h-[65%] object-contain
                         transition-transform duration-500
                         group-hover:scale-110 will-change-transform"
                      loading="lazy"
                  />
                  {/* Company Name Overlay - nur auf größeren Bildschirmen */}
                  <div className="absolute bottom-0 left-0 right-0 p-2 sm:p-3 bg-gradient-to-t
                           from-gray-900/10 to-transparent opacity-0
                           group-hover:opacity-100 transition-opacity duration-300
                           hidden sm:block">
                    <p className="text-center text-gray-600 text-sm font-medium">
                      {company.name}
                    </p>
                  </div>
                  {/* Hover Effect Border */}
                  <div className="absolute inset-0 rounded-xl border-2 border-[#C25B3F] opacity-0
                           scale-105 group-hover:opacity-100 group-hover:scale-100
                           transition-all duration-300" />
                </a>
            ))}
          </div>
        </div>
      </section>
  );
 }
--- a/src/components/GroupValue.tsx
+++ b/src/components/GroupValue.tsx
@ -0,0 +1,136 @@
 import { useState, useEffect } from 'react';
 import { Users2, Eye, BarChart3, Settings2, DollarSign, Search, Link2, TrendingUp, GraduationCap, Monitor } from 'lucide-react';
 const valueItems = [
  {
    icon: Users2,
    title: 'Management Team',
    description: 'Ein erfahrenes, kompetentes Managementteam sorgt für strategische Unterstützung.'
  },
  {
    icon: Eye,
    title: 'Fokus auf Transparenz',
    description: 'Transparenz in allen Prozessen, was Vertrauen und offene Kommunikation fördert.'
  },
  {
    icon: BarChart3,
    title: 'Schlankes Reporting',
    description: 'Ein effektives Berichtssystem ermöglicht es sich auf seine Aufgaben zu konzentrieren und agil zu reagieren.'
  },
  {
    icon: Settings2,
    title: 'Operative Hebel',
    description: 'Gemeinsame Stärken nutzen und durchgängige Experten-Lösungen schaffen.'
  },
  {
    icon: DollarSign,
    title: 'Finanzielle Hebel',
    description: 'Finanzielle Stärken bündeln und zum Wohle der Gesamtlösung einsetzen.'
  },
  {
    icon: Search,
    title: 'Recruiting',
    description: 'Unterstützung durch Personal-Experten'
  },
  {
    icon: Link2,
    title: 'Gruppenzugehörigkeit',
    description: 'Mehr aus den einzelnen Möglichkeiten rausholen und gemeinsam bessere Lösungen und Entwicklungen schaffen.'
  },
  {
    icon: TrendingUp,
    title: 'Personal Perspektive',
    description: 'Individuelle Fördermöglichkeiten in einem großen Ökosystem, mit agilen Entscheidungswegen.'
  },
  {
    icon: GraduationCap,
    title: 'Ausbildung',
    description: 'Kontinuierliche Schulung und Weiterentwicklung der Mitarbeiterkompetenzen.'
  },
  {
    icon: Monitor,
    title: 'Digitalisierung',
    description: 'Nutzung neuester technischer Möglichkeiten zur Verbesserung von Geschäftsprozessen.'
  }
 ];
 export default function GroupValue() {
  const [isVisible, setIsVisible] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
          }
        },
        { threshold: 0.1 }
    );
    const section = document.getElementById('group-value');
    if (section) {
      observer.observe(section);
    }
    return () => {
      if (section) {
        observer.unobserve(section);
      }
    };
  }, []);
  return (
      <section id="group-value" className="bg-[#C25B3F] py-12 sm:py-16 lg:py-24 overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className={`mb-8 sm:mb-12 lg:mb-16 max-w-3xl mx-auto text-center 
                      ${isVisible ? 'animate-fade-in' : 'opacity-0'}`}>
            <h2 className="font-outfit text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4 sm:mb-8
                       section-enter section-enter-active">
              Unser Gruppenmehrwert
            </h2>
            <p className="font-outfit text-base sm:text-lg text-white/90 leading-relaxed
                     section-enter section-enter-active delay-100">
              IT-/Technologieunternehmen zeichnen sich durch ihre Kompetenz und die exzellente Umsetzung von
              Kundenanforderungen aus. Unser Ziel ist es, diese Qualitäten zu erhalten, die Unternehmenskultur
              zu wahren und Raum für weiteres Wachstum und Entwicklung zu schaffen.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4 sm:gap-6 lg:gap-8">
            {valueItems.map((item, index) => {
              const Icon = item.icon;
              return (
                  <div
                      key={index}
                      className={`relative bg-white/10 backdrop-blur-sm rounded-2xl p-6 sm:p-8
                         transition-all duration-500 group hover:bg-white/20
                         hover:scale-102 hover:shadow-xl will-change-transform
                         ${isVisible ? 'animate-fade-in' : 'opacity-0'}
                         animate-delay-${(index + 1) * 100}`}
                  >
                    <div className="mb-4 sm:mb-6 transform transition-transform duration-300
                            group-hover:scale-110 group-hover:rotate-3">
                      <Icon className="w-8 h-8 sm:w-10 sm:h-10 text-white"
                            strokeWidth={1.5} />
                    </div>
                    <h3 className="font-outfit text-base sm:text-lg font-semibold text-white mb-2 sm:mb-3
                           transform transition-transform duration-300
                           group-hover:translate-x-1">
                      {item.title}
                    </h3>
                    <p className="font-outfit text-sm text-white/80 leading-relaxed
                          transition-opacity duration-300 group-hover:text-white">
                      {item.description}
                    </p>
                    {/* Hover Effect Overlay */}
                    <div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/0 to-white/10
                             opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                  </div>
              );
            })}
          </div>
        </div>
      </section>
  );
 }
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@ -0,0 +1,87 @@
 import { Link } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 export default function Hero() {
    const [isLoaded, setIsLoaded] = useState(false);
    useEffect(() => {
        setIsLoaded(true);
    }, []);
    return (
        <section className="relative overflow-hidden bg-gray-900">
            {/* Hero section with background */}
            <div className="relative min-h-screen flex items-center">
                {/* Background image with overlay */}
                <div
                    className="absolute inset-0 z-0"
                    style={{
                        backgroundImage: 'url("/images/hero.png")',
                        backgroundSize: 'cover',
                        backgroundPosition: 'center',
                        backgroundRepeat: 'no-repeat'
                    }}
                >
                    <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/50 to-black/60" />
                </div>
                {/* Content */}
                <div className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className={`${isLoaded ? 'animate-fade-in' : ''}`}>
                        <h1 className="font-outfit text-3xl xs:text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl
                                     font-bold text-white mb-4 sm:mb-6 md:mb-8 tracking-normal leading-tight
                                     section-enter section-enter-active">
                            <span className="block">
                                IHRE IT-/TECHNOLOGIE-
                            </span>
                            <span className="block">
                                UNTERNEHMENSGRUPPE
                            </span>
                        </h1>
                        <p className="font-outfit text-lg xs:text-xl sm:text-2xl md:text-3xl text-gray-200
                                    mb-6 sm:mb-8 md:mb-12 tracking-normal leading-relaxed
                                    section-enter section-enter-active delay-200">
                            Gemeinsam Stärker | Für Unsere Kunden | Durchgängig In Ihren Prozessen
                        </p>
                        <div className="section-enter section-enter-active delay-300">
                            <Link
                                to="/mehr"
                                className="group relative font-outfit inline-flex items-center justify-center
                                         overflow-hidden rounded bg-[#C25B3F] px-6 sm:px-8 py-3 sm:py-4
                                         text-base sm:text-lg md:text-xl font-medium uppercase tracking-wide
                                         text-white w-full sm:w-auto shadow-lg
                                         transition-all duration-300 ease-out
                                         hover:bg-[#A34832]"
                            >
                                <span className="flex items-center gap-2">
                                    Mehr erfahren
                                    <svg
                                        className="w-4 h-4"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={2}
                                            d="M9 5l7 7-7 7"
                                        />
                                    </svg>
                                </span>
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
            {/* Subtle background effects */}
            <div className="absolute inset-0 pointer-events-none">
                <div className="absolute top-1/4 left-0 w-96 h-96 bg-orange-500/10 rounded-full
                              blur-3xl mix-blend-overlay opacity-75" />
                <div className="absolute bottom-1/4 right-0 w-96 h-96 bg-orange-500/10 rounded-full
                              blur-3xl mix-blend-overlay opacity-75" />
            </div>
        </section>
    );
 }
--- a/src/components/ImageLoader.tsx
+++ b/src/components/ImageLoader.tsx
@ -0,0 +1,25 @@
 import { useState } from 'react';
 interface ImageLoaderProps {
  src: string;
  alt: string;
  className?: string;
 }
 export default function ImageLoader({ src, alt, className = '' }: ImageLoaderProps) {
  const [isLoading, setIsLoading] = useState(true);
  return (
    <div className="relative">
      {isLoading && (
        <div className="absolute inset-0 bg-gray-100 animate-pulse" />
      )}
      <img
        src={src}
        alt={alt}
        className={`${className} ${isLoading ? 'opacity-0' : 'opacity-100 transition-opacity duration-300'}`}
        onLoad={() => setIsLoading(false)}
      />
    </div>
  );
 }
--- a/src/components/Mission.tsx
+++ b/src/components/Mission.tsx
@ -0,0 +1,93 @@
 import { useState, useEffect } from 'react';
 import peterImage from '../../public/images/peter.png';
 export default function Mission() {
  const [isVisible, setIsVisible] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
          }
        },
        { threshold: 0.1 }
    );
    const section = document.getElementById('mission');
    if (section) {
      observer.observe(section);
    }
    return () => {
      if (section) {
        observer.unobserve(section);
      }
    };
  }, []);
  return (
      <section id="mission" className="py-16 sm:py-20 lg:py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className={`grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-start 
                      ${isVisible ? 'animate-fade-in' : 'opacity-0'}`}>
            {/* CEO Image Card */}
            <div className="lg:col-span-4 lg:sticky lg:top-24">
              <div className="group bg-gray-100 rounded-2xl overflow-hidden shadow-lg
                          transition-all duration-300 hover:shadow-2xl transform hover:-translate-y-1">
                <div className="overflow-hidden">
                  <img
                      src={peterImage}
                      alt="Peter Heim"
                      className="w-full aspect-[90/100] object-cover object-top
                           transition-transform duration-500 group-hover:scale-105"
                  />
                </div>
                <div className="p-6 sm:p-8 bg-gray-800 transform transition-all duration-300
                            group-hover:bg-gray-900">
                  <h3 className="font-outfit text-xl sm:text-2xl font-semibold text-white mb-1
                             transform transition-all duration-300 group-hover:translate-x-1">
                    Peter Heim
                  </h3>
                  <p className="font-outfit text-base sm:text-lg text-gray-200
                             transform transition-all duration-300 group-hover:translate-x-1">
                    CEO
                  </p>
                </div>
              </div>
            </div>
            {/* Mission Text Content */}
            <div className="lg:col-span-8">
              <h2 className="font-outfit text-3xl sm:text-4xl lg:text-5xl font-bold text-[#C25B3F]
                          mb-8 sm:mb-12 section-enter section-enter-active">
                Unser Leitbild
              </h2>
              <div className="space-y-6 sm:space-y-8">
                <p className="font-outfit text-base sm:text-lg lg:text-xl text-gray-700 leading-relaxed
                           transition-all duration-300 hover:text-gray-900 section-enter section-enter-active">
                  Das Technologie Team ist eine mittelständische Unternehmensgruppe, die sich auf den
                  IT- und Technologiesektor spezialisiert hat. Wir konzentrieren uns auf Beteiligungen in
                  Nachfolgesituationen und die langfristige Weiterentwicklung erfolgreicher
                  Unternehmen. Unser Ziel ist es, eine führende Rolle in der Technologiebranche zu
                  übernehmen, indem wir vertrauensvolle Transaktionen und nachhaltige Strategien für
                  Unternehmensfortführungen anbieten.
                </p>
                <p className="font-outfit text-base sm:text-lg lg:text-xl text-gray-700 leading-relaxed
                           transition-all duration-300 hover:text-gray-900 section-enter section-enter-active
                           delay-100">
                  Wir legen Wert auf langfristige Geschäftsbeziehungen und agieren in agilen
                  Arbeitsstrukturen. Unser Fokus liegt auf der nahtlosen Fortführung des Tagesgeschäfts
                  sowie auf der Unterstützung bei der Erreichung zukünftiger Ziele. So bieten wir
                  umfassende IT- und Technologieleistungen „aus einer Hand" und nutzen die
                  wachsenden Möglichkeiten der IT und Technologien optimal für Ihr Wachstum.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
  );
 }
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@ -0,0 +1,22 @@
 import { Link } from 'react-router-dom';
 export default function Navbar() {
  return (
      <nav className="fixed top-0 left-0 right-0 bg-white shadow-md z-50 overflow-x-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-start items-center h-20 sm:h-28">
            {/* Left-aligned Logo section */}
            <div className="flex items-center">
              <Link to="/" className="flex items-center">
                <img
                    src="/logos/tteamdunkel.png"
                    alt="Technologie Team Logo"
                    className="h-16 sm:h-24 w-auto"
                />
              </Link>
            </div>
          </div>
        </div>
      </nav>
  );
 }
--- a/src/components/ScrollProgress.tsx
+++ b/src/components/ScrollProgress.tsx
@ -0,0 +1,14 @@
 import { useScrollProgress } from '../hooks/useScrollProgress';
 export default function ScrollProgress() {
  const progress = useScrollProgress();
  return (
    <div className="fixed top-0 left-0 w-full h-1 z-50">
      <div 
        className="h-full bg-[#C25B3F] transition-all duration-100"
        style={{ width: `${progress * 100}%` }}
      />
    </div>
  );
 }
--- a/src/components/ScrollToTop.tsx
+++ b/src/components/ScrollToTop.tsx
@ -0,0 +1,38 @@
 import { useState, useEffect } from 'react';
 import { ArrowUp } from 'lucide-react';
 export default function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false);
  useEffect(() => {
    const toggleVisibility = () => {
      if (window.pageYOffset > 300) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };
    window.addEventListener('scroll', toggleVisibility);
    return () => window.removeEventListener('scroll', toggleVisibility);
  }, []);
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };
  return (
    <button
      className={`fixed bottom-8 right-8 bg-[#C25B3F] hover:bg-[#A34832] text-white p-3 rounded-full shadow-lg transition-all duration-300 z-50 ${
        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10 pointer-events-none'
      }`}
      onClick={scrollToTop}
      aria-label="Zum Seitenanfang scrollen"
    >
      <ArrowUp className="w-6 h-6" />
    </button>
  );
 }
--- a/src/components/Technologies.tsx
+++ b/src/components/Technologies.tsx
@ -0,0 +1,196 @@
 import { useState, useCallback, useEffect } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 interface Technology {
  title: string;
  image: string;
 }
 const technologies: Technology[] = [
  {
    title: 'ERP, eCommerce, Warenwirtschaft, digitale Geschäftsprozesse',
    image: '/images/tech01.png',
  },
  {
    title: 'IT-Infrastruktur, as a Service Modelle, Cloudsysteme',
    image: '/images/tech02.png',
  },
  {
    title: 'IT-Sicherheitstechnik, Netzwerktechnik',
    image: '/images/tech03.png',
  },
  {
    title: 'Beratung, Projektunterstützung',
    image: '/images/tech04.png',
  },
 ];
 export default function Technologies() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [touchStart, setTouchStart] = useState<number | null>(null);
  const [isMobile, setIsMobile] = useState(true);
  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);
  const handlePrevious = useCallback(() => {
    setCurrentIndex((prev) => (prev === 0 ? technologies.length - 1 : prev - 1));
  }, []);
  const handleNext = useCallback(() => {
    setCurrentIndex((prev) => (prev === technologies.length - 1 ? 0 : prev + 1));
  }, []);
  const onTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
    setTouchStart(e.touches[0].clientX);
  };
  const onTouchEnd = (e: React.TouchEvent<HTMLDivElement>) => {
    if (!touchStart) return;
    const touchEnd = e.changedTouches[0].clientX;
    const diff = touchStart - touchEnd;
    if (Math.abs(diff) > 50) {
      if (diff > 0) handleNext();
      else handlePrevious();
    }
    setTouchStart(null);
  };
  return (
      <section className="bg-gray-50 overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
          {/* Header */}
          <div className="flex items-center justify-between mb-6">
            <h2 className="font-outfit text-2xl sm:text-3xl font-bold text-[#C25B3F]">
              Unterstützte Technologien
            </h2>
            {!isMobile && (
                <div className="flex gap-3">
                  <button
                      onClick={handlePrevious}
                      className="p-2 rounded-full bg-white shadow-lg
                         transition-all duration-300 hover:bg-gray-50 active:scale-95
                         focus:outline-none focus:ring-2 focus:ring-orange-500"
                      aria-label="Vorherige"
                  >
                    <ChevronLeft className="w-5 h-5 text-gray-600" />
                  </button>
                  <button
                      onClick={handleNext}
                      className="p-2 rounded-full bg-[#C25B3F] shadow-lg
                         transition-all duration-300 hover:bg-[#A34832] active:scale-95
                         focus:outline-none focus:ring-2 focus:ring-orange-500"
                      aria-label="Nächste"
                  >
                    <ChevronRight className="w-5 h-5 text-white" />
                  </button>
                </div>
            )}
          </div>
          {/* Desktop View */}
          {!isMobile && (
              <div className="relative">
                <div className="grid grid-cols-4 gap-6">
                  {technologies.map((tech, idx) => {
                    const isVisible = Math.abs(idx - currentIndex) <= 3;
                    const order = (idx - currentIndex + technologies.length) % technologies.length;
                    return (
                        <div
                            key={idx}
                            className={`transition-all duration-500 transform
                      ${isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}
                      order-${order}`}
                        >
                          <div className="relative aspect-[4/3] rounded-xl overflow-hidden shadow-lg group">
                            <img
                                src={tech.image}
                                alt={tech.title}
                                className="w-full h-full object-cover transition-transform duration-700
                                 group-hover:scale-105"
                            />
                            <div className="absolute inset-0 bg-gradient-to-t from-black/90
                                   via-black/40 to-transparent">
                              <div className="absolute bottom-0 left-0 right-0 p-4">
                                <h3 className="font-outfit text-white text-lg font-medium leading-snug">
                                  {tech.title}
                                </h3>
                              </div>
                            </div>
                          </div>
                        </div>
                    );
                  })}
                </div>
              </div>
          )}
          {/* Mobile View */}
          {isMobile && (
              <div
                  className="relative"
                  onTouchStart={onTouchStart}
                  onTouchEnd={onTouchEnd}
              >
                <div className="absolute z-10 inset-y-0 left-0 right-0 flex items-center justify-between pointer-events-none">
                  <button
                      onClick={handlePrevious}
                      className="pointer-events-auto p-2 rounded-full bg-white/90 shadow-lg
                         transition-all duration-300 hover:bg-white active:scale-95
                         focus:outline-none focus:ring-2 focus:ring-orange-500"
                      aria-label="Vorherige"
                  >
                    <ChevronLeft className="w-5 h-5 text-gray-600" />
                  </button>
                  <button
                      onClick={handleNext}
                      className="pointer-events-auto p-2 rounded-full bg-[#C25B3F] shadow-lg
                         transition-all duration-300 hover:bg-[#A34832] active:scale-95
                         focus:outline-none focus:ring-2 focus:ring-orange-500"
                      aria-label="Nächste"
                  >
                    <ChevronRight className="w-5 h-5 text-white" />
                  </button>
                </div>
                <div className="relative aspect-[4/3] rounded-xl overflow-hidden shadow-lg">
                  <img
                      src={technologies[currentIndex].image}
                      alt={technologies[currentIndex].title}
                      className="w-full h-full object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent">
                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="font-outfit text-white text-lg font-medium leading-snug">
                        {technologies[currentIndex].title}
                      </h3>
                    </div>
                  </div>
                </div>
                <div className="flex justify-center gap-2 mt-4">
                  {technologies.map((_, idx) => (
                      <button
                          key={idx}
                          onClick={() => setCurrentIndex(idx)}
                          className={`h-1 rounded-full transition-all duration-300 
                    ${currentIndex === idx ? 'w-8 bg-[#C25B3F]' : 'w-4 bg-gray-300'}`}
                          aria-label={`Gehe zu Slide ${idx + 1}`}
                      />
                  ))}
                </div>
              </div>
          )}
        </div>
      </section>
  );
 }
--- a/src/hooks/useScrollProgress.ts
+++ b/src/hooks/useScrollProgress.ts
@ -0,0 +1,22 @@
 import { useState, useEffect } from 'react';
 export function useScrollProgress() {
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    const updateScroll = () => {
      const currentProgress = window.scrollY;
      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
      if (scrollHeight) {
        setProgress(Number((currentProgress / scrollHeight).toFixed(2)));
      }
    };
    window.addEventListener('scroll', updateScroll);
    return () => window.removeEventListener('scroll', updateScroll);
  }, []);
  return progress;
 }
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,86 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply text-gray-900 antialiased;
  }
 }
@layer components {
  .section-title {
    @apply text-3xl md:text-4xl font-bold text-gray-900 mb-8;
  }
  .section-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24;
  }
 }
 /* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }
 .animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
 }
 /* Section transitions */
 .section-enter {
  opacity: 0;
  transform: translateY(20px);
 }
 .section-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s, transform 0.5s;
 }
 /* Responsive adjustments */
@media (max-width: 640px) {
  .section-container {
    @apply py-12;
  }
  h1 {
    @apply text-4xl;
  }
  h2 {
    @apply text-3xl;
  }
 }
 /* Loading states */
 .image-loading {
  @apply relative overflow-hidden bg-gray-100;
 }
 .image-loading::after {
  content: '';
  @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent;
  animation: shimmer 1.5s infinite;
 }
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
 }
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,21 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
 import ErrorBoundary from './components/ErrorBoundary';
 import './index.css';
 const rootElement = document.getElementById('root');
 if (!rootElement) {
    throw new Error('Root element not found');
 }
 const root = createRoot(rootElement);
 root.render(
    <StrictMode>
        <ErrorBoundary>
            <App />
        </ErrorBoundary>
    </StrictMode>
 );
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
 /// <reference types="vite/client" />
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
 };
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,24 @@
 {
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
 {
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,22 @@
 {
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,30 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  server: {
    port: 5174,
    host: true,
    fs: {
      strict: false
    }
  },
  build: {
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor': ['react', 'react-dom', 'react-router-dom'],
          'icons': ['lucide-react']
        }
      }
    }
  }
 });