Update src/app/contact/page.tsx
This commit is contained in:
@@ -1,114 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import Link from 'next/link'; // Necessary for internal navigation in navbar/footer
|
||||
|
||||
// Nav items for NavbarLayoutFloatingInline and FooterBaseCard
|
||||
const navItems = [
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "About Us", href: "/about" },
|
||||
{ name: "Services", href: "/services" },
|
||||
{ name: "Tenders", href: "/tenders" },
|
||||
{ name: "Contact", href: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "Tenders & Procurement", href: "/tenders" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "General Supplies", href: "/services#general-supplies" },
|
||||
{ label: "Logistics & Transport", href: "/services#logistics-transport" },
|
||||
{ label: "Aviation & Technical", href: "/services#aviation-technical" },
|
||||
{ label: "ICT & Digital", href: "/services#ict-digital" },
|
||||
{ label: "Construction & Maintenance", href: "/services#construction-maintenance" },
|
||||
{ label: "Consultancy", href: "/services#consultancy-project" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact Info", items: [
|
||||
{ label: "Nairobi, Kenya", href: "/contact" },
|
||||
{ label: "+254 7XX XXX XXX", href: "/contact" },
|
||||
{ label: "info@carlstraaero.com", href: "/contact" },
|
||||
],
|
||||
},
|
||||
];
|
||||
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={"expand-hover"}
|
||||
defaultTextAnimation={"entrance-slide"}
|
||||
borderRadius={"pill"}
|
||||
contentWidth={"compact"}
|
||||
sizing={"largeSmall"}
|
||||
background={"noise"}
|
||||
cardStyle={"gradient-bordered"}
|
||||
primaryButtonStyle={"flat"}
|
||||
secondaryButtonStyle={"radial-glow"}
|
||||
headingFontWeight={"bold"}
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Carlstra Aero Ltd"
|
||||
logoSrc="http://img.b2bpic.net/free-vector/detailed-travel-company-logo_23-2148625160.jpg"
|
||||
logoAlt="Carlstra Aero Ltd Logo"
|
||||
navItems={navItems.map(item => ({ name: item.name, id: item.href }))}
|
||||
button={{ text: "Request a Quote", href: "/contact" }}
|
||||
<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-page-hero" data-section="contact-page-hero">
|
||||
<HeroSplitTestimonial
|
||||
title="GET IN TOUCH WITH CARLSTRA AERO"
|
||||
description="We're ready to partner with you. Reach out to discuss your procurement, logistics, or technical support needs."
|
||||
background={{ variant: "plain" }}
|
||||
testimonials={[]}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-assortment-paper-clips-with-copy-space_23-2148581960.jpg"
|
||||
imageAlt="Deep navy abstract contact us background"
|
||||
useInvertedBackground={true}
|
||||
imagePosition="right"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<div id="contact-information-form" data-section="contact-information-form">
|
||||
<ContactSplit
|
||||
tag="Contact Us"
|
||||
title="Your Trusted Partner for Institutional Needs"
|
||||
description="Whether you have a specific tender, a general inquiry, or require detailed project support, our team is ready to assist. Fill out the form or use the contact details below."
|
||||
background={{ variant: "plain" }}
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
mediaPosition="left"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-beautiful-african-woman-glass-smiling-talking-phone_176420-12470.jpg"
|
||||
imageAlt="Modern corporate contact office"
|
||||
buttonText="Send Message"
|
||||
inputPlaceholder="Your Email Address"
|
||||
termsText="By sending a message, you agree to our Privacy Policy and Terms of Service."
|
||||
onSubmit={() => alert('Your message has been sent!')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer" className="relative before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-accent">
|
||||
<FooterBaseCard
|
||||
logoSrc="http://img.b2bpic.net/free-vector/detailed-travel-company-logo_23-2148625160.jpg"
|
||||
logoAlt="Carlstra Aero Ltd Logo"
|
||||
logoText="CARLSTRA AERO LTD"
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 Carlstra Aero Ltd. Registered in Kenya. All rights reserved."
|
||||
/>
|
||||
{/* 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