bender/f6653f69-4793-4874-b605-04ba7a3f53ff
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bob AI: Replaced contact CTA with a contact form

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-06-03 03:58:57 +00:00
parent 9b910659c8
commit 1d9c6377e5
1 changed files with 64 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/pages/HomePage/sections/Contact.tsx
View File

@@ -4,23 +4,71 @@
import React from 'react';
import ContactCta from '@/components/sections/contact/ContactCta';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
import Tag from "@/components/ui/Tag";
export default function ContactSection(): React.JSX.Element {
return (
<div id="contact" data-section="contact">
<div id="contact" data-webild-section="contact" className="py-24 bg-background">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Connect With Us"
text="Ready for your perfect cup or want to learn more? Visit Joes Coffee and experience the difference, or reach out to our friendly team."
primaryButton={{
text: "Get Directions",
href: "https://www.google.com/maps/search/joes+coffee",
}}
secondaryButton={{
text: "Call Us Now",
href: "tel:+1234567890",
}}
<div className="container mx-auto px-4 max-w-3xl">
<div className="text-center mb-12">
<Tag text="Get in Touch" className="mb-4" />
<h2 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">Contact Us</h2>
<p className="text-lg text-muted-foreground">
Have a question or want to learn more? Fill out the form below and our team will get back to you as soon as possible.
</p>
</div>
<form className="space-y-6 bg-card p-8 rounded-2xl border border-border shadow-sm" onSubmit={(e) => e.preventDefault()}>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<label htmlFor="firstName" className="text-sm font-medium text-foreground">First Name</label>
<input
type="text"
id="firstName"
className="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-foreground/20 transition-colors"
placeholder="John"
/>
</div>
<div className="space-y-2">
<label htmlFor="lastName" className="text-sm font-medium text-foreground">Last Name</label>
<input
type="text"
id="lastName"
className="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-foreground/20 transition-colors"
placeholder="Doe"
/>
</div>
</div>
<div className="space-y-2">
<label htmlFor="email" className="text-sm font-medium text-foreground">Email Address</label>
<input
type="email"
id="email"
className="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-foreground/20 transition-colors"
placeholder="john@example.com"
/>
</div>
<div className="space-y-2">
<label htmlFor="message" className="text-sm font-medium text-foreground">Message</label>
<textarea
id="message"
rows={5}
className="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-foreground/20 transition-colors resize-none"
placeholder="How can we help you?"
></textarea>
</div>
<button
type="submit"
className="w-full py-4 px-6 rounded-full bg-foreground text-background font-medium hover:opacity-90 transition-opacity"
>
Send Message
</button>
</form>
</div>
</SectionErrorBoundary>
</div>
);