bender/a47e40ce-06be-48b1-902b-e27bb6f771de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add src/app/contact/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-06 18:04:08 +00:00
parent 73238e5936
commit 25bde2c3c6
1 changed files with 243 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,243 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Phone, Mail, MapPin, Facebook, Linkedin, Twitter } from 'lucide-react';
import { useState } from 'react';
import Input from '@/components/form/Input';
export default function ContactPage() {
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
subject: '',
message: ''
});
const [isSubmitted, setIsSubmitted] = useState(false);
const handleInputChange = (field: string, value: string) => {
setFormData(prev => ({
...prev,
[field]: value
}));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// Form submission would be handled here
setIsSubmitted(true);
setTimeout(() => {
setIsSubmitted(false);
setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
}, 3000);
};
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="largeSmallSizeMediumTitles"
background="none"
cardStyle="solid"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "About", id: "/about" },
{ name: "Services", id: "/#services" },
{ name: "Why Us", id: "/#why-us" },
{ name: "Testimonials", id: "/#testimonials" },
{ name: "Contact", id: "/contact" }
]}
brandName="Business Center 2.0"
bottomLeftText="Marrakesh, Morocco"
bottomRightText="+212 (0) 5 24 XX XX XX"
/>
</div>
<div id="contact-info" data-section="contact-info" className="w-full min-h-screen flex items-center justify-center py-20 px-4">
<div className="w-full max-w-4xl">
<h1 className="text-4xl md:text-5xl font-bold mb-6 text-center">Get In Touch</h1>
<p className="text-lg text-center mb-12 opacity-75">We're here to help. Contact us with any questions or inquiries about our business services.</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
{/* Phone */}
<div className="bg-card rounded-lg p-6 text-center">
<Phone className="w-8 h-8 mx-auto mb-4" style={{ color: 'var(--color-primary-cta)' }} />
<h3 className="text-lg font-semibold mb-2">Call Us</h3>
<a href="tel:+212524XXXXXX" className="hover:opacity-75 transition">
+212 (0) 5 24 XX XX XX
</a>
</div>
{/* Email */}
<div className="bg-card rounded-lg p-6 text-center">
<Mail className="w-8 h-8 mx-auto mb-4" style={{ color: 'var(--color-primary-cta)' }} />
<h3 className="text-lg font-semibold mb-2">Email Us</h3>
<a href="mailto:info@businesscenter2.ma" className="hover:opacity-75 transition break-all">
info@businesscenter2.ma
</a>
</div>
{/* Address */}
<div className="bg-card rounded-lg p-6 text-center">
<MapPin className="w-8 h-8 mx-auto mb-4" style={{ color: 'var(--color-primary-cta)' }} />
<h3 className="text-lg font-semibold mb-2">Visit Us</h3>
<p>
Avenue Mohammed V<br />
Marrakesh, Morocco
</p>
</div>
</div>
{/* Contact Form */}
<div className="bg-card rounded-lg p-8 mb-12">
<h2 className="text-2xl font-bold mb-6">Send us a Message</h2>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Input
value={formData.name}
onChange={(value) => handleInputChange('name', value)}
type="text"
placeholder="Your Name"
required
/>
<Input
value={formData.email}
onChange={(value) => handleInputChange('email', value)}
type="email"
placeholder="Your Email"
required
/>
</div>
<Input
value={formData.phone}
onChange={(value) => handleInputChange('phone', value)}
type="tel"
placeholder="Your Phone Number"
/>
<Input
value={formData.subject}
onChange={(value) => handleInputChange('subject', value)}
type="text"
placeholder="Subject"
required
/>
<textarea
value={formData.message}
onChange={(e) => handleInputChange('message', e.target.value)}
placeholder="Your Message"
required
rows={6}
className="w-full px-4 py-3 rounded-lg border border-accent bg-secondary-button-bg text-foreground placeholder-foreground placeholder-opacity-75 focus:outline-none focus:ring-2 focus:ring-primary-cta transition"
/>
<button
type="submit"
style={{ backgroundColor: 'var(--color-primary-cta)' }}
className="w-full px-8 py-3 rounded-lg font-semibold text-white hover:opacity-90 transition"
>
{isSubmitted ? 'Message Sent!' : 'Send Message'}
</button>
</form>
</div>
{/* Google Maps Embed */}
<div className="mb-12">
<h2 className="text-2xl font-bold mb-6">Find Us On Map</h2>
<div className="rounded-lg overflow-hidden h-96 md:h-96">
<iframe
width="100%"
height="100%"
frameBorder="0"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3397.6841693355476!2d-8.009166!3d31.629719!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xdafee62fa5f2f9f%3A0x1234567890abc!2sMarrakesh%2C%20Morocco!5e0!3m2!1sen!2s!4v1234567890"
allowFullScreen=""
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
title="Business Center 2.0 Location"
/>
</div>
</div>
{/* Social Media Links */}
<div className="text-center">
<h3 className="text-2xl font-bold mb-6">Follow Us</h3>
<div className="flex justify-center gap-6">
<a
href="https://www.facebook.com/businesscenter2"
target="_blank"
rel="noopener noreferrer"
className="p-3 bg-card rounded-full hover:opacity-75 transition"
aria-label="Facebook"
>
<Facebook className="w-6 h-6" style={{ color: 'var(--color-primary-cta)' }} />
</a>
<a
href="https://www.linkedin.com/company/businesscenter2"
target="_blank"
rel="noopener noreferrer"
className="p-3 bg-card rounded-full hover:opacity-75 transition"
aria-label="LinkedIn"
>
<Linkedin className="w-6 h-6" style={{ color: 'var(--color-primary-cta)' }} />
</a>
<a
href="https://www.twitter.com/businesscenter2"
target="_blank"
rel="noopener noreferrer"
className="p-3 bg-card rounded-full hover:opacity-75 transition"
aria-label="Twitter"
>
<Twitter className="w-6 h-6" style={{ color: 'var(--color-primary-cta)' }} />
</a>
</div>
</div>
</div>
</div>
<div id="contact-faq" data-section="contact-faq">
<ContactFaq
ctaTitle="Still Have Questions?"
ctaDescription="Check out our FAQ section or reach out to our team directly. We're always happy to help."
ctaIcon={Phone}
ctaButton={{ text: "Call Us Now", href: "tel:+212524XXXXXX" }}
useInvertedBackground={false}
animationType="slide-up"
faqs={[
{
id: "1", title: "What are your business hours?", content: "We're open Monday to Friday from 9:00 AM to 6:00 PM, and Saturday from 10:00 AM to 2:00 PM (Morocco time). We're closed on Sundays and public holidays. For urgent matters, you can reach our emergency line."
},
{
id: "2", title: "How quickly will you respond to my inquiry?", content: "We aim to respond to all inquiries within 24 business hours. For urgent matters, please call us directly or mark your email as urgent. Phone calls are typically answered within 2-4 hours during business hours."
},
{
id: "3", title: "Can I schedule a free consultation?", content: "Absolutely! We offer free initial consultations for all new clients. You can schedule one by calling us, emailing us, or filling out the contact form. We typically schedule consultations within 2-3 business days."
},
{
id: "4", title: "Do you offer virtual meetings?", content: "Yes, we offer virtual consultations via Zoom, Google Meet, or Microsoft Teams for clients who prefer to meet remotely. Simply let us know your preference when you contact us."
},
{
id: "5", title: "What's the best way to reach you?", content: "You can reach us by phone (fastest response), email, or the contact form on this page. For general inquiries, email is fine. For urgent matters, please call us directly."
}
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Business Center 2.0"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}