Add src/app/contact/page.tsx

This commit is contained in:
2026-03-05 09:09:08 +00:00
parent 1d85ffa836
commit cd2e21f87f

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

@@ -0,0 +1,84 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterCard from "@/components/sections/footer/FooterCard";
import {
Twitter,
Linkedin,
Github,
Instagram,
Mail,
} from "lucide-react";
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="layered-gradient"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Webild Studio"
navItems={[
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Process", id: "process" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Home", href: "/" }}
animateOnLoad={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Get in Touch"
tagIcon={Mail}
tagAnimation="slide-up"
title="Let's Start a Conversation"
description="Have a project in mind? We'd love to hear about it. Get in touch with our team and let's discuss how we can help transform your digital vision into reality."
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/cheerful-team-working-with-papers-gadgets_23-2147668783.jpg"
imageAlt="Contact us team"
mediaAnimation="slide-up"
mediaPosition="right"
inputPlaceholder="your@email.com"
buttonText="Send Message"
termsText="We respect your privacy. Unsubscribe at any time."
onSubmit={(email) => console.log("Contact form submitted:", email)}
ariaLabel="Contact us form section"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Webild Studio"
copyrightText="© 2025 Webild Studio. All rights reserved."
socialLinks={[
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
{
icon: Linkedin,
href: "https://linkedin.com", ariaLabel: "LinkedIn"},
{ icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
{
icon: Instagram,
href: "https://instagram.com", ariaLabel: "Instagram"},
]}
ariaLabel="Site footer with social links"
/>
</div>
</ThemeProvider>
);
}