add library page

src/components/Common/Icons/DownloadIcon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+const DownloadIcon: React.FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M3 20.5H21V22.5H3V20.5ZM13 14.672L19.071 8.6L20.485 10.014L12 18.5L3.515 10.015L4.929 8.6L11 14.67V3.5H13V14.672Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default DownloadIcon;

src/pages/library.tsx

@@ -0,0 +1,288 @@
+import Link from "@docusaurus/Link";
+import AnimateSpawn from "@site/src/components/Common/AnimateSpawn";
+import DarkHeroStyles from "@site/src/components/Common/DarkHeroStyles";
+import ShareMeta from "@site/src/components/Common/ShareMeta";
+import { useDarkHeaderInHero } from "@site/src/utils/use-dark-header-in-hero";
+import transitions from "@site/static/transitions.json";
+import Layout from "@theme/Layout";
+import { motion } from "framer-motion";
+import React, { useEffect, useRef, useState } from "react";
+import DownloadIcon from "../components/Common/Icons/DownloadIcon";
+import LinkArrowRight from "../components/Common/Icons/LinkArrowRight";
+
+const quickstartCards = [
+  {
+    title: "Internet Computer in a Nutshell",
+    url: "/presentations/Internet Computer in a nutshell EN.pdf",
+  },
+  {
+    title: "Der Internet Computer in Kürze (German)",
+    url: "/presentations/Internet Computer in a nutshell DE.pdf",
+  },
+];
+
+const presentationCards = [
+  {
+    title: "ICP makes the Internet into a World Computer",
+    url: "https://internetcomputer.docsend.com/view/dzkwezufykwpb7p8",
+  },
+  {
+    title: "UTOPIA",
+    url: "https://utopia.docsend.com/view/ez8f34n53q2fg2de",
+  },
+];
+
+const whitepaperCards = [
+  {
+    title: "The Internet Computer for Geeks",
+    description: "The DFINITY Team",
+    url: "/whitepapers/The Internet Computer for Geeks.pdf",
+  },
+  {
+    title: "Internet Computer Consensus",
+    description:
+      "Jan Camenisch, Manu Drijvers, Timo Hanke, Yvonne-Anne Pignolet, Victor Shoup, Dominic Williams",
+    url: "/whitepapers/Internet Computer Consensus.pdf",
+  },
+  {
+    title:
+      "Advancing Blockchain Scalability: A Linear Optimization Framework for Diversified Node Allocation in Shards",
+    description: "Björn Assmann, Samuel J. Burri",
+    url: "/whitepapers/Advancing Blockchain Scalability_ A Linear Optimization Framework for Diversified Node Allocation in Shards.pdf",
+  },
+  {
+    title:
+      "Decentralized and Stateful Serverless Computing on the Internet Computer Blockchain",
+    description:
+      "Maksym Arutyunyan, Andriy Berestovskyy, Adam Bratschi-Kaye, Ulan Degenbaev, Manu Drijvers, Islam El-Ashi, Stefan Kaestle, Roman Kashitsyn, Maciej Kot, Yvonne-Anne Pignolet, Rostislav Rumenov, Dimitris Sarlis, Alin Sinpalean, Alexandru Uta, Bogdan Warinschi, and Alexandra Zapuc",
+    url: "/whitepapers/Decentralized and Stateful Serverless Computing on the Internet Computer Blockchain.pdf",
+  },
+  {
+    title: "Non-interactive distributed key generation and key resharing",
+    description: "Jens Groth",
+    url: "/whitepapers/Non-interactive distributed key generation and  key resharing.pdf",
+  },
+  {
+    title: "vetKeys: How a Blockchain Can Keep Many Secrets",
+    description:
+      "Andrea Cerulli, Aisling Connolly, Gregory Neven, Franz-Stefan Preiss, Victor Shoup",
+    url: "/whitepapers/vetKeys_ How a Blockchain Can Keep Many Secrets.pdf",
+  },
+
+  {
+    title: "Smarter Contract Upgrades with Orthogonal Persistence",
+    description:
+      "Luc Bläser, Claudio Russo, Gabor Greif, Ryan Vandersmith, Jason Ibrahim",
+    url: "/whitepapers/Smarter Contract Upgrades with Orthogonal Persistence.pdf",
+  },
+  {
+    title: "Collecting Garbage on the Blockchain",
+    description:
+      "Luc Bläser, Claudio Russo, Ulan Degenbaev, Ömer S. Agacan, Gabor Greif, Jason Ibrahim",
+    url: "/whitepapers/Collecting Garbage on the Blockchain.pdf",
+  },
+  {
+    title: "A Decentralized Mechanism for Know-Your-Transaction Compliance",
+    description: "Thomas Locher",
+    url: "/whitepapers/A Decentralized Mechanism for Know-Your-Transaction Compliance.pdf",
+  },
+  {
+    title:
+      "Byzantine Reliable Broadcast with Low Communication and Time Complexity",
+    description: "Thomas Locher",
+    url: "/whitepapers/Byzantine Reliable Broadcast with Low Communicationand Time Complexity.pdf",
+  },
+  {
+    title: "Design and analysis of a distributed ECDSA signing service",
+    description: "Jens Groth and Victor Shoup",
+    url: "/whitepapers/Design and analysis of a distributed ECDSA signing service.pdf",
+  },
+  {
+    title: "Fully on-chain DAOs on the Internet Computer",
+    description: "Björn Assman and Lara Schmid",
+    url: "/whitepapers/Fully on-chain DAOs on the Internet Computer.pdf",
+  },
+  {
+    title:
+      "Lightweight Asynchronous Verifiable Secret Sharing with Optimal Resilience",
+    description: "Victor Shoup and Nigel P. Smart",
+    url: "/whitepapers/Lightweight Asynchronous Verifiable Secret Sharing with Optimal  Resilience.pdf",
+  },
+  {
+    title: "Monitoring the Internet Computer",
+    description:
+      "David Basin, Daniel Stefan Dietiker, Srđan Krstić, Yvonne-Anne Pignolet, Martin Raszyk, Joshua Schneider & Arshavir Ter-Gabrielyan",
+    url: "/whitepapers/Monitoring the Internet Computer.pdf",
+  },
+
+  {
+    title:
+      "On the security of ECDSA with additive key derivation and presignatures",
+    description: "Jens Groth and Victor Shoup",
+    url: "/whitepapers/On the security of ECDSA with additive key derivation and  presignatures.pdf",
+  },
+  {
+    title: "Trustworthy confidential virtual machines for the masses",
+    description:
+      "Anna Galanou, Khushboo Bindlish, Luca Preibsch, Yvonne-Anne Pignolet, Christof Fetzer, Rüdiger Kapitza",
+    url: "/whitepapers/Trustworthy confidential virtual machines for the masses.pdf",
+  },
+  {
+    title: "User-centric authentication in Web 3.0",
+    description: "Björn Tackmann, DFINITY Foundation",
+    url: "/whitepapers/User-centric authentication in Web 3.0.pdf",
+  },
+];
+
+const LibraryCard: React.FC<{
+  title: string;
+  subtitle?: string;
+  description?: string;
+  url: string;
+  highlighted?: boolean;
+}> = ({ title, subtitle, description, url, highlighted }) => {
+  return (
+    <Link
+      className="link-primary link-with-icon no-underline cursor-pointer hover:-translate-y-2 transition-transform h-full"
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <article
+        className={`rounded-xl overflow-hidden flex flex-col h-full w-full ${
+          highlighted ? "bg-[#240d4e] text-white" : "bg-white text-black"
+        }`}
+      >
+        <div className="px-6 pt-8 pb-6 flex flex-col flex-1">
+          <h3 className="tw-heading-5 mb-2 line-clamp-3 min-h-[4.5rem]">
+            {title}
+          </h3>
+          {subtitle && (
+            <div
+              className={`tw-paragraph-sm mb-2 ${
+                highlighted ? "text-white/60" : "text-black/60"
+              }`}
+            >
+              {subtitle}
+            </div>
+          )}
+          {description && (
+            <div
+              className={`tw-paragraph-sm line-clamp-4 mb-6 flex-1 ${
+                highlighted ? "text-white/60" : "text-black/60"
+              }`}
+            >
+              {description}
+            </div>
+          )}
+
+          <div
+            className={`button-round-icon mt-auto ${
+              highlighted
+                ? "!bg-transparent !border-white/30 !text-white hover:!bg-white hover:!text-[#240d4e] hover:!border-white"
+                : ""
+            }`}
+            aria-label={`Download`}
+          >
+            <LinkArrowRight />
+          </div>
+        </div>
+      </article>
+    </Link>
+  );
+};
+
+function Library() {
+  const heroRef = useRef<HTMLDivElement>(null);
+  const isDark = useDarkHeaderInHero(heroRef);
+
+  return (
+    <Layout
+      title="Library"
+      description="Find resources to learn more about the Internet Computer and its capabilities."
+      editPath={`https://github.com/dfinity/portal/edit/master/${__filename}`}
+    >
+      <ShareMeta image="/img/shareImages/share-library.webp"></ShareMeta>
+
+      <main
+        className="text-black relative overflow-hidden"
+        style={{
+          marginTop: `calc(var(--ifm-navbar-height) * -1)`,
+        }}
+      >
+        {isDark && <DarkHeroStyles bgColor="transparent"></DarkHeroStyles>}
+        <div
+          style={{
+            background: "linear-gradient(54deg, #3B00B9 0%, #FF84A9 131.95%)",
+          }}
+          ref={heroRef}
+        >
+          <AnimateSpawn
+            variants={transitions.container}
+            className="container-10 relative text-white pt-36 md:pt-48 pb-48 md:pb-36"
+          >
+            <motion.h1
+              variants={transitions.item}
+              className="tw-heading-3 mb-2 md:tw-heading-2 md:mb-6 md:w-7/12"
+            >
+              Library
+            </motion.h1>
+            <motion.p
+              variants={transitions.item}
+              className="tw-lead-sm md:tw-lead md:w-7/12 mb-0 text-white-80"
+            >
+              Find resources to learn more about the Internet Computer and its
+              capabilities.
+            </motion.p>
+            <motion.div className="container-12 relative pointer-events-none">
+              <div className="absolute w-7/12 translate-x-[25%] translate-y-[95%] bottom-1/2 sm:w-3/12 sm:translate-y-[105%] md:w-4/12 md:bottom-0 md:translate-x-[200%] md:translate-y-2/3">
+                <img
+                  src="/img/library/library-hero.svg"
+                  className="w-full max-w-none"
+                />
+              </div>
+            </motion.div>
+          </AnimateSpawn>
+        </div>
+        <section className="container-10 mt-8 py-20">
+          <h2 className="tw-heading-4 md:tw-heading-60 mb-1 md:mb-3">
+            Quick Starts
+          </h2>
+          <div className="mt-4 md:mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
+            {quickstartCards.map((card) => (
+              <LibraryCard key={card.title} title={card.title} url={card.url} />
+            ))}
+          </div>
+        </section>
+        <section className="container-10 pt-4 pb-20 md:py-12 ">
+          <h2 className="tw-heading-4 md:tw-heading-60 mb-1 md:mb-3">
+            Presentations
+          </h2>
+          <div className="mt-4 md:mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
+            {presentationCards.map((card) => (
+              <LibraryCard key={card.title} title={card.title} url={card.url} />
+            ))}
+          </div>
+        </section>
+        <section className="container-10 py-4 md:py-20 mb-20">
+          <h2 className="tw-heading-4 md:tw-heading-60 mb-1 md:mb-3">
+            Whitepapers
+          </h2>
+          <div className="mt-4 md:mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
+            {whitepaperCards.map((card, idx) => (
+              <LibraryCard
+                key={card.title}
+                title={card.title}
+                description={card.description}
+                url={card.url}
+                highlighted={idx === 0}
+              />
+            ))}
+          </div>
+        </section>
+      </main>
+    </Layout>
+  );
+}
+
+export default Library;