design

2026-01-29 01:45:29 +01:00
parent 95833e2865
commit 749c0e6996
5 changed files with 97 additions and 58 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -51,6 +51,15 @@
    @apply absolute h-px bg-accent/20;
  }

+  .mesh-gradient {
+    background-color: #ffffff;
+    background-image:
+      radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.05) 0px, transparent 50%),
+      radial-gradient(at 100% 0%, rgba(15, 23, 42, 0.05) 0px, transparent 50%),
+      radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.05) 0px, transparent 50%),
+      radial-gradient(at 0% 100%, rgba(15, 23, 42, 0.05) 0px, transparent 50%);
+  }
+
  .tech-dot {
    @apply absolute w-1 h-1 bg-accent/30 rounded-full;
  }
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -1,6 +1,6 @@
 'use client';

-import React from 'react';
+import React, { useRef, useState } from 'react';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
 import { ArrowRight } from 'lucide-react';
@@ -26,52 +26,68 @@ export const Button = ({
  type = 'button',
  disabled = false
 }: ButtonProps) => {
-  const baseStyles = "inline-flex items-center justify-center px-8 py-4 rounded-xl font-bold uppercase tracking-widest text-xs transition-all duration-300 relative overflow-hidden group disabled:opacity-50 disabled:cursor-not-allowed";
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    setMousePosition({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    });
+  };
+
+  const baseStyles = "inline-flex items-center justify-center px-10 py-5 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] transition-all duration-500 relative group disabled:opacity-50 disabled:cursor-not-allowed select-none overflow-hidden";
  
  const variants = {
-    primary: "bg-primary text-white hover:bg-primary-light hover:shadow-[0_0_20px_rgba(15,23,42,0.3)]",
-    accent: "bg-accent text-white hover:bg-accent-hover hover:shadow-[0_0_20px_rgba(16,185,129,0.3)]",
+    primary: "bg-primary text-white shadow-lg",
+    accent: "bg-accent text-white shadow-lg",
    outline: "border-2 border-primary text-primary hover:bg-primary hover:text-white",
    ghost: "bg-slate-100 text-primary hover:bg-slate-200"
  };

  const content = (
-    <>
-      <span className="relative z-10 flex items-center gap-2">
-        {children}
-        {showArrow && (
-          <motion.span
-            animate={{ x: [0, 4, 0] }}
-            transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
-          >
-            <ArrowRight size={16} strokeWidth={3} />
-          </motion.span>
-        )}
-      </span>
-      <motion.div 
-        initial={{ x: '-100%' }}
-        whileHover={{ x: '100%' }}
-        transition={{ duration: 0.6, ease: "easeInOut" }}
-        className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 pointer-events-none"
-      />
-    </>
+    <span className="relative z-10 flex items-center gap-3">
+      {children}
+      {showArrow && (
+        <ArrowRight 
+          size={14} 
+          strokeWidth={3} 
+          className="group-hover:translate-x-1 transition-transform duration-300" 
+        />
+      )}
+    </span>
  );

+  const spotlight = (
+    <motion.div
+      className="absolute inset-0 z-0 pointer-events-none transition-opacity duration-500"
+      style={{
+        opacity: isHovered ? 1 : 0,
+        background: `radial-gradient(600px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(255,255,255,0.15), transparent 40%)`,
+      }}
+    />
+  );
+
+  const buttonProps = {
+    onMouseMove: handleMouseMove,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    className: `${baseStyles} ${variants[variant]} ${className}`,
+  };
+
  if (href) {
    return (
-      <Link href={href} className={`${baseStyles} ${variants[variant]} ${className}`}>
+      <Link href={href} {...buttonProps}>
+        {spotlight}
        {content}
      </Link>
    );
  }

  return (
-    <button 
-      type={type}
-      onClick={onClick} 
-      disabled={disabled}
-      className={`${baseStyles} ${variants[variant]} ${className}`}
-    >
+    <button type={type} onClick={onClick} disabled={disabled} {...buttonProps}>
+      {spotlight}
      {content}
    </button>
  );
--- a/components/HomeContent.tsx
+++ b/components/HomeContent.tsx
@@ -59,14 +59,14 @@ export default function Home() {
      {/* Hero Section */}
      <section className="relative min-h-[90vh] flex items-center pt-32 pb-20 overflow-hidden">
        <div className="absolute inset-0 z-0">
-          <div 
+          <div
            className="absolute inset-0 bg-cover bg-center"
            style={{ backgroundImage: 'url("/media/business/iStock-1068752548.jpg")' }}
          />
-          <div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40 md:to-transparent" />
-          <TileGrid />
+          <div className="absolute inset-0 bg-gradient-to-r from-slate-100/80 via-white/90 to-white/40 md:to-transparent" />
          <TechBackground />
        </div>
+        <TileGrid />

        <div className="container-custom relative z-10">
          <div className="text-left relative">
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Reveal } from './Reveal';
+import { Button } from './Button';

 const Layout = ({ children }: { children: React.ReactNode }) => {
  const pathname = usePathname();
@@ -78,12 +79,12 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                <span className={`absolute -bottom-1 left-0 w-full h-0.5 bg-accent transition-transform duration-300 origin-left ${isActive(link.href) ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'}`} />
              </Link>
            ))}
-            <Link 
-              href="/kontakt" 
-              className="ml-4 btn-primary !py-2 !px-5 !text-sm"
+            <Button
+              href="/kontakt"
+              className="ml-4 !py-2 !px-5 !text-[10px]"
            >
              Projekt anfragen
-            </Link>
+            </Button>
          </nav>

          {/* Mobile Menu Toggle */}
@@ -122,12 +123,12 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                  {link.label}
                </Link>
              ))}
-              <Link 
-                href="/kontakt" 
-                className="mt-4 btn-primary w-full py-4 text-center"
+              <Button
+                href="/kontakt"
+                className="mt-4 w-full"
              >
                Projekt anfragen
-              </Link>
+              </Button>
            </nav>
          </motion.div>
        )}
--- a/components/TileGrid.tsx
+++ b/components/TileGrid.tsx
@@ -12,25 +12,38 @@ export const TileGrid = () => {

  if (!mounted) return null;

+  const rows = 15;
+  const cols = 20;
+
  return (
-    <div className="absolute inset-0 pointer-events-none overflow-hidden z-[5]">
-      {/* The lighting tiles (actual squares) */}
-      <div className="absolute inset-0 grid grid-cols-8 md:grid-cols-12 grid-rows-8 md:grid-rows-12">
-        {[...Array(144)].map((_, i) => (
-          <motion.div
-            key={i}
-            initial={{ opacity: 0 }}
-            animate={{ 
-              opacity: [0, Math.random() > 0.92 ? 0.4 : 0, 0],
+    <div className="absolute inset-0 pointer-events-none overflow-hidden z-[1]">
+      <div className="flex flex-col gap-3 min-w-[120%] min-h-[120%] -left-[10%] -top-[10%] absolute">
+        {[...Array(rows)].map((_, rowIndex) => (
+          <div 
+            key={rowIndex} 
+            className="flex gap-3 justify-center"
+            style={{ 
+              transform: rowIndex % 2 === 0 ? 'translateX(0)' : 'translateX(80px)',
            }}
-            transition={{ 
-              duration: 3 + Math.random() * 4, 
-              repeat: Infinity, 
-              delay: Math.random() * 10,
-              ease: "easeInOut"
-            }}
-            className="w-full h-full bg-accent/20 border border-accent/5"
-          />
+          >
+            {[...Array(cols)].map((_, colIndex) => (
+              <motion.div
+                key={`${rowIndex}-${colIndex}`}
+                initial={{ opacity: 0.05 }}
+                animate={{ 
+                  opacity: [0.05, Math.random() > 0.9 ? 0.25 : 0.05, 0.05],
+                  scale: [1, Math.random() > 0.9 ? 1.05 : 1, 1]
+                }}
+                transition={{ 
+                  duration: 5 + Math.random() * 5, 
+                  repeat: Infinity, 
+                  delay: Math.random() * 20,
+                  ease: "easeInOut"
+                }}
+                className="w-32 h-32 md:w-40 md:h-40 bg-white/10 backdrop-blur-[2px] rounded-3xl border border-white/20 shadow-[0_8px_32px_0_rgba(31,38,135,0.07)] shrink-0"
+              />
+            ))}
+          </div>
        ))}
      </div>
    </div>