Initial commit

src/components/CallToAction.js

@@ -0,0 +1,80 @@
+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 CallToAction = () => {
+  const shouldReduce = useReducedMotion();
+
+  if (shouldReduce) {
+    return (
+      <section className="py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <div className="bg-nest-dark text-white p-12 rounded-lg">
+              <h3 className="text-3xl font-bold mb-4">Deploy, mind!</h3>
+              <p className="text-gray-300 mb-8">
+                Nest is framework-agnostic, so you can use any HTTP library you want. Express and Fastify are supported out of the box.
+              </p>
+              <button className="btn-primary">
+                Get started
+              </button>
+            </div>
+            <div className="bg-nest-red text-white p-12 rounded-lg">
+              <h3 className="text-3xl font-bold mb-4">Explore your graph</h3>
+              <p className="text-gray-100 mb-8">
+                Nest provides a powerful CLI that helps you scaffold, develop, and maintain your Nest applications.
+              </p>
+              <button className="bg-white text-nest-red px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors duration-200">
+                Get started
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <motion.section 
+      {...fadeUpPreset(0.1, 1.0)}
+      className="py-20"
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <motion.div 
+            {...fadeUpPreset(0.2, 0.8)}
+            className="bg-nest-dark text-white p-12 rounded-lg"
+          >
+            <h3 className="text-3xl font-bold mb-4">Deploy, mind!</h3>
+            <p className="text-gray-300 mb-8">
+              Nest is framework-agnostic, so you can use any HTTP library you want. Express and Fastify are supported out of the box.
+            </p>
+            <button className="btn-primary">
+              Get started
+            </button>
+          </motion.div>
+          <motion.div 
+            {...fadeUpPreset(0.3, 0.8)}
+            className="bg-nest-red text-white p-12 rounded-lg"
+          >
+            <h3 className="text-3xl font-bold mb-4">Explore your graph</h3>
+            <p className="text-gray-100 mb-8">
+              Nest provides a powerful CLI that helps you scaffold, develop, and maintain your Nest applications.
+            </p>
+            <button className="bg-white text-nest-red px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors duration-200">
+              Get started
+            </button>
+          </motion.div>
+        </div>
+      </div>
+    </motion.section>
+  );
+};
+
+export default CallToAction;