Merge pull request #96 from Full-Stack-Collective/shraddha/feature/ap…

…pointment-form Convert Appointment Form into a Multi Step Form without a Stepper
Full-Stack-Collective · Aug 26, 2023 · 99b9e00 · 99b9e00
2 parents a11ed13 + 990bbdb
commit 99b9e00
Show file tree

Hide file tree

Showing 3 changed files with 391 additions and 305 deletions.
diff --git a/src/app/appointment/[practiceCode]/page.tsx b/src/app/appointment/[practiceCode]/page.tsx
@@ -25,19 +25,18 @@ export default async function Appointment({
   return (
     <>
       <main className="flex-1 flex flex-col gap-2 justify-center items-center">
-        <div>
-          {name ? (
-            <h1 className="text-2xl font-semibold">Welcome to {name}</h1>
-          ) : null}
-          {logo ? (
-            <img
-              src={logo}
-              className="h-28 w-28 object-contain mx-auto"
-              alt={`Logo for a dental practice called ${name}`}
-            />
-          ) : null}
-        </div>
-        <AppointmentForm practiceId={id} />
+        <h1 className="mt-8 mb-6 w-full max-w-lg text-4xl font-extrabold tracking-wide leading-2 text-center md:leading-snug">
+          Request Your{' '}
+          <span className="w-full text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-rose-500">
+            Next Appointment
+          </span>{' '}
+          Expedition
+        </h1>
+        <AppointmentForm
+          practiceId={id}
+          practiceName={name}
+          practiceLogo={logo}
+        />
         <AppointmentFooter
           name={name}
           streetAddress={street_addresss!}

diff --git a/src/components/AppointmentFooter.tsx b/src/components/AppointmentFooter.tsx
@@ -22,47 +22,49 @@ export const AppointmentFooter = ({
   website,
 }: PracticeContactInfo) => {
   return (
-    <footer>
-      {website ? (
-        <Link
-          href={website}
-          className={buttonVariants({ variant: 'outline', size: 'sm' })}
-        >
-          To the {name} website
-          <ChevronRight />
-        </Link>
-      ) : null}
-
-      <address className="ml-2 text-center md:text-start text-base font-light not-italic">
-        <p>{name}</p>
-        <p>{streetAddress}</p>
-        <p>{city}</p>
-        <p>
-          <a
-            href={`tel:${phone}}`}
-            className="no-underline transition-all hover:underline ease-in-out"
-          >
-            {phone}
-          </a>
-        </p>
-      </address>
-      <div className="w-full flex gap-2 md:flex-col justify-center md:justify-start md:items-end">
-        {facebook ? (
-          <a
-            href={`https://www.facebook.com/${facebook}/`}
-            className="no-underline transition-all flex gap-1 hover:underline ease-in-out"
+    <footer className="w-full max-w-7xl bg-background text-sm">
+      <div className="m-auto pt-6 md:pt-4 pb-1 px-4 flex flex-col gap-4 md:flex-row justify-center items-stretch">
+        {website ? (
+          <Link
+            href={website}
+            className={buttonVariants({ variant: 'outline', size: 'sm' })}
           >
-            <Facebook /> Facebook
-          </a>
-        ) : null}
-        {instagram ? (
-          <a
-            href={`https://www.instagram.com/${instagram}`}
-            className="no-underline transition-all flex gap-1 hover:underline ease-in-out"
-          >
-            <Instagram /> Instagram
-          </a>
+            To the {name} website
+            <ChevronRight />
+          </Link>
         ) : null}
+
+        <address className="w-full text-center md:text-start not-italic flex flex-col gap-1 justify-center items-center">
+          <p>{name}</p>
+          <p>{streetAddress}</p>
+          <p>{city}</p>
+          <p>
+            <a
+              href={`tel:${phone}}`}
+              className="no-underline transition-all hover:underline ease-in-out"
+            >
+              {phone}
+            </a>
+          </p>
+        </address>
+        <div className="flex gap-2 md:flex-col justify-center md:justify-start md:items-end">
+          {facebook ? (
+            <a
+              href={`https://www.facebook.com/${facebook}/`}
+              className="no-underline transition-all flex gap-1 hover:underline ease-in-out"
+            >
+              <Facebook /> Facebook
+            </a>
+          ) : null}
+          {instagram ? (
+            <a
+              href={`https://www.instagram.com/${instagram}`}
+              className="no-underline transition-all flex gap-1 hover:underline ease-in-out"
+            >
+              <Instagram /> Instagram
+            </a>
+          ) : null}
+        </div>
       </div>
     </footer>
   );