Add src/app/contact/page.tsx

This commit is contained in:
2026-03-02 01:07:19 +00:00
parent ad949575b7
commit 852b8e6125

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

@@ -0,0 +1,106 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Github, Linkedin, Mail, MessageSquare, Phone, Twitter } from 'lucide-react';
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="aurora"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Webild"
navItems={[
{ name: "Services", id: "/" },
{ name: "Portfolio", id: "/" },
{ name: "About", id: "/" },
{ name: "Projects", id: "/projects" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Get Started", href: "/contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
title="Start Your Project Today"
description="Let's discuss your vision and how we can bring it to life. Fill out the form below, and one of our team members will get back to you within 24 hours to discuss your project requirements and next steps."
background={{ variant: "plain" }}
tag="Contact Us"
tagIcon={MessageSquare}
tagAnimation="slide-up"
buttons={[
{ text: "Call Us", href: "tel:+372123456789" },
{ text: "Email Us", href: "mailto:hello@webild.ee" }
]}
buttonAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-collaborative-team-working-on-digital--1772410619773-fb0bf645.png?_wi=1"
imageAlt="Contact our team"
mediaAnimation="blur-reveal"
imagePosition="right"
/>
</div>
<div id="contact-form" data-section="contact-form">
<ContactFaq
faqs={[
{
id: "1", title: "What's the typical project timeline?", content: "Project timelines vary depending on scope and complexity. Typically, a website takes 8-12 weeks from discovery to launch, while larger projects or custom applications may take 3-6 months. We'll provide a detailed timeline during our initial consultation."
},
{
id: "2", title: "Do you offer ongoing support and maintenance?", content: "Absolutely! We provide comprehensive post-launch support, including bug fixes, updates, security patches, and feature enhancements. We offer flexible maintenance packages tailored to your needs."
},
{
id: "3", title: "How much does a project cost?", content: "Project costs depend on scope, complexity, and specific requirements. We provide transparent quotes after understanding your needs. We work with various budgets and offer flexible engagement models including fixed-price projects and time-based engagements."
},
{
id: "4", title: "Will my website be mobile-friendly?", content: "Yes, all our projects are built with a mobile-first approach. We ensure your website, app, or platform works seamlessly across all devices—phones, tablets, and desktops—providing an optimal user experience everywhere."
},
{
id: "5", title: "How do you approach project communication?", content: "Communication is crucial to our process. We assign a dedicated project manager to your account and provide regular updates via email, calls, and project management tools. You'll have visibility into progress at every stage."
},
{
id: "6", title: "Can you help with existing projects?", content: "Yes! We can work with existing websites, apps, and platforms—whether you need redesigns, optimizations, bug fixes, or feature additions. We'll audit your current solution and recommend improvements."
}
]}
ctaTitle="Ready to Start Your Project?"
ctaDescription="Let's work together to bring your vision to life. Contact our team to schedule a free consultation."
ctaButton={{
text: "Schedule a Consultation", href: "mailto:hello@webild.ee?subject=Project%20Consultation%20Request"
}}
ctaIcon={Phone}
useInvertedBackground={false}
animationType="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Webild"
copyrightText="© 2025 Webild. All rights reserved. Based in Estonia."
socialLinks={[
{ icon: Linkedin, href: "https://linkedin.com/company/webild", ariaLabel: "LinkedIn" },
{ icon: Twitter, href: "https://twitter.com/webild", ariaLabel: "Twitter" },
{ icon: Github, href: "https://github.com/webild", ariaLabel: "GitHub" }
]}
/>
</div>
</ThemeProvider>
);
}