1- import type React from "react"
2-
3- import { useState } from "react"
4- import { motion } from "framer-motion"
5- import { Button } from "@/components/ui/button"
6- import { Input } from "@/components/ui/input"
7- import { Textarea } from "@/components/ui/textarea"
8- import { Send } from "lucide-react"
9- import emailjs from "@emailjs/browser"
10-
11- export default function Contact ( ) {
12- const [ formState , setFormState ] = useState ( {
13- name : "" ,
14- email : "" ,
15- message : "" ,
16- } )
17-
18- const [ isSubmitting , setIsSubmitting ] = useState ( false )
19- const [ isSubmitted , setIsSubmitted ] = useState ( false )
20-
21- const handleChange = ( e : React . ChangeEvent < HTMLInputElement | HTMLTextAreaElement > ) => {
22- setFormState ( {
23- ...formState ,
24- [ e . target . name ] : e . target . value ,
25- } )
26- }
27-
28- const handleSubmit = ( e : React . FormEvent ) => {
29- e . preventDefault ( )
30- setIsSubmitting ( true )
31-
32- emailjs
33- . send (
34- 'service_5vsq629' ,
35- 'template_huaqwe4' ,
36- {
37- name : formState . name ,
38- email : formState . email ,
39- message : formState . message ,
40- } ,
41- 'ob9xLxZbsRGqvatmZ'
42- )
43- . then ( ( ) => {
44- setIsSubmitting ( false )
45- setIsSubmitted ( true )
46- setFormState ( { name : "" , email : "" , message : "" } )
47-
48- setTimeout ( ( ) => setIsSubmitted ( false ) , 5000 )
49- } )
50- . catch ( ( err ) => {
51- setIsSubmitting ( false )
52- console . error ( 'Email send error:' , err )
53- } )
54- }
1+ import { Mail } from "lucide-react"
2+ import { cn } from "@/lib/utils"
553
4+ export default function Contact ( { className } : { className ?: string } ) {
565 return (
57- < section id = "contact" className = "py-6 md:py-10 mb-10 relative overflow-hidden" >
58-
59- < div className = "container mx-auto px-4 relative z-10" >
60- < motion . div
61- className = "animate-on-scroll"
62- initial = { { opacity : 0 , y : 50 } }
63- whileInView = { { opacity : 1 , y : 0 } }
64- viewport = { { once : true , margin : "-100px" } }
65- transition = { { duration : 0.8 } }
66- >
67- < h2 className = "text-3xl md:text-4xl font-bold font-sans mb-6 text-center" >
68- Get In Touch
69- </ h2 >
70-
71- < motion . div
72- initial = { { opacity : 0 , y : 20 } }
73- whileInView = { { opacity : 1 , y : 0 } }
74- viewport = { { once : true } }
75- transition = { { duration : 0.5 } }
76- className = "max-w-2xl mx-auto"
77- >
78- < div className = "bg-card/10 backdrop-blur-sm rounded-xl p-8 border border-border" >
79- < h3 className = "text-2xl font-semibold font-sans mb-6 text-foreground text-center" > Send Me a Message</ h3 >
80-
81- { isSubmitted ? (
82- < motion . div
83- initial = { { opacity : 0 , y : 20 } }
84- animate = { { opacity : 1 , y : 0 } }
85- className = "border border-border rounded-lg p-4 text-center bg-accent/10"
86- >
87- < p className = "text-foreground font-medium" >
88- Thank you for your message! I'll get back to you soon.
89- </ p >
90- </ motion . div >
91- ) : (
92- < form onSubmit = { handleSubmit } className = "space-y-6" >
93- < div className = "grid grid-cols-1 md:grid-cols-2 gap-6" >
94- < div >
95- < label htmlFor = "name" className = "block text-sm font-medium text-foreground mb-1" >
96- Name
97- </ label >
98- < Input
99- id = "name"
100- name = "name"
101- value = { formState . name }
102- onChange = { handleChange }
103- required
104- className = "bg-card/20 border-border text-foreground placeholder:text-muted-foreground"
105- placeholder = "Your name"
106- />
107- </ div >
108-
109- < div >
110- < label htmlFor = "email" className = "block text-sm font-medium text-foreground mb-1" >
111- Email
112- </ label >
113- < Input
114- id = "email"
115- name = "email"
116- type = "email"
117- value = { formState . email }
118- onChange = { handleChange }
119- required
120- className = "bg-card/20 border-border text-foreground placeholder:text-muted-foreground"
121- placeholder = "Your email address"
122- />
123- </ div >
124- </ div >
125-
126- < div >
127- < label htmlFor = "message" className = "block text-sm font-medium text-foreground mb-1" >
128- Message
129- </ label >
130- < Textarea
131- id = "message"
132- name = "message"
133- value = { formState . message }
134- onChange = { handleChange }
135- required
136- className = "bg-card/20 border-border text-foreground placeholder:text-muted-foreground min-h-[100px]"
137- placeholder = "Your message to me..."
138- />
139- </ div >
140-
141- < Button
142- type = "submit"
143- disabled = { isSubmitting }
144- className = "w-full bg-accent/30 hover:bg-accent/50 border border-border text-accent-foreground transition-all"
145- >
146- { isSubmitting ? (
147- < span className = "flex items-center" >
148- < svg
149- className = "animate-spin -ml-1 mr-2 h-4 w-4 text-accent-foreground"
150- xmlns = "http://www.w3.org/2000/svg"
151- fill = "none"
152- viewBox = "0 0 24 24"
153- >
154- < circle
155- className = "opacity-25"
156- cx = "12"
157- cy = "12"
158- r = "10"
159- stroke = "currentColor"
160- strokeWidth = "4"
161- > </ circle >
162- < path
163- className = "opacity-75"
164- fill = "currentColor"
165- d = "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
166- > </ path >
167- </ svg >
168- Sending...
169- </ span >
170- ) : (
171- < span className = "flex items-center" >
172- < Send className = "mr-2 h-4 w-4" /> Send Message
173- </ span >
174- ) }
175- </ Button >
176- </ form >
177- ) }
178- </ div >
179- </ motion . div >
180- </ motion . div >
181- </ div >
6+ < section className = { cn ( "space-y-4" , className ) } >
7+ < h2 className = "text-lg font-semibold text-foreground" > Get in Touch</ h2 >
8+ < p className = "text-muted-foreground leading-relaxed max-w-prose" >
9+ I'm always open to discussing new projects, creative ideas, or opportunities to be part of your visions.
10+ </ p >
11+ < a
12+ href = "mailto:williamkeri007@gmail.com"
13+ className = "inline-flex items-center gap-2 text-foreground font-medium hover:text-primary transition-colors hover:underline underline-offset-4"
14+ >
15+ < Mail className = "h-4 w-4" />
16+ < span > williamkeri007@gmail.com</ span >
17+ </ a >
18218 </ section >
18319 )
18420}
0 commit comments