feat: add conference location card for screen mobile

src/app/components/ConferenceLocation.tsx

@@ -1,19 +1,65 @@
-import { RiFlagLine } from "react-icons/ri";
+import {
+  RiExternalLinkLine,
+  RiFlagLine,
+  RiLink,
+  RiMap2Line,
+} from "react-icons/ri";
+import imageMobile from "@/assets/images/home/conference-location-mobile.jpg";
+import imageDesktop from "@/assets/images/home/conference-location-desktop.jpg";
+import Image from "next/image";
+import { buttonVariants } from "@/components/ui/Button";
+import Link from "next/link";
 
 export default function ConferenceLocation() {
   return (
     <section className="py-6 lg:py-12">
-      <div className="container space-y-16">
+      <div className="container space-y-10">
         {/* head */}
         <div className="flex flex-col items-center gap-2">
-        <RiFlagLine className="size-12 fill-green-500 lg:size-16" />
+          <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>
+              <Image
+                src={imageMobile}
+                alt="محل برگذاری همایش"
+                className="rounded-xl md:hidden"
+              />
+            </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 gap-4">
+                <Link
+                  className={`${buttonVariants({
+                    variant: "outline",
+                  })} flex gap-1.5`}
+                  href="#"
+                >
+                  <RiExternalLinkLine className="size-4" />
+                  <span className="text-sm font-bold">وبسایت هتل</span>
+                </Link>
+                <Link
+                  className={`${buttonVariants({
+                    variant: "link",
+                  })} flex gap-1.5`}
+                  href="#"
+                >
+                  <RiMap2Line className="size-4" />
+                  <span className="text-sm font-bold">نمایش در نقشه</span>
+                </Link>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </section>
   );
-}
+}

src/components/ui/Button.tsx

@@ -18,10 +18,10 @@ const buttonVariants = cva(
         default: "bg-slate-900 text-slate-50 hover:bg-slate-900/90",
         destructive: "bg-red-500 text-slate-50 hover:bg-red-500/90",
         outline:
-          "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900",
+          "border border-slate-200 hover:bg-slate-100 hover:text-slate-700",
         primary: "bg-orange-500 hover:bg-orange-600 active:bg-orange-700",
         secondary: "bg-slate-100 text-slate-900 hover:bg-slate-100/80",
-        ghost: "hover:bg-slate-100 hover:text-slate-900",
+        ghost: "hover:bg-slate-100 hover:text-slate-700",
         link: "hover:bg-zinc-800 active:bg-zinc-700",
       },
       size: {