Initial commit

src/components/Contact.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { Mail } from 'lucide-react';
+
+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 Contact = () => {
+  const shouldReduceMotion = useReducedMotion();
+
+  if (shouldReduceMotion) {
+    return (
+      <section className="section-padding bg-gray-50">
+        <div className="container-custom">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
+              How can we help? Let's talk
+            </h2>
+            <p className="text-gray-600 max-w-2xl mx-auto">
+              Ready to start your next project? Get in touch with our team to discuss your requirements and get a custom quote.
+            </p>
+          </div>
+
+          <div className="max-w-2xl mx-auto">
+            <div className="bg-white rounded-2xl p-8 shadow-sm">
+              <div className="flex items-center justify-center space-x-2 mb-6">
+                <Mail className="w-5 h-5 text-primary-600" />
+                <span className="text-gray-600">Feel free to drop us a note:</span>
+              </div>
+              <div className="text-center">
+                <a 
+                  href="mailto:contact@sargas.io" 
+                  className="text-primary-600 hover:text-primary-700 font-medium text-lg"
+                >
+                  contact@sargas.io
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <motion.section 
+      {...fadeUpPreset(0.1, 0.8)}
+      className="section-padding bg-gray-50"
+    >
+      <div className="container-custom">
+        <motion.div 
+          {...fadeUpPreset(0.2, 0.8)}
+          className="text-center mb-16"
+        >
+          <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
+            How can we help? Let's talk
+          </h2>
+          <p className="text-gray-600 max-w-2xl mx-auto">
+            Ready to start your next project? Get in touch with our team to discuss your requirements and get a custom quote.
+          </p>
+        </motion.div>
+
+        <motion.div 
+          {...fadeUpPreset(0.3, 0.8)}
+          className="max-w-2xl mx-auto"
+        >
+          <div className="bg-white rounded-2xl p-8 shadow-sm">
+            <div className="flex items-center justify-center space-x-2 mb-6">
+              <Mail className="w-5 h-5 text-primary-600" />
+              <span className="text-gray-600">Feel free to drop us a note:</span>
+            </div>
+            <div className="text-center">
+              <a 
+                href="mailto:contact@sargas.io" 
+                className="text-primary-600 hover:text-primary-700 font-medium text-lg"
+              >
+                contact@sargas.io
+              </a>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </motion.section>
+  );
+};
+
+export default Contact;