Update src/app/contact/page.tsx
This commit is contained in:
@@ -1,44 +1,20 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { Mail } from "lucide-react"; // Importing icons for potential use, Mail for contact
|
||||
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
|
||||
import ContactForm from '@/components/form/ContactForm';
|
||||
import { Home, Phone, Mail, User, Shield, Sparkles } from "lucide-react";
|
||||
|
||||
// Metadata for the Contact page
|
||||
export const metadata = {
|
||||
title: "Contact Us - Webild", description: "Get in touch with Webild. Find our location and team contact information."
|
||||
};
|
||||
|
||||
export default function Contact() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
{ name: "Contact", id: "/contact" } // The newly added link
|
||||
];
|
||||
|
||||
const teamMembers = [
|
||||
{ id: "1", title: "CEO", subtitle: "John Doe", detail: "john.doe@example.com", imageSrc: "https://r2.radikal.ru/pics/2024.03.11/f90462002f232f38d35f8e561491e523.jpg" },
|
||||
{ id: "2", title: "Sales Lead", subtitle: "Jane Smith", detail: "jane.smith@example.com", imageSrc: "https://r2.radikal.ru/pics/2024.03.11/f90462002f232f38d35f8e561491e523.jpg" },
|
||||
{ id: "3", title: "Support Lead", subtitle: "Peter Jones", detail: "peter.jones@example.com", imageSrc: "https://r2.radikal.ru/pics/2024.03.11/f90462002f232f38d35f8e561491e523.jpg" }
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Contact", href: "/contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#privacy" },
|
||||
{ label: "Terms of Service", href: "#terms" }
|
||||
]
|
||||
}
|
||||
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 (
|
||||
@@ -55,41 +31,62 @@ export default function Contact() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@example.com"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
brandName="YourBrand"
|
||||
/>
|
||||
<div className="flex min-h-screen flex-col items-center justify-between">
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactCenter
|
||||
tag="Contact Us"
|
||||
title="Get in Touch"
|
||||
description="We'd love to hear from you! Fill out the form below or reach out to us using the contact details provided. Our office is located at 123 Main Street, Anytown, USA 12345."
|
||||
inputPlaceholder="Your email address"
|
||||
buttonText="Send Message"
|
||||
termsText="By sending a message, you agree to our Privacy Policy and Terms of Service."
|
||||
tagIcon={Mail}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="team-contacts" data-section="team-contacts">
|
||||
<TeamCardEleven
|
||||
title="Our Team"
|
||||
description="Meet the dedicated individuals behind Webild who are ready to assist you."
|
||||
groups={[{ id: "1", groupTitle: "Leadership & Support", members: teamMembers }]}
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
textboxLayout="default"
|
||||
/>
|
||||
</div>
|
||||
<FooterBase
|
||||
columns={footerColumns}
|
||||
logoText="Webild"
|
||||
copyrightText="© 2025 Webild. All rights reserved."
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user