src/components/sections/contact/ContactForm.tsx

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+
+const ContactForm = () => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // In a real application, you would handle form submission here,
+    // e.g., send data to a server.
+    console.log({ name, email, message });
+    alert('Thank you for your message! We will get back to you soon.');
+    setName('');
+    setEmail('');
+    setMessage('');
+  };
+
+  return (
+    <section className="py-20 bg-background flex items-center justify-center min-h-[calc(100vh-100px)]">
+      <div className="w-full max-w-2xl mx-auto px-4">
+        <div className="card p-8 md:p-12 rounded-lg text-center">
+          <h2 className="text-4xl font-medium text-foreground mb-2">Contact Us</h2>
+          <p className="text-lg text-foreground/80 mb-8">
+            Have a question or want to work with us? Send us a message!
+          </p>
+          <form onSubmit={handleSubmit} className="flex flex-col gap-6 text-left">
+            <div>
+              <label htmlFor="name" className="block mb-2 text-base font-medium text-foreground">
+                Name
+              </label>
+              <input
+                type="text"
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+                placeholder="Your Name"
+              />
+            </div>
+            <div>
+              <label htmlFor="email" className="block mb-2 text-base font-medium text-foreground">
+                Email
+              </label>
+              <input
+                type="email"
+                id="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                placeholder="your@email.com"
+              />
+            </div>
+            <div>
+              <label htmlFor="message" className="block mb-2 text-base font-medium text-foreground">
+                Message
+              </label>
+              <textarea
+                id="message"
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                required
+                rows={5}
+                placeholder="Your message..."
+              ></textarea>
+            </div>
+            <button type="submit" className="primary-button w-full mt-2">
+              Send Message
+            </button>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ContactForm;

src/index.css

@@ -163,7 +163,8 @@ input[type="text"],
 input[type="email"],
 input[type="date"],
 input[type="time"],
-input[type="number"] {
+input[type="number"],
+textarea {
   width: 100%;
   padding: 0.75rem 1rem;
   border-radius: var(--radius);
@@ -178,7 +179,8 @@ input[type="text"]:focus,
 input[type="email"]:focus,
 input[type="date"]:focus,
 input[type="time"]:focus,
-input[type="number"]:focus {
+input[type="number"]:focus,
+textarea:focus {
   outline: none;
   border-color: var(--accent);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent);

src/pages/ContactPage.tsx

@@ -1,93 +1,11 @@
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
-import FooterBasic from '@/components/sections/footer/FooterBasic';
-import NavbarCentered from '@/components/ui/NavbarCentered';
+import ContactForm from '../components/sections/contact/ContactForm';
 
-export default function ContactPage() {
+const ContactPage = () => {
   return (
     <>
-  <div id="nav" data-section="nav">
-      <NavbarCentered
-      logo="Artisan Brew Co"
-      navItems={[
-        {
-          name: "Home",
-          href: "/",
-        },
-        {
-          name: "Menu",
-          href: "/menu",
-        },
-        {
-          name: "About",
-          href: "/about",
-        },
-        {
-          name: "Contact",
-          href: "/contact",
-        },
-      ]}
-      ctaButton={{
-        text: "Visit Us",
-        href: "/contact",
-      }}
-    />
-  </div>
-
-  <div id="contact-section" data-section="contact-section">
-      <ContactCta
-      tag="Reach Out"
-      text="Visit us at our downtown cafe or message us for catering inquiries."
-      primaryButton={{
-        text: "Contact Us",
-        href: "/contact",
-      }}
-      secondaryButton={{
-        text: "Directions",
-        href: "#",
-      }}
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqTwoColumn
-      tag="FAQ"
-      title="Common questions"
-      description="Everything you need to know about our cafe."
-      items={[
-        {
-          question: "Are you open on weekends?",
-          answer: "Yes, we are open 8am-8pm on weekends.",
-        },
-        {
-          question: "Do you serve food?",
-          answer: "We offer a range of fresh pastries from local bakers.",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="home-footer" data-section="home-footer">
-      <FooterBasic
-      columns={[
-        {
-          title: "Navigate",
-          items: [
-            {
-              label: "Menu",
-              href: "/menu",
-            },
-            {
-              label: "About",
-              href: "/about",
-            },
-          ],
-        },
-      ]}
-      leftText="© 2024 Artisan Brew Co."
-      rightText="Warm coffee, warmer hearts."
-    />
-  </div>
+      <ContactForm />
     </>
   );
-}
+};
+
+export default ContactPage;