bender/42b57fa4-469e-4381-ae06-e7da04490221
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add src/app/contact/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-26 12:52:16 +00:00
parent 157f3bce1c
commit bae28d12e9
1 changed files with 168 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/app/contact/page.tsx Normal file
View 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>
);
}