feat: add footer

himarplupi · Oct 8, 2024 · 5cc79b1 · 5cc79b1
1 parent 8f344e7
commit 5cc79b1
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 2 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,6 +2,7 @@ import Image from "next/image";
 
 import Vector1 from "@/assets/vector-1.svg";
 import { FAQAccordions } from "@/components/common/faq-accordions";
+import { Footer } from "@/components/common/footer";
 import { BorderCorner } from "@/components/ornament/border";
 import { Hieroglyph } from "@/components/ornament/hieroglyph";
 import { Separator } from "@/components/ornament/separator";
@@ -282,6 +283,10 @@ export default function HomePage() {
           </Marquee>
         </section>
       </div>
+
+      <div className="bg-primary-700/95 pt-64">
+        <Footer />
+      </div>
     </main>
   );
 }
diff --git a/src/components/common/footer.tsx b/src/components/common/footer.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import Link from "next/link";
+
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const navLinks = [
+  {
+    name: "Instagram",
+    href: "http://instagram.com/mabimrpl",
+  },
+  {
+    name: "Booklet",
+    href: "https://cdn.jsdelivr.net/gh/himarplupi/assets@main/mabim/2024/booklet.pdf",
+  },
+  {
+    name: "Twibbon",
+    href: "https://drive.google.com",
+  },
+  {
+    name: "Lihat Kelompok",
+    href: "#kelompok",
+  },
+  {
+    name: "Timeline",
+    href: "#timeline",
+  },
+  {
+    name: "FAQ",
+    href: "#faq",
+  },
+];
+
+export function Footer() {
+  return (
+    <footer className="relative z-10 flex flex-col gap-4 px-3">
+      <p className="font-bonobo text-neutral-200">
+        Tujuan dari Mabim RPL 2024 adalah untuk membantu mahasiswa baru dalam
+        mengorientasikan diri mereka terhadap lingkungan akademik, mata kuliah
+        dan kegiatan yang berkaitan dengan Rekayasa Perangkat Lunak UPI Kampus
+        Cibiru.
+      </p>
+
+      <p className="font-bonobo text-neutral-200">
+        This site is passionally crafted by{" "}
+        <Link
+          href="https://blog.himarpl.com/@dikdns"
+          target="_blank"
+          className={cn(
+            "font-bonobo font-semibold text-neutral-100 hover:underline",
+          )}
+        >
+          Andika
+        </Link>
+        {", "}
+        <Link
+          href="https://blog.himarpl.com/@arsya-permana"
+          target="_blank"
+          className={cn(
+            "font-bonobo font-semibold text-neutral-100 hover:underline",
+          )}
+        >
+          Arsya
+        </Link>
+        {", and "}
+        <Link
+          href="https://blog.himarpl.com/@zamzami"
+          target="_blank"
+          className={cn(
+            "font-bonobo font-semibold text-neutral-100 hover:underline",
+          )}
+        >
+          Zamzami
+        </Link>
+        .
+      </p>
+      <ul className="flex flex-col gap-y-1">
+        {navLinks.map((link) => (
+          <li key={link.name}>
+            <Link
+              href={link.href}
+              target="_blank"
+              className={cn(
+                buttonVariants({ variant: "link" }),
+                "font-bonobo font-semibold text-neutral-100",
+              )}
+            >
+              {link.name}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </footer>
+  );
+}
diff --git a/src/components/ui/countdown-tabs.tsx b/src/components/ui/countdown-tabs.tsx
@@ -33,7 +33,7 @@ export function CountdownTabs({ tabs }: TabsProps) {
 
   return (
     <div className="relative z-10 flex flex-col items-center space-y-4 px-3 py-6">
-      <h2 className="text-center font-rock-n-roll-one text-3xl font-normal leading-tight tracking-wider text-neutral-50">
+      <h2 className="pb-4 text-center font-rock-n-roll-one text-3xl font-normal leading-tight tracking-wider text-neutral-50">
         COUNTDOWN
       </h2>
 
@@ -100,7 +100,7 @@ export function CountdownTabs({ tabs }: TabsProps) {
         </div>
       </div>
 
-      <div className="relative mt-4 rounded-md border border-gray-300 bg-primary-600 px-6 pb-2 pt-4">
+      <div className="relative mt-4 w-full rounded-md border border-gray-300 bg-primary-600 px-6 pb-2 pt-4">
         <TopLeftCorner
           className="absolute left-1 top-1 scale-75"
           pathClassName="fill-neutral-50 opacity-50"
@@ -119,6 +119,10 @@ export function CountdownTabs({ tabs }: TabsProps) {
         />
         <CountdownTimer targetDate={new Date(tabs[activeTab]?.date ?? "")} />
       </div>
+
+      <p className="w-full text-right font-bonobo text-sm text-neutral-300">
+        *Geser tab untuk melihat hari lainnya
+      </p>
     </div>
   );
 }