Add src/app/contact/page.tsx
This commit is contained in:
153
src/app/contact/page.tsx
Normal file
153
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Mail, Twitter, Linkedin, Phone, MapPin, Clock } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
brandName="Alfabs"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Projects", id: "/projects" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
bottomLeftText="Aluminum Excellence"
|
||||
bottomRightText="hello@alfabs.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Get In Touch"
|
||||
title="Contact Alfabs - Premium Aluminum Solutions in Karachi"
|
||||
description="Have questions about our aluminum fabrication and installation services? We'd love to hear from you. Reach out to our team and let's discuss how we can help bring your project to life."
|
||||
tagIcon={Mail}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="your@email.com"
|
||||
buttonText="Send Inquiry"
|
||||
termsText="We respect your privacy. Your information will be used only to assist with your project inquiry. We typically respond within 24 hours."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full bg-card py-16 md:py-24">
|
||||
<div className="mx-auto max-w-6xl px-4 md:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="rounded-lg bg-primary-cta/10 p-4 mb-4">
|
||||
<MapPin className="w-6 h-6 text-primary-cta" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Our Location</h3>
|
||||
<p className="text-foreground/70">
|
||||
Karachi, Pakistan
|
||||
</p>
|
||||
<p className="text-foreground/70 text-sm mt-1">
|
||||
Serving the Greater Karachi Area
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="rounded-lg bg-primary-cta/10 p-4 mb-4">
|
||||
<Phone className="w-6 h-6 text-primary-cta" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Phone</h3>
|
||||
<p className="text-foreground/70">
|
||||
+92 (21) XXXX-XXXX
|
||||
</p>
|
||||
<p className="text-foreground/70 text-sm mt-1">
|
||||
Available Monday - Friday
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="rounded-lg bg-primary-cta/10 p-4 mb-4">
|
||||
<Clock className="w-6 h-6 text-primary-cta" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Business Hours</h3>
|
||||
<p className="text-foreground/70">
|
||||
9:00 AM - 6:00 PM
|
||||
</p>
|
||||
<p className="text-foreground/70 text-sm mt-1">
|
||||
Saturday - Thursday
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 text-center">
|
||||
<h2 className="text-2xl md:text-3xl font-semibold mb-4">Why Choose Alfabs?</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
|
||||
<div className="text-left">
|
||||
<h4 className="font-semibold mb-2 flex items-center gap-2">
|
||||
<span className="inline-block w-2 h-2 rounded-full bg-primary-cta"></span>
|
||||
Expert Craftsmanship
|
||||
</h4>
|
||||
<p className="text-foreground/70 text-sm">15+ years of industry experience delivering exceptional results.</p>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h4 className="font-semibold mb-2 flex items-center gap-2">
|
||||
<span className="inline-block w-2 h-2 rounded-full bg-primary-cta"></span>
|
||||
Quality Materials
|
||||
</h4>
|
||||
<p className="text-foreground/70 text-sm">We use premium aluminum and components from trusted suppliers.</p>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h4 className="font-semibold mb-2 flex items-center gap-2">
|
||||
<span className="inline-block w-2 h-2 rounded-full bg-primary-cta"></span>
|
||||
On-Time Delivery
|
||||
</h4>
|
||||
<p className="text-foreground/70 text-sm">We respect your timeline and deliver projects as promised.</p>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h4 className="font-semibold mb-2 flex items-center gap-2">
|
||||
<span className="inline-block w-2 h-2 rounded-full bg-primary-cta"></span>
|
||||
Competitive Pricing
|
||||
</h4>
|
||||
<p className="text-foreground/70 text-sm">Transparent quotes with no hidden costs or surprises.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Alfabs"
|
||||
copyrightText="© 2025 Alfabs Aluminum Services. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "https://linkedin.com", ariaLabel: "LinkedIn"
|
||||
},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "https://twitter.com", ariaLabel: "Twitter"
|
||||
},
|
||||
{
|
||||
icon: Mail,
|
||||
href: "mailto:hello@alfabs.com", ariaLabel: "Email"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user