Update src/app/contact/page.tsx
This commit is contained in:
@@ -4,11 +4,52 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
||||
import { Mail, Zap } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Mail, Zap } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Tjenester", id: "services" },
|
||||
{ name: "Cases", id: "cases" },
|
||||
{ name: "Priser", id: "pricing" },
|
||||
{ name: "Om Os", id: "about" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Tjenester", href: "/#services" },
|
||||
{ label: "Cases", href: "/#cases" },
|
||||
{ label: "Priser", href: "/#pricing" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Om Os", href: "/#about" },
|
||||
{ label: "Kontakt", href: "/contact" },
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Book Demo", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "LinkedIn", href: "https://linkedin.com/company/aibureau-dk" },
|
||||
{ label: "Instagram", href: "https://instagram.com/aibureau.dk" },
|
||||
{ label: "Twitter", href: "https://twitter.com/aibureau_dk" },
|
||||
{ label: "Email", href: "mailto:hello@aibureau.dk" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privatlivspolitik", href: "#" },
|
||||
{ label: "Vilkår", href: "#" },
|
||||
{ label: "Cookies", href: "#" },
|
||||
{ label: "Sitemap", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
@@ -25,12 +66,7 @@ export default function ContactPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="AI Bureau"
|
||||
navItems={[
|
||||
{ name: "Tjenester", id: "services" },
|
||||
{ name: "Cases", id: "cases" },
|
||||
{ name: "Priser", id: "pricing" },
|
||||
{ name: "Om Os", id: "about" },
|
||||
]}
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Book Gratis Demo",
|
||||
href: "/contact",
|
||||
@@ -63,140 +99,115 @@ export default function ContactPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
sideTitle="Hyppigt Stillede Spørgsmål"
|
||||
sideDescription="Alt du skal vide om AI Bureau og vores løsninger."
|
||||
textPosition="left"
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Hvor længe tager det at implementere?",
|
||||
content:
|
||||
"De fleste implementeringer er klar på 1-2 uger. Vi hjælper dig gennem hele processen, så der ikke er noget komplekst setup. Du kan starte inden for 48 timer efter underskrift.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Virker det med min eksisterende phone linje?",
|
||||
content:
|
||||
"Ja! Vores AI Receptionister integreres med næsten alle phone systemer. Vi tilbyder også et dedikeret nummer hvis du ønsker det. Vi håndterer det hele teknisk, du skal bare acceptere opkaldene.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Hvad hvis AI'en ikke kan håndtere et opkald?",
|
||||
content:
|
||||
"AI'en er traineret til at håndtere 95% af opkald selv. De resterende 5% bliver overført til dig eller dit team. Du har altid kontrol og kan justere hvordan den handler i realtime.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Kan jeg få tilbagebetaling hvis jeg ikke er tilfreds?",
|
||||
content:
|
||||
"Ja. Du kan prøve gratis i 14 dage. Hvis du ikke ser resultater, refunderer vi uden spørgsmål. Vi er sikre på vores løsninger, så vi tilbyder denne garanti uden bekymringer.",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Hvad med GDPR og datasikkerhed?",
|
||||
content:
|
||||
"Vi er 100% GDPR kompatible. Alle data er krypteret, lagret i Danmark, og vi har ISO 27001 certificering. Din kundedata er sikker med os.",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "Kan jeg skalere op eller ned?",
|
||||
content:
|
||||
"Totalt. Du kan tilføje eller fjerne AI Receptionister når som helst. Ingen lange kontrakter, ingen straffe. Betalingen tilpasses automatisk.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div id="contact-form" data-section="contact-form" className="mx-auto px-4 md:px-6 py-16 md:py-24">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="bg-[var(--card)] rounded-lg p-8 md:p-12 border border-[var(--accent)] border-opacity-20">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-[var(--foreground)] mb-4">
|
||||
Kontakt Os Direkte
|
||||
</h2>
|
||||
<p className="text-[var(--secondary-cta-text)] mb-8">
|
||||
Vil du gerne høre mere? Send os en besked, og vi vender tilbage inden for 24 timer.
|
||||
</p>
|
||||
|
||||
<form className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-[var(--foreground)] mb-2">
|
||||
Dit Navn
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Dit fulde navn"
|
||||
className="w-full px-4 py-3 rounded-lg bg-[var(--background)] border border-[var(--accent)] border-opacity-30 text-[var(--foreground)] placeholder-[var(--secondary-cta-text)] focus:outline-none focus:border-[var(--accent)]"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-[var(--foreground)] mb-2">
|
||||
Din Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="din@email.dk"
|
||||
className="w-full px-4 py-3 rounded-lg bg-[var(--background)] border border-[var(--accent)] border-opacity-30 text-[var(--foreground)] placeholder-[var(--secondary-cta-text)] focus:outline-none focus:border-[var(--accent)]"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-[var(--foreground)] mb-2">
|
||||
Dit Telefonnummer
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
placeholder="+45 XXXX XXXX"
|
||||
className="w-full px-4 py-3 rounded-lg bg-[var(--background)] border border-[var(--accent)] border-opacity-30 text-[var(--foreground)] placeholder-[var(--secondary-cta-text)] focus:outline-none focus:border-[var(--accent)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="company" className="block text-sm font-medium text-[var(--foreground)] mb-2">
|
||||
Virksomhedsnavn
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
placeholder="Dit firmas navn"
|
||||
className="w-full px-4 py-3 rounded-lg bg-[var(--background)] border border-[var(--accent)] border-opacity-30 text-[var(--foreground)] placeholder-[var(--secondary-cta-text)] focus:outline-none focus:border-[var(--accent)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-[var(--foreground)] mb-2">
|
||||
Din Besked
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="Fortæl os hvad du gerne vil have hjælp til..."
|
||||
rows={5}
|
||||
className="w-full px-4 py-3 rounded-lg bg-[var(--background)] border border-[var(--accent)] border-opacity-30 text-[var(--foreground)] placeholder-[var(--secondary-cta-text)] focus:outline-none focus:border-[var(--accent)] resize-none"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-6 py-3 rounded-lg bg-[var(--primary-cta)] text-[var(--primary-cta-text)] font-semibold hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Send Besked
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-[var(--accent)] border-opacity-20">
|
||||
<p className="text-sm text-[var(--secondary-cta-text)] mb-4">
|
||||
Foretrækker du at skrive direkte?
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<a
|
||||
href="mailto:hello@aibureau.dk"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--accent)] bg-opacity-10 text-[var(--foreground)] hover:bg-opacity-20 transition-all"
|
||||
>
|
||||
<Mail className="w-4 h-4" />
|
||||
hello@aibureau.dk
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="AI Bureau"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Tjenester",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Cases",
|
||||
href: "/cases",
|
||||
},
|
||||
{
|
||||
label: "Priser",
|
||||
href: "/pricing",
|
||||
},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "/blog",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Om Os",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Kontakt",
|
||||
href: "/contact",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Book Demo",
|
||||
href: "/contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "https://linkedin.com/company/aibureau-dk",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com/aibureau.dk",
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "https://twitter.com/aibureau_dk",
|
||||
},
|
||||
{
|
||||
label: "Email",
|
||||
href: "mailto:hello@aibureau.dk",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privatlivspolitik",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Vilkår",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Cookies",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Sitemap",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user