Add src/app/contact/page.tsx
This commit is contained in:
168
src/app/contact/page.tsx
Normal file
168
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,168 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
|
import Input from '@/components/form/Input';
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
interface FooterProps {
|
||||||
|
brandName?: string;
|
||||||
|
navItems: Array<{ name: string; href: string; }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Footer: React.FC<FooterProps> = ({ brandName = "Nexsoft Australia", navItems }) => {
|
||||||
|
return (
|
||||||
|
<footer className="w-full py-8 bg-card text-foreground border-t border-accent mt-16">
|
||||||
|
<div className="mx-auto px-4 md:px-6 max-w-7xl flex flex-col md:flex-row justify-between items-center gap-4">
|
||||||
|
<div className="text-lg font-bold">
|
||||||
|
{brandName}
|
||||||
|
</div>
|
||||||
|
<nav className="flex flex-wrap justify-center gap-6">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<Link key={item.href} href={item.href} className="text-foreground hover:text-primary-cta">
|
||||||
|
{item.name}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
<div className="text-sm text-foreground/80">
|
||||||
|
© {new Date().getFullYear()} {brandName}. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export default function ContactPage() {
|
||||||
|
const [name, setName] = useState('');
|
||||||
|
const [email, setEmail] = useState('');
|
||||||
|
const [message, setMessage] = useState('');
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{name: "Home", id: "home", href: "/"},
|
||||||
|
{name: "About us", id: "about", href: "/about"},
|
||||||
|
{name: "Products", id: "products", href: "/products"},
|
||||||
|
{name: "Achievements", id: "achievements", href: "/portfolio"},
|
||||||
|
{name: "News", id: "news", href: "/portfolio"},
|
||||||
|
{name: "Contact us", id: "contact", href: "/contact"}
|
||||||
|
];
|
||||||
|
|
||||||
|
const navbarProps = {
|
||||||
|
brandName: "Nexsoft Australia", navItems: navItems,
|
||||||
|
button: {text: "Get a Quote", href: "/contact"}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
// Handle form submission logic here
|
||||||
|
console.log({ name, email, message });
|
||||||
|
alert('Message sent successfully!');
|
||||||
|
setName('');
|
||||||
|
setEmail('');
|
||||||
|
setMessage('');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="hover-magnetic"
|
||||||
|
defaultTextAnimation="background-highlight"
|
||||||
|
borderRadius="soft"
|
||||||
|
contentWidth="medium"
|
||||||
|
sizing="largeSmall"
|
||||||
|
background="blurBottom"
|
||||||
|
cardStyle="gradient-radial"
|
||||||
|
primaryButtonStyle="primary-glow"
|
||||||
|
secondaryButtonStyle="radial-glow"
|
||||||
|
headingFontWeight="normal"
|
||||||
|
>
|
||||||
|
<div id="nav" data-section="nav">
|
||||||
|
<NavbarLayoutFloatingOverlay {...navbarProps} />
|
||||||
|
</div>
|
||||||
|
<main className="min-h-[calc(100vh-16rem)] flex flex-col items-center p-8 bg-background">
|
||||||
|
<h1 className="text-4xl md:text-6xl font-bold text-center mb-12 text-foreground">Contact Us</h1>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 w-full max-w-6xl">
|
||||||
|
<section className="bg-card p-8 rounded-lg shadow-lg flex flex-col border border-accent">
|
||||||
|
<h2 className="text-3xl font-semibold mb-6 text-foreground">Send us a Message</h2>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6 flex-grow flex flex-col">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="name" className="block text-sm font-medium text-foreground mb-2">
|
||||||
|
Name
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
value={name}
|
||||||
|
onChange={setName}
|
||||||
|
placeholder="Your Name"
|
||||||
|
required
|
||||||
|
className="w-full p-3 rounded-md bg-background border border-accent text-foreground focus:ring-primary-cta focus:border-primary-cta"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={setEmail}
|
||||||
|
placeholder="your@example.com"
|
||||||
|
required
|
||||||
|
className="w-full p-3 rounded-md bg-background border border-accent text-foreground focus:ring-primary-cta focus:border-primary-cta"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex-grow flex flex-col">
|
||||||
|
<label htmlFor="message" className="block text-sm font-medium text-foreground mb-2">
|
||||||
|
Message
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="message"
|
||||||
|
value={message}
|
||||||
|
onChange={(e) => setMessage(e.target.value)}
|
||||||
|
placeholder="Your message"
|
||||||
|
rows={6}
|
||||||
|
required
|
||||||
|
className="w-full p-3 rounded-md bg-background border border-accent text-foreground focus:ring-primary-cta focus:border-primary-cta flex-grow resize-y"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full bg-primary-cta text-white font-bold py-3 px-6 rounded-md hover:opacity-90 transition-opacity"
|
||||||
|
>
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="bg-card p-8 rounded-lg shadow-lg flex flex-col border border-accent">
|
||||||
|
<h2 className="text-3xl font-semibold mb-6 text-foreground">Find Us on the Map</h2>
|
||||||
|
<div className="relative h-96 w-full rounded-md overflow-hidden flex-grow">
|
||||||
|
<iframe
|
||||||
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.284728033604!2d144.96305731531634!3d-37.81627957975191!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642b58897811f%3A0xf63a7f8b9e6e8a0!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1678901234567!5m2!1sen!2sau"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
style={{ border: 0 }}
|
||||||
|
allowFullScreen={true}
|
||||||
|
loading="lazy"
|
||||||
|
referrerPolicy="no-referrer-when-downgrade"
|
||||||
|
title="Google Maps Location"
|
||||||
|
className="absolute inset-0"
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 text-foreground">
|
||||||
|
<p className="font-semibold">Our Address:</p>
|
||||||
|
<p>123 Business Street, Suite 400</p>
|
||||||
|
<p>Melbourne, VIC 3000</p>
|
||||||
|
<p>Australia</p>
|
||||||
|
<p className="mt-4 font-semibold">Phone: <Link href="tel:+61-3-1234-5678" className="text-primary-cta hover:underline">+61 3 1234 5678</Link></p>
|
||||||
|
<p className="font-semibold">Email: <Link href="mailto:info@nexsoft.com.au" className="text-primary-cta hover:underline">info@nexsoft.com.au</Link></p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<Footer brandName="Nexsoft Australia" navItems={navItems} />
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user