feat: experties and footer

docusaurus.config.ts

@@ -55,7 +55,7 @@ const config: Config = {
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
-            "https://github.com/zuni-lab/zuni-lab.github.io/tree/main/projects",
+            "https://github.com/zuni-lab/zuni-lab.github.io/tree/main",
         },
         blog: {
           path: 'members',
@@ -97,7 +97,7 @@ const config: Config = {
         },
         { to: '/members', label: 'Members', position: 'left' },
         {
-          href: "https://github.com/facebook/docusaurus",
+          href: "https://github.com/zuni-lab",
           label: "GitHub",
           position: "right",
         },

projects/cex.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 3
+---
+
+# ZUNI

projects/dex.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 4
+---
+
+# ZUNI

projects/2.mdx → projects/zswap.md

@@ -2,4 +2,4 @@
 sidebar_position: 2
 ---
 
-# MARKDOWN FEATURES
+# ZUNI

src/components/AboutUs.tsx

@@ -0,0 +1,18 @@
+import { Container } from "./Containter";
+
+export const AboutUs = () => {
+  return (
+    <div className="content px-28 mt-20">
+      <h1>About us</h1>
+      <Container>
+        <p>
+          <span className="font-bold italic mr-2">ZUNI Laboratory</span>
+          is made up of engineers, researchers, and artists, all united by a
+          shared passion for leveraging the power of decentralized technologies.
+          We are committed to pushing the boundaries of what's possible and
+          creating applications that enrich and enhance people's lives.
+        </p>
+      </Container>
+    </div>
+  );
+};

src/components/Containter.tsx

@@ -9,7 +9,7 @@ export const Container = (props: {
     <div
       className={cx(
         styles.container,
-        "font-medium text-2xl mt-4",
+        "font-medium text-2xl mt-4 text-black",
         props.className
       )}
     >

src/components/Experties.tsx

@@ -0,0 +1,39 @@
+import { Container } from "./Containter";
+
+export const Experties = () => {
+  return (
+    <div className="content px-24 mt-16">
+      <h1>Experties</h1>
+      <Container className="flex flex-wrap text-xl">
+        <div className="w-1/2">
+          <h1 className="text-2xl">💰 Crypto Exchange</h1>
+          <p>
+            We are building a decentralized exchange that allows users to trade
+            cryptocurrencies without the need for a central authority.
+          </p>
+        </div>
+        <div className="w-1/2">
+          <h1 className="text-2xl">🏦 Decentralized Finance Primitives</h1>
+          <p>
+            We are developing a suite of financial tools that enable users to
+            access a range of decentralized financial services.
+          </p>
+        </div>
+        <div className="w-1/2">
+          <h1 className="text-2xl">🧑🏻‍💻 Privacy Solutions</h1>
+          <p>
+            We are researching and developing privacy solutions that enable
+            users to protect their data and maintain their privacy online.
+          </p>
+        </div>
+        <div className="w-1/2">
+          <h1 className="text-2xl">🔐 Cryptography researching</h1>
+          <p>
+            We are exploring the latest advancements in cryptography to build
+            secure and private applications.
+          </p>
+        </div>
+      </Container>
+    </div>
+  );
+};

src/components/TechStack.tsx

@@ -19,78 +19,69 @@ import { SoliditySvg } from "./icons/SoliditytSvg";
 
 export const TechStack = () => {
   return (
-    <Container className="grid grid-cols-6 gap-x-8 gap-y-16 !py-8">
-      <div className="h-32 flex items-center justify-center">
-        <SoliditySvg width="100%" height="132%" />
-      </div>
-      <div className="h-32 flex items-center justify-center">
-        <RustSvg width="100%" height="100%" />
-      </div>
-      <div className="h-32 flex items-center justify-center">
-        <GoSvg width="100%" height="100%" />
-      </div>
-
-      <div className="h-32 flex items-center justify-center">
-        <JSSvg width="100%" height="100%" />
-      </div>
-      <div className="h-32 flex items-center justify-center col-span-2">
-        <img src="img/circom.png" alt="circom" width="100%" height="100%" />
-      </div>
-
-      <div className="h-32 flex items-center justify-center">
-        <PostgresSvg width="100%" height="100%" />
-      </div>
-
-      <div className="h-32 flex items-center justify-center">
-        <MongoDbSvg width="100%" height="180%" />
-      </div>
-
-      <div className="h-32 flex items-center justify-center">
-        <FlutterSvg width="100%" height="100%" />
-      </div>
-
-      <div className="h-32 flex items-center justify-center">
-        <NextJSSvg width="100%" height="100%" />
-      </div>
-
-      <div className="h-32 flex items-center justify-center">
-        <K8SSvg width="100%" height="100%" />
-      </div>
-
-      <div className="h-32 flex items-center justify-center">
-        <AwsSvg width="100%" height="100%" />
-      </div>
-      <div className="my-4 col-span-6 flex items-center justify-center font-semibold text-3xl">
-        with <span className="text-blue-500 mx-1">shipped</span> project on
-      </div>
-
-      <div className="col-span-6 flex flex-wrap justify-center items-center gap-y-8">
-        <div className="h-32 w-1/4 flex items-center justify-center">
-          <EthereumSvg width="100%" height="100%" />
+    <div className="content px-28 mt-20">
+      <h1>Tech stack</h1>
+      <Container className="grid grid-cols-6 gap-x-8 gap-y-16 !py-8">
+        <div className="h-[6.5rem] flex items-center justify-center">
+          <SoliditySvg width="100%" height="132%" />
         </div>
-        <div className="h-32 w-1/4 flex items-center justify-center">
-          <SolanaSvg width="100%" height="100%" />
+        <div className="h-[6.5rem] flex items-center justify-center">
+          <RustSvg width="100%" height="100%" />
         </div>
-
-        <div className="h-32 w-1/4 flex items-center justify-center">
-          <BSCSvg width="100%" height="100%" />
+        <div className="h-[6.5rem] flex items-center justify-center">
+          <GoSvg width="100%" height="100%" />
         </div>
-
-        <div className="h-32 w-1/4 flex items-center justify-center">
-          <FlowSvg width="100%" height="100%" />
+        <div className="h-[6.5rem] flex items-center justify-center">
+          <JSSvg width="100%" height="100%" />
         </div>
-
-        <div className="h-32 w-1/4 flex items-center justify-center">
-          <NearSvg width="100%" height="100%" />
+        <div className="h-[6.5rem] flex items-center justify-center col-span-2">
+          <img src="img/circom.png" alt="circom" width="100%" height="100%" />
         </div>
-
-        <div className="h-32 w-1/4 flex items-center justify-center">
-          <PolkadotSvg width="100%" height="100%" />
+        <div className="h-[6.5rem] flex items-center justify-center">
+          <PostgresSvg width="100%" height="100%" />
+        </div>
+        <div className="h-[6.5rem] flex items-center justify-center">
+          <MongoDbSvg width="100%" height="180%" />
+        </div>
+        <div className="h-[6.5rem] flex items-center justify-center">
+          <FlutterSvg width="100%" height="100%" />
+        </div>
+        <div className="h-[6.5rem] flex items-center justify-center">
+          <NextJSSvg width="100%" height="100%" />
+        </div>
+        <div className="h-[6.5rem] flex items-center justify-center">
+          <K8SSvg width="100%" height="100%" />
+        </div>
+        <div className="h-[6.5rem] flex items-center justify-center">
+          <AwsSvg width="100%" height="100%" />
+        </div>
+        <div className="my-4 col-span-6 flex items-center justify-center font-semibold text-3xl">
+          with <span className="text-blue-500 mx-1">shipped</span> project on
         </div>
-        <div className="h-32 w-1/4 flex items-center justify-center">
-          <IconSvg width="100%" height="100%" />
+        <div className="col-span-6 flex flex-wrap justify-center items-center gap-y-8">
+          <div className="h-32 w-1/4 flex items-center justify-center">
+            <EthereumSvg width="100%" height="100%" />
+          </div>
+          <div className="h-32 w-1/4 flex items-center justify-center">
+            <SolanaSvg width="100%" height="100%" />
+          </div>
+          <div className="h-32 w-1/4 flex items-center justify-center">
+            <BSCSvg width="100%" height="100%" />
+          </div>
+          <div className="h-32 w-1/4 flex items-center justify-center">
+            <FlowSvg width="100%" height="100%" />
+          </div>
+          <div className="h-32 w-1/4 flex items-center justify-center">
+            <NearSvg width="100%" height="100%" />
+          </div>
+          <div className="h-32 w-1/4 flex items-center justify-center">
+            <PolkadotSvg width="100%" height="100%" />
+          </div>
+          <div className="h-32 w-1/4 flex items-center justify-center">
+            <IconSvg width="100%" height="100%" />
+          </div>
         </div>
-      </div>
-    </Container>
+      </Container>
+    </div>
   );
 };

src/components/icons/DiscordSvg.tsx

@@ -0,0 +1,22 @@
+export const DiscordSvg = (props) => {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_1008_2)">
+        <path
+          d="M40.634 8.31118C37.5747 6.90741 34.294 5.87318 30.8638 5.28084C30.8013 5.2694 30.7389 5.29797 30.7067 5.35511C30.2848 6.10554 29.8175 7.08454 29.4902 7.85403C25.8008 7.30169 22.1304 7.30169 18.5166 7.85403C18.1893 7.06744 17.705 6.10554 17.2811 5.35511C17.249 5.29988 17.1866 5.27131 17.1241 5.28084C13.6958 5.87129 10.4151 6.90552 7.35387 8.31118C7.32737 8.3226 7.30465 8.34167 7.28958 8.36641C1.06678 17.6631 -0.6379 26.7313 0.19836 35.6871C0.202144 35.7309 0.22674 35.7729 0.260796 35.7995C4.36642 38.8146 8.34341 40.645 12.2466 41.8582C12.309 41.8773 12.3752 41.8545 12.415 41.803C13.3383 40.5422 14.1613 39.2127 14.867 37.8146C14.9086 37.7327 14.8688 37.6356 14.7837 37.6032C13.4783 37.108 12.2352 36.5042 11.0395 35.8186C10.9449 35.7633 10.9373 35.628 11.0243 35.5633C11.2759 35.3747 11.5276 35.1785 11.7679 34.9805C11.8114 34.9443 11.872 34.9366 11.9231 34.9595C19.7786 38.546 28.2831 38.546 36.0459 34.9595C36.097 34.9348 36.1576 34.9424 36.203 34.9786C36.4433 35.1766 36.6949 35.3747 36.9484 35.5633C37.0354 35.628 37.0298 35.7633 36.9352 35.8186C35.7394 36.5175 34.4964 37.108 33.189 37.6013C33.1039 37.6337 33.0661 37.7327 33.1077 37.8146C33.8285 39.2107 34.6515 40.5402 35.5578 41.8011C35.5957 41.8545 35.6637 41.8773 35.7262 41.8582C39.6483 40.645 43.6252 38.8146 47.7309 35.7995C47.7668 35.7729 47.7895 35.7328 47.7933 35.689C48.7942 25.3352 46.117 16.3413 40.6964 8.3683C40.6832 8.34167 40.6605 8.3226 40.634 8.31118ZM16.04 30.234C13.675 30.234 11.7263 28.0627 11.7263 25.3961C11.7263 22.7296 13.6372 20.5583 16.04 20.5583C18.4617 20.5583 20.3916 22.7486 20.3538 25.3961C20.3538 28.0627 18.4428 30.234 16.04 30.234ZM31.9895 30.234C29.6245 30.234 27.6758 28.0627 27.6758 25.3961C27.6758 22.7296 29.5867 20.5583 31.9895 20.5583C34.4113 20.5583 36.3411 22.7486 36.3033 25.3961C36.3033 28.0627 34.4113 30.234 31.9895 30.234Z"
+          fill="#5865F2"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1008_2">
+          <rect width="48" height="48" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

src/components/icons/GithubSvg.tsx

@@ -0,0 +1,24 @@
+export const GithubSvg = (props) => {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_910_21)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M24.0199 0C10.7375 0 0 10.8167 0 24.1983C0 34.895 6.87988 43.9495 16.4241 47.1542C17.6174 47.3951 18.0545 46.6335 18.0545 45.9929C18.0545 45.4319 18.0151 43.509 18.0151 41.5055C11.3334 42.948 9.94198 38.6209 9.94198 38.6209C8.86818 35.8164 7.27715 35.0956 7.27715 35.0956C5.09022 33.6132 7.43645 33.6132 7.43645 33.6132C9.86233 33.7735 11.1353 36.0971 11.1353 36.0971C13.2824 39.7827 16.7422 38.7413 18.1341 38.1002C18.3328 36.5377 18.9695 35.456 19.6455 34.8552C14.3163 34.2942 8.70937 32.211 8.70937 22.9161C8.70937 20.2719 9.66321 18.1086 11.1746 16.4261C10.9361 15.8253 10.1008 13.3409 11.4135 10.0157C11.4135 10.0157 13.4417 9.3746 18.0146 12.4996C19.9725 11.9699 21.9916 11.7005 24.0199 11.6982C26.048 11.6982 28.1154 11.979 30.0246 12.4996C34.5981 9.3746 36.6262 10.0157 36.6262 10.0157C37.9389 13.3409 37.1031 15.8253 36.8646 16.4261C38.4158 18.1086 39.3303 20.2719 39.3303 22.9161C39.3303 32.211 33.7234 34.2539 28.3544 34.8552C29.2296 35.6163 29.9848 37.0583 29.9848 39.3421C29.9848 42.5871 29.9454 45.1915 29.9454 45.9924C29.9454 46.6335 30.383 47.3951 31.5758 47.1547C41.12 43.9491 47.9999 34.895 47.9999 24.1983C48.0392 10.8167 37.2624 0 24.0199 0Z"
+          fill="#24292F"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_910_21">
+          <rect width="48" height="48" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

src/components/icons/TeleSvg.tsx

@@ -0,0 +1,39 @@
+export const TeleSvg = (props) => {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_318_61)">
+        <path
+          d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z"
+          fill="url(#paint0_linear_318_61)"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M10.8638 23.7466C17.8603 20.6984 22.5257 18.6888 24.8601 17.7179C31.5251 14.9456 32.91 14.4641 33.8127 14.4482C34.0113 14.4447 34.4552 14.4939 34.7427 14.7272C34.9855 14.9242 35.0523 15.1904 35.0843 15.3771C35.1163 15.5639 35.1561 15.9895 35.1244 16.3219C34.7633 20.1169 33.2004 29.3263 32.4053 33.5767C32.0689 35.3752 31.4065 35.9783 30.7652 36.0373C29.3714 36.1655 28.3131 35.1162 26.9632 34.2313C24.8509 32.8467 23.6576 31.9847 21.6072 30.6336C19.2377 29.0721 20.7738 28.2139 22.1242 26.8113C22.4776 26.4442 28.6183 20.8587 28.7372 20.352C28.7521 20.2886 28.7659 20.0524 28.6255 19.9277C28.4852 19.803 28.2781 19.8456 28.1286 19.8795C27.9168 19.9276 24.5423 22.158 18.0053 26.5707C17.0475 27.2284 16.1799 27.5489 15.4026 27.5321C14.5457 27.5135 12.8973 27.0475 11.6719 26.6492C10.1689 26.1606 8.97432 25.9023 9.07834 25.0726C9.13252 24.6404 9.72767 24.1984 10.8638 23.7466Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_318_61"
+          x1="24"
+          y1="0"
+          x2="24"
+          y2="47.644"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#2AABEE" />
+          <stop offset="1" stop-color="#229ED9" />
+        </linearGradient>
+        <clipPath id="clip0_318_61">
+          <rect width="48" height="48" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

src/css/custom.css

@@ -35,12 +35,12 @@
 
 .sectionMain {
   width: 100%;
-  height: 1283px;
+  /* height: 1283px; */
   flex-shrink: 0;
   background-image: url(/static/img/background/mv.png);
-  background-size: cover;
+  background-size: auto;
   background-position: 50% -40px;
-  background-repeat: no-repeat;
+  background-repeat: repeat-y;
 }
 
 .footer {