Update src/app/contact/page.tsx
This commit is contained in:
@@ -1,117 +1,73 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import type { Metadata } from "next";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
import { NavbarStyleCentered } from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import { ContactForm } from "@/components/form/ContactForm";
|
||||
import { FaqSplitText } from "@/components/sections/faq/FaqSplitText";
|
||||
import { ContactText } from "@/components/sections/contact/ContactText";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Contact Us | Webild", description: "Get in touch with Webild. Send us a message, find our phone number, email, office address, and view frequently asked questions.", keywords: ["contact", "Webild", "support", "email", "phone", "address", "FAQ"],
|
||||
metadataBase: new URL("https://www.webild.com"),
|
||||
alternates: {
|
||||
canonical: "/contact"
|
||||
},
|
||||
openGraph: {
|
||||
title: "Contact Us | Webild", description: "Get in touch with Webild. Send us a message, find our phone number, email, office address, and view frequently asked questions.", url: "https://www.webild.com/contact", siteName: "Webild", type: "website"
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "Contact Us | Webild", description: "Get in touch with Webild. Send us a message, find our phone number, email, office address, and view frequently asked questions."
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true
|
||||
}
|
||||
};
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ContactForm from '@/components/form/ContactForm';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
|
||||
const contactInfoText = `
|
||||
<h2>Reach Out to Us</h2>
|
||||
<p>We're here to help! Whether you have a question about our products, need assistance, or just want to give us feedback, feel free to reach out. We're dedicated to providing the best possible service.</p>
|
||||
<br/>
|
||||
<h3>Contact Details</h3>
|
||||
<p><strong>Phone:</strong> +1 (555) 123-4567</p>
|
||||
<p><strong>Email:</strong> support@yourcompany.com</p>
|
||||
<p><strong>Office Address:</strong> 123 Main Street, Suite 400, Anytown, CA 90210, USA</p>
|
||||
<br/>
|
||||
<p>Our team is available Monday to Friday, 9 AM - 5 PM EST.</p>
|
||||
`;
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
id: "faq1", title: "What are your business hours?", content: "Our customer service team is available Monday to Friday, from 9 AM to 5 PM EST. You can reach us by phone or email during these hours."
|
||||
},
|
||||
{
|
||||
id: "faq2", title: "How can I track my order?", content: "Once your order has shipped, you will receive an email with a tracking number. You can use this number on our website's 'Track Order' page or the carrier's website."
|
||||
},
|
||||
{
|
||||
id: "faq3", title: "What is your return policy?", content: "We offer a 30-day return policy for most items. Items must be in new, unused condition with original packaging. Please visit our Returns & Refunds page for full details."
|
||||
},
|
||||
{
|
||||
id: "faq4", title: "Do you offer international shipping?", content: "Yes, we ship to many countries worldwide. Shipping costs and delivery times vary by destination. Please see our Shipping Information page for more details."
|
||||
},
|
||||
{
|
||||
id: "faq5", title: "How can I change or cancel my order?", content: "If you need to change or cancel your order, please contact us as soon as possible. We will do our best to accommodate your request, but changes may not be possible if the order has already been processed or shipped."
|
||||
}
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'About Us', id: '/about-us' },
|
||||
{ name: 'Cart', id: '/cart' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
{ name: 'Reviews', id: '/reviews' },
|
||||
{ name: 'Dashboard', id: '/dashboard' },
|
||||
{ name: 'Product Detail', id: '/product-detail' }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noise"
|
||||
cardStyle="solid"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
logoSrc="/placeholder/logo/Webild_Logo.svg"
|
||||
logoAlt="Webild Logo"
|
||||
/>
|
||||
|
||||
<main>
|
||||
<div id="contact-info" data-section="contact-info">
|
||||
<ContactText
|
||||
text={contactInfoText}
|
||||
background={{ variant: 'plain' }}
|
||||
animationType="entrance-slide"
|
||||
ariaLabel="Contact Information"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactForm
|
||||
title="Send us a Message"
|
||||
description="We'd love to hear from you! Fill out the form below and we'll get back to you as soon as possible."
|
||||
tag="Contact Us"
|
||||
buttonText="Submit Message"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Find answers to the most common questions about our services and products."
|
||||
faqs={faqs}
|
||||
faqsAnimation="slide-up"
|
||||
textPosition="left"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
brandName="My Website"
|
||||
logoSrc="/placeholder-logo.svg"
|
||||
logoAlt="Company Logo"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactForm
|
||||
title="Get in touch"
|
||||
description="Fill out the form below to contact us."
|
||||
onSubmit={(data) => console.log(data)}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq-section" data-section="faq-section">
|
||||
<FaqSplitText
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions."
|
||||
faqs={[
|
||||
{ id: 'q1', title: 'Question 1', content: 'Answer 1' },
|
||||
{ id: 'q2', title: 'Question 2', content: 'Answer 2' }
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact-text-section" data-section="contact-text-section">
|
||||
<ContactText
|
||||
tag="Contact Info"
|
||||
title="Our Location"
|
||||
description="Visit us at our office or call us."
|
||||
background={{ variant: 'plain' }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user