feat: responsive conference location card

frontChapter · Jan 20, 2024 · 3674043 · 3674043
1 parent 2dfcde2
commit 3674043
Showing 1 changed file with 19 additions and 12 deletions.
diff --git a/src/app/components/ConferenceLocation.tsx b/src/app/components/ConferenceLocation.tsx
@@ -13,29 +13,36 @@ import Link from "next/link";
 export default function ConferenceLocation() {
   return (
     <section className="py-6 lg:py-12">
-      <div className="container space-y-10">
+      <div className="container space-y-10 md:space-y-14">
         {/* head */}
         <div className="flex flex-col items-center gap-2">
           <RiFlagLine className="size-12 fill-green-500 lg:size-16" />
           <h3 className="text-2xl font-bold lg:text-3xl">محل برگزاری همایش</h3>
         </div>
         {/* body */}
-        <div>
-          <div className="space-y-5 flex flex-col rounded-xl bg-zinc-800 p-4">
-            <div>
+        <div className="flex justify-center">
+          <div className="flex max-w-[850px] flex-col gap-y-5 rounded-xl bg-zinc-800 px-4 md:flex-row-reverse md:gap-4">
+            <div className="pt-4 md:pb-4 md:border-r md:pr-4 md:border-zinc-700">
               <Image
                 src={imageMobile}
                 alt="محل برگذاری همایش"
-                className="rounded-xl md:hidden"
+                className="w-full rounded-xl md:hidden"
+              />
+              <Image
+                src={imageDesktop}
+                alt="محل برگذاری همایش"
+                className="hidden size-64 rounded-xl md:flex"
               />
             </div>
-            <div className="space-y-5 flex flex-col items-center">
-              <p className="text-2xl font-extrabold">سالن همایش هتل میزبان</p>
-              <p className="text-center text-zinc-200">
-                هتل میزبان بابلسر به یکی از درجه یک‌ترین هتل‌های خطه مازندران
-                شناخته می‌شود. این هتل 5 ستاره مشرف به دریا و کوه می‌تواند یک
-                انتخاب ایده آل برای سفر باشد.
-              </p>
+            <div className="flex flex-1 pb-4 md:pt-4 md:justify-between flex-col items-center gap-y-5 md:items-start">
+              <div className="space-y-5">
+                <p className="text-2xl font-extrabold text-center md:text-start md:text-3xl">سالن همایش هتل میزبان</p>
+                <p className="text-center text-zinc-200 md:text-start md:text-lg">
+                  هتل میزبان بابلسر به یکی از درجه یک‌ترین هتل‌های خطه مازندران
+                  شناخته می‌شود. این هتل 5 ستاره مشرف به دریا و کوه می‌تواند یک
+                  انتخاب ایده آل برای سفر باشد.
+                </p>
+              </div>
               <div className="flex gap-4">
                 <Link
                   className={`${buttonVariants({