"use client"; import type React from "react"; import { useState } from "react"; import { motion } from "framer-motion"; import { ArrowRight, Check, Loader2, Mail, MapPin, Phone } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; export default function ContactBlock() { const [isLoading, setIsLoading] = useState(false); const [isSubmitted, setIsSubmitted] = useState(false); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); // Simulate API call setTimeout(() => { setIsLoading(false); setIsSubmitted(true); }, 2000); }; const contactInfo = [ { icon: , title: "Email", description: "Our friendly team is here to help.", contact: "support@example.com", }, { icon: , title: "Office", description: "Come say hello at our office.", contact: "123 Main St, San Francisco, CA 94107", }, { icon: , title: "Phone", description: "Mon-Fri from 8am to 5pm.", contact: "+1 (555) 123-4567", }, ]; return (

Contact

Get in touch

We'd love to hear from you. Please fill out the form below or reach out using the contact information.

{contactInfo.map((item, i) => (

{item.icon}

{item.title} {item.description}

{item.contact}

))}

Send us a message Fill out the form below and we'll get back to you as soon as possible. {!isSubmitted ? (

First name

Last name

Message

</div>
                    <Button
                      type="submit"
                      className="w-full"
                      disabled={isLoading}
                    >
                      {isLoading ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Sending...
                        </>
                      ) : (
                        <>
                          Send message
                          <ArrowRight className="ml-2 h-4 w-4" />
                        </>
                      )}
                    </Button>
                  </form>
                ) : (
                  <motion.div
                    initial={{ opacity: 0, scale: 0.95 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.3 }}
                    className="flex flex-col items-center justify-center space-y-4 py-12 text-center"
                  >
                    <div className="rounded-full bg-green-100 p-3">
                      <Check className="h-6 w-6 text-green-600" />
                    </div>
                    <h3 className="text-xl font-bold">Message sent!</h3>
                    <p className="text-muted-foreground">
                      Thank you for reaching out. We'll get back to you as
                      soon as possible.
                    </p>
                    <Button
                      variant="outline"
                      onClick={() => setIsSubmitted(false)}
                      className="mt-2"
                    >
                      Send another message
                    </Button>
                  </motion.div>
                )}
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </div>
    </section>
  );
}
</article></body></html>

Contact Component

Get in touch

Install Dependencies