Components
Contact Us
Contact Us
Contact section for user inquiries and support.
Get in Touch
Have questions or feedback? We'd love to hear from you. Send us a message and we'll respond as soon as possible.
Contact Information
Reach out to us through any of these channels
contact@dhruvtripathi.com
Phone
+91 (555) 123-4567
Location
Near GLA University, Mathura
Send us a Message
Fill out the form below and we'll get back to you soon
1
Install the packages
npm i motion react-icons clsx tailwind-merge2
Add util file
lib/util.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3
Copy and paste the following code into your project
contactSection.tsx
"use client";
"use client"
import type React from "react"
import { useState } from "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"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { MailIcon, PhoneIcon, MapPinIcon, SendIcon, CheckCircleIcon, AlertCircleIcon } from "lucide-react"
interface FormData {
name: string
email: string
message: string
}
export default function ContactPage() {
const [formData, setFormData] = useState<FormData>({
name: "",
email: "",
message: "",
})
const [isSubmitting, setIsSubmitting] = useState(false)
const [submitStatus, setSubmitStatus] = useState<"success" | "error" | null>(null)
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setIsSubmitting(true)
setSubmitStatus(null)
// Simulate API call for demonstration
try {
// Replace this with your actual API call
await new Promise((resolve) => setTimeout(resolve, 1200))
setSubmitStatus("success")
setFormData({ name: "", email: "", message: "" })
} catch {
setSubmitStatus("error")
} finally {
setIsSubmitting(false)
}
}
const handleInputChange = (field: keyof FormData, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }))
}
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
<div className="container mx-auto px-4 py-16 lg:py-24">
<div className="text-center mb-16">
<h1 className="text-4xl lg:text-5xl font-bold text-slate-900 dark:text-white mb-4">Get in Touch</h1>
<p className="text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
Have questions or feedback? We'd love to hear from you. Send us a message and we'll respond as soon as
possible.
</p>
</div>
<div className="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
<div className="space-y-8">
<Card className="border-0 shadow-lg bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm">
<CardHeader>
<CardTitle className="text-2xl text-slate-900 dark:text-white">Contact Information</CardTitle>
<CardDescription className="text-slate-600 dark:text-slate-300">
Reach out to us through any of these channels
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="flex items-center space-x-4 p-4 rounded-lg bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
<div className="flex-shrink-0">
<MailIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
</div>
<div>
<p className="font-medium text-slate-900 dark:text-white">Email</p>
<p className="text-slate-600 dark:text-slate-300">contact@dhruvtripathi.com</p>
</div>
</div>
<div className="flex items-center space-x-4 p-4 rounded-lg bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
<div className="flex-shrink-0">
<PhoneIcon className="h-6 w-6 text-green-600 dark:text-green-400" />
</div>
<div>
<p className="font-medium text-slate-900 dark:text-white">Phone</p>
<p className="text-slate-600 dark:text-slate-300">+91 (555) 123-4567</p>
</div>
</div>
<div className="flex items-center space-x-4 p-4 rounded-lg bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
<div className="flex-shrink-0">
<MapPinIcon className="h-6 w-6 text-red-600 dark:text-red-400" />
</div>
<div>
<p className="font-medium text-slate-900 dark:text-white">Location</p>
<p className="text-slate-600 dark:text-slate-300">Near GLA University, Mathura</p>
</div>
</div>
</CardContent>
</Card>
</div>
<Card className="border-0 shadow-xl bg-white dark:bg-slate-800">
<CardHeader>
<CardTitle className="text-2xl text-slate-900 dark:text-white">Send us a Message</CardTitle>
<CardDescription>Fill out the form below and we'll get back to you soon</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-6">
<div className="space-y-2">
<Label htmlFor="name" className="text-slate-700 dark:text-slate-300">
Full Name
</Label>
<Input
id="name"
type="text"
value={formData.name}
onChange={(e) => handleInputChange("name", e.target.value)}
placeholder="Enter your full name"
className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="email" className="text-slate-700 dark:text-slate-300">
Email Address
</Label>
<Input
id="email"
type="email"
value={formData.email}
onChange={(e) => handleInputChange("email", e.target.value)}
placeholder="Enter your email address"
className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="message" className="text-slate-700 dark:text-slate-300">
Message
</Label>
<Textarea
id="message"
value={formData.message}
onChange={(e) => handleInputChange("message", e.target.value)}
placeholder="Tell us how we can help you..."
rows={5}
className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600 resize-none"
required
/>
</div>
<Button
type="submit"
disabled={isSubmitting}
className="w-full bg-emerald-600 hover:bg-green-700 text-white font-medium py-2.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isSubmitting ? (
<>
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
Sending...
</>
) : (
<>
<SendIcon className="h-4 w-4 mr-2" />
Send Message
</>
)}
</Button>
{submitStatus === "success" && (
<Alert className="border-green-200 bg-green-50 dark:bg-green-900/20">
<CheckCircleIcon className="h-4 w-4 text-green-600" />
<AlertDescription className="text-green-700 dark:text-green-300">
Message sent successfully! We'll get back to you soon.
</AlertDescription>
</Alert>
)}
{submitStatus === "error" && (
<Alert className="border-red-200 bg-red-50 dark:bg-red-900/20">
<AlertCircleIcon className="h-4 w-4 text-red-600" />
<AlertDescription className="text-red-700 dark:text-red-300">
Failed to send message. Please try again or contact us directly.
</AlertDescription>
</Alert>
)}
</form>
</CardContent>
</Card>
</div>
</div>
</div>
)
}
"use client";
"use client"
import type React from "react"
import { useState } from "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"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { MailIcon, PhoneIcon, MapPinIcon, SendIcon, CheckCircleIcon, AlertCircleIcon } from "lucide-react"
interface FormData {
name: string
email: string
message: string
}
export default function ContactPage() {
const [formData, setFormData] = useState<FormData>({
name: "",
email: "",
message: "",
})
const [isSubmitting, setIsSubmitting] = useState(false)
const [submitStatus, setSubmitStatus] = useState<"success" | "error" | null>(null)
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setIsSubmitting(true)
setSubmitStatus(null)
// Simulate API call for demonstration
try {
// Replace this with your actual API call
await new Promise((resolve) => setTimeout(resolve, 1200))
setSubmitStatus("success")
setFormData({ name: "", email: "", message: "" })
} catch {
setSubmitStatus("error")
} finally {
setIsSubmitting(false)
}
}
const handleInputChange = (field: keyof FormData, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }))
}
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
<div className="container mx-auto px-4 py-16 lg:py-24">
<div className="text-center mb-16">
<h1 className="text-4xl lg:text-5xl font-bold text-slate-900 dark:text-white mb-4">Get in Touch</h1>
<p className="text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
Have questions or feedback? We'd love to hear from you. Send us a message and we'll respond as soon as
possible.
</p>
</div>
<div className="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
<div className="space-y-8">
<Card className="border-0 shadow-lg bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm">
<CardHeader>
<CardTitle className="text-2xl text-slate-900 dark:text-white">Contact Information</CardTitle>
<CardDescription className="text-slate-600 dark:text-slate-300">
Reach out to us through any of these channels
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="flex items-center space-x-4 p-4 rounded-lg bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
<div className="flex-shrink-0">
<MailIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
</div>
<div>
<p className="font-medium text-slate-900 dark:text-white">Email</p>
<p className="text-slate-600 dark:text-slate-300">contact@dhruvtripathi.com</p>
</div>
</div>
<div className="flex items-center space-x-4 p-4 rounded-lg bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
<div className="flex-shrink-0">
<PhoneIcon className="h-6 w-6 text-green-600 dark:text-green-400" />
</div>
<div>
<p className="font-medium text-slate-900 dark:text-white">Phone</p>
<p className="text-slate-600 dark:text-slate-300">+91 (555) 123-4567</p>
</div>
</div>
<div className="flex items-center space-x-4 p-4 rounded-lg bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
<div className="flex-shrink-0">
<MapPinIcon className="h-6 w-6 text-red-600 dark:text-red-400" />
</div>
<div>
<p className="font-medium text-slate-900 dark:text-white">Location</p>
<p className="text-slate-600 dark:text-slate-300">Near GLA University, Mathura</p>
</div>
</div>
</CardContent>
</Card>
</div>
<Card className="border-0 shadow-xl bg-white dark:bg-slate-800">
<CardHeader>
<CardTitle className="text-2xl text-slate-900 dark:text-white">Send us a Message</CardTitle>
<CardDescription>Fill out the form below and we'll get back to you soon</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-6">
<div className="space-y-2">
<Label htmlFor="name" className="text-slate-700 dark:text-slate-300">
Full Name
</Label>
<Input
id="name"
type="text"
value={formData.name}
onChange={(e) => handleInputChange("name", e.target.value)}
placeholder="Enter your full name"
className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="email" className="text-slate-700 dark:text-slate-300">
Email Address
</Label>
<Input
id="email"
type="email"
value={formData.email}
onChange={(e) => handleInputChange("email", e.target.value)}
placeholder="Enter your email address"
className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="message" className="text-slate-700 dark:text-slate-300">
Message
</Label>
<Textarea
id="message"
value={formData.message}
onChange={(e) => handleInputChange("message", e.target.value)}
placeholder="Tell us how we can help you..."
rows={5}
className="bg-slate-50 dark:bg-slate-700 border-slate-200 dark:border-slate-600 resize-none"
required
/>
</div>
<Button
type="submit"
disabled={isSubmitting}
className="w-full bg-emerald-600 hover:bg-green-700 text-white font-medium py-2.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isSubmitting ? (
<>
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
Sending...
</>
) : (
<>
<SendIcon className="h-4 w-4 mr-2" />
Send Message
</>
)}
</Button>
{submitStatus === "success" && (
<Alert className="border-green-200 bg-green-50 dark:bg-green-900/20">
<CheckCircleIcon className="h-4 w-4 text-green-600" />
<AlertDescription className="text-green-700 dark:text-green-300">
Message sent successfully! We'll get back to you soon.
</AlertDescription>
</Alert>
)}
{submitStatus === "error" && (
<Alert className="border-red-200 bg-red-50 dark:bg-red-900/20">
<AlertCircleIcon className="h-4 w-4 text-red-600" />
<AlertDescription className="text-red-700 dark:text-red-300">
Failed to send message. Please try again or contact us directly.
</AlertDescription>
</Alert>
)}
</form>
</CardContent>
</Card>
</div>
</div>
</div>
)
}
4