Akademik Page

src/app/akademik/MatematikaIIA/page.tsx

@@ -0,0 +1,142 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import Image from "next/image";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+import Link from "next/link";
+import AkademikCard from "@/components/AkademikCard";
+import AkademikCard2 from "@/components/AkademikCard2";
+
+const Home: React.FC = () => {
+  const [selectedOption, setSelectedOption] = useState("");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredContent, setFilteredContent] = useState<string[]>([]);
+
+  useEffect(() => {
+    setSelectedOption("Materi");
+  }, []);
+
+  // Filter content based on search term and selected option
+  useEffect(() => {
+    if (selectedOption === "Materi") {
+      // Example data
+      const materiContent = [
+        "Catatan Bab 7 Persamaan DIfferensial Orde 1",
+        "Catatan Bab 7 Persamaan DIfferensial Orde 1",
+        "Catatan Bab 7 Persamaan DIfferensial Orde 1",
+        "Catatan Bab 7 Persamaan DIfferensial Orde 1",
+        "Catatan Bab 7 Persamaan DIfferensial Orde 1",
+        "Catatan Bab 7 Persamaan DIfferensial Orde 1",
+      ];
+      const filtered = materiContent.filter((heading) =>
+        heading.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      setFilteredContent(filtered);
+    } else {
+      // Handle other options similarly if needed
+      setFilteredContent([]);
+    }
+  }, [searchTerm, selectedOption]);
+
+  return (
+    <>
+      <Navbar />
+      <section className="flex-grow flex flex-col items-center bg-white justify-center w-full max-w-full max-h-full overflow-x-hidden relative py-24">
+        {/* Section 1 */}
+        <section className="flex flex-col items-center justify-center w-full px-[4%] md:px-[8%] z-10">
+          <div className="flex flex-row items-center justify-center w-full max-w-full mb-24">
+            <Link href="../akademik/">
+              <div className="mr-4 md:mr-8 hover:scale-[1.05] transition-transform duration-300">
+                <Image
+                  src="/akademik/Back.svg"
+                  alt="Back"
+                  width={20}
+                  height={20}
+                  objectFit="contain"
+                />
+              </div>
+            </Link>
+            <h1 className="font-Outfit font-extrabold text-[40px] sm:text-[100px] xl:text-[140px] tracking-normal text-[#101351] text-center lg:text-center leading-tight drop-shadow-[30px_10px_35px_rgba(0,0,0,0.25)]">
+              Matematika IIA
+            </h1>
+          </div>
+          {/* Search Bar */}
+          <div className="relative w-full sm:w-[75%] lg:w-[60%] mb-8">
+            <input
+              type="text"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              placeholder="Search..."
+              className="border bg-[#EDECEC] px-3 py-2 rounded-[32px] pl-10 w-full"
+            />
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <Image
+                src="/Akademik/Search.svg"
+                alt="My SVG"
+                width={20}
+                height={20}
+              />
+            </div>
+          </div>
+          {/* Selection */}
+          <div className="flex w-full sm:w-[75%] lg:w-[60%] h-16 items-center justify-center flex-row mb-8">
+            <button
+              className={`w-full h-full ${
+                selectedOption === "Materi"
+                  ? "text-black border-b-4 border-black"
+                  : "text-[#999999] border-b-4 border-[#999999]"
+              }`}
+              onClick={() => setSelectedOption("Materi")}
+            >
+              MATERI
+            </button>
+            <button
+              className={`w-full h-full ${
+                selectedOption === "Bank Soal"
+                  ? "text-black border-b-4 border-black"
+                  : "text-[#999999] border-b-4 border-[#999999]"
+              }`}
+              onClick={() => setSelectedOption("Bank Soal")}
+            >
+              BANK SOAL
+            </button>
+            <button
+              className={`w-full h-full ${
+                selectedOption === "Tutorial"
+                  ? "text-black border-b-4 border-black"
+                  : "text-[#999999] border-b-4 border-[#999999]"
+              }`}
+              onClick={() => setSelectedOption("Tutorial")}
+            >
+              TUTORIAL
+            </button>
+          </div>
+          {/* Display Text Based on Selection */}
+          {selectedOption && (
+            <div className="w-full mt-8">
+              {selectedOption === "Materi" && (
+                <div className="w-full grid grid-cols-1 lg:grid-cols-3 2xl:grid-cols-4 gap-3 md:gap-3 justify-items-center">
+                  {filteredContent.map((heading, index) => (
+                    <>
+                      <div className="w-full" key={index}>
+                        <AkademikCard2
+                          className="bg-[#101351]"
+                          heading={heading}
+                        />
+                      </div>
+                    </>
+                  ))}
+                </div>
+              )}
+              {selectedOption === "Bank Soal" && <p>HALO2</p>}
+              {selectedOption === "Tutorial" && <p>HALO3</p>}
+            </div>
+          )}
+        </section>
+      </section>
+      <Footer />
+    </>
+  );
+};
+
+export default Home;

src/app/akademik/page.tsx

@@ -1,16 +1,202 @@
 import ComingSoon from "@/components/ComingSoon";
 import Navbar from "@/components/Navbar";
+import Head from "next/head";
 import React from "react";
+import Image from "next/image";
+import AkademikCard from "@/components/AkademikCard";
+import Footer from "@/components/Footer";
 
 const index = () => {
   return (
     <>
+      <div className="fixed top-0 left-0 w-full z-50">
+        <Navbar />
+      </div>
+      {/*
+      <Head>
+        <title>Akademik | STEI-K 23</title>
+      </Head>
       <Navbar />
-      <section className="flex-grow flex flex-col items-center justify-center w-full max-w-full overflow-x-clip">
-        <section className="flex-grow flex items-center bg-slate-100 justify-center w-full px-4">
-          <ComingSoon />
+    */}
+      <section className="flex-grow flex flex-col items-center bg-[#000141] justify-center w-full max-w-full max-h-full overflow-x-hidden relative">
+        {/*
+        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-full">
+
+          <div className="absolute top-0 left-0 transform -translate-x-[200px] -translate-y-[100px] w-[700px] h-[700px] rounded-full bg-gradient-to-br from-[#87DFFF] to-transparent blur-[120px]"></div>
+
+          <div className="absolute top-0 right-0 transform translate-x-[300px] -translate-y-[200px] w-[888px] h-[888px] rounded-full bg-gradient-to-br from-[#FBC4FD] to-transparent blur-[120px]"></div>
+        </div>
+        <div
+          style={{
+            position: "absolute",
+            top: "0",
+            right: "0",
+            transform: "translate(-[300px], -[300px])",
+          }}
+        >
+          <Image
+            src="/Akademik/Book.svg"
+            alt="My SVG"
+            width={500}
+            height={500}
+          />
+        </div>
+        */}
+        {/* Section 1 */}
+        <section className="h-[82vh] flex flex-col items-start justify-center w-full px-[4%] md:px-[8%] z-10 my-24">
+          <div className="font-inter text-[12px] lg:text-[24px] w-full lg:w-[60%] text-white font-normal tracking-[1px] leading-tight text-center lg:text-left mb-24">
+            <h1 className="font-Outfit font-extrabold text-[50px] sm:text-[100px] xl:text-[140px] tracking-normal text-white text-center lg:text-left leading-tight drop-shadow-[30px_10px_35px_rgba(0,0,0,0.25)]">
+              AKADEMIK
+            </h1>
+            Akses seluruh materi TPB STEI mulai dari rangkuman materi, latihan
+            soal, tubay, UTS, UAS, praktikum, tugas besar dan seluruh keperluan
+            akademik lainnya!
+          </div>
+        </section>
+        {/* Section 1 */}
+        <section className="flex flex-col items-center justify-center w-full px-[4%] md:px-[8%] z-10 mb-20">
+          <div className="flex flex-row items-center justify-center w-full max-w-full mx-24 mb-8">
+            <div className="">
+              <Image
+                src="/Akademik/left.svg"
+                alt="My SVG"
+                width={8}
+                height={8}
+              />
+            </div>
+            <div className="font-Mo text-[24px] text-white mx-4 font-bold tracking-[1px] leading-tight text-left">
+              AKADEMIK
+            </div>
+            <hr className="border-white border-solid border-t-2 w-full" />
+          </div>
+          <div className="w-full flex flex-col justify-center items-center">
+            <h1 className="mb-6 font-Outfit font-extrabold text-[55px] sm:text-[80px] lg:text-[125px] tracking-normal text-white text-left leading-tight drop-shadow-[30px_10px_35px_rgba(0,0,0,0.25)]">
+              SEMESTER 1
+            </h1>
+            <div className="w-full grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3 md:gap-6 justify-items-center">
+              <div className="w-full">
+                <AkademikCard
+                  imageUrl="/Akademik/Mat.svg"
+                  heading="Matematika IA"
+                  LinkTo="../"
+                >
+                  MA1101
+                </AkademikCard>
+              </div>
+              <div className="w-full">
+                <AkademikCard
+                  imageUrl="/Akademik/Fis.svg"
+                  heading="Fisika Dasar IA"
+                  LinkTo="../"
+                >
+                  FI1101
+                </AkademikCard>
+              </div>
+              <div className="w-full">
+                <AkademikCard
+                  imageUrl="/Akademik/Indo.svg"
+                  heading="Tata Karya Tulis Ilmiah"
+                  LinkTo="../"
+                >
+                  KU1101
+                </AkademikCard>
+              </div>
+              <div className="w-full">
+                <AkademikCard
+                  imageUrl="/Akademik/Ing.svg"
+                  heading="Bahasa Inggris"
+                  LinkTo="../"
+                >
+                  KU1024
+                </AkademikCard>
+              </div>
+              <div className="w-full col-start-auto 2xl:col-start-2">
+                <AkademikCard
+                  imageUrl="/Akademik/Prd.svg"
+                  heading="Pengantar Rekayasa dan Design"
+                  LinkTo="../"
+                >
+                  KU1202
+                </AkademikCard>
+              </div>
+              <div className="w-full">
+                <AkademikCard
+                  imageUrl="/Akademik/Pengkom.svg"
+                  heading="Pengenalan Komputasi"
+                  LinkTo="../"
+                >
+                  KU1102
+                </AkademikCard>
+              </div>
+            </div>
+          </div>
+        </section>
+        {/* section 2 */}
+        <section className="flex flex-col items-center justify-center w-full px-[4%] md:px-[8%] z-10 mb-40">
+          <div className="w-full border-t-2 flex flex-col justify-center items-center">
+            <h1 className="my-6 font-Outfit font-extrabold text-[55px] sm:text-[80px] lg:text-[125px] tracking-normal text-white text-left leading-tight drop-shadow-[30px_10px_35px_rgba(0,0,0,0.25)]">
+              SEMESTER 2
+            </h1>
+            <div className="w-full grid grid-cols-2 px-4 md:px-0 lg:grid-cols-3 2xl:grid-cols-4 gap-3 md:gap-6 justify-items-center">
+              <div className="w-full">
+                <AkademikCard
+                  imageUrl="/Akademik/Mat.svg"
+                  heading="Matematika IIA"
+                  LinkTo="../akademik/MatematikaIIA/"
+                >
+                  MA1201
+                </AkademikCard>
+              </div>
+              <div className="w-full">
+                <AkademikCard
+                  imageUrl="/Akademik/Fis.svg"
+                  heading="Fisika Dasar IIA"
+                  LinkTo="../"
+                >
+                  FI1201
+                </AkademikCard>
+              </div>
+              <div className="w-full">
+                <AkademikCard
+                  imageUrl="/Akademik/Kim.svg"
+                  heading="Kimia Dasar B"
+                  LinkTo="../"
+                >
+                  KU1002
+                </AkademikCard>
+              </div>
+              <div className="w-full">
+                <AkademikCard
+                  imageUrl="/Akademik/Indo.svg"
+                  heading="Komputasi dan Masyarakat"
+                  LinkTo="../"
+                >
+                  II1101
+                </AkademikCard>
+              </div>
+              <div className="w-full col-start-auto 2xl:col-start-2">
+                <AkademikCard
+                  imageUrl="/Akademik/Or.svg"
+                  heading="Olah Raga"
+                  LinkTo="../"
+                >
+                  KU1001
+                </AkademikCard>
+              </div>
+              <div className="w-full">
+                <AkademikCard
+                  imageUrl="/Akademik/Pengkom.svg"
+                  heading="Dasar Pemrograman"
+                  LinkTo="../"
+                >
+                  IF1210
+                </AkademikCard>
+              </div>
+            </div>
+          </div>
         </section>
       </section>
+      <Footer />
     </>
   );
 };