Add src/app/contact/page.tsx
This commit is contained in:
176
src/app/contact/page.tsx
Normal file
176
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { Mail, MapPin, Phone, Clock } from 'lucide-react';
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="largeSmall"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Academy"
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Programs", id: "features" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Events", id: "/events" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-info" data-section="contact-info" className="py-20">
|
||||
<div className="w-full max-w-[var(--width-content-width)] mx-auto px-4 md:px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-20">
|
||||
{/* Contact Information Cards */}
|
||||
<div className="bg-card rounded-[--radius-theme] p-8 shadow-sm">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="bg-primary-cta/10 p-3 rounded-lg flex-shrink-0">
|
||||
<MapPin className="w-6 h-6 text-primary-cta" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">School Location</h3>
|
||||
<p className="text-foreground/75">123 Education Lane</p>
|
||||
<p className="text-foreground/75">Academic City, AC 12345</p>
|
||||
<p className="text-foreground/75">United States</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-[--radius-theme] p-8 shadow-sm">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="bg-primary-cta/10 p-3 rounded-lg flex-shrink-0">
|
||||
<Phone className="w-6 h-6 text-primary-cta" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">Phone</h3>
|
||||
<p className="text-foreground/75">Main: (555) 123-4567</p>
|
||||
<p className="text-foreground/75">Admissions: (555) 123-4568</p>
|
||||
<p className="text-foreground/75">Support: (555) 123-4569</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-[--radius-theme] p-8 shadow-sm">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="bg-primary-cta/10 p-3 rounded-lg flex-shrink-0">
|
||||
<Mail className="w-6 h-6 text-primary-cta" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">Email</h3>
|
||||
<p className="text-foreground/75">info@academy.edu</p>
|
||||
<p className="text-foreground/75">admissions@academy.edu</p>
|
||||
<p className="text-foreground/75">support@academy.edu</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-[--radius-theme] p-8 shadow-sm">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="bg-primary-cta/10 p-3 rounded-lg flex-shrink-0">
|
||||
<Clock className="w-6 h-6 text-primary-cta" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">Office Hours</h3>
|
||||
<p className="text-foreground/75">Monday - Friday: 8:00 AM - 4:00 PM</p>
|
||||
<p className="text-foreground/75">Saturday: 10:00 AM - 2:00 PM</p>
|
||||
<p className="text-foreground/75">Sunday: Closed</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Location Map Section */}
|
||||
<div className="mb-20">
|
||||
<h2 className="text-3xl md:text-4xl font-semibold text-foreground mb-6">Visit Our Campus</h2>
|
||||
<div className="w-full h-96 bg-card rounded-[--radius-theme] overflow-hidden shadow-sm">
|
||||
<iframe
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
loading="lazy"
|
||||
allowFullScreen
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.1234567890!2d-74.0060!3d40.7128!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a316bb945e1%3A0x123456789!2s123%20Education%20Lane!5e0!3m2!1sen!2sus!4v1234567890"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-foreground/75 mt-4">Use the map above to find directions to our campus. We are conveniently located in the heart of Academic City with easy access to public transportation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="inquiry-form" data-section="inquiry-form">
|
||||
<ContactSplit
|
||||
tag="Get in Touch"
|
||||
title="Send us an Inquiry"
|
||||
description="Have questions about our programs or want to schedule a campus visit? Fill out the form below and our admissions team will get back to you within 24 hours."
|
||||
background={{ variant: "rotated-rays-animated-grid" }}
|
||||
useInvertedBackground={false}
|
||||
mediaPosition="right"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/yong-women-posing-near-modern-wall_23-2147771315.jpg?_wi=1"
|
||||
imageAlt="School campus"
|
||||
mediaAnimation="slide-up"
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Send Inquiry"
|
||||
termsText="We respect your privacy and will only use your information to respond to your inquiry. You can unsubscribe at any time."
|
||||
onSubmit={(email) => console.log('Inquiry from:', email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "About Us", href: "/#about" },
|
||||
{ label: "Programs", href: "/#features" },
|
||||
{ label: "Our Team", href: "/#team" },
|
||||
{ label: "Contact", href: "/contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "School Info", items: [
|
||||
{ label: "Admissions", href: "/contact" },
|
||||
{ label: "Events & News", href: "/events" },
|
||||
{ label: "Academics", href: "/#features" },
|
||||
{ label: "Calendar", href: "/events" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Contact Us", items: [
|
||||
{ label: "Phone: (555) 123-4567", href: "tel:(555)123-4567" },
|
||||
{ label: "Email: info@academy.edu", href: "mailto:info@academy.edu" },
|
||||
{ label: "Address: 123 Education Lane", href: "https://maps.google.com" },
|
||||
{ label: "Hours: Mon-Fri 8am-4pm", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Academy. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user