Split Form

1"use client";
2
3import React from "react";
4import { Button } from "@/components/ui/button";
5import { Input } from "@/components/ui/input";
6import { Textarea } from "@/components/ui/textarea";
7import { Label } from "@/components/ui/label";
8import { motion } from "framer-motion";
9import { Mail, Phone, MapPin, Send } from "lucide-react";
10
11export function Contact() {
12  return (
13    <section className="w-full py-16 md:py-24 bg-background">
14      <div className="container px-4 sm:px-6 mx-auto">
15        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start text-left">
16          <div className="space-y-8">
17            <div className="space-y-4">
18              <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight">Get in touch</h2>
19              <p className="text-base sm:text-lg text-muted-foreground font-light leading-relaxed">
20                Have a project in mind? We'd love to hear from you.
21                Our team usually responds within 24 hours.
22              </p>
23            </div>
24
25            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4 sm:gap-6">
26              {[
27                { icon: Mail, title: "Email us", detail: "hello@shadway.online" },
28                { icon: Phone, title: "Call us", detail: "+1 (555) 000-0000" },
29                { icon: MapPin, title: "Visit us", detail: "123 Design St, San Francisco, CA" }
30              ].map((item, i) => (
31                <div key={i} className="flex items-start gap-4 p-4 rounded-xl border bg-card/50 transition-colors hover:bg-card">
32                  <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
33                    <item.icon className="w-5 h-5 text-primary" />
34                  </div>
35                  <div className="min-w-0">
36                    <h4 className="font-semibold text-sm sm:text-base">{item.title}</h4>
37                    <p className="text-xs sm:text-sm text-muted-foreground truncate">{item.detail}</p>
38                  </div>
39                </div>
40              ))}
41            </div>
42          </div>
43
44          <motion.div
45            initial={{ opacity: 0, y: 20 }}
46            animate={{ opacity: 1, y: 0 }}
47            className="p-6 sm:p-8 rounded-2xl border bg-card shadow-xl space-y-6"
48          >
49            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
50              <div className="space-y-2">
51// … truncated