Initial commit

2026-01-20 13:39:17 +02:00
commit 7239b568de
114 changed files with 2454 additions and 0 deletions
--- a/src/components/Features.js
+++ b/src/components/Features.js
@@ -0,0 +1,100 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+const fadeUpPreset = (delay = 0, duration = 1.2) => ({
+  initial: { opacity: 0, y: 20 },
+  whileInView: { opacity: 1, y: 0 },
+  viewport: { once: true, amount: 0.2 },
+  transition: { delay, duration, ease: "easeOut" }
+});
+
+function Features() {
+  const shouldReduce = useReducedMotion();
+  
+  const features = [
+    {
+      icon: (
+        <svg className="w-16 h-16 mx-auto mb-6" viewBox="0 0 100 100" fill="none">
+          <path d="M20 20h60v60H20z" stroke="#333" strokeWidth="2" fill="none"/>
+          <path d="M30 30h40v40H30z" stroke="#333" strokeWidth="2" fill="none"/>
+          <path d="M40 40h20v20H40z" stroke="#333" strokeWidth="2" fill="none"/>
+        </svg>
+      ),
+      title: "EXTENSIBLE",
+      description: "Provides unparalleled flexibility through its meticulously crafted modular architecture."
+    },
+    {
+      icon: (
+        <svg className="w-16 h-16 mx-auto mb-6" viewBox="0 0 100 100" fill="none">
+          <path d="M50 10L80 30v40L50 90L20 70V30z" stroke="#e0234e" strokeWidth="2" fill="none"/>
+          <circle cx="50" cy="50" r="8" fill="#e0234e"/>
+          <path d="M35 35l30 30M65 35L35 65" stroke="#e0234e" strokeWidth="2"/>
+        </svg>
+      ),
+      title: "VERSATILE",
+      description: "Serves as a robust, elegant, and well-structured foundation for all kinds of server-side applications."
+    },
+    {
+      icon: (
+        <svg className="w-16 h-16 mx-auto mb-6" viewBox="0 0 100 100" fill="none">
+          <path d="M50 10L70 30L50 50L30 30z" fill="#333"/>
+          <path d="M30 50L50 70L70 50L50 30z" fill="#666"/>
+          <path d="M50 70L70 90L50 110L30 90z" fill="#333"/>
+        </svg>
+      ),
+      title: "PROGRESSIVE",
+      description: "Introduces design patterns and well-established solutions to the Node.js landscape."
+    }
+  ];
+
+  if (shouldReduce) {
+    return (
+      <section className="section-padding bg-nest-light-gray">
+        <div className="container-custom">
+          <div className="grid md:grid-cols-3 gap-12">
+            {features.map((feature, index) => (
+              <div key={index} className="text-center">
+                {feature.icon}
+                <h3 className="text-nest-red font-bold text-lg mb-4">
+                  {feature.title}
+                </h3>
+                <p className="text-nest-gray leading-relaxed">
+                  {feature.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <motion.section 
+      {...fadeUpPreset(0.1, 1.0)}
+      className="section-padding bg-nest-light-gray"
+    >
+      <div className="container-custom">
+        <div className="grid md:grid-cols-3 gap-12">
+          {features.map((feature, index) => (
+            <motion.div 
+              key={index} 
+              {...fadeUpPreset(index * 0.1, 0.8)}
+              className="text-center"
+            >
+              {feature.icon}
+              <h3 className="text-nest-red font-bold text-lg mb-4">
+                {feature.title}
+              </h3>
+              <p className="text-nest-gray leading-relaxed">
+                {feature.description}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </motion.section>
+  );
+}
+
+export default Features;