tknuth/bayarea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pushing project code

Browse Source
This commit is contained in:
Timo Knuth
2026-01-16 18:05:03 +01:00
parent 1a85f0eb2d
commit a3cd5f30dd
29 changed files with 3491 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
components/Contact.tsx
View File

@@ -3,8 +3,8 @@ import { motion } from 'framer-motion';
const Contact: React.FC = () => {
return (
<motion.section
id="contact"
<motion.section
id="contact"
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
@@ -12,7 +12,7 @@ const Contact: React.FC = () => {
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
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
@@ -22,11 +22,11 @@ const Contact: React.FC = () => {
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.
We're here to help you with all your IT needs.
</p>
</motion.div>
<motion.form
<motion.form
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
@@ -35,41 +35,68 @@ const Contact: React.FC = () => {
>
<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
<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"
type="text"
id="name"
placeholder="Your Name"
required
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
<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"
type="email"
id="email"
placeholder="Your Email"
required
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 className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Phone (optional)</label>
<motion.input
whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
transition={{ duration: 0.2 }}
type="tel"
id="phone"
placeholder="Your Phone Number"
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="company" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Company (optional)</label>
<motion.input
whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
transition={{ duration: 0.2 }}
type="text"
id="company"
placeholder="Your Company Name"
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
<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..."
id="message"
placeholder="Your Message"
required
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"
<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"