Initial commit

2026-08-01 16:07:57 +02:00
commit 20b254e614
68 changed files with 8467 additions and 0 deletions
@@ -0,0 +1,98 @@
+"use client";
+
+import { motion } from "framer-motion";
+import {
+  Code2,
+  Server,
+  Cloud,
+  Smartphone,
+} from "lucide-react";
+import GlassCard from "@/components/ui/GlassCard";
+import { fadeUp, stagger, viewportConfig } from "@/lib/animations";
+import type { Dictionary, Locale } from "@/lib/dictionaries";
+
+const icons = [Code2, Server, Cloud, Smartphone];
+
+interface ServicesProps {
+  locale: Locale;
+  dict: Dictionary;
+}
+
+export default function Services({ dict }: ServicesProps) {
+  return (
+    <section id="features" className="relative w-full py-24 sm:py-32">
+      <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
+        {/* Header */}
+        <motion.div
+          initial="hidden"
+          whileInView="visible"
+          viewport={viewportConfig}
+          variants={stagger(0.06)}
+          className="mx-auto mb-16 max-w-3xl text-center"
+        >
+          <motion.span
+            variants={fadeUp}
+            className="mb-6 inline-flex items-center gap-2 rounded-full border border-purple-400/30 bg-purple-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-purple-300 backdrop-blur-md"
+          >
+            {dict.services.badge}
+          </motion.span>
+
+          <motion.h2
+            variants={fadeUp}
+            className="font-display text-display-lg font-medium tracking-tight"
+          >
+            <span className="text-gradient-fade">
+              {dict.services.title}
+            </span>
+            <br />
+            <span className="text-gradient-purple">
+              {dict.services.titleAccent}
+            </span>
+          </motion.h2>
+
+          <motion.p
+            variants={fadeUp}
+            className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-text-secondary sm:text-lg"
+          >
+            {dict.services.subtitle}
+          </motion.p>
+        </motion.div>
+
+        {/* Grid */}
+        <motion.div
+          initial="hidden"
+          whileInView="visible"
+          viewport={viewportConfig}
+          variants={stagger(0.08)}
+          className="grid grid-cols-1 gap-4 sm:grid-cols-2"
+        >
+          {dict.services.items.map((service, i) => {
+            const Icon = icons[i];
+            return (
+              <motion.div key={i} variants={fadeUp} className="group h-full">
+                <GlassCard className="h-full overflow-hidden">
+                  {/* Hover glow */}
+                  <div className="absolute -right-12 -top-12 h-32 w-32 rounded-full bg-purple-500/0 blur-3xl transition-all duration-700 group-hover:bg-purple-500/25" />
+
+                  <div className="relative">
+                    <div className="mb-5 inline-flex h-12 w-12 items-center justify-center rounded-xl border border-purple-400/20 bg-purple-500/10 text-purple-300 transition-all duration-500 group-hover:border-purple-400/50 group-hover:bg-purple-500/20 group-hover:text-purple-200 group-hover:shadow-glow-sm">
+                      <Icon className="h-5 w-5" strokeWidth={1.5} />
+                    </div>
+
+                    <h3 className="mb-2 text-lg font-medium text-text-primary">
+                      {service.title}
+                    </h3>
+
+                    <p className="text-sm leading-relaxed text-text-secondary">
+                      {service.description}
+                    </p>
+                  </div>
+                </GlassCard>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+      </div>
+    </section>
+  );
+}