210 lines
8.2 KiB
TypeScript
210 lines
8.2 KiB
TypeScript
"use client";
|
|
|
|
import { useInView } from "@/hooks/use-in-view";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Mail, Phone, MapPin, Zap } from "lucide-react";
|
|
|
|
export function ContactSection() {
|
|
const { ref, isInView } = useInView(0.1);
|
|
|
|
return (
|
|
<section id="contact" className="py-24 px-4 bg-brown-dark/30" ref={ref}>
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="text-center mb-16">
|
|
<h2
|
|
className={`text-3xl sm:text-4xl md:text-5xl font-bold mb-4 ${
|
|
isInView ? "animate-fade-in-up" : "opacity-0"
|
|
}`}
|
|
>
|
|
Ready to <span className="text-neon">Power Up</span>?
|
|
</h2>
|
|
<p
|
|
className={`text-cream-dim text-lg max-w-2xl mx-auto ${
|
|
isInView ? "animate-fade-in-up" : "opacity-0"
|
|
}`}
|
|
style={{ animationDelay: "0.1s" }}
|
|
>
|
|
Let's talk about making your next festival poop-powered.
|
|
Seriously.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
{/* Contact form */}
|
|
<div
|
|
className={`${isInView ? "animate-fade-in-up" : "opacity-0"}`}
|
|
style={{ animationDelay: "0.2s" }}
|
|
>
|
|
<form
|
|
action="mailto:hello@portapower.buzz"
|
|
method="POST"
|
|
encType="text/plain"
|
|
className="space-y-5"
|
|
>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label
|
|
htmlFor="name"
|
|
className="block text-sm font-medium text-cream mb-1.5"
|
|
>
|
|
Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
className="w-full rounded-lg border border-brown-light/40 bg-bg-card px-4 py-3 text-cream placeholder-cream-dim/50 focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon transition-colors"
|
|
placeholder="Your name"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="email"
|
|
className="block text-sm font-medium text-cream mb-1.5"
|
|
>
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
required
|
|
className="w-full rounded-lg border border-brown-light/40 bg-bg-card px-4 py-3 text-cream placeholder-cream-dim/50 focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon transition-colors"
|
|
placeholder="you@festival.com"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="festival"
|
|
className="block text-sm font-medium text-cream mb-1.5"
|
|
>
|
|
Festival / Event Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="festival"
|
|
name="festival"
|
|
className="w-full rounded-lg border border-brown-light/40 bg-bg-card px-4 py-3 text-cream placeholder-cream-dim/50 focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon transition-colors"
|
|
placeholder="Your festival name"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="attendees"
|
|
className="block text-sm font-medium text-cream mb-1.5"
|
|
>
|
|
Expected Attendance
|
|
</label>
|
|
<select
|
|
id="attendees"
|
|
name="attendees"
|
|
className="w-full rounded-lg border border-brown-light/40 bg-bg-card px-4 py-3 text-cream focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon transition-colors"
|
|
>
|
|
<option value="">Select attendance range</option>
|
|
<option value="under-1000">Under 1,000</option>
|
|
<option value="1000-5000">1,000 - 5,000</option>
|
|
<option value="5000-10000">5,000 - 10,000</option>
|
|
<option value="10000-25000">10,000 - 25,000</option>
|
|
<option value="25000+">25,000+</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="message"
|
|
className="block text-sm font-medium text-cream mb-1.5"
|
|
>
|
|
Tell Us About Your Event
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
rows={4}
|
|
className="w-full rounded-lg border border-brown-light/40 bg-bg-card px-4 py-3 text-cream placeholder-cream-dim/50 focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon transition-colors resize-none"
|
|
placeholder="Dates, location, power needs, number of stages..."
|
|
/>
|
|
</div>
|
|
|
|
<Button type="submit" size="lg" className="w-full">
|
|
<Zap className="h-5 w-5" />
|
|
Send Inquiry
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Contact info */}
|
|
<div
|
|
className={`flex flex-col justify-center gap-8 ${
|
|
isInView ? "animate-fade-in-up" : "opacity-0"
|
|
}`}
|
|
style={{ animationDelay: "0.3s" }}
|
|
>
|
|
<div>
|
|
<h3 className="text-2xl font-bold text-cream mb-4">
|
|
Let's Make Shift Happen
|
|
</h3>
|
|
<p className="text-cream-dim leading-relaxed">
|
|
Whether you're running a 500-person campout or a 50,000-person
|
|
mega-festival, we'll design a custom poop-to-power solution
|
|
that fits your event perfectly. Our team handles everything from
|
|
planning to teardown.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-neon/10 border border-neon/30">
|
|
<Mail className="h-5 w-5 text-neon" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-cream-dim">Email</p>
|
|
<p className="font-medium text-cream">
|
|
hello@portapower.buzz
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-neon/10 border border-neon/30">
|
|
<Phone className="h-5 w-5 text-neon" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-cream-dim">Phone</p>
|
|
<p className="font-medium text-cream">1-800-POO-POWER</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-neon/10 border border-neon/30">
|
|
<MapPin className="h-5 w-5 text-neon" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-cream-dim">Headquarters</p>
|
|
<p className="font-medium text-cream">
|
|
Austin, TX (We deploy nationwide)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-xl border border-neon/20 bg-neon/5 p-5">
|
|
<p className="text-sm text-neon font-medium mb-1">
|
|
Fun fact 💩⚡
|
|
</p>
|
|
<p className="text-sm text-cream-dim">
|
|
A single festival-goer produces enough waste over a 3-day event
|
|
to generate roughly 2 kWh of electricity — enough to fully
|
|
charge a smartphone 100 times.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|