fix all pages
This commit is contained in:
sanjidaRimi023
+154
-155
@@ -24,11 +24,24 @@ export default function ContactSection() {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
|
||||
const [mousePositions, setMousePositions] = useState<
|
||||
Record<number, { x: number; y: number }>
|
||||
>({});
|
||||
|
||||
const handleMouseMove = (
|
||||
index: number,
|
||||
e: React.MouseEvent<HTMLDivElement>,
|
||||
) => {
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
||||
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
||||
setMousePositions((prev) => ({ ...prev, [index]: { x, y } }));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Simulate form submission
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
|
||||
setIsSubmitting(false);
|
||||
@@ -50,11 +63,24 @@ export default function ContactSection() {
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="contact" ref={ref} className="relative overflow-hidden pb-24">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute bottom-0 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-[150px]" />
|
||||
<div className="absolute top-1/4 right-1/4 w-72 h-72 bg-neon-purple/10 rounded-full blur-[120px]" />
|
||||
<section id="contact" ref={ref} className="relative overflow-hidden pb-20">
|
||||
<div className="absolute inset-0 opacity-40 pointer-events-none">
|
||||
<motion.div
|
||||
animate={{
|
||||
x: [0, 30, 0],
|
||||
y: [0, -40, 0],
|
||||
}}
|
||||
transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute bottom-10 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-[140px]"
|
||||
/>
|
||||
<motion.div
|
||||
animate={{
|
||||
x: [0, -50, 0],
|
||||
y: [0, 30, 0],
|
||||
}}
|
||||
transition={{ duration: 30, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute top-20 right-1/4 w-80 h-80 bg-neon-purple/10 rounded-full blur-[130px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
@@ -62,192 +88,165 @@ export default function ContactSection() {
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center mb-16"
|
||||
transition={{ duration: 0.7 }}
|
||||
className="text-center mb-20"
|
||||
>
|
||||
<span className="inline-block px-4 py-1.5 rounded-full text-sm font-medium text-primary mb-4">
|
||||
Let's Connect
|
||||
<span className="inline-block px-5 py-2 rounded-full glass text-sm font-medium text-primary mb-4 tracking-widest">
|
||||
LET'S CONNECT
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
|
||||
Get In <span className="text-primary neon-text-glow">Touch</span>
|
||||
</h2>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
|
||||
Ready to start your next project? We'd love to hear from you. Send
|
||||
us a message and we'll respond as soon as possible.
|
||||
Ready to bring your vision to life? Drop us a message.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
|
||||
{/* Contact Info */}
|
||||
{/* Interactive Contact Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
initial={{ opacity: 0, x: -40 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="space-y-8"
|
||||
transition={{ duration: 0.7 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-4">Contact Information</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Fill out the form and our team will get back to you within 24
|
||||
hours.
|
||||
<div className="mb-8">
|
||||
<h3 className="text-3xl font-bold mb-3">Contact Information</h3>
|
||||
<p className="text-muted-foreground text-lg">
|
||||
Our team typically responds within 24 hours.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Contact cards */}
|
||||
<div className="space-y-4">
|
||||
{contactInfo.map((item, index) => (
|
||||
<motion.div
|
||||
key={item.label}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
|
||||
whileHover={{ x: 5 }}
|
||||
className="flex items-center gap-4 p-4 rounded-xl glass border border-border/50 hover:border-primary/50 transition-all group"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center group-hover:neon-glow transition-all">
|
||||
<item.icon className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{item.label}
|
||||
</p>
|
||||
<p className="font-medium">{item.value}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
<div className="space-y-6">
|
||||
{contactInfo.map((item, index) => {
|
||||
const pos = mousePositions[index] || { x: 50, y: 50 };
|
||||
return (
|
||||
<motion.div
|
||||
key={item.label}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ delay: 0.1 * index }}
|
||||
onMouseMove={(e) => handleMouseMove(index, e)}
|
||||
onMouseLeave={() => {
|
||||
setMousePositions((prev) => ({
|
||||
...prev,
|
||||
[index]: { x: 50, y: 50 },
|
||||
}));
|
||||
}}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="group relative rounded-xl overflow-hidden cursor-pointer h-full"
|
||||
>
|
||||
<div
|
||||
className="relative p-4 rounded-xl border transition-all duration-300"
|
||||
style={{
|
||||
transform: `perspective(800px) rotateX(${(50 - pos.y) * 0.08}deg) rotateY(${(pos.x - 50) * 0.1}deg)`,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-all group-hover:neon-glow">
|
||||
<item.icon className="w-7 h-7 text-primary" />
|
||||
</div>
|
||||
<div className="pt-1">
|
||||
<p className="text-sm text-muted-foreground mb-1">
|
||||
{item.label}
|
||||
</p>
|
||||
<p className="text-xl font-medium group-hover:text-primary transition-colors">
|
||||
{item.value}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact Form */}
|
||||
{/* Interactive Contact Form */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
initial={{ opacity: 0, x: 40 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="relative"
|
||||
transition={{ duration: 0.7, delay: 0.1 }}
|
||||
>
|
||||
<div className="p-8 rounded-3xl glass border border-border/50 relative overflow-hidden">
|
||||
{/* Decorative gradient */}
|
||||
<div className="absolute -top-20 -right-20 w-40 h-40 rounded-full gradient-primary opacity-20 blur-3xl" />
|
||||
<div className="p-10 rounded-3xl border backdrop-blur-2xl relative overflow-hidden">
|
||||
{/* Subtle moving gradient */}
|
||||
<div className="absolute -top-32 -right-32 w-64 h-64 bg-primary/10 rounded-full blur-3xl" />
|
||||
|
||||
{isSuccess ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="text-center py-12"
|
||||
className="text-center py-16"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
damping: 15,
|
||||
stiffness: 300,
|
||||
delay: 0.2,
|
||||
}}
|
||||
>
|
||||
<CheckCircle className="w-20 h-20 text-primary mx-auto mb-4 neon-text-glow" />
|
||||
</motion.div>
|
||||
<h3 className="text-2xl font-bold mb-2">Message Sent!</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Thank you for reaching out. We'll get back to you soon.
|
||||
<CheckCircle className="w-24 h-24 text-primary mx-auto mb-6 neon-text-glow" />
|
||||
<h3 className="text-3xl font-bold mb-3">
|
||||
Message Sent Successfully!
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-lg">
|
||||
Thank you! We'll get back to you very soon.
|
||||
</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="space-y-5 relative z-10"
|
||||
className="space-y-6 relative z-10"
|
||||
>
|
||||
<div className="grid sm:grid-cols-2 gap-5">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<Input
|
||||
name="name"
|
||||
placeholder="Your Name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="glass border-border/50 focus:border-primary focus:neon-glow transition-all h-12"
|
||||
/>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ delay: 0.35 }}
|
||||
>
|
||||
<Input
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="Your Email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="glass border-border/50 focus:border-primary focus:neon-glow transition-all h-12"
|
||||
/>
|
||||
</motion.div>
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
<Input
|
||||
name="name"
|
||||
placeholder="Your Name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="h-14 focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all text-base"
|
||||
/>
|
||||
<Input
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="Your Email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="h-14 focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all text-base"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ delay: 0.4 }}
|
||||
>
|
||||
<Input
|
||||
name="subject"
|
||||
placeholder="Subject"
|
||||
value={formData.subject}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="glass border-border/50 focus:border-primary focus:neon-glow transition-all h-12"
|
||||
/>
|
||||
</motion.div>
|
||||
<Input
|
||||
name="subject"
|
||||
placeholder="Subject"
|
||||
value={formData.subject}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="h-14 focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all text-base"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ delay: 0.45 }}
|
||||
>
|
||||
<Textarea
|
||||
name="message"
|
||||
placeholder="Your Message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
required
|
||||
rows={5}
|
||||
className="glass border-border/50 focus:border-primary focus:neon-glow transition-all resize-none"
|
||||
/>
|
||||
</motion.div>
|
||||
<Textarea
|
||||
name="message"
|
||||
placeholder="Tell us about your project..."
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
required
|
||||
rows={6}
|
||||
className=" focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all resize-none text-base"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ delay: 0.5 }}
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full h-14 bg-primary hover:bg-primary/90 text-lg font-semibold rounded-2xl neon-glow hover:neon-glow-strong transition-all group"
|
||||
>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full bg-primary text-primary-foreground font-semibold py-6 rounded-full neon-glow hover:neon-glow-strong transition-all group"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{
|
||||
duration: 1,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
}}
|
||||
className="w-5 h-5 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
Send Message
|
||||
<Send className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</motion.div>
|
||||
{isSubmitting ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
Sending...
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
Send Message
|
||||
<Send className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user