Custom Landing page

docusaurus.config.ts

@@ -107,11 +107,12 @@ const config: Config = {
       style: "light",
       logo: {
         alt: "Flare Logo",
-        src: "img/flare_tbfd_light.svg",
-        srcDark: "img/flare_tbfd_dark.svg",
+        src: "img/logo/FooterLogoLight.svg",
+        srcDark: "img/logo/FooterLogoDark.svg",
         href: "https://flare.network/",
-        width: 300,
-        height: 25,
+        width: 405,
+        height: 35.25,
+        target: "_blank",
       },
       links: [
         {
@@ -129,44 +130,14 @@ const config: Config = {
               label: "Audits",
               to: "/support/audits",
             },
-          ],
-        },
-        {
-          title: "Community",
-          items: [
-            {
-              label: "X",
-              href: "https://x.com/FlareNetworks",
-            },
-            {
-              label: "Telegram",
-              href: "https://t.me/FlareNetwork",
-            },
-            {
-              label: "YouTube",
-              href: "https://www.youtube.com/channel/UCDyqyTWHYMWY5ie6xOCgG0w",
-            },
-          ],
-        },
-        {
-          title: "More",
-          items: [
-            {
-              label: "GitHub",
-              href: "https://github.com/flare-foundation/",
-            },
-            {
-              label: "Grants",
-              href: "https://flare.network/grants/",
-            },
             {
               label: "Terms & Privacy",
               href: "https://flare.network/privacy-policy/",
             },
           ],
         },
         {
-          title: "Explorers",
+          title: "Developer links",
           items: [
             {
               label: "Flarescan",
@@ -180,10 +151,18 @@ const config: Config = {
               label: "Flare FTSO Monitor",
               href: "https://flare-ftso-monitor.flare.network/",
             },
+            {
+              label: "Flare P-Chain Explorer",
+              href: "https://flare.space/dapp/p-chain-explorer/",
+            },
+            {
+              label: "Grants",
+              href: "https://flare.network/grants/",
+            },
           ],
         },
       ],
-      copyright: `Copyright © Flare Networks ${new Date().getFullYear()}.`,
+      copyright: `Copyright © Flare Networks ${new Date().getFullYear()}`,
     },
     prism: {
       additionalLanguages: ["solidity", "bash", "json", "toml"],

src/components/HomepageFeatures/featureCard.module.css

@@ -0,0 +1,60 @@
+.card {
+  border-radius: 11px;
+  background-color: var(--ifm-card-background-color);
+  display: flex;
+  flex-direction: column;
+  transition: all 0.2s ease-in-out;
+  padding: 40px 24px;
+  height: 100%;
+  gap: 8px;
+}
+
+[data-theme="dark"] .link {
+  color: var(--ifm-color-gray-500);
+}
+
+[data-theme="light"] .link {
+  color: #000000;
+}
+
+[data-theme="dark"] .link:hover {
+  text-decoration: none;
+  color: var(--ifm-color-gray-500);
+}
+[data-theme="light"] .link:hover {
+  text-decoration: none;
+  color: #000000;
+}
+
+.card:hover {
+  transform: translateY(-10px);
+}
+
+.heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.iconBox {
+  width: 50px;
+  height: 50px;
+}
+
+.featureSvg {
+  width: 100%;
+  height: 100%;
+}
+
+[data-theme="dark"] .featureSvg {
+  fill: #ffffff;
+}
+
+[data-theme="light"] .featureSvg {
+  fill: #000000;
+}

src/components/HomepageFeatures/featureCard.tsx

@@ -0,0 +1,41 @@
+import { FeatureItem } from "./featuresSection";
+import classes from "./featureCard.module.css";
+import Link from "@docusaurus/Link";
+import Heading from "@theme/Heading";
+
+export default function FeatureCard({
+  title,
+  Svg,
+  description,
+  linkToProtocolDocs,
+}: FeatureItem) {
+  return (
+    <Link className={classes.link} to={linkToProtocolDocs}>
+      <div className={classes.card}>
+        <div className={classes.heading}>
+          <div className={classes.title}>
+            <div className={classes.iconBox}>
+              <Svg className={classes.featureSvg} role="img" />
+            </div>
+            <Heading as="h2" style={{ margin: 0 }}>
+              {title}
+            </Heading>
+          </div>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12.627 8.75H0.5V7.25H12.627L6.93075 1.55375L8 0.5L15.5 8L8 15.5L6.93075 14.4462L12.627 8.75Z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <p>{description}</p>
+      </div>
+    </Link>
+  );
+}

src/components/HomepageFeatures/featuresSection.module.css

@@ -0,0 +1,22 @@
+.features {
+  display: flex;
+  padding: 6rem 0 2rem 0;
+  width: 100%;
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: 1fr;
+  /* grid-template-rows: 1fr; */
+  grid-column-gap: 0px;
+  grid-row-gap: 1.5em;
+}
+
+@media (min-width: 996px) {
+  .cards {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 1.5em;
+    grid-row-gap: 0px;
+  }
+}

src/components/HomepageFeatures/index.tsx → src/components/HomepageFeatures/featuresSection.tsx

@@ -1,13 +1,11 @@
-import clsx from "clsx";
-import Heading from "@theme/Heading";
-import styles from "./styles.module.css";
-import Link from "@docusaurus/Link";
+import classes from "./featuresSection.module.css";
 
-import FTSO from "@site/static/img/FTSO.svg";
 import DataConnector from "@site/static/img/DATACONNECTOR.svg";
 import FAssets from "@site/static/img/FASSETS.svg";
+import FTSO from "@site/static/img/FTSO.svg";
+import FeatureCard from "./featureCard";
 
-type FeatureItem = {
+export type FeatureItem = {
   title: string;
   Svg: React.ComponentType<React.ComponentProps<"svg">>;
   description: JSX.Element;
@@ -49,40 +47,11 @@ const FeatureList: FeatureItem[] = [
   },
 ];
 
-function FeatureCard({
-  title,
-  Svg,
-  description,
-  linkToProtocolDocs,
-}: FeatureItem) {
-  return (
-    <div className={clsx("col col--4")}>
-      <div className="card margin-left--sm margin-right--sm margin-bottom--lg">
-        <div className="card__header text--center">
-          <Svg className={styles.featureSvg} role="img" />
-        </div>
-        <div className="card__body text--center">
-          <Heading as="h2">{title}</Heading>
-          <p>{description}</p>
-        </div>
-        <div className="card__footer text--center">
-          <Link
-            className="button button--outline button--primary button--md"
-            to={linkToProtocolDocs}
-          >
-            Protocol Docs
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default function HomepageFeatures(): JSX.Element {
+export default function FeaturesSection(): JSX.Element {
   return (
-    <section className={styles.features}>
+    <section className={classes.features}>
       <div className="container">
-        <div className="row">
+        <div className={classes.cards}>
           {FeatureList.map((props, idx) => (
             <FeatureCard key={idx} {...props} />
           ))}

src/components/HomepageFeatures/hero.module.css

@@ -0,0 +1,112 @@
+.heroSection {
+  background-color: #eeeeee;
+  border-radius: 6px;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(2, 1fr);
+}
+
+.videoContainer {
+  grid-area: 1 / 1 / 2 / 2;
+  max-height: 600px;
+  justify-self: center;
+}
+
+[data-theme="dark"] .videoLight {
+  display: none;
+}
+[data-theme="light"] .videoDark {
+  display: none;
+}
+
+[data-theme="dark"] .heroSection {
+  background-color: #1b1b1b;
+  border-radius: 6px;
+}
+
+.content {
+  padding: 0px 20px 65px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  grid-area: 2 / 1 / 3 / 3;
+}
+
+.callToAction {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  gap: 10px;
+
+  grid-area: 1 / 1 / 2 / 3;
+}
+
+.description {
+  font-size: 24px;
+  text-align: center;
+}
+
+.heading {
+  font-size: 48px;
+  font-weight: var(--ifm-font-weight-semibold);
+  text-align: center;
+}
+
+@media (min-width: 996px) {
+  .heroSection {
+    /* background-image: url("/img/landing/splash.png");
+    background-position: right center;
+    background-repeat: no-repeat; */
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr;
+  }
+  .callToAction {
+    align-items: flex-start;
+    justify-content: center;
+    grid-area: 1 / 1 / 2 / 2;
+  }
+  .description {
+    text-align: left;
+  }
+  .heading {
+    text-align: left;
+  }
+  .videoContainer {
+    grid-area: 1 / 2 / 2 / 3;
+    max-height: 550px;
+    justify-self: start;
+    padding-left: 100px;
+  }
+  .content {
+    padding: 65px 20px;
+    grid-area: 1 / 1 / 2 / 3;
+  }
+}
+
+.button {
+  border-radius: 10px;
+  color: #000000;
+  padding: 10px 32px 10px 32px;
+  font-size: 20px;
+  font-weight: var(--ifm-font-weight-semibold);
+  transition: all 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.button:hover {
+  text-decoration: none;
+  transform: scale(1.05);
+}
+
+[data-theme="dark"] .button {
+  background-color: #ffffff;
+  color: #000000;
+}
+[data-theme="light"] .button {
+  background-color: #000000;
+  color: #ffffff;
+}