kleap
/
app-sincere-eagle-bounce
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update app/contact/page.tsx

This commit is contained in:
kleap-admin 2026-01-18 18:52:35 +00:00
parent 7de118b5eb
commit abce31c9d0
1 changed files with 79 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
app/contact/page.tsx Normal file
View File

@ -0,0 +1,79 @@
"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Footer } from "@/components/footer";
import { KleapForm } from "@/components/kleap-form";
const contactFields = [
{ name: "name", label: "Name", type: "text", required: true },
{ name: "email", label: "Email", type: "email", required: true },
{ name: "subject", label: "Subject", type: "text", required: true },
{ name: "message", label: "Message", type: "textarea", required: true },
];
export default function ContactPage() {
return (
<main className="min-h-screen pt-32">
<Container className="pb-24">
<div className="text-center mb-16">
<Heading>Get in Touch</Heading>
<Subheading className="mt-4">We're here to help with any questions or custom requests.</Subheading>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
<div>
<div className="bg-white p-8 rounded-3xl shadow-sm border">
<KleapForm formId="contact" title="Send us a message" fields={contactFields} />
</div>
</div>
<div className="space-y-12">
<div>
<h3 className="text-2xl font-bold mb-6">Contact Information</h3>
<div className="space-y-6">
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-full bg-neutral-100 flex items-center justify-center flex-shrink-0">
{/* Icon */}
</div>
<div>
<p className="font-bold">Our Location</p>
<p className="text-neutral-600">123 Fashion Street, Style City, SC 12345</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-full bg-neutral-100 flex items-center justify-center flex-shrink-0">
{/* Icon */}
</div>
<div>
<p className="font-bold">Phone & WhatsApp</p>
<p className="text-neutral-600">+1 (555) 123-4567</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-full bg-neutral-100 flex items-center justify-center flex-shrink-0">
{/* Icon */}
</div>
<div>
<p className="font-bold">Email Address</p>
<p className="text-neutral-600">hello@solevibe.com</p>
</div>
</div>
</div>
</div>
<div className="bg-neutral-900 text-white p-8 rounded-3xl">
<h3 className="text-xl font-bold mb-4">Business Hours</h3>
<ul className="space-y-2 text-neutral-400">
<li className="flex justify-between"><span>Monday - Friday</span> <span>9:00 AM - 7:00 PM</span></li>
<li className="flex justify-between"><span>Saturday</span> <span>10:00 AM - 5:00 PM</span></li>
<li className="flex justify-between"><span>Sunday</span> <span>Closed</span></li>
</ul>
</div>
</div>
</div>
</Container>
<Footer />
</main>
);
}