calcazar/ab-group-llc-landing-page
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(design): enhance UI with animations, gradients, and hover effects

Browse Source 
- Add AnimatedBackground component with canvas-based floating orbs
- Add reusable Button component with shimmer effects and variants
- Update globals.css with animation keyframes and utility classes
- Enhance Header with glass effect and animated nav underlines
- Enhance Footer with gradient overlays and hover effects
- Update all pages with animated gradient backgrounds
- Add hover effects on cards, icons, and buttons
- Implement gradient text effects throughout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Andrés Mora
2025-12-23 19:22:50 -05:00
co-authored by Claude Opus 4.5
parent 9eebabdc7c
commit 238b1c9a87
11 changed files with 1348 additions and 1141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/contact/page.tsx
+86 -59
View File
@@ -12,6 +12,8 @@ import {
Send,
CheckCircle,
} from "lucide-react";
import AnimatedBackground from "../components/AnimatedBackground";
import Button from "../components/Button";
const contactInfo = [
{
@@ -76,10 +78,7 @@ export default function ContactPage() {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
// Simulate form submission
await new Promise((resolve) => setTimeout(resolve, 1000));
setIsSubmitting(false);
setIsSubmitted(true);
};
@@ -98,20 +97,27 @@ export default function ContactPage() {
return (
<>
{/* Hero Section */}
<section className="bg-zinc-900 text-white">
<div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
<section className="relative animated-gradient-bg text-white overflow-hidden">
<AnimatedBackground variant="dark" orbCount={5} />
<div className="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
<div className="max-w-3xl">
<p className="text-red-500 font-semibold mb-4">Contact Us</p>
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
Let&apos;s <span className="text-red-500">Talk</span> About Your
Business
<p className="text-red-400 font-semibold mb-4 animate-fade-in">
Contact Us
</p>
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl animate-slide-up">
Let&apos;s{" "}
<span className="text-transparent bg-gradient-to-r from-red-400 via-red-500 to-red-600 bg-clip-text">
Talk
</span>{" "}
About Your Business
</h1>
<p className="mt-6 text-lg text-zinc-300">
<p className="mt-6 text-lg text-zinc-300 animate-slide-up animation-delay-100">
Ready to get started? Have questions? We&apos;re here to help.
Reach out for a free consultation and needs analysis.
</p>
</div>
</div>
<div className="absolute right-10 top-1/4 w-64 h-64 bg-red-500/10 rounded-full blur-3xl animate-float" />
</section>
{/* Contact Content */}
@@ -129,8 +135,10 @@ export default function ContactPage() {
</p>
{isSubmitted ? (
<div className="mt-8 bg-green-50 border border-green-200 rounded-xl p-8 text-center">
<CheckCircle className="h-12 w-12 text-green-600 mx-auto mb-4" />
<div className="mt-8 bg-gradient-to-br from-green-50 to-emerald-50 border border-green-200 rounded-xl p-8 text-center animate-scale-in">
<div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4">
<CheckCircle className="h-8 w-8 text-white" />
</div>
<h3 className="text-xl font-semibold text-zinc-900">
Message Sent!
</h3>
@@ -149,7 +157,7 @@ export default function ContactPage() {
message: "",
});
}}
className="mt-4 text-red-600 font-medium hover:text-red-700"
className="mt-4 text-red-600 font-medium hover:text-red-700 transition-colors"
>
Send another message
</button>
@@ -157,10 +165,10 @@ export default function ContactPage() {
) : (
<form onSubmit={handleSubmit} className="mt-8 space-y-6">
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<div>
<div className="group">
<label
htmlFor="name"
className="block text-sm font-medium text-zinc-700"
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
>
Full Name *
</label>
@@ -171,14 +179,14 @@ export default function ContactPage() {
required
value={formData.name}
onChange={handleChange}
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all hover:border-zinc-300"
placeholder="John Smith"
/>
</div>
<div>
<div className="group">
<label
htmlFor="email"
className="block text-sm font-medium text-zinc-700"
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
>
Email Address *
</label>
@@ -189,17 +197,17 @@ export default function ContactPage() {
required
value={formData.email}
onChange={handleChange}
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all hover:border-zinc-300"
placeholder="john@company.com"
/>
</div>
</div>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<div>
<div className="group">
<label
htmlFor="phone"
className="block text-sm font-medium text-zinc-700"
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
>
Phone Number
</label>
@@ -209,14 +217,14 @@ export default function ContactPage() {
name="phone"
value={formData.phone}
onChange={handleChange}
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all hover:border-zinc-300"
placeholder="(555) 123-4567"
/>
</div>
<div>
<div className="group">
<label
htmlFor="company"
className="block text-sm font-medium text-zinc-700"
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
>
Company Name
</label>
@@ -226,16 +234,16 @@ export default function ContactPage() {
name="company"
value={formData.company}
onChange={handleChange}
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all"
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all hover:border-zinc-300"
placeholder="Your Company LLC"
/>
</div>
</div>
<div>
<div className="group">
<label
htmlFor="preferredContact"
className="block text-sm font-medium text-zinc-700"
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
>
Preferred Contact Method
</label>
@@ -244,7 +252,7 @@ export default function ContactPage() {
name="preferredContact"
value={formData.preferredContact}
onChange={handleChange}
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all bg-white"
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all bg-white hover:border-zinc-300 cursor-pointer"
>
<option value="email">Email</option>
<option value="phone">Phone</option>
@@ -252,10 +260,10 @@ export default function ContactPage() {
</select>
</div>
<div>
<div className="group">
<label
htmlFor="message"
className="block text-sm font-medium text-zinc-700"
className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
>
Message *
</label>
@@ -266,25 +274,39 @@ export default function ContactPage() {
rows={5}
value={formData.message}
onChange={handleChange}
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all resize-none"
className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all resize-none hover:border-zinc-300"
placeholder="Tell us about your business needs..."
/>
</div>
<button
type="submit"
disabled={isSubmitting}
className="w-full inline-flex items-center justify-center px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
<Button type="submit" disabled={isSubmitting} className="w-full">
{isSubmitting ? (
"Sending..."
<span className="flex items-center gap-2">
<svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
fill="none"
/>
<path
className="opacity-75"
fill="currentColor"
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"
/>
</svg>
Sending...
</span>
) : (
<>
Send Message
<Send className="ml-2 h-5 w-5" />
</>
)}
</button>
</Button>
</form>
)}
</div>
@@ -300,10 +322,14 @@ export default function ContactPage() {
</p>
<div className="mt-8 space-y-6">
{contactInfo.map((item) => (
<div key={item.label} className="flex items-start gap-4">
<div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
<item.icon className="h-6 w-6 text-red-600" />
{contactInfo.map((item, index) => (
<div
key={item.label}
className="flex items-start gap-4 group"
style={{ animationDelay: `${index * 100}ms` }}
>
<div className="w-12 h-12 bg-gradient-to-br from-red-100 to-red-50 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-gradient-to-br group-hover:from-red-500 group-hover:to-red-700 transition-all duration-300">
<item.icon className="h-6 w-6 text-red-600 group-hover:text-white transition-colors duration-300" />
</div>
<div>
<p className="font-medium text-zinc-900">{item.label}</p>
@@ -312,7 +338,7 @@ export default function ContactPage() {
<a
key={value}
href={item.href}
className="block text-zinc-600 hover:text-red-600 transition-colors"
className="block text-zinc-600 hover:text-red-600 transition-colors duration-300"
>
{value}
</a>
@@ -339,7 +365,7 @@ export default function ContactPage() {
href={social.href}
target="_blank"
rel="noopener noreferrer"
className="w-12 h-12 bg-zinc-100 rounded-lg flex items-center justify-center text-zinc-600 hover:bg-red-100 hover:text-red-600 transition-colors"
className="w-12 h-12 bg-zinc-100 rounded-lg flex items-center justify-center text-zinc-600 hover:bg-gradient-to-br hover:from-red-500 hover:to-red-700 hover:text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-red-500/20"
>
<span className="sr-only">{social.name}</span>
<social.icon className="h-5 w-5" />
@@ -349,14 +375,17 @@ export default function ContactPage() {
</div>
{/* Se Habla Espanol */}
<div className="mt-12 bg-red-50 rounded-xl p-6">
<p className="text-xl font-semibold text-red-600">
Se Habla Espanol
</p>
<p className="mt-2 text-zinc-600">
We proudly serve our Spanish-speaking clients in their
preferred language.
</p>
<div className="mt-12 relative group overflow-hidden rounded-xl">
<div className="absolute inset-0 bg-gradient-to-r from-red-500 to-red-700 opacity-10 group-hover:opacity-20 transition-opacity duration-300" />
<div className="relative bg-red-50 rounded-xl p-6 border border-red-100">
<p className="text-xl font-semibold text-transparent bg-gradient-to-r from-red-500 to-red-700 bg-clip-text">
Se Habla Espanol
</p>
<p className="mt-2 text-zinc-600">
We proudly serve our Spanish-speaking clients in their
preferred language.
</p>
</div>
</div>
</div>
</div>
@@ -364,8 +393,9 @@ export default function ContactPage() {
</section>
{/* CTA Banner */}
<section className="bg-zinc-900 py-12 md:py-16">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<section className="relative animated-gradient-bg py-12 md:py-16 overflow-hidden">
<AnimatedBackground variant="dark" orbCount={4} />
<div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center">
<h2 className="text-2xl font-semibold text-white sm:text-3xl">
Got QuickBooks? We&apos;ve Got Answers.
@@ -373,13 +403,10 @@ export default function ContactPage() {
<p className="mt-2 text-zinc-400">
Call us now for immediate assistance.
</p>
<a
href="tel:3053878582"
className="mt-6 inline-flex items-center justify-center px-8 py-4 bg-red-600 text-white text-lg font-medium rounded-lg hover:bg-red-700 transition-colors"
>
<Button href="tel:3053878582" size="lg" className="mt-6">
<Phone className="mr-2 h-6 w-6" />
(305) 387-8582
</a>
</Button>
</div>
</div>
</section>