jonny
/
MBO-Tech-IT-Webseite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: jonny:7f8160596c8309c2562731c0e1b51f0334df2d2a
Branches Tags
jonny:master
..
compare: jonny:d89bfdc888ccc62075c362ea49bbe65f80e1135f
Branches Tags
jonny:master

No commits in common. "7f8160596c8309c2562731c0e1b51f0334df2d2a" and "d89bfdc888ccc62075c362ea49bbe65f80e1135f" have entirely different histories.
7f8160596c ... d89bfdc888

9 changed files with 26 additions and 177 deletions
Show Stats Expand all files Collapse all files

81
app/globals.css
View File

@ -22,15 +22,10 @@ html {
}
body {
background-color: #f0f4f8;
color: #1a202c;
font-family: 'Inter', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
.dark body {
background-color: #18212f;
color: #f1f5f9;
font-family: 'Inter', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
@layer components {
@ -47,12 +42,10 @@ body {
/* Secondary button – outlined, fills subtly on hover */
.btn-secondary {
@apply inline-flex items-center justify-center rounded-xl
border border-slate-300 text-slate-700 font-semibold
border border-gray-600 text-slate-300 font-semibold
transition-all duration-200
hover:bg-slate-100 hover:border-slate-400 hover:text-slate-900
active:scale-[0.98]
dark:border-gray-600 dark:text-slate-300
dark:hover:bg-white/5 dark:hover:border-gray-400 dark:hover:text-white;
hover:bg-white/5 hover:border-gray-400 hover:text-white
active:scale-[0.98];
}
/* Small nav button */
@ -75,7 +68,7 @@ body {
/* Dot matrix – default background pattern */
.bg-grid {
background-image: radial-gradient(rgba(249, 115, 22, 0.06) 1px, transparent 1px);
background-image: radial-gradient(rgba(249, 115, 22, 0.15) 1px, transparent 1px);
background-size: 28px 28px;
}
@ -102,11 +95,6 @@ body {
}
}
/* Dark-mode bg-grid override — must live outside @layer so it wins over the base rule */
.dark .bg-grid {
background-image: radial-gradient(rgba(249, 115, 22, 0.15) 1px, transparent 1px);
}
/* Tagline ticker animation */
@keyframes ticker-scroll {
0% { transform: translateX(0); }
@ -124,23 +112,23 @@ body {
.legal-content h2 {
font-size: 1.25rem;
font-weight: 700;
color: #1a202c;
color: #f1f5f9;
margin-bottom: 0.75rem;
margin-top: 2rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #cbd5e0;
border-bottom: 1px solid #2d3748;
}
.legal-content h3 {
font-size: 0.95rem;
font-weight: 600;
color: #ea6c00;
color: #fb923c;
margin-top: 1.25rem;
margin-bottom: 0.4rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.legal-content p {
color: #4a5568;
color: #94a3b8;
line-height: 1.8;
margin-bottom: 0.75rem;
font-size: 0.925rem;
@ -151,7 +139,7 @@ body {
margin: 0.75rem 0 1rem 0;
}
.legal-content ul li {
color: #4a5568;
color: #94a3b8;
font-size: 0.925rem;
line-height: 1.75;
padding-left: 1.25rem;
@ -169,19 +157,19 @@ body {
background: #f97316;
}
.legal-content a {
color: #2563eb;
color: #60a5fa;
text-decoration: underline;
text-underline-offset: 3px;
}
.legal-content a:hover {
color: #f97316;
color: #fb923c;
}
.legal-content strong {
color: #1a202c;
color: #e2e8f0;
font-weight: 600;
}
.legal-content .note {
background: #e8eef4;
background: #1e2a3d;
border-left: 3px solid #f97316;
padding: 0.75rem 1rem;
border-radius: 0 0.5rem 0.5rem 0;
@ -192,52 +180,17 @@ body {
font-size: 0.875rem !important;
}
/* Legal pages – dark mode overrides */
.dark .legal-content h2 {
color: #f1f5f9;
border-bottom-color: #2d3748;
}
.dark .legal-content h3 {
color: #fb923c;
}
.dark .legal-content p,
.dark .legal-content ul li {
color: #94a3b8;
}
.dark .legal-content a {
color: #60a5fa;
}
.dark .legal-content a:hover {
color: #fb923c;
}
.dark .legal-content strong {
color: #e2e8f0;
}
.dark .legal-content .note {
background: #1e2a3d;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #e8eef4;
background: #18212f;
}
::-webkit-scrollbar-thumb {
background: #94a3b8;
background: #2d3748;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #f97316;
}
.dark ::-webkit-scrollbar-track {
background: #18212f;
}
.dark ::-webkit-scrollbar-thumb {
background: #2d3748;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: #f97316;
}

7
app/layout.tsx
View File

@ -1,6 +1,5 @@
import type { Metadata } from "next";
import "./globals.css";
import Providers from "@/components/Providers";
export const metadata: Metadata = {
title: "MBO-Tech-IT | Docker, Kubernetes & Cloud-Infrastruktur",
@ -25,10 +24,8 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="de" className="scroll-smooth" suppressHydrationWarning>
<body>
<Providers>{children}</Providers>
</body>
<html lang="de" className="scroll-smooth">
<body>{children}</body>
</html>
);
}

2
app/page.tsx
View File

@ -12,7 +12,7 @@ import Footer from "@/components/Footer";
export default function Home() {
return (
<main className="min-h-screen bg-[#f0f4f8] dark:bg-[#18212f]">
<main className="min-h-screen bg-[#18212f]">
<Header />
<Hero />
<TaglineBanner />

17
components/Header.tsx
View File

@ -3,7 +3,6 @@
import { useState, useEffect } from "react";
import Link from "next/link";
import Logo from "./Logo";
import ThemeToggle from "./ThemeToggle";
const navLinks = [
{ label: "Services", href: "/#services" },
@ -28,7 +27,7 @@ export default function Header() {
<header
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
scrolled
? "bg-white/95 dark:bg-[#111925]/95 backdrop-blur-md border-b border-slate-200 dark:border-gray-800"
? "bg-[#111925]/95 backdrop-blur-md border-b border-gray-800"
: "bg-transparent"
}`}
>
@ -38,7 +37,7 @@ export default function Header() {
<Link href="/" className="flex items-center gap-3 group">
<Logo className="h-8 w-auto" />
<div className="flex flex-col leading-tight">
<span className="font-black text-slate-900 dark:text-white text-base tracking-wider uppercase">
<span className="font-black text-white text-base tracking-wider uppercase">
MBO-<span className="text-gradient">TECH-IT</span>
</span>
<span className="text-[9px] font-semibold tracking-[0.2em] text-orange-400/70 uppercase hidden sm:block">
@ -53,7 +52,7 @@ export default function Header() {
<Link
key={link.href}
href={link.href}
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm font-medium"
className="text-slate-400 hover:text-blue-400 transition-colors text-sm font-medium"
>
{link.label}
</Link>
@ -64,12 +63,11 @@ export default function Header() {
>
Jetzt anfragen
</Link>
<ThemeToggle />
</nav>
{/* Mobile Menu Button */}
<button
className="md:hidden text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
className="md:hidden text-slate-400 hover:text-white transition-colors"
onClick={() => setMenuOpen(!menuOpen)}
aria-label="Menu"
>
@ -86,13 +84,13 @@ export default function Header() {
{/* Mobile Menu */}
{menuOpen && (
<div className="md:hidden bg-white/98 dark:bg-[#111925]/98 backdrop-blur-md border-t border-slate-200 dark:border-gray-800">
<div className="md:hidden bg-[#111925]/98 backdrop-blur-md border-t border-gray-800">
<nav className="px-4 py-4 flex flex-col gap-4">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm font-medium py-1"
className="text-slate-400 hover:text-blue-400 transition-colors text-sm font-medium py-1"
onClick={() => setMenuOpen(false)}
>
{link.label}
@ -105,9 +103,6 @@ export default function Header() {
>
Jetzt anfragen
</Link>
<div className="flex justify-end pt-1">
<ThemeToggle />
</div>
</nav>
</div>
)}

11
components/Providers.tsx
View File

@ -1,11 +0,0 @@
"use client";
import { ThemeProvider } from "next-themes";
export default function Providers({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
{children}
</ThemeProvider>
);
}

72
components/ThemeToggle.tsx
View File

@ -1,72 +0,0 @@
"use client";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
export default function ThemeToggle() {
const { resolvedTheme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) return null;
const isDark = resolvedTheme === "dark";
return (
<button
onClick={() => setTheme(isDark ? "light" : "dark")}
title={isDark ? "Light Mode" : "Dark Mode"}
aria-label={isDark ? "Zu Hell-Modus wechseln" : "Zu Dunkel-Modus wechseln"}
className={
isDark
? "rounded-md p-2 bg-[#1f2937] border border-[#374151] text-slate-400 hover:text-orange-400 transition-colors"
: "rounded-md p-2 bg-[#e2e8f0] border border-[#cbd5e0] text-slate-600 hover:text-orange-500 transition-colors"
}
>
{isDark ? (
// Sun icon — click to go light
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>
) : (
// Moon icon — click to go dark
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
</svg>
)}
</button>
);
}

11
package-lock.json generated
View File

@ -9,7 +9,6 @@
"version": "0.1.0",
"dependencies": {
"next": "^15.2.0",
"next-themes": "^0.4.6",
"nodemailer": "^8.0.6",
"react": "^19.0.0",
"react-dom": "^19.0.0"
@ -1373,16 +1372,6 @@
}
}
},
"node_modules/next-themes": {
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
"integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
}
},
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

1
package.json
View File

@ -10,7 +10,6 @@
},
"dependencies": {
"next": "^15.2.0",
"next-themes": "^0.4.6",
"nodemailer": "^8.0.6",
"react": "^19.0.0",
"react-dom": "^19.0.0"

1
tailwind.config.ts
View File

@ -1,7 +1,6 @@
import type { Config } from "tailwindcss";
const config: Config = {
darkMode: "class",
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",