kleap
/
app-happy-falcon-sprint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update components/contact.tsx

This commit is contained in:
kleap-admin 2026-01-18 16:27:34 +00:00
parent cffc59eade
commit c2da7eb5a1
1 changed files with 74 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
components/contact.tsx Normal file
View File

@ -0,0 +1,74 @@
"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { motion } from "framer-motion";
import { Mail, MessageSquare, ArrowRight } from "lucide-react";
export function Contact() {
return (
<section id="contact" className="py-32 bg-gradient-to-br from-violet-600 via-indigo-600 to-purple-700 relative overflow-hidden">
{/* Animated background elements */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff0a_1px,transparent_1px),linear-gradient(to_bottom,#ffffff0a_1px,transparent_1px)] bg-[size:4rem_4rem]" />
<div className="absolute top-0 right-0 w-96 h-96 bg-white/10 rounded-full blur-3xl" />
<div className="absolute bottom-0 left-0 w-96 h-96 bg-indigo-500/20 rounded-full blur-3xl" />
<Container className="relative z-10">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="max-w-4xl mx-auto text-center"
>
<Heading className="mb-6 text-white">Let's Create Something Amazing</Heading>
<p className="text-xl text-white/90 mb-12 leading-relaxed">
Have a project in mind? We'd love to hear about it. Let's discuss how we can bring your vision to life.
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
<motion.a
href="mailto:hello@nexusagency.com"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }}
className="group p-8 bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300"
>
<Mail className="w-10 h-10 text-white mb-4 mx-auto group-hover:scale-110 transition-transform" />
<h3 className="text-xl font-bold text-white mb-2">Email Us</h3>
<p className="text-white/80">hello@nexusagency.com</p>
</motion.a>
<motion.a
href="#"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.3 }}
className="group p-8 bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300"
>
<MessageSquare className="w-10 h-10 text-white mb-4 mx-auto group-hover:scale-110 transition-transform" />
<h3 className="text-xl font-bold text-white mb-2">Schedule a Call</h3>
<p className="text-white/80">Book a free consultation</p>
</motion.a>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.4 }}
>
<a
href="mailto:hello@nexusagency.com"
className="inline-flex items-center gap-2 px-8 py-4 bg-white text-violet-600 rounded-full font-bold text-lg shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105 group"
>
Start Your Project
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</a>
</motion.div>
</motion.div>
</Container>
</section>
);
}