feat: initialize mohfarawati app foundation

2026-03-06 13:53:57 +01:00
parent 30330c4f1e
commit f86b7f39f7
50 changed files with 4615 additions and 152 deletions
@@ -0,0 +1,120 @@
+import { Mail, MapPin, Phone } from "lucide-react";
+import Link from "next/link";
+
+import { MotionFade } from "@/components/motion-fade";
+import { resolveLocale } from "@/lib/site-data";
+
+type ContactPageProps = {
+  params: {
+    locale: string;
+  };
+};
+
+export default function ContactPage({ params: { locale } }: ContactPageProps) {
+  const localeKey = resolveLocale(locale);
+
+  const copy =
+    localeKey === "de"
+      ? {
+          title: "Kontakt",
+          intro: "Schreib uns kurz dein Ziel und wir melden uns zeitnah.",
+          name: "Name",
+          email: "E-Mail",
+          message: "Nachricht",
+          submit: "Senden",
+          preview: "Success Seite ansehen",
+          phone: "+49 30 123456",
+          mail: "hello@moh-sass.dev",
+          city: "Berlin, Germany",
+        }
+      : {
+          title: "Contact",
+          intro: "Share your goal and we will get back quickly.",
+          name: "Name",
+          email: "Email",
+          message: "Message",
+          submit: "Submit",
+          preview: "Open success page",
+          phone: "+49 30 123456",
+          mail: "hello@moh-sass.dev",
+          city: "Berlin, Germany",
+        };
+
+  return (
+    <div className="mx-auto grid w-full max-w-6xl gap-6 px-4 py-10 sm:px-6 lg:grid-cols-2 lg:px-8 lg:py-14">
+      <MotionFade>
+        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
+          <h1 className="text-3xl font-semibold text-zinc-900 dark:text-zinc-100 sm:text-4xl">
+            {copy.title}
+          </h1>
+          <p className="mt-4 text-base text-zinc-600 dark:text-zinc-300 sm:text-lg">
+            {copy.intro}
+          </p>
+
+          <ul className="mt-6 space-y-3 text-sm text-zinc-700 dark:text-zinc-200">
+            <li className="inline-flex items-center gap-2">
+              <Phone className="h-4 w-4" />
+              {copy.phone}
+            </li>
+            <li className="inline-flex items-center gap-2">
+              <Mail className="h-4 w-4" />
+              {copy.mail}
+            </li>
+            <li className="inline-flex items-center gap-2">
+              <MapPin className="h-4 w-4" />
+              {copy.city}
+            </li>
+          </ul>
+        </section>
+      </MotionFade>
+
+      <MotionFade delay={0.05}>
+        <section className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950 lg:p-8">
+          <form className="grid gap-4">
+            <label className="grid gap-2 text-sm text-zinc-700 dark:text-zinc-200">
+              {copy.name}
+              <input
+                type="text"
+                className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
+                placeholder={copy.name}
+              />
+            </label>
+
+            <label className="grid gap-2 text-sm text-zinc-700 dark:text-zinc-200">
+              {copy.email}
+              <input
+                type="email"
+                className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
+                placeholder={copy.email}
+              />
+            </label>
+
+            <label className="grid gap-2 text-sm text-zinc-700 dark:text-zinc-200">
+              {copy.message}
+              <textarea
+                rows={5}
+                className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none transition focus:border-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
+                placeholder={copy.message}
+              />
+            </label>
+
+            <div className="flex flex-wrap gap-3">
+              <button
+                type="button"
+                className="inline-flex rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
+              >
+                {copy.submit}
+              </button>
+              <Link
+                href={`/${localeKey}/success`}
+                className="inline-flex rounded-lg border border-zinc-300 px-4 py-2.5 text-sm font-medium text-zinc-700 transition hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
+              >
+                {copy.preview}
+              </Link>
+            </div>
+          </form>
+        </section>
+      </MotionFade>
+    </div>
+  );
+}