Merge pull request #64 from Bitshala/design1

Design Fixes
Bitshala · Dec 7, 2023 · 6317ac7 · 6317ac7
2 parents 6702fa6 + 5c718fd
commit 6317ac7
Show file tree

Hide file tree

Showing 13 changed files with 217 additions and 258 deletions.
diff --git a/src/components/cohort/CohortCard.astro b/src/components/cohort/CohortCard.astro
@@ -9,7 +9,7 @@ const cardsList = [
   {
     name: "Mastering Bitcoin by Andreas M. ",
     img: "/website-v2/cohort/masteringBitcoin.png",
-    desc: "Donec laoreet congue justo at rhoncus. Nam aliquet suscipit feugiat...",
+    desc: "Donec laoreet congue justo at rhoncus. Nam aliquet suscipit feugiat... am aliquet suscipit feugiat... am aliquet suscipit feugiat... am aliquet suscipit feugiat...",
     url: "/website-v2/cohorts/lbtcl",
   },
   {
@@ -28,38 +28,36 @@ const cardsList = [
 ---
 
 <div
-  class="grid grid-cols-1 gap-10 pl-6 pr-14 md:-translate-y-24 md:grid-cols-2 xl:grid-cols-4"
+  class="grid grid-cols-1 grid-rows-1 gap-10 px-6 md:-translate-y-40 md:grid-cols-2 xl:grid-cols-4"
 >
   {
     cardsList.map((card, index) => (
-      <div>
-        <div
-          class={`rounded-2xl  ${
-            index % 2 == 0 ? "bg-orange" : "bg-black"
-          } my-2  p-3 text-white`}
-        >
-          <img src={card.img} class="w-fit" />
-          <div class="my-2 px-3">
-            <p class="text-sm lg:text-xl">
-              cohort #0{index + 1}
-            </p>
-            <h1 class="text-2xl font-semibold lg:text-4xl">
-              {card.name}
-            </h1>
-            <p class="text-base lg:text-xl">{card.desc}</p>
-          </div>
-          <a href={card.url}>
-            <button
-              class={`my-2 w-full rounded-lg text-base lg:text-xl ${
-                index % 2 == 0 ? "bg-white" : "bg-black"
-              } px-3 py-5 font-semibold ${
-                index % 2 == 0 ? "text-black" : "text-white"
-              } border-2 border-dotted border-white `}
-            >
-              Visit the Cohort Page
-            </button>
-          </a>
+      <div
+        class={`flex flex-col justify-between rounded-2xl ${
+          index % 2 == 0 ? "bg-orange" : "bg-black"
+        } my-2  p-3 text-white`}
+      >
+        <img src={card.img} class="w-fit" />
+        <div class="my-2 px-3">
+          <p class="text-sm lg:text-xl">
+            cohort #0{index + 1}
+          </p>
+          <h1 class="text-2xl font-semibold lg:text-4xl">
+            {card.name}
+          </h1>
+          <p class="text-base lg:text-xl">{card.desc}</p>
         </div>
+        <a href={card.url}>
+          <button
+            class={`my-2 w-full rounded-lg text-base  lg:text-xl ${
+              index % 2 == 0
+                ? "bg-white text-black hover:bg-black hover:text-peach"
+                : "bg-black text-white hover:bg-orange hover:text-white"
+            } border-2 border-dotted border-white px-3 py-5 font-semibold `}
+          >
+            Visit the Cohort Page
+          </button>
+        </a>
       </div>
     ))
   }

diff --git a/src/components/cohort/CollapseList.tsx b/src/components/cohort/CollapseList.tsx
@@ -31,16 +31,16 @@ export const CollapseList = ({
           return (
             <li key={el.q} className="text-2xl">
               <button
-                className="flex h-full w-full items-center justify-between p-4"
+                className="group flex h-full w-full items-center justify-between p-4 hover:text-orange"
                 onClick={() => handleElementClick(index)}
               >
                 {el.q}
                 {!disableClick && (
                   <div
-                    className={` hidden text-3xl transition-transform lg:block ${
+                    className={` hidden text-3xl transition-transform  lg:block ${
                       activeIndex == index
                         ? `rotate-45`
-                        : ``
+                        : `group-hover:rotate-90`
                     }`}
                   >
                     +

diff --git a/src/components/common/Carousel.jsx b/src/components/common/Carousel.jsx
@@ -140,9 +140,9 @@ function Carousel() {
             <div
               key={slideIndex}
               onClick={() => goToSlide(slideIndex)}
-              className="cursor-pointer p-2 text-3xl hover:text-4xl hover:outline-2 hover:outline-white"
+              className={`cursor-pointer p-2 text-3xl ${currentIndex==slideIndex?"":"hover:text-4xl"}`}
             >
-              ⚫
+              {currentIndex==slideIndex?"⚪":"⚫"}
             </div>
           ))}
         </div>

diff --git a/src/components/common/Footer.astro b/src/components/common/Footer.astro
@@ -75,7 +75,7 @@ const list3 = [
     </div>
     <a href="https://discord.gg/Sg8vT3aX" target="_blank">
       <div
-        class="rounded-lg border-2 border-dotted p-2 text-sm hover:bg-orange md:text-xl lg:mr-5 lg:px-10 lg:py-5 xl:text-3xl"
+        class="rounded-lg border-2 border-dotted p-2 text-sm hover:bg-orange hover:text-white md:text-xl lg:mr-5 lg:px-10 lg:py-5 xl:text-3xl"
       >
         Ahh.. I think I'll fit right in
       </div>
@@ -98,7 +98,7 @@ const list3 = [
       {
         list1.map((li) => (
           <a href={li.link} target="_blank">
-            <div class="my-1 text-sm hover:font-bold lg:text-xl">
+            <div class="my-1 text-sm hover:font-header lg:text-xl">
               {li.name}
             </div>
           </a>
@@ -109,7 +109,7 @@ const list3 = [
       {
         list2.map((li) => (
           <a href={li.link} target="_blank">
-            <div class="my-1 text-sm hover:font-bold lg:text-xl">
+            <div class="my-1 text-sm hover:font-header lg:text-xl">
               {li.name}
             </div>
           </a>
@@ -120,7 +120,7 @@ const list3 = [
       {
         list3.map((li) => (
           <a href={li.link}>
-            <div class="my-1 text-sm hover:font-bold lg:text-xl">
+            <div class="my-1 text-sm hover:font-header lg:text-xl">
               {li.name}
             </div>
           </a>
@@ -129,7 +129,7 @@ const list3 = [
     </div>
     <div class="m-3 hidden p-3 lg:inline">
       <div class="mt-80 flex justify-end">
-        Back to top ⬆️
+        Cypherpunks write code !
       </div>
     </div>
   </div>

diff --git a/src/components/common/Header.astro b/src/components/common/Header.astro
@@ -1,5 +1,4 @@
 ---
-import Hamburger from "./hamburger";
 export interface Props {
   heading: string;
   subheading: string;
@@ -24,19 +23,8 @@ const {
     backgroundRepeat: "no-repeat",
     backgroundPosition: "center",
   }}
-  class="m-auto flex min-h-[90vh] flex-col items-center justify-between gap-12 rounded-lg bg-black px-5 py-[10%] pt-4"
+  class="m-auto flex min-h-[90vh] flex-col items-center justify-between bg-black px-5 pb-12 pt-32 md:rounded-lg"
 >
-  <div class="mb-10 flex w-full justify-between">
-    <a href="/website-v2">
-      <img
-        src="/website-v2/footer/logo.png"
-        class="h-16"
-        alt="Bitshala Logo"
-      />
-    </a>
-    <Hamburger client:only />
-  </div>
-
   <h1
     class={`text-center font-header ${headingColor} text-3xl  lg:text-8xl`}
   >

diff --git a/src/components/common/hamburger.tsx b/src/components/common/hamburger.tsx
@@ -11,7 +11,7 @@ import {
 const Hamburger = () => {
   const [open, setOpen] = useState(false);
   const handleClick = () => {
-    setOpen(true);
+    setOpen(!open);
   };
   const handleClose = () => {
     setOpen(false);
@@ -20,7 +20,7 @@ const Hamburger = () => {
   return (
     <>
       <button
-        className="relative h-12 w-12 rounded-lg  bg-[#f7f7f74d]  focus:outline-none"
+        className="relative h-16 w-16 rounded-lg bg-black focus:outline-none"
         onClick={handleClick}
       >
         <span className="sr-only">Open main menu</span>
@@ -84,14 +84,8 @@ const SideMenu = () => {
     },
   ];
   return (
-    <div className="flex h-full w-full flex-col pb-[10%]">
-      <a href="/website-v2">
-        <img
-          src="/website-v2/footer/logo.png"
-          className="h-16"
-        />
-      </a>
-      <div className="flex">
+    <div className="flex h-full w-full flex-col pb-[10%] pt-16">
+      <div className="mb-7 flex">
         <hr className="my-10 w-1/3 border-0 bg-orange outline outline-orange" />
         <div className="my-6 hidden gap-4 px-10 lg:flex">
           <a
@@ -130,7 +124,7 @@ const SideMenu = () => {
                 <p className="flex w-80 items-center font-header text-3xl font-bold text-white hover:text-orange lg:text-4xl">
                   {link.name}
                 </p>
-                <p className="  mx-10 mt-1 hidden items-center justify-center text-xl text-peach  lg:flex">
+                <p className="mx-10 mt-1 hidden items-center justify-center text-xl text-peach lg:flex">
                   {link.desc}
                 </p>
               </div>