Add src/app/contact/page.tsx

This commit is contained in:
2026-05-26 07:59:50 +00:00
parent 5a7dfa0292
commit 7610b1696a

84
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,84 @@
"use client";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ContactForm from '@/components/form/ContactForm';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBase from '@/components/sections/footer/FooterBase';
export default function ContactUsPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="none"
cardStyle="glass-elevated"
primaryButtonStyle="metallic"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<ReactLenis root>
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={[
{ name: "Work", id: "work" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Gallery", href: "/gallery" },
{ name: "Contact", href: "/contact" },
{ name: "Book Now", href: "/booking" }
]}
button={{ text: "Get Started", href: "/contact" }}
/>
<ContactForm
title="Get in Touch with Us"
description="Have a question or want to book an appointment? Fill out the form below and we'll get back to you shortly."
tag="Contact Us"
buttonText="Send Message"
/>
<ContactText
text="Find Us Here\n\n123 Main Street, Suite 100\nBeauty City, BC 12345\n\n(555) 123-4567\ninfo@beautysalon.com"
background={{ variant: "radial-gradient" }}
buttons={[{ text: "View on Map", href: "https://www.google.com/maps/search/?api=1&query=123+Main+Street,+Beauty+City", target: "_blank" }]}
useInvertedBackground={false}
/>
<FooterBase
logoText="Webild"
copyrightText="© 2026 | Webuild"
columns={[
{
title: "Company", items: [
{ label: "About", href: "#about" },
{ label: "Services", href: "#services" },
{ label: "Work", href: "#work" },
{ label: "Gallery", href: "/gallery" },
{ label: "Contact", href: "/contact" },
{ label: "Book Now", href: "/booking" }
],
},
{
title: "Services", items: [
{ label: "Web Development", href: "#" },
{ label: "SEO", href: "#" },
{ label: "Branding", href: "#" },
{ label: "UI/UX Design", href: "#" },
],
},
{
title: "Connect", items: [
{ label: "Twitter", href: "#" },
{ label: "LinkedIn", href: "#" },
{ label: "Instagram", href: "#" },
{ label: "Dribbble", href: "#" },
],
},
]}
/>
</ReactLenis>
</ThemeProvider>
);
}