knuthtimo-lab
1a85f0eb2d
Sets up the project structure with Vite, React, and essential libraries like GSAP and Framer Motion. Configures Tailwind CSS for styling, including dark mode and custom color schemes. Includes basic component structure for the application, laying the groundwork for UI development.
86 lines
3.9 KiB
TypeScript
86 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
const Contact: React.FC = () => {
|
|
return (
|
|
<motion.section
|
|
id="contact"
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
className="py-24 bg-white dark:bg-[#0f0f0f] border-t border-gray-100 dark:border-white/5"
|
|
>
|
|
<div className="max-w-3xl mx-auto px-6">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-12"
|
|
>
|
|
<h2 className="font-display text-4xl md:text-5xl font-medium mb-6 text-gray-900 dark:text-white">
|
|
Get in Touch
|
|
</h2>
|
|
<p className="text-gray-600 dark:text-gray-400 text-lg">
|
|
Ready to elevate your IT infrastructure? Fill out the form below and we'll get back to you shortly.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.form
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.2 }}
|
|
className="space-y-6"
|
|
>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name</label>
|
|
<motion.input
|
|
whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
|
|
transition={{ duration: 0.2 }}
|
|
type="text"
|
|
id="name"
|
|
placeholder="John Doe"
|
|
className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label>
|
|
<motion.input
|
|
whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
|
|
transition={{ duration: 0.2 }}
|
|
type="email"
|
|
id="email"
|
|
placeholder="john@company.com"
|
|
className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Message</label>
|
|
<motion.textarea
|
|
whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
|
|
transition={{ duration: 0.2 }}
|
|
id="message"
|
|
placeholder="Tell us about your project..."
|
|
className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all h-32 resize-none"
|
|
></motion.textarea>
|
|
</div>
|
|
<div className="text-center">
|
|
<motion.button
|
|
type="submit"
|
|
whileHover={{ scale: 1.05, backgroundColor: "#3b82f6", color: "#ffffff", border: "none" }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="px-8 py-3 bg-black dark:bg-white text-white dark:text-black rounded-full font-medium transition-all duration-300 w-full md:w-auto shadow-lg"
|
|
>
|
|
Send Message
|
|
</motion.button>
|
|
</div>
|
|
</motion.form>
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
};
|
|
|
|
export default Contact; |