New landing page (#1549)

Landing page 
 - features ✅
 - content abstraction ✅
 - animations ✅
 - dependencies ✅
- header (kept the default docusaurus burger menu as it's unclear
currently what content we'll be keeping for the header) ✅

Docs pages - ✅

Note - For consistency I have implemented TailwindCss (I noticed that it
is already used in the repo in other places) - it's primarily used in
styling the landing page and some parts of swizzled components that I
had to update.
I have maintained the docusaurus styling method for all other components
& pages

docs/docs/homepage/case-studies.ts

@@ -0,0 +1,11 @@
+import { translate } from "@docusaurus/Translate";
+
+export const FeaturedCaseStudy = {
+  content: translate({
+    id: "homepage.caseStudy.content",
+    message:
+      "From enabling micropayments with near-zero fees and instant processing to boosting the performanceof decentralized finance (DeFi) applications and enhancing real-time gaming experiences, Hydra can enhance user engagement across various sectors. Discover how Hydra’s cost-efficient, scalable, and low-latency transactions can address real-world problems and support innovative solutions on the Cardano platform.",
+  }),
+  src: require("@site/static/img/case-studies.png").default,
+  mobileSrc: require("@site/static/img/case-studies-mobile.png").default,
+};

docs/docs/homepage/features-faq.ts

@@ -0,0 +1,59 @@
+import { translate } from "@docusaurus/Translate";
+
+export const FeaturesContent = [
+  {
+    title: translate({
+      id: "homepage.featureFAQ.openSource.title",
+      message: "Open source",
+    }),
+    description: translate({
+      id: "homepage.featureFAQ.openSource.description",
+      message:
+        "The Cardano developer community has full access to the source code for greater collaboration and innovation. Numerous developers are actively engaged in its continuous improvement and iteration.",
+    }),
+  },
+  {
+    title: translate({
+      id: "homepage.featureFAQ.interoperable.title",
+      message: "Interoperable",
+    }),
+    description: translate({
+      id: "homepage.featureFAQ.interoperable.description",
+      message:
+        "Designed for seamless integration with existing and future Cardano infrastructure, promoting a cohesive ecosystem and allowing for easy integration with existing DApps and wallets.",
+    }),
+  },
+  {
+    title: translate({
+      id: "homepage.featureFAQ.isomorphic.title",
+      message: "Isomorphic",
+    }),
+    description: translate({
+      id: "homepage.featureFAQ.isomorphic.description",
+      message:
+        "Same transaction format and ledger rules on layer 2 as on the Cardano layer 1. This includes all the features you know and love from Cardano.",
+    }),
+  },
+  {
+    title: translate({
+      id: "homepage.featureFAQ.customizable.title",
+      message: "Customizable",
+    }),
+    description: translate({
+      id: "homepage.featureFAQ.customizable.description",
+      message:
+        "Adjustable memory, CPU execution budgets, and other parameters on a per-head basis, allowing for flexible applications – even some that would not be possible on layer 1!",
+    }),
+  },
+  {
+    title: translate({
+      id: "homepage.featureFAQ.efficient.title",
+      message: "Efficient",
+    }),
+    description: translate({
+      id: "homepage.featureFAQ.efficient.description",
+      message:
+        "Facilitates multi-party agreements, cost-effective micropayments, and offers near-instant transaction finality.",
+    }),
+  },
+];

docs/docs/homepage/features.tsx

@@ -0,0 +1,83 @@
+import { translate } from "@docusaurus/Translate";
+import BasedOnThoroughResearch from "../../src/components/icons/BasedOnThoroughResearch";
+import CensorshipResistance from "../../src/components/icons/CensorshipResistance";
+import HighThroughput from "../../src/components/icons/HighThroughput";
+import IsomorphicStateChannels from "../../src/components/icons/IsomorphicStateChannels";
+import LowFees from "../../src/components/icons/LowFees";
+import React from "react";
+import LowLatency from "../../src/components/icons/LowLatency";
+
+export const FeatureList = [
+  {
+    title: translate({
+      id: "homepage.featureList.lowLatency.title",
+      message: "Low Latency",
+    }),
+    icon: <LowLatency />,
+    description: translate({
+      id: "homepage.featureList.lowLatency.description",
+      message:
+        "Transaction finality is only bounded by Head network latency, resulting in near-instant settlement",
+    }),
+  },
+  {
+    title: translate({
+      id: "homepage.featureList.highThroughput.title",
+      message: "High throughput",
+    }),
+    icon: <HighThroughput />,
+    description: translate({
+      id: "homepage.featureList.highThroughput.description",
+      message:
+        "Transactions are replicated only among protocol participants, reducing data processing and increasing throughput",
+    }),
+  },
+  {
+    title: translate({
+      id: "homepage.featureList.lowFees.title",
+      message: "Low fees",
+    }),
+    icon: <LowFees />,
+    description: translate({
+      id: "homepage.featureList.lowFees.description",
+      message:
+        "Low processing needs by protocol participants and configurable protocol parameters enable even zero-fee use cases",
+    }),
+  },
+  {
+    title: translate({
+      id: "homepage.featureList.isomorphicStateChannels.title",
+      message: "Isomorphic state channels",
+    }),
+    icon: <IsomorphicStateChannels />,
+    description: translate({
+      id: "homepage.featureList.isomorphicStateChannels.description",
+      message:
+        "Cardano transactions are processed off-chain using the exact same battle-tested Cardano ledger",
+    }),
+  },
+  {
+    title: translate({
+      id: "homepage.featureList.censorshipResistance.title",
+      message: "Censorship resistance",
+    }),
+    icon: <CensorshipResistance />,
+    description: translate({
+      id: "homepage.featureList.censorshipResistance.description",
+      message:
+        "Participants of a Hydra head cannot lose any funds that they have not explicitly authorized",
+    }),
+  },
+  {
+    title: translate({
+      id: "homepage.featureList.basedOnThoroughResearch.title",
+      message: "Based on thorough research",
+    }),
+    icon: <BasedOnThoroughResearch />,
+    description: translate({
+      id: "homepage.featureList.basedOnThoroughResearch.description",
+      message:
+        "The Hydra protocols have been peer-reviewed and implementations are heavily tested resulting in high-security standards",
+    }),
+  },
+];

docs/docs/homepage/homepage-hero.ts

@@ -0,0 +1,11 @@
+import { translate } from "@docusaurus/Translate";
+
+export const HomepageHeroContent = {
+  content: translate({
+    id: "homepage.tagline",
+    message: `Hydra Head protocol is a layer 2 scaling solution for Cardano
+     rooted in peer-reviewed research that increases transaction
+     throughput and ensures cost efficiency while maintaining
+     rigorous security.`,
+  }),
+};

docs/docs/homepage/how-it-works-carousel.ts

@@ -0,0 +1,44 @@
+import { translate } from "@docusaurus/Translate";
+
+export const HowItWorksCarouselContent = [
+  {
+    description: translate({
+      id: "homepage.carousel.panelOneText",
+      message:
+        "Think of a Hydra head as an airplane traveling between two points. Before departure, passengers (participants) and supplies (tokens) are loaded on board. ",
+    }),
+    src: require("@site/static/img/how-it-works-panel-one.png").default,
+    mobileSrc: require("@site/static/img/how-it-works-panel-one-mobile.png")
+      .default,
+  },
+  {
+    description: translate({
+      id: "homepage.carousel.panelTwoText",
+      message:
+        "Once in flight, no new passengers or supplies can be added or removed, but the supplies can be rearranged within the plane. This internal movement can include executing agreements (smart contracts), determining which items go where, and ensuring proper validations.",
+    }),
+    src: require("@site/static/img/how-it-works-panel-two.png").default,
+    mobileSrc: require("@site/static/img/how-it-works-panel-two-mobile.png")
+      .default,
+  },
+  {
+    description: translate({
+      id: "homepage.carousel.panelThreeText",
+      message:
+        "While the plane is in motion, the direct courier (blockchain) continues to operate independently.",
+    }),
+    src: require("@site/static/img/how-it-works-panel-three.png").default,
+    mobileSrc: require("@site/static/img/how-it-works-panel-three-mobile.png")
+      .default,
+  },
+  {
+    description: translate({
+      id: "homepage.carousel.panelFourText",
+      message:
+        "When the plane reaches its destination (head closure), only the final arrangement of supplies is reported back to the courier. It doesn’t matter if you shift things around once or 10 million times, only the end result is communicated to the courier. There is no limit to how many planes can be in the air at any given time; if you need more capacity, you can send up more. Thus, the Hydra head acts as a parallel processing unit, enhancing scalability and efficiency without burdening the main network.",
+    }),
+    src: require("@site/static/img/how-it-works-panel-four.png").default,
+    mobileSrc: require("@site/static/img/how-it-works-panel-four-mobile.png")
+      .default,
+  },
+];

docs/docs/homepage/why-hydra-head.ts

@@ -0,0 +1,34 @@
+import { translate } from "@docusaurus/Translate";
+
+export const WhyHydraHeadContent = {
+  title: translate({
+    id: "homepage.whyHydraHead.title",
+    message: "Why Hydra Head?",
+  }),
+  descriptionParagraphOne: translate({
+    id: "homepage.featureList.lowLatency.description.paragraphOne",
+    message: `Traditional blockchain systems face scalability limitations due to
+      the trade-off between decentralization, security, and scalability
+      (the blockchain trilemma). Cardano's consensus algorithm, while
+      efficient, still requires massive global replication of state
+      changes, potentially increasing transaction settlement times during
+      peak hours.`,
+  }),
+  descriptionParagraphTwo: translate({
+    id: "homepage.featureList.lowLatency.description.paragraphTwo",
+    message: `The Hydra Head protocol aims to enhance the flexibility of
+      decentralization levels on a case-by-case basis. Not every
+      transaction requires global consensus to be considered final.
+      For instance, buying a croissant or lending money to a friend
+      doesn’t need the involvement of a central bank. Many
+      transactions and arrangements can occur within a single Hydra
+      head, with only the final outcome recorded on the main chain.`,
+  }),
+  descriptionParagraphThree: translate({
+    id: "homepage.featureList.lowLatency.description.paragraphThree",
+    message: `The protocol facilitates frictionless state transfer between the
+      main chain and individual heads, bypassing the 20-second block
+      time limit. This enables state evolution at a pace approved by
+      involved parties, independent of blockchain constraints.`,
+  }),
+};

docs/docusaurus.config.js

@@ -14,7 +14,7 @@ const editUrl = "https://github.com/cardano-scaling/hydra/tree/master/docs";
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: "Hydra: Head Protocol",
+  title: "Hydra Head protocol documentation",
   url: "https://input-output-hk.github.io",
   baseUrl: "/head-protocol/",
   onBrokenLinks: "throw",
@@ -63,6 +63,17 @@ const config = {
   ],
 
   plugins: [
+    async function myPlugin(context, options) {
+      return {
+        name: "docusaurus-tailwindcss",
+        configurePostCss(postcssOptions) {
+          // Appends TailwindCSS and AutoPrefixer.
+          postcssOptions.plugins.push(require("tailwindcss"));
+          postcssOptions.plugins.push(require("autoprefixer"));
+          return postcssOptions;
+        },
+      };
+    },
     [
       "content-docs",
       /** @type {import('@docusaurus/plugin-content-docs').Options} */
@@ -136,37 +147,49 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      colorMode: {
+        defaultMode: "light",
+        disableSwitch: true,
+        respectPrefersColorScheme: false,
+      },
       navbar: {
-        title: "Hydra: Head Protocol",
+        title: "Hydra Head Protocol",
         logo: {
-          alt: "Hydra: Head Protocol",
+          alt: "Hydra Head Protocol",
           src: "img/hydra.png",
+          style: { height: 27, marginTop: 2.5 },
           srcDark: "img/hydra-white.png",
         },
         items: [
           {
             to: "/docs",
-            label: "User Manual",
-            position: "left",
+            label: "User manual",
+            position: "right",
           },
           {
             to: "/docs/dev",
             label: "Developer Documentation",
-            position: "left",
+            position: "right",
           },
+          //commenting out for the time being
+          // {
+          //   to: "/core-concepts",
+          //   label: "Core Concepts",
+          //   position: "right",
+          // },
           {
             to: "/topologies",
             label: "Topologies",
             position: "right",
           },
           {
             to: "/use-cases",
-            label: "Use Cases",
+            label: "Use cases",
             position: "right",
           },
           {
-            href: "https://github.com/cardano-scaling/hydra",
-            label: "GitHub",
+            to: "/docs/faqs",
+            label: "FAQ",
             position: "right",
           },
         ],
@@ -195,11 +218,11 @@ const config = {
             title: "Community",
             items: [
               {
-                label: "Discord (#ask-hydra)",
+                label: "Discord",
                 href: "https://discord.gg/Qq5vNTg9PT",
               },
               {
-                label: "Github Discussions",
+                label: "Github",
                 href: "https://github.com/cardano-scaling/hydra/discussions",
               },
               {
@@ -243,11 +266,7 @@ const config = {
             ],
           },
         ],
-        copyright: `
-          <small>
-          Built with Docusaurus on ${docsMetadataJson.site.lastUpdatedAt}
-          </small>
-          `,
+        copyright: `© 2024`,
       },
       prism: {
         theme: lightCodeTheme,

docs/helpers/debounce.ts

@@ -0,0 +1,10 @@
+export function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout>;
+  return function (...args: Parameters<T>) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}

docs/helpers/media-queries.ts

@@ -0,0 +1,9 @@
+export const not = (query: string) => "not screen and " + query;
+
+export const forPhablet = "(min-width: 640px)";
+
+export const forTablet = "(min-width: 768px)";
+
+export const forLaptop = "(min-width: 1024px)";
+
+export const forDesktop = "(min-width: 1280px)";