135 lines
3.8 KiB
TypeScript
135 lines
3.8 KiB
TypeScript
import FooterBrand from '@/components/sections/footer/FooterBrand';
|
||
import NavbarCentered from '@/components/ui/NavbarCentered';
|
||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
|
||
import { Outlet } from 'react-router-dom';
|
||
import { StyleProvider } from "@/components/ui/StyleProvider";
|
||
import { useEffect, useRef } from 'react';
|
||
import Modal from '@/components/ui/Modal';
|
||
import Input from '@/components/ui/Input';
|
||
import Textarea from '@/components/ui/Textarea';
|
||
import Label from '@/components/ui/Label';
|
||
import Button from '@/components/ui/Button';
|
||
|
||
export default function Layout() {
|
||
const triggerRef = useRef<HTMLButtonElement>(null);
|
||
|
||
useEffect(() => {
|
||
const handleClick = (e: MouseEvent) => {
|
||
const target = e.target as HTMLElement;
|
||
const link = target.closest('a');
|
||
if (link && link.getAttribute('href') === '#contact-modal') {
|
||
e.preventDefault();
|
||
triggerRef.current?.click();
|
||
}
|
||
};
|
||
document.addEventListener('click', handleClick);
|
||
return () => document.removeEventListener('click', handleClick);
|
||
}, []);
|
||
|
||
const navItems = [
|
||
{
|
||
"name": "Bemutatkozás",
|
||
"href": "#about"
|
||
},
|
||
{
|
||
"name": "Referenciák",
|
||
"href": "#portfolio"
|
||
},
|
||
{
|
||
"name": "Folyamat",
|
||
"href": "#process"
|
||
},
|
||
{
|
||
"name": "Kapcsolat",
|
||
"href": "#contact"
|
||
},
|
||
{
|
||
"name": "Hero",
|
||
"href": "#hero"
|
||
},
|
||
{
|
||
"name": "Features",
|
||
"href": "#features"
|
||
},
|
||
{
|
||
"name": "Testimonials",
|
||
"href": "#testimonials"
|
||
}
|
||
];
|
||
|
||
return (
|
||
<StyleProvider buttonVariant="bounce" siteBackground="gridDots" heroBackground="lightRaysCenter">
|
||
<SiteBackgroundSlot />
|
||
<SectionErrorBoundary name="navbar">
|
||
<NavbarCentered
|
||
logo="A Te Szertartásvezetőd"
|
||
ctaButton={{
|
||
text: "Ajánlatkérés",
|
||
href: "#contact-modal",
|
||
}}
|
||
navItems={navItems} />
|
||
</SectionErrorBoundary>
|
||
<main className="flex-grow">
|
||
<Outlet />
|
||
</main>
|
||
<Modal
|
||
trigger={<button ref={triggerRef} className="hidden" />}
|
||
title="Foglald le a napodat!"
|
||
description="A 2026-os és már a 2027-es naptáram is nyitva!"
|
||
>
|
||
<form className="space-y-4 mt-4" onSubmit={(e) => e.preventDefault()}>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="name">Név</Label>
|
||
<Input id="name" placeholder="A ti nevetek" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="email">Email</Label>
|
||
<Input id="email" type="email" placeholder="email@cim.hu" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="date">Esküvő tervezett dátuma</Label>
|
||
<Input id="date" placeholder="ÉÉÉÉ. HH. NN." />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="message">Üzenet</Label>
|
||
<Textarea id="message" placeholder="Meséljetek magatokról és az elképzeléseitekről..." rows={4} />
|
||
</div>
|
||
<Button text="Üzenet küldése" className="w-full" />
|
||
</form>
|
||
</Modal>
|
||
<SectionErrorBoundary name="footer">
|
||
<FooterBrand
|
||
brand="A Te Szertartásvezetőd – Tóth Eszter"
|
||
columns={[
|
||
{
|
||
items: [
|
||
{
|
||
label: "Instagram",
|
||
href: "https://instagram.com/ateszertartasvezetod",
|
||
},
|
||
{
|
||
label: "Kapcsolat",
|
||
href: "#contact",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
items: [
|
||
{
|
||
label: "Bemutatkozás",
|
||
href: "#about",
|
||
},
|
||
{
|
||
label: "Referenciák",
|
||
href: "#portfolio",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
</SectionErrorBoundary>
|
||
</StyleProvider>
|
||
);
|
||
}
|