Initial commit

2026-01-14 13:53:06 +02:00
commit 8e8a1aa71f
68 changed files with 2391 additions and 0 deletions
--- a/src/components/Support.js
+++ b/src/components/Support.js
@@ -0,0 +1,115 @@
+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" }
+});
+
+const Support = () => {
+  const shouldReduce = useReducedMotion();
+
+  const supportOptions = [
+    {
+      title: "PRINCIPAL SPONSORS",
+      description: "Support us by becoming a sponsor. Your logo will show up here with a link to your website."
+    },
+    {
+      title: "GOLD SPONSORS",
+      description: "Support us by becoming a sponsor. Your logo will show up here with a link to your website."
+    },
+    {
+      title: "SILVER SPONSORS",
+      description: "Support us by becoming a sponsor. Your logo will show up here with a link to your website."
+    },
+    {
+      title: "BRONZE SPONSORS",
+      description: "Support us by becoming a sponsor. Your logo will show up here with a link to your website."
+    }
+  ];
+
+  if (shouldReduce) {
+    return (
+      <section className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-nest-dark mb-4">Support us</h2>
+            <p className="text-xl text-nest-gray max-w-3xl mx-auto">
+              Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers.
+            </p>
+          </div>
+          <div className="space-y-12">
+            {supportOptions.map((option, index) => (
+              <div key={index} className="text-center">
+                <h3 className="text-lg font-bold text-nest-dark mb-4">
+                  {option.title}
+                </h3>
+                <p className="text-nest-gray mb-8">
+                  {option.description}
+                </p>
+                <div className="h-24 bg-gray-100 rounded-lg flex items-center justify-center">
+                  <span className="text-gray-400">Your logo here</span>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="text-center mt-16">
+            <button className="btn-primary">
+              Become a sponsor
+            </button>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <motion.section 
+      {...fadeUpPreset(0.1, 1.0)}
+      className="py-20 bg-white"
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div 
+          {...fadeUpPreset(0.2, 0.8)}
+          className="text-center mb-16"
+        >
+          <h2 className="text-4xl font-bold text-nest-dark mb-4">Support us</h2>
+          <p className="text-xl text-nest-gray max-w-3xl mx-auto">
+            Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers.
+          </p>
+        </motion.div>
+        <div className="space-y-12">
+          {supportOptions.map((option, index) => (
+            <motion.div 
+              key={index} 
+              {...fadeUpPreset(0.3 + index * 0.1, 0.6)}
+              className="text-center"
+            >
+              <h3 className="text-lg font-bold text-nest-dark mb-4">
+                {option.title}
+              </h3>
+              <p className="text-nest-gray mb-8">
+                {option.description}
+              </p>
+              <div className="h-24 bg-gray-100 rounded-lg flex items-center justify-center">
+                <span className="text-gray-400">Your logo here</span>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+        <motion.div 
+          {...fadeUpPreset(0.7, 0.8)}
+          className="text-center mt-16"
+        >
+          <button className="btn-primary">
+            Become a sponsor
+          </button>
+        </motion.div>
+      </div>
+    </motion.section>
+  );
+};
+
+export default Support;