diff --git a/docusaurus.config.ts b/docusaurus.config.ts index d6717fb1..c0c79da4 100644 --- a/docusaurus.config.ts +++ b/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,36 +130,6 @@ 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/", @@ -166,7 +137,7 @@ const config: Config = { ], }, { - 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"], diff --git a/src/components/HomepageFeatures/featureCard.module.css b/src/components/HomepageFeatures/featureCard.module.css new file mode 100644 index 00000000..96f738c8 --- /dev/null +++ b/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; +} diff --git a/src/components/HomepageFeatures/featureCard.tsx b/src/components/HomepageFeatures/featureCard.tsx new file mode 100644 index 00000000..90ea4dad --- /dev/null +++ b/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 ( + +
+
+
+
+ +
+ + {title} + +
+ + + +
+

{description}

+
+ + ); +} diff --git a/src/components/HomepageFeatures/featuresSection.module.css b/src/components/HomepageFeatures/featuresSection.module.css new file mode 100644 index 00000000..bc09b12a --- /dev/null +++ b/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; + } +} diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/featuresSection.tsx similarity index 53% rename from src/components/HomepageFeatures/index.tsx rename to src/components/HomepageFeatures/featuresSection.tsx index 4b59f5b9..f7a8f531 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/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>; description: JSX.Element; @@ -49,40 +47,11 @@ const FeatureList: FeatureItem[] = [ }, ]; -function FeatureCard({ - title, - Svg, - description, - linkToProtocolDocs, -}: FeatureItem) { - return ( -
-
-
- -
-
- {title} -

{description}

-
-
- - Protocol Docs - -
-
-
- ); -} - -export default function HomepageFeatures(): JSX.Element { +export default function FeaturesSection(): JSX.Element { return ( -
+
-
+
{FeatureList.map((props, idx) => ( ))} diff --git a/src/components/HomepageFeatures/hero.module.css b/src/components/HomepageFeatures/hero.module.css new file mode 100644 index 00000000..909c6f4c --- /dev/null +++ b/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; +} diff --git a/src/components/HomepageFeatures/heroSection.tsx b/src/components/HomepageFeatures/heroSection.tsx new file mode 100644 index 00000000..ad4c71c4 --- /dev/null +++ b/src/components/HomepageFeatures/heroSection.tsx @@ -0,0 +1,81 @@ +import Link from "@docusaurus/Link"; +import Heading from "@theme/Heading"; +import clsx from "clsx"; +import classes from "./hero.module.css"; + +export default function HeroSection() { + return ( +
+
+ +
+
+ +
+
+
+ + Flare Developer Hub + +

+ The decentralization origin for Flare builders. Written by builders, + for builders +

+ +
Get Started Building
+
+ + + +
+ +
+
+
+ ); +} diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css deleted file mode 100644 index a092ac56..00000000 --- a/src/components/HomepageFeatures/styles.module.css +++ /dev/null @@ -1,17 +0,0 @@ -.features { - display: flex; - padding: 2rem 0; - width: 100%; -} - -[data-theme="dark"] .featureSvg { - height: 200px; - width: 200px; - fill: #ffffff; -} - -[data-theme="light"] .featureSvg { - height: 200px; - width: 200px; - fill: #000000; -} diff --git a/src/css/custom.css b/src/css/custom.css index b4d6d05d..ecc8bf59 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -14,8 +14,16 @@ --ifm-color-primary-lighter: #ef3074; --ifm-color-primary-lightest: #f2528b; --ifm-font-size-base: 16px; - --ifm-card-background-color: #eeeeee; + --ifm-card-background-color: #ffe4e8; --ifm-font-family-base: "Helvetica"; + --ifm-heading-font-weight: 500; + --ifm-navbar-padding-vertical: 1rem; + --ifm-navbar-padding-horizontal: 2rem; + --ifm-navbar-height: 5.5rem; + --ifm-menu-color-background-active: #fff1f3; + --ifm-menu-color-active: #000000; + --ifm-navbar-link-color: #777777; + --search-local-highlight-color: #fd738f; } /* For readability concerns, you should choose a lighter palette in dark mode. */ @@ -27,9 +35,14 @@ --ifm-color-primary-light: #f26796; --ifm-color-primary-lighter: #f375a0; --ifm-color-primary-lightest: #f7a0be; - --ifm-card-background-color: #272727; + --ifm-card-background-color: #1b1b1b; + --ifm-navbar-background-color: #000000; + --ifm-footer-background-color: #000000; + --ifm-background-color: #000000 !important; /* Correct search icon so it shows up white in dark mode. */ --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,'); + --ifm-menu-color-background-active: #34101c; + --ifm-menu-color-active: #f0f0f0; } /* Add GitHub logo to navbar. */ @@ -63,3 +76,63 @@ .header-telegram-link:hover::before { background-color: var(--ifm-navbar-link-hover-color); } + +.navbar__search-input { + /* border: solid 1px #ffffff; */ + border-radius: var(--ifm-global-radius); + width: 270px; + height: 42px; +} + +.navbar__search-input:focus-visible { + outline: solid 1px #ffffff; +} + +[data-theme="dark"] .menu__link--active { + border-left: 4px solid #fd738f; +} + +.menu__link--active { + border-left: 4px solid #4d041d; +} + +.menu__list-item-collapsible--active { + background-color: var(--ifm-menu-color-background-active); +} +[data-theme="dark"] .menu__list-item-collapsible--active { + background-color: var(--ifm-menu-color-background-active); +} + +[data-theme="dark"] .table-of-contents__link--active { + color: var(--ifm-menu-color-active); + background-color: var(--ifm-menu-color-background-active); +} +.table-of-contents__link--active { + color: var(--ifm-menu-color-active); + background-color: var(--ifm-menu-color-background-active); +} + +.table-of-contents__link { + padding: 4px 12px; + width: fit-content; +} + +.footer__copyright { + font-size: 14px; + color: #777777; +} + +.navbar { + border-bottom: 1px solid #777777; +} + +.navbar__title { + color: #8a113e; +} +[data-theme="dark"] .navbar__title { + color: #ffe4e8; +} + +.navbar__items { + color: var(--ifm-navbar-link-color); +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f71b2043..a240f922 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,38 +1,16 @@ -import clsx from "clsx"; -import Link from "@docusaurus/Link"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Layout from "@theme/Layout"; -import HomepageFeatures from "@site/src/components/HomepageFeatures"; -import Heading from "@theme/Heading"; -import styles from "./index.module.css"; - -function HomepageHeader() { - const { siteConfig } = useDocusaurusContext(); - return ( -
-
- - {siteConfig.title} - -

{siteConfig.tagline}

-
- - Start Building → - -
-
-
- ); -} +import FeaturesSection from "../components/HomepageFeatures/featuresSection"; +import HeroSection from "../components/HomepageFeatures/heroSection"; export default function Home(): JSX.Element { const { siteConfig } = useDocusaurusContext(); return ( -
- + +
); diff --git a/src/theme/Footer/Copyright/index.tsx b/src/theme/Footer/Copyright/index.tsx new file mode 100644 index 00000000..ba04637b --- /dev/null +++ b/src/theme/Footer/Copyright/index.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import type { Props } from "@theme/Footer/Copyright"; + +export default function FooterCopyright({ copyright }: Props): JSX.Element { + return ( +
+ ); +} diff --git a/src/theme/Footer/CustomFooter/customFooter.module.css b/src/theme/Footer/CustomFooter/customFooter.module.css new file mode 100644 index 00000000..c7bed983 --- /dev/null +++ b/src/theme/Footer/CustomFooter/customFooter.module.css @@ -0,0 +1,92 @@ +.footerRoot { + border-top-style: solid; + border-top-width: 3px; + border-image: linear-gradient(90deg, #ffd1de, #ff1b5a) 1; +} + +.footerContainer { + display: grid; + grid-template-columns: 1fr; + grid-column-gap: 0px; + grid-row-gap: 0px; + justify-items: center; + padding: 20px; +} + +.developerLinksTitle { + font-weight: 700; + font-size: 12px; + color: #777777; +} +.developerLinks { + display: flex; + flex-direction: column; + gap: 16px; + align-items: center; +} + +.supportLinks { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; +} + +.displayedLinks { + display: grid; + grid-template-columns: repeat(1, 1fr); + grid-column-gap: 12px; + grid-row-gap: 12px; + justify-items: center; +} + +.supportDisplayedLinks { + display: flex; + gap: 8px 24px; + color: #777777; + flex-wrap: wrap; + justify-content: center; +} + +.devExternalLink { + display: flex; + gap: 6px; + color: currentColor; + align-items: center; +} +.supportExternalLink { + color: currentColor; + cursor: pointer; + font-size: 14px; +} + +@media (min-width: 996px) { + .footerContainer { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr; + grid-column-gap: 24px; + grid-row-gap: 0px; + padding-top: 90px; + padding-bottom: 50px; + } + .developerLinks { + grid-area: 1 / 2 / 2 / 3; + align-items: start; + justify-self: end; + } + .supportLinks { + grid-area: 1 / 1 / 2 / 2; + justify-self: start; + } + .supportLinks { + align-items: start; + } + .displayedLinks { + grid-template-columns: repeat(2, 1fr); + justify-items: start; + } + .supportDisplayedLinks { + justify-content: flex-start; + gap: 24px; + } +} diff --git a/src/theme/Footer/CustomFooter/customFooter.tsx b/src/theme/Footer/CustomFooter/customFooter.tsx new file mode 100644 index 00000000..445e9d30 --- /dev/null +++ b/src/theme/Footer/CustomFooter/customFooter.tsx @@ -0,0 +1,91 @@ +import { ReactNode } from "react"; +import classes from "./customFooter.module.css"; +import Link from "@docusaurus/Link"; +import SocialLinks from "../SocialLinks/SocialLinks"; +import { Props } from "@theme/Footer/LinkItem"; +import clsx from "clsx"; + +type CustomFooterProps = { + links?: { + title: string; + items: Props["item"][]; + }[]; + logo?: ReactNode; + copyright?: ReactNode; +}; + +export default function CustomFooter({ + links, + logo, + copyright, +}: CustomFooterProps) { + const developerLinks = links.find((link) => link.title == "Developer links"); + const supportLinks = links.find((link) => link.title == "Support"); + return ( +
+
+
+
DEVELOPER LINKS
+
+ {developerLinks.items.map(({ label, href }) => ( + +
{label}
+ + + + + + + ))} +
+
+
+
{logo}
+
+ {supportLinks.items.map(({ label, to, href }, index) => ( + <> + {index != 0 &&
|
} + {href ? ( + + {label} + + ) : ( + + {label} + + )} + + ))} +
+ +
{copyright}
+
+
+
+ ); +} diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx new file mode 100644 index 00000000..6d8c7eb3 --- /dev/null +++ b/src/theme/Footer/Layout/index.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import clsx from "clsx"; +import type { Props } from "@theme/Footer/Layout"; + +export default function FooterLayout({ + style, + links, + logo, + copyright, +}: Props): JSX.Element { + return ( +
+
+ {links} + {(logo || copyright) && ( +
+ {logo &&
{logo}
} + {copyright} +
+ )} +
+
+ ); +} diff --git a/src/theme/Footer/LinkItem/index.tsx b/src/theme/Footer/LinkItem/index.tsx new file mode 100644 index 00000000..b0adcf1a --- /dev/null +++ b/src/theme/Footer/LinkItem/index.tsx @@ -0,0 +1,30 @@ +import React from "react"; + +import Link from "@docusaurus/Link"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import isInternalUrl from "@docusaurus/isInternalUrl"; +import IconExternalLink from "@theme/Icon/ExternalLink"; +import type { Props } from "@theme/Footer/LinkItem"; + +export default function FooterLinkItem({ item }: Props): JSX.Element { + const { to, href, label, prependBaseUrlToHref, ...props } = item; + const toUrl = useBaseUrl(to); + const normalizedHref = useBaseUrl(href, { forcePrependBaseUrl: true }); + + return ( + + {label} + {href && !isInternalUrl(href) && } + + ); +} diff --git a/src/theme/Footer/Links/MultiColumn/index.tsx b/src/theme/Footer/Links/MultiColumn/index.tsx new file mode 100644 index 00000000..a349724f --- /dev/null +++ b/src/theme/Footer/Links/MultiColumn/index.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import LinkItem from "@theme/Footer/LinkItem"; +import type { Props } from "@theme/Footer/Links/MultiColumn"; + +type ColumnType = Props["columns"][number]; +type ColumnItemType = ColumnType["items"][number]; + +function ColumnLinkItem({ item }: { item: ColumnItemType }) { + return item.html ? ( +
  • + ) : ( +
  • + +
    • + ); +} + +function Column({ column }: { column: ColumnType }) { + return ( +
    +
    {column.title}
    +
      + {column.items.map((item, i) => ( + + ))} +
    +
    + ); +} + +export default function FooterLinksMultiColumn({ + columns, +}: Props): JSX.Element { + return ( +
    + {columns.map((column, i) => ( + + ))} +
    + ); +} diff --git a/src/theme/Footer/Links/Simple/index.tsx b/src/theme/Footer/Links/Simple/index.tsx new file mode 100644 index 00000000..5a67bad3 --- /dev/null +++ b/src/theme/Footer/Links/Simple/index.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import LinkItem from "@theme/Footer/LinkItem"; +import type { Props } from "@theme/Footer/Links/Simple"; + +function Separator() { + return ·; +} + +function SimpleLinkItem({ item }: { item: Props["links"][number] }) { + return item.html ? ( + + ) : ( + + ); +} + +export default function FooterLinksSimple({ links }: Props): JSX.Element { + return ( +
    +
    + {links.map((item, i) => ( + + + {links.length !== i + 1 && } + + ))} +
    +
    + ); +} diff --git a/src/theme/Footer/Links/index.tsx b/src/theme/Footer/Links/index.tsx new file mode 100644 index 00000000..96edae5d --- /dev/null +++ b/src/theme/Footer/Links/index.tsx @@ -0,0 +1,14 @@ +import React from "react"; + +import { isMultiColumnFooterLinks } from "@docusaurus/theme-common"; +import FooterLinksMultiColumn from "@theme/Footer/Links/MultiColumn"; +import FooterLinksSimple from "@theme/Footer/Links/Simple"; +import type { Props } from "@theme/Footer/Links"; + +export default function FooterLinks({ links }: Props): JSX.Element { + return isMultiColumnFooterLinks(links) ? ( + + ) : ( + + ); +} diff --git a/src/theme/Footer/Logo/index.tsx b/src/theme/Footer/Logo/index.tsx new file mode 100644 index 00000000..388675ba --- /dev/null +++ b/src/theme/Footer/Logo/index.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import clsx from "clsx"; +import Link from "@docusaurus/Link"; +import { useBaseUrlUtils } from "@docusaurus/useBaseUrl"; +import ThemedImage from "@theme/ThemedImage"; +import type { Props } from "@theme/Footer/Logo"; + +import styles from "./styles.module.css"; + +function LogoImage({ logo }: Props) { + const { withBaseUrl } = useBaseUrlUtils(); + const sources = { + light: withBaseUrl(logo.src), + dark: withBaseUrl(logo.srcDark ?? logo.src), + }; + return ( + + ); +} + +export default function FooterLogo({ logo }: Props): JSX.Element { + return logo.href ? ( + + + + ) : ( + + ); +} diff --git a/src/theme/Footer/Logo/styles.module.css b/src/theme/Footer/Logo/styles.module.css new file mode 100644 index 00000000..abcc510f --- /dev/null +++ b/src/theme/Footer/Logo/styles.module.css @@ -0,0 +1,6 @@ +.footerLogoLink { + margin-left: -12px; +} + +.footerLogoLink:hover { +} diff --git a/src/theme/Footer/SocialLinks/SocialLinks.tsx b/src/theme/Footer/SocialLinks/SocialLinks.tsx new file mode 100644 index 00000000..0c9e7074 --- /dev/null +++ b/src/theme/Footer/SocialLinks/SocialLinks.tsx @@ -0,0 +1,58 @@ +import GitHub from "@site/static/img/social-icons/github.svg"; +import YouTube from "@site/static/img/social-icons/youtube.svg"; +import LinkedIn from "@site/static/img/social-icons/linkedin.svg"; +import Discord from "@site/static/img/social-icons/discord.svg"; +import Medium from "@site/static/img/social-icons/Medium.svg"; +import X from "@site/static/img/social-icons/X.svg"; +import Telegram from "@site/static/img/social-icons/Telegram.svg"; + +import Link from "@docusaurus/Link"; +import classes from "./socialLinks.module.css"; + +type SocialLinkProps = { + href: string; + icon: React.ComponentType>; +}; + +const socialLinks: Array = [ + { + href: "https://github.com/flare-foundation", + icon: GitHub, + }, + { + href: "https://www.youtube.com/c/Flare_Networks", + icon: YouTube, + }, + { + href: "https://www.linkedin.com/company/flarenetwork/", + icon: LinkedIn, + }, + { + href: "https://discord.com/invite/flarenetwork", + icon: Discord, + }, + { + href: "https://twitter.com/FlareNetworks", + icon: X, + }, + { + href: "https://medium.com/flarenetwork", + icon: Medium, + }, + { + href: "https://t.me/FlareNetwork", + icon: Telegram, + }, +]; + +export default function SocialLinks() { + return ( +
    + {socialLinks.map((social) => ( + + + + ))} +
    + ); +} diff --git a/src/theme/Footer/SocialLinks/socialLinks.module.css b/src/theme/Footer/SocialLinks/socialLinks.module.css new file mode 100644 index 00000000..6b533d3c --- /dev/null +++ b/src/theme/Footer/SocialLinks/socialLinks.module.css @@ -0,0 +1,19 @@ +.socialLinksList { + display: flex; + gap: 22px; +} + +.link { + height: 20px; + width: 20px; +} + +.socialSvg { + width: 100%; + height: 100%; + /* fill: #d1d1d1; */ +} + +.socialSvg:hover { + fill: var(--ifm-link-color); +} diff --git a/src/theme/Footer/index.tsx b/src/theme/Footer/index.tsx new file mode 100644 index 00000000..df19fe69 --- /dev/null +++ b/src/theme/Footer/index.tsx @@ -0,0 +1,39 @@ +import React from "react"; + +import { useThemeConfig } from "@docusaurus/theme-common"; +import FooterLinks from "@theme/Footer/Links"; +import FooterLogo from "@theme/Footer/Logo"; +import FooterCopyright from "@theme/Footer/Copyright"; +import FooterLayout from "@theme/Footer/Layout"; +import CustomFooter from "./CustomFooter/customFooter"; + +function Footer(): JSX.Element | null { + const { footer } = useThemeConfig(); + if (!footer) { + return null; + } + const { copyright, links, logo, style } = footer; + + return ( + <> + {links.find((link) => link.title == "Developer links") && + links.find((link) => link.title == "Support") ? ( + 0 && links} + logo={logo && } + copyright={copyright && } + /> + ) : ( + 0 && } + logo={logo && } + copyright={copyright && } + /> + )} + + ); +} + +export default React.memo(Footer); diff --git a/static/img/landing/dev_hub_ani_dark.mp4 b/static/img/landing/dev_hub_ani_dark.mp4 new file mode 100644 index 00000000..d8c7b889 Binary files /dev/null and b/static/img/landing/dev_hub_ani_dark.mp4 differ diff --git a/static/img/landing/dev_hub_ani_dark.webm b/static/img/landing/dev_hub_ani_dark.webm new file mode 100644 index 00000000..282d4300 Binary files /dev/null and b/static/img/landing/dev_hub_ani_dark.webm differ diff --git a/static/img/landing/dev_hub_ani_light.mp4 b/static/img/landing/dev_hub_ani_light.mp4 new file mode 100644 index 00000000..7a5d5673 Binary files /dev/null and b/static/img/landing/dev_hub_ani_light.mp4 differ diff --git a/static/img/landing/dev_hub_ani_light.webm b/static/img/landing/dev_hub_ani_light.webm new file mode 100644 index 00000000..46caba6d Binary files /dev/null and b/static/img/landing/dev_hub_ani_light.webm differ diff --git a/static/img/landing/dev_hub_ani_noblur.png b/static/img/landing/dev_hub_ani_noblur.png new file mode 100644 index 00000000..19d3d7f1 Binary files /dev/null and b/static/img/landing/dev_hub_ani_noblur.png differ diff --git a/static/img/landing/splash.png b/static/img/landing/splash.png new file mode 100644 index 00000000..d0143bfa Binary files /dev/null and b/static/img/landing/splash.png differ diff --git a/static/img/logo/FooterLogoDark.svg b/static/img/logo/FooterLogoDark.svg new file mode 100644 index 00000000..4588373b --- /dev/null +++ b/static/img/logo/FooterLogoDark.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/logo/FooterLogoLight.svg b/static/img/logo/FooterLogoLight.svg new file mode 100644 index 00000000..c6d6c705 --- /dev/null +++ b/static/img/logo/FooterLogoLight.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/social-icons/Medium.svg b/static/img/social-icons/Medium.svg new file mode 100644 index 00000000..a1f8a950 --- /dev/null +++ b/static/img/social-icons/Medium.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/social-icons/Telegram.svg b/static/img/social-icons/Telegram.svg new file mode 100644 index 00000000..0a5cc2c7 --- /dev/null +++ b/static/img/social-icons/Telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/social-icons/X.svg b/static/img/social-icons/X.svg new file mode 100644 index 00000000..ca0951a9 --- /dev/null +++ b/static/img/social-icons/X.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/img/social-icons/discord.svg b/static/img/social-icons/discord.svg new file mode 100644 index 00000000..f3e9718f --- /dev/null +++ b/static/img/social-icons/discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/social-icons/github.svg b/static/img/social-icons/github.svg new file mode 100644 index 00000000..f2941532 --- /dev/null +++ b/static/img/social-icons/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/social-icons/linkedin.svg b/static/img/social-icons/linkedin.svg new file mode 100644 index 00000000..4d368e54 --- /dev/null +++ b/static/img/social-icons/linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/social-icons/youtube.svg b/static/img/social-icons/youtube.svg new file mode 100644 index 00000000..07cac2dc --- /dev/null +++ b/static/img/social-icons/youtube.svg @@ -0,0 +1,3 @@ + + +