Merge branch 'main' into feat/our-products

src/app/components/ContributorsCard.tsx

@@ -1,7 +1,9 @@
 export default function ContributorsCard({url, name, role} : any) : JSX.Element {
     return (
-        <div className="flex items-start gap-2.5 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.20)] px-5 py-4 rounded-[20px] max-w-[376px] max-h-[138px]">
-            <div className="w-[160px] h-[106px]" style={{background:`url(${url})`}}></div>
+        <div className="flex items-start gap-2.5 
+                        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.20)] sm:px-5 px-3 sm:py-4 py-2.5 rounded-[20px] 
+                        sm:max-w-[376px] max-w-[304px] sm:max-h-[138px] max-h-[100px]">
+            <div className="sm:w-[160px] w-[120px] sm:h-[106px] h-[80px]" style={{background:`url(${url})`}}></div>
             <div className="flex flex-col max-w-[166px]">
                 <p className="font-bold text-base text-[#45349F]">{name}</p>
                 <p className="font-normal text-base text-[#45349F]">{role}</p>

src/app/sections/Footer.tsx → src/app/components/Footer.tsx

@@ -3,19 +3,19 @@ import Image from "next/image";
 
 export default function Footer() {
   return (
-    <footer className="flex sm:flex-row justify-between px-[30px] py-[40px] sm:px-[76px] sm:py-12 text-sm flex-col text-center sm:text-left gap-10 sm:gap-0 max-w-sm h-fit sm:max-w-[840px] xl:max-w-[1440px]">
-      <div className="sm:w-fit sm:h-fit flex flex-col justify-between sm:gap-5 xl:gap-4 xl:h-[188px]">
-        <div className="flex xl:flex-row items-start justify-between flex-col gap-5 sm:w-[340px] xl:w-fit xl:gap-[116px]">
+    <footer className="flex md:flex-row justify-between px-[30px] py-[40px] md:px-[76px] md:py-12 text-sm flex-col text-center md:text-left gap-10 md:gap-0 max-w-sm h-fit md:max-w-[840px] lg:max-w-[1440px] mx-auto">
+      <div className="md:w-fit md:h-fit flex flex-col justify-between md:gap-5 lg:gap-4 lg:h-[188px]">
+        <div className="flex lg:flex-row items-start justify-between flex-col gap-5 md:w-[340px] lg:w-fit lg:gap-[116px]">
           <Image
-            className="mx-auto sm:mx-0"
+            className="mx-auto md:mx-0"
             src="/assets/logo.svg"
             alt="Ristek Fasilkom UI"
             width={254}
             height={48}
           />
 
           <div className="flex flex-col gap-4">
-            <div className="flex flex-row items-center gap-2 justify-center sm:justify-start">
+            <div className="flex flex-row items-center gap-2 justify-center md:justify-start">
               <Image
                 src="/icons/location.svg"
                 alt="location"
@@ -25,7 +25,7 @@ export default function Footer() {
               <p className="font-semibold">Universitas Indonesia, Depok</p>
             </div>
 
-            <p className="xl:w-[430px]">
+            <p className="lg:w-[430px]">
               RISTEK is a student-founded non-profit organization from
               Universitas Indonesia's Faculty of Computer Science, supported by
               a United States of America 501(c)(3) non-profit.
@@ -38,25 +38,25 @@ export default function Footer() {
           </div>
         </div>
 
-        <p className="hidden sm:block">© 2023 RISTEK Fasilkom</p>
+        <p className="hidden md:block">© 2023 RISTEK Fasilkom</p>
       </div>
 
-      <div className="w-fit h-fit sm:w-fit sm:h-[233px] xl:h-[188px] flex flex-col sm:justify-between items-center gap-5">
-        <div className="flex flex-row gap-4 sm:gap-5">
+      <div className="w-fit h-fit md:w-fit md:h-[233px] lg:h-[188px] flex flex-col md:justify-between items-center gap-5">
+        <div className="flex flex-row gap-4 md:gap-5">
           <div className="flex flex-col gap-2">
-            <p className="font-bold text-xs sm:text-sm">
+            <p className="font-semibold text-xs md:text-sm">
               Official Learning Partner
             </p>
             <div className="flex flex-row gap-3">
               <Image
-                className="w-[84px] sm:w-[92px]"
+                className="w-[84px] md:w-[92px]"
                 src="/icons/gojek.svg"
                 alt="Gojek logo"
                 width={92}
                 height={24}
               />
               <Image
-                className="w-[60px] sm:w-[67px]"
+                className="w-[60px] md:w-[67px]"
                 src="/icons/goto-financial.svg"
                 alt="Gojek Financial"
                 width={67}
@@ -66,17 +66,17 @@ export default function Footer() {
           </div>
 
           <Image
-            className="h-[70px] sm:h-[78px]"
+            className="h-[70px] md:h-[78px]"
             src="/icons/vertical-divider.svg"
             alt=""
             width={1}
             height={78}
           />
 
           <div className="flex flex-col gap-4 items-center">
-            <p className="font-bold text-xs sm:text-sm">Accelerated by</p>
+            <p className="font-semibold text-xs md:text-sm">Accelerated by</p>
             <Image
-              className="w-[85px] sm:w-[93px]"
+              className="w-[85px] md:w-[93px]"
               src="/icons/hackplus.svg"
               alt="Hack+ logo"
               width={92.96}
@@ -87,7 +87,7 @@ export default function Footer() {
 
         <div
           id="socmeds-container"
-          className="gap-8 flex flex-row justify-between xl:mr-auto"
+          className="gap-8 flex flex-row justify-between lg:mr-auto"
         >
           <Image
             src="/icons/instagram.svg"
@@ -126,7 +126,7 @@ export default function Footer() {
         </div>
       </div>
 
-      <p className="sm:hidden">© 2023 RISTEK Fasilkom</p>
+      <p className="md:hidden">© 2023 RISTEK Fasilkom</p>
     </footer>
   );
 }

src/app/components/NavigationBar.tsx

@@ -0,0 +1,41 @@
+
+export default function NavigationBar() {
+    return (
+      <div className="flex flex-row fixed z-[2] bg-white h-[64px] w-[100%] 
+                      lg:pr-[80px] sm:pr-[40px] pr-[32px]
+                      lg:pl-[80px] sm:pl-[40px] pl-[32px]
+                      items-center justify-between">
+
+        <img src={"/assets/logo.svg"} className="sm:block hidden"></img>
+        <img src={"/assets/logogram.svg"} className="sm:hidden block"></img>
+
+        <div className="hidden md:flex flex-wrap items-center gap-[8px]">
+
+            <a href="#about">
+                <p className="lg:pr-[32px] pr-[24px] lg:pl-[32px] pl-[24px] justify-center items-center">
+                    About
+                </p>
+            </a>
+
+            <a href="#products">
+                <p className="lg:pr-[32px] pr-[24px] lg:pl-[32px] pl-[24px] justify-center items-center">
+                    Our Products
+                </p>
+            </a>
+
+            <a href="">
+                <div className="flex flex-row lg:pr-[32px] pr-[24px] lg:pl-[32px] pl-[24px] justify-center items-center gap-[8px]">
+                    <img src={"/assets/chat.svg"}></img>
+                    <p className="text-[#5038BC]">
+                        Chill With Us
+                    </p>
+                </div>
+            </a>
+
+        </div>
+
+        <img src={"/assets/menu.svg"} className="flex md:hidden"></img>
+
+      </div>
+    )
+}

src/app/globals.css

@@ -4,6 +4,7 @@
 
 @import 'slick-carousel/slick/slick.css';
 @import 'slick-carousel/slick/slick-theme.css';
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap');
 
 :root {
   --foreground-rgb: 0, 0, 0;
@@ -19,33 +20,31 @@
   }
 }
 
-.hero {
-    @apply flex pt-[64px] h-[var(--height-h-screen,800px)] items-start shrink-0;
-    background: linear-gradient(90deg, rgba(201, 206, 252, 0.00) 0%, #C9CEFC 100%);
+body {
+    font-family: 'Poppins', sans-serif;
 }
 
-.navigation {
-    display: flex;
-
-    @media (max-width: 840px) {
-        display: none;
-    }
-}
-
-.nav-mobile {
-    display: none;
-
-    @media (max-width: 840px) {
-        display: flex;
-    }
+.hero {
+    background: linear-gradient(90deg, rgba(201, 206, 252, 0.00) 0%, #C9CEFC 100%);
 }
 
 .slide {
     transform: scale(0.5);
-    transition: transform 300ms;
+    transition: transform 800ms;
     transition-timing-function: ease-in-out
 }
 
 .activeSlide{
     transform: scale(1);
+    transition: transform 800ms;
+    transition-timing-function: ease-in-out
 }
+
+.slick-track{
+    display: flex;
+    align-items: center;
+}
+
+.edge-fade{
+    background: linear-gradient(90deg, #F1F5F9 0%, rgba(241, 245, 249, 0.00) 100%);
+}

src/app/page.tsx

@@ -1,8 +1,8 @@
 import About from "./sections/About";
 import Contributors from "./sections/Contributors";
-import Footer from "./sections/Footer";
+import Footer from "./components/Footer";
 import HeroSection from "./sections/HeroSection";
-import NavigationBar from "./sections/NavigationBar";
+import NavigationBar from "./components/NavigationBar";
 import OurProducts from "./sections/OurProducts";
 import Partners from "./sections/Partners";
 

src/app/sections/About.tsx

@@ -1,28 +1,50 @@
 export default function About() {
     return (
-      <div className="flex items-center bg-[#F1F5F9] h-[var(--height-h-screen,800px)] items-start shrink-0" id="about">
+        <div className="flex
+                        relative 
+                        bg-[#F1F5F9] 
+                        w-[100%] 
+                        gap-10
+                        sm:pl-20 pl-8 
+                        sm:pr-20 pr-8 
+                        sm:justify-center items-center
+                        lg:flex-row flex-col 
+                        lg:h-[var(--height-h-screen,800px)] sm:h-[1200px] h-[800px]">
 
-            <img src={"/assets/decor-side.svg"} style={{position:"absolute", left:"0"}}></img>
-            <img src={"/assets/decor-side.svg"} style={{position:"absolute", right:"0", transform: "rotate(180deg)"}}></img>
+            <img src={"/assets/monitor.svg"} className="relative lg:max-w-[55%] z-[0] left-0 lg:mt-0 sm:mt-[-128px] mt-0"></img>
 
-            <div className="flex w-[100%] pl-20 pr-20 justify-center items-center content-center gap-10 flex-wrap;">
-                <img src={"/assets/glow.svg"} className="absolute z-[0] left-0"></img>
-                <img src={"/assets/monitor.svg"} className="z-[1]"></img>
-                <div className="flex flex-col items-start gap-5 max-w-[50%]">
-                    <p className="text-[color:var(--primary-colors-purple-heart,#5038BC)] text-7xl font-bold leading-[72px];">
-                        About <br/>
-                        RISTEK OSS
-                    </p>
-                    <p className="text-black text-justify text-lg not-italic font-normal leading-7;">
-                        RISTEK Open Source is a place of limitless inspiration and innovation, where young builders 
-                        can work together on groundbreaking projects in an open-source ecosystem.
-                    </p>
-                    <p className="text-black text-justify text-lg not-italic font-normal leading-7;">
-                    Join our community that values open collaboration, knowledge exchange, 
-                    and making a positive impact in the world. Let's shape the future of technology together!
-                    </p>
-                </div>
+            {/* Main Content */}
+            <div className="flex flex-col lg:items-start items-center z-[1] 
+                            gap-[20px] lg:text-left text-center
+                            lg:ml-[-40px] ml-0
+                            lg:pl-0 sm:pl-0 md:pl-20 pl-0 
+                            lg:pl-0 sm:pr-0 md:pr-20 pr-0
+                            lg:mt-0 sm:mt-[-128px] mt-[-84px]">           
+
+                <p className="text-[#5038BC] sm:text-7xl text-4xl font-bold">
+                    About <br/>
+                    RISTEK OSS
+                </p>
+
+                <p className="text-justify sm:text-xl text-base">
+                    RISTEK Open Source is a place of limitless inspiration and innovation, where young builders 
+                    can work together on groundbreaking projects in an open-source ecosystem.
+                </p>
+
+                <p className="text-justify sm:text-xl text-base">
+                Join our community that values open collaboration, knowledge exchange, 
+                and making a positive impact in the world. Let's shape the future of technology together!
+                </p>
             </div>
-      </div>
+
+            {/* Decoration */}
+            <img src={"/assets/decor-side.svg"} className="md:block hidden absolute left-0"></img>
+            <img src={"/assets/decor-side.svg"} className="md:block hidden absolute right-0"></img>
+
+            <img src={"/assets/decor-corner-1.svg"} className="md:hidden absolute block right-0 top-0"></img>
+            <img src={"/assets/decor-corner-2.svg"} className="md:hidden absolute block left-0 top-0"></img>
+            <img src={"/assets/decor-corner-1.svg"} className="md:hidden absolute block left-0 bottom-0 rotate-180"></img>
+            <img src={"/assets/decor-corner-2.svg"} className="md:hidden absolute block right-0 bottom-0 rotate-180"></img>
+        </div>
     )
 }