soul-speaks-soil-website/app/contact/page.tsx

132 lines
5.9 KiB
TypeScript

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { ContactForm } from "@/components/contact-form"
import { Card, CardContent } from "@/components/ui/card"
import { Mail, Instagram, Music, MessageSquare } from "lucide-react"
export const metadata = {
title: "Contact | Soul Speaks Soil",
description: "Get in touch with Sammy Davis for consulting, podcast collaborations, and more",
}
export default function ContactPage() {
return (
<div className="min-h-screen flex flex-col">
<Navigation />
<main className="flex-1 pt-24 pb-16">
{/* Header Section with organic texture */}
<section className="px-4 sm:px-6 lg:px-8 py-12 bg-muted/30 organic-texture">
<div className="container mx-auto">
<div className="max-w-3xl mx-auto text-center">
<h1 className="text-4xl sm:text-5xl font-bold text-foreground mb-4 text-balance">Get in Touch</h1>
<p className="text-lg text-muted-foreground leading-relaxed text-pretty">
Whether you're interested in consulting, podcast collaborations, speaking engagements, or just want to
say hello, I'd love to hear from you.
</p>
</div>
</div>
</section>
{/* Contact Options with mycelial pattern */}
<section className="px-4 sm:px-6 lg:px-8 py-12 mycelial-pattern">
<div className="container mx-auto">
<div className="max-w-5xl mx-auto">
<div className="grid md:grid-cols-3 gap-6 mb-12">
<Card>
<CardContent className="pt-6">
<div className="flex flex-col items-center text-center">
<div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<MessageSquare className="h-6 w-6 text-primary" />
</div>
<h3 className="text-lg font-semibold text-foreground mb-2">Consulting</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
Sustainability strategy, regenerative practices, and organizational transformation
</p>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="pt-6">
<div className="flex flex-col items-center text-center">
<div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<Music className="h-6 w-6 text-primary" />
</div>
<h3 className="text-lg font-semibold text-foreground mb-2">Podcast Guest</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
Invite Sammy to be a guest on your podcast or collaborate on content
</p>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="pt-6">
<div className="flex flex-col items-center text-center">
<div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<Mail className="h-6 w-6 text-primary" />
</div>
<h3 className="text-lg font-semibold text-foreground mb-2">Speaking</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
Book Sammy for conferences, workshops, and speaking engagements
</p>
</div>
</CardContent>
</Card>
</div>
</div>
</div>
</section>
{/* Contact Form Section */}
<section className="px-4 sm:px-6 lg:px-8 py-12">
<div className="container mx-auto">
<div className="max-w-2xl mx-auto">
<Card className="shadow-lg">
<CardContent className="pt-6">
<ContactForm />
</CardContent>
</Card>
</div>
</div>
</section>
{/* Social Links with organic texture background */}
<section className="px-4 sm:px-6 lg:px-8 py-12 bg-muted/30 organic-texture">
<div className="container mx-auto">
<div className="max-w-2xl mx-auto text-center">
<h2 className="text-2xl font-bold text-foreground mb-4">Connect on Social Media</h2>
<p className="text-muted-foreground mb-6 leading-relaxed">
Follow Soul Speaks Soil for updates, behind-the-scenes content, and community discussions.
</p>
<div className="flex justify-center gap-4">
<a
href="https://instagram.com/soulspeakssoil"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors shadow-md"
>
<Instagram className="h-5 w-5" />
<span className="font-medium">Instagram</span>
</a>
<a
href="https://open.spotify.com/show/soul-speaks-soil"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 px-6 py-3 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors shadow-md"
>
<Music className="h-5 w-5" />
<span className="font-medium">Spotify</span>
</a>
</div>
</div>
</div>
</section>
</main>
<Footer />
</div>
)
}