Update src/app/contact/page.tsx

This commit is contained in:
2026-06-10 11:36:31 +00:00
parent e191dea3df
commit 0e53e65848

View File

@@ -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 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"
{/* 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"
termsText="By sending a message, you agree to our Privacy Policy and Terms of Service."
onSubmit={() => alert('Your message has been sent!')}
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 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."
/>
</div>
</div>
</ThemeProvider>
);