add: neurIPS 2024 (#427)

add: neurIPS 2024

package.json

@@ -1,7 +1,7 @@
 {
   "name": "akash_network",
   "type": "module",
-  "version": "0.0.1",
+  "version": "1.2.1",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

src/components/neurips/InfoCards.astro

@@ -0,0 +1,40 @@
+---
+const cards = [
+  {
+    image: "/images/neurips/card1.jpg",
+    className: "object-right",
+    title:
+      "Listen to Greg Osuri lay out the future of open-source cloud compute",
+    content:
+      "Greg Osuri, the Founder of Akash, will present the vision for the future of open-source cloud compute for AI and machine learning on December 10th at 10:30 AM in East Exhibition Hall C.",
+  },
+  {
+    image: "/images/neurips/card2.png",
+    title: "Check out the latest from Akash at booth 229",
+    content:
+      "Discover how open-source cloud compute is transforming AI and machine learning. Meet the core team and community to learn more about Akash and see live demos.",
+  },
+];
+---
+
+<div
+  class="container-small grid max-w-7xl grid-cols-1 gap-6 py-10 md:grid-cols-2 md:py-20 lg:gap-10"
+>
+  {
+    cards.map((card, index) => (
+      <div class="overflow-hidden rounded-lg border bg-background p-6">
+        <img
+          src={card.image}
+          alt={card.title}
+          class="aspect-[16/10] w-full rounded-md object-cover md:aspect-[16/7] "
+        />
+        <div class=" mt-6 md:mt-8">
+          <h3 class="mb-2  text-xl  font-semibold md:mb-4 md:text-2xl">
+            {card.title}
+          </h3>
+          <p class="text-para">{card.content}</p>
+        </div>
+      </div>
+    ))
+  }
+</div>

src/components/neurips/IntegrationSwiper.tsx

@@ -0,0 +1,171 @@
+import type { CollectionEntry } from "astro:content";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import { Swiper, SwiperSlide } from "swiper/react";
+import DescriptionExpand from "../ecosystem-pages/description-expand";
+import { DiscordIcon, GithubIcon, TwitterIcon } from "../header/icons";
+
+type Project = CollectionEntry<"Ecosystem_Page">;
+
+const IntegrationSwiper = ({ projects }: { projects: Project[] }) => {
+  return (
+    <div className="mt-12 flex w-full select-none flex-col gap-2">
+      <h3 className="mb-2 px-5 text-left text-sm  font-medium text-white/60 md:px-14  md:text-base lg:px-[100px] ">
+        Explore the Akash Ecosystem
+      </h3>
+      <Swiper
+        spaceBetween={30}
+        slidesPerView={1.2}
+        slidesOffsetBefore={20}
+        slidesOffsetAfter={20}
+        breakpoints={{
+          640: {
+            slidesPerView: 2,
+            slidesOffsetBefore: 56,
+            slidesOffsetAfter: 56,
+          },
+          1024: {
+            slidesPerView: 2.9,
+            slidesOffsetBefore: 100,
+            slidesOffsetAfter: 100,
+          },
+          1280: {
+            slidesPerView: 3.9,
+            slidesOffsetBefore: 100,
+            slidesOffsetAfter: 100,
+          },
+        }}
+        className="w-full [&_.swiper-wrapper]:!flex [&_.swiper-wrapper]:!items-stretch"
+      >
+        {projects.map((project) => (
+          <SwiperSlide key={project.data.projectTitle} className="!h-auto">
+            <Card project={project} />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+};
+
+export default IntegrationSwiper;
+
+const Card = ({ project }: { project: Project }) => {
+  const {
+    projectImage,
+    projectTitle,
+    description,
+    twitterLink,
+    discordLink,
+    githubLink,
+    websiteLink,
+  } = project.data;
+  return (
+    <div className="flex h-full flex-col rounded-[8px] border bg-background2 px-5 pb-5 pt-5 shadow-sm">
+      <div className="overflow-hidden rounded-[4px]">
+        <img
+          className="w-full transform object-cover"
+          src={projectImage.src}
+          alt={`banner image for the post`}
+        />
+      </div>
+
+      <div className="mt-4">
+        <h4 className="text-base font-bold leading-normal">{projectTitle}</h4>
+
+        {(twitterLink || discordLink || githubLink || websiteLink) && (
+          <div className="mt-4 flex items-center gap-x-4">
+            {twitterLink && (
+              <a
+                href={twitterLink}
+                target="_blank"
+                className="block cursor-pointer text-lightForeground"
+              >
+                <TwitterIcon />
+              </a>
+            )}
+            {discordLink && (
+              <a
+                href={discordLink}
+                target="_blank"
+                className="block cursor-pointer  text-lightForeground"
+              >
+                <DiscordIcon />
+              </a>
+            )}
+            {githubLink && (
+              <a
+                href={githubLink}
+                target="_blank"
+                className="block cursor-pointer  text-lightForeground"
+              >
+                <GithubIcon />
+              </a>
+            )}
+            {websiteLink && (
+              <a
+                href={websiteLink}
+                target="_blank"
+                className="block cursor-pointer  text-lightForeground"
+              >
+                <svg
+                  width="20"
+                  height="21"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  stroke="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g clip-path="url(#clip0_2861_7799)">
+                    <path
+                      d="M18.3307 10C18.3307 5.39765 14.5998 1.66669 9.9974 1.66669C5.39502 1.66669 1.66406 5.39765 1.66406 10C1.66406 14.6024 5.39502 18.3334 9.9974 18.3334"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M10.8359 1.70776C10.8359 1.70776 13.3359 4.99995 13.3359 9.99995"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M9.16406 18.2921C9.16406 18.2921 6.66406 15 6.66406 9.99995C6.66406 4.99995 9.16406 1.70776 9.16406 1.70776"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M2.1875 12.9167H9.99616"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M2.1875 7.08331H17.8048"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M18.2326 14.9311C18.6441 15.1843 18.6188 15.8004 18.195 15.8484L16.0561 16.0909L15.0968 18.0178C14.9067 18.3996 14.3191 18.2127 14.222 17.7394L13.1759 12.6427C13.0938 12.2428 13.4533 11.9911 13.8011 12.205L18.2326 14.9311Z"
+                      stroke-width="1.5"
+                    />
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_2861_7799">
+                      <rect width="20" height="20" fill="white" />
+                    </clipPath>
+                  </defs>
+                </svg>
+              </a>
+            )}
+          </div>
+        )}
+        <DescriptionExpand description={description} />
+      </div>
+    </div>
+  );
+};

src/components/neurips/Integrations.astro

@@ -0,0 +1,44 @@
+---
+import { getPriorityIndex } from "@/utils/sequences/deployedOnAkash";
+import { getCollection, type CollectionEntry } from "astro:content";
+import { Button } from "../ui/button";
+import IntegrationSwiper from "./IntegrationSwiper.tsx";
+
+type Project = CollectionEntry<"Ecosystem_Page">;
+
+const data = await getCollection("Ecosystem_Page");
+
+const sortProjects = (projects: Project[]) =>
+  projects.sort((a, b) => {
+    const priorityDiff =
+      getPriorityIndex(a.data.projectTitle) -
+      getPriorityIndex(b.data.projectTitle);
+    if (priorityDiff !== 0) return priorityDiff;
+
+    return (
+      new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime()
+    );
+  });
+
+const projects = sortProjects(
+  data.filter((project) => project.data.showcase === true),
+);
+---
+
+<section class="bg-black py-10 md:py-20">
+  <div class="container-small flex flex-col items-center">
+    <h2
+      class="mb-4 text-left text-xl font-medium text-white md:text-center md:text-3xl"
+    >
+      Akash is a global, peer-to-peer network for cloud resources and the
+      starting point for a new generation of AI and machine
+      learning applications.
+    </h2>
+  </div>
+  <IntegrationSwiper projects={projects} client:load />
+  <div class="mt-10 flex justify-center">
+    <a href="/ecosystem/deployed-on-akash/">
+      <Button variant={"outline"}>Explore the Akash Ecosystem</Button></a
+    >
+  </div>
+</section>