155 lines
8.0 KiB
TypeScript
155 lines
8.0 KiB
TypeScript
import Link from "next/link";
|
|
import { ContactSection } from "../../components/contact-section";
|
|
import { FaqSection } from "../../components/faq-section";
|
|
import { PageSchema } from "../../components/page-schema";
|
|
import { SiteFooter } from "../../components/site-footer";
|
|
import { SiteHeader } from "../../components/site-header";
|
|
import { defaultFaqs } from "../../data/faq";
|
|
import { siteInfo } from "../../data/site";
|
|
|
|
export const metadata = {
|
|
title: "Contact Us",
|
|
description: "Get in touch with the LedgerOne team for support, sales, or partnerships.",
|
|
keywords: siteInfo.keywords
|
|
};
|
|
|
|
export default function ContactPage() {
|
|
const schema = [
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebPage",
|
|
name: "Contact LedgerOne",
|
|
description: "Get in touch with the LedgerOne team for support, sales, or partnerships.",
|
|
url: `${siteInfo.url}/contact`
|
|
},
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "FAQPage",
|
|
mainEntity: defaultFaqs.map((item) => ({
|
|
"@type": "Question",
|
|
name: item.question,
|
|
acceptedAnswer: { "@type": "Answer", text: item.answer }
|
|
}))
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background font-sans text-foreground flex flex-col">
|
|
<SiteHeader />
|
|
|
|
<main className="flex-1 pt-24 pb-16 relative overflow-hidden">
|
|
<div className="absolute inset-0 mesh-gradient -z-10 opacity-40" />
|
|
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<div className="text-center max-w-3xl mx-auto mb-10 animate-slide-up">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-secondary/50 border border-border text-xs font-medium text-muted-foreground backdrop-blur-sm mb-6">
|
|
Support & Sales
|
|
</div>
|
|
<h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
|
|
How can we help?
|
|
</h1>
|
|
<p className="mt-6 text-lg text-muted-foreground">
|
|
Whether you have a question about features, pricing, or need a demo, our team is ready to answer all your questions.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-12 max-w-5xl mx-auto">
|
|
<div className="glass-panel p-8 rounded-2xl shadow-sm">
|
|
<h2 className="text-2xl font-bold text-foreground mb-6">Send us a message</h2>
|
|
<form className="space-y-6">
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium text-foreground">
|
|
Name
|
|
</label>
|
|
<div className="mt-1">
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
id="name"
|
|
className="block w-full rounded-lg border border-border bg-background/50 px-4 py-2 text-foreground shadow-sm focus:border-primary focus:ring-primary sm:text-sm"
|
|
placeholder="Your name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-foreground">
|
|
Email
|
|
</label>
|
|
<div className="mt-1">
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
id="email"
|
|
className="block w-full rounded-lg border border-border bg-background/50 px-4 py-2 text-foreground shadow-sm focus:border-primary focus:ring-primary sm:text-sm"
|
|
placeholder="you@example.com"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="message" className="block text-sm font-medium text-foreground">
|
|
Message
|
|
</label>
|
|
<div className="mt-1">
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
rows={4}
|
|
className="block w-full rounded-lg border border-border bg-background/50 px-4 py-2 text-foreground shadow-sm focus:border-primary focus:ring-primary sm:text-sm"
|
|
placeholder="How can we help you?"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="w-full rounded-lg bg-primary px-4 py-3 text-sm font-bold text-primary-foreground shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-all hover:-translate-y-0.5"
|
|
>
|
|
Send Message
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
<div className="glass-panel p-8 rounded-2xl shadow-sm">
|
|
<h3 className="text-lg font-bold text-foreground mb-2">Contact Information</h3>
|
|
<div className="space-y-4 text-muted-foreground">
|
|
<p className="flex items-center gap-3">
|
|
<svg className="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
support@ledgerone.com
|
|
</p>
|
|
<p className="flex items-center gap-3">
|
|
<svg className="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
123 Fintech Blvd, San Francisco, CA 94105
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-panel p-8 rounded-2xl shadow-sm">
|
|
<h3 className="text-lg font-bold text-foreground mb-4">Join our community</h3>
|
|
<div className="flex gap-4">
|
|
{/* Social Icons */}
|
|
<div className="h-10 w-10 rounded-full bg-secondary flex items-center justify-center text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-colors cursor-pointer">
|
|
<span className="sr-only">Twitter</span>
|
|
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" /></svg>
|
|
</div>
|
|
<div className="h-10 w-10 rounded-full bg-secondary flex items-center justify-center text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-colors cursor-pointer">
|
|
<span className="sr-only">LinkedIn</span>
|
|
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path fillRule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clipRule="evenodd" /></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<SiteFooter />
|
|
<PageSchema schema={schema} />
|
|
</div>
|
|
);
|
|
}
|