93 lines
3.8 KiB
TypeScript
93 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/components/theme-provider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
|
|
import ContactForm from '@/components/form/ContactForm';
|
|
import { Home, Phone, Mail, User, Shield, Sparkles } from "lucide-react";
|
|
|
|
export default function ContactPage() {
|
|
const companyDetails = [
|
|
{ label: "Physical Address", value: "123 Main St, Anytown, CA 90210", icon: Home },
|
|
{ label: "Postal Address", value: "PO Box 123, Anytown, CA 90210", icon: Home },
|
|
{ label: "Phone", value: "+1 (555) 123-4567", icon: Phone },
|
|
{ label: "Email", value: "info@example.com", icon: Mail },
|
|
{ label: "Directors", value: "John Doe, Jane Smith", icon: User },
|
|
{ label: "KRA PIN", value: "A000000000Z", icon: Shield },
|
|
{ label: "Registration Number", value: "CN202300001", icon: Shield }
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="none"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Contact", id: "/contact" }
|
|
]}
|
|
brandName="YourBrand"
|
|
/>
|
|
|
|
<div id="contact-hero" data-section="contact-hero">
|
|
<HeroBillboardDashboard
|
|
title="Get in Touch"
|
|
description="We'd love to hear from you. Reach out to us through the details below or fill out the contact form."
|
|
background={{ variant: 'radial-gradient' }}
|
|
dashboard={{
|
|
title: "Contact Information", stats: [
|
|
{ title: "Reach Us", description: "Anytime", values: [100, 200, 300] }
|
|
],
|
|
logoIcon: Sparkles,
|
|
sidebarItems: [],
|
|
buttons: [],
|
|
listItems: [],
|
|
imageSrc: "https://r2.webild.com/assets/contact-us-hero-image.webp?_wi=1"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact-content" data-section="contact-content" className="relative z-10 mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 gap-12 md:grid-cols-2">
|
|
{/* Left Side: Contact Detail Cards */}
|
|
<div className="space-y-8">
|
|
<h2 className="text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">Our Details</h2>
|
|
{companyDetails.map((detail, index) => (
|
|
<div key={index} className="flex items-start space-x-4 rounded-xl bg-card p-6 shadow-lg border border-border-color">
|
|
<detail.icon className="h-6 w-6 text-yellow-500 flex-shrink-0" />
|
|
<div>
|
|
<h3 className="text-xl font-semibold text-foreground">{detail.label}</h3>
|
|
<p className="mt-1 text-muted-foreground">{detail.value}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right Side: Contact Form */}
|
|
<div>
|
|
<ContactForm
|
|
title="Send us a message"
|
|
description="Fill out the form below and we'll get back to you as soon as possible. Due to current component limitations, only an email field is available."
|
|
tag="Inquiry"
|
|
tagIcon={Sparkles}
|
|
inputPlaceholder="Your Email Address"
|
|
buttonText="Submit Inquiry"
|
|
onSubmit={(email) => console.log("Form Submitted (Email only):", email)}
|
|
className="bg-card p-8 rounded-xl shadow-lg border border-border-color"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|