diff --git a/public/images/hero-1.png b/public/images/hero-1.png new file mode 100644 index 00000000000..f921b02c1ec Binary files /dev/null and b/public/images/hero-1.png differ diff --git a/public/images/hero-dotted.png b/public/images/hero-dotted.png new file mode 100644 index 00000000000..fbcd97a909d Binary files /dev/null and b/public/images/hero-dotted.png differ diff --git a/src/assets/product-logos/automated-compliance-engine.svg b/src/assets/product-logos/automated-compliance-engine.svg new file mode 100644 index 00000000000..e786648eddd --- /dev/null +++ b/src/assets/product-logos/automated-compliance-engine.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/product-logos/chainlink-local-2-logo.svg b/src/assets/product-logos/chainlink-local-2-logo.svg new file mode 100644 index 00000000000..f3a6360b201 --- /dev/null +++ b/src/assets/product-logos/chainlink-local-2-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/product-logos/cre-logo.svg b/src/assets/product-logos/cre-logo.svg new file mode 100644 index 00000000000..24f9affde6a --- /dev/null +++ b/src/assets/product-logos/cre-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/product-logos/data-link-vault.svg b/src/assets/product-logos/data-link-vault.svg new file mode 100644 index 00000000000..292b03b63a5 --- /dev/null +++ b/src/assets/product-logos/data-link-vault.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/product-logos/general-globe-logo.svg b/src/assets/product-logos/general-globe-logo.svg new file mode 100644 index 00000000000..11804ee8b1e --- /dev/null +++ b/src/assets/product-logos/general-globe-logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/product-logos/nodes-logo.svg b/src/assets/product-logos/nodes-logo.svg new file mode 100644 index 00000000000..016dae52333 --- /dev/null +++ b/src/assets/product-logos/nodes-logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Demos.module.css b/src/components/Demos.module.css index b01d18d44ee..37371d59041 100644 --- a/src/components/Demos.module.css +++ b/src/components/Demos.module.css @@ -3,6 +3,10 @@ display: flex; flex-direction: column; gap: var(--space-6x); + + & > h2 { + font-size: 28px; + } } .grid { diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/MegaMenu.tsx b/src/components/Header/Nav/ProductNavigation/Desktop/MegaMenu.tsx index 14501ad431f..61bfa307004 100644 --- a/src/components/Header/Nav/ProductNavigation/Desktop/MegaMenu.tsx +++ b/src/components/Header/Nav/ProductNavigation/Desktop/MegaMenu.tsx @@ -1,209 +1,244 @@ -import { evmProducts } from "~/features/landing/data/index.ts" import styles from "./megaMenu.module.css" -import resourcesLogo from "../../../../../assets/product-logos/data-resources-logo.svg" -import { Fragment } from "react/jsx-runtime" -import { useEffect } from "react" +import ccipLogo from "../../../../../assets/product-logos/ccip-logo.svg" +import dataFeedsLogo from "../../../../../assets/product-logos/data-feeds-logo.svg" +import dataStreamsLogo from "../../../../../assets/product-logos/data-streams-logo.svg" +import dataLinkLogo from "../../../../../assets/product-logos/datalink-logo.svg" +import functionsLogo from "../../../../../assets/product-logos/functions-logo.svg" +import automationLogo from "../../../../../assets/product-logos/automation-logo.svg" +import vrfLogo from "../../../../../assets/product-logos/vrf-logo.svg" +import dtaLogo from "../../../../../assets/product-logos/dta-logo.svg" +import generalGlobeLogo from "../../../../../assets/product-logos/general-globe-logo.svg" +import nodesLogo from "../../../../../assets/product-logos/nodes-logo.svg" +import chainlinkLocalLogo from "../../../../../assets/product-logos/chainlink-local-2-logo.svg" +import creLogo from "../../../../../assets/product-logos/cre-logo.svg" +import { Typography } from "@chainlink/blocks" +import { clsx } from "../../utils.ts" -interface MegaMenuProps { - cancel: () => void - id?: string +const BlueSquare = () => { + return ( +
+ ) +} + +interface GroupItem { + title: string + description: string + icon: ImageMetadata + link: string } -export const megaMenuSections = [ - { - title: "Cross-Chain", +const GroupItem = ({ data }: { data: GroupItem }) => { + return ( + + {data.title} +
+ + {data.title} + + + {data.description} + +
+ + ) +} + +const GroupTitle = ({ children }: { children: React.ReactNode }) => { + return ( + + {children} + + ) +} + +export const megaMenuSections = { + interoperability: { + title: "Interoperability", items: [ { - ...(evmProducts.find((product) => product.title === "CCIP") || {}), - links: [ - { - label: "Docs", - href: (evmProducts.find((product) => product.title === "CCIP") || {})?.docsLandingLink, - }, - { - label: "Learn", - href: (evmProducts.find((product) => product.title === "CCIP") || {})?.learnMoreLink, - }, - ], + icon: ccipLogo, + title: "Cross-Chain Communication", + description: "Move data and value across any blockchain", + link: "/ccip", }, ], - bottomLinks: [ + }, + data: { + title: "Data", + items: [ { - label: "View all resources", - href: "https://dev.chain.link/resources", + icon: dataStreamsLogo, + title: "Data Streams", + description: "Access high-frequency market data for next-gen DeFi", + link: "/data-streams", + }, + { + icon: dataFeedsLogo, + title: "Market and Data Feeds", + description: "Utilize ultra-secure onchain data for smart contracts", + link: "/data-feeds", }, { - label: "Learn about Chainlink", - href: "https://dev.chain.link/products/general", + icon: dataLinkLogo, + title: "DataLink", + description: "Publish and commercialize institutional data across...", + link: "/datalink", }, ], }, - { - title: "Data", + assetManagement: { + title: "Asset Management", items: [ { - ...evmProducts.find((product) => product.title === "Data Feeds"), - title: "Data Feeds", - links: [ - { - label: "Docs", - href: (evmProducts.find((product) => product.title === "Data Feeds") || {})?.docsLandingLink, - }, - { - label: "Learn", - href: (evmProducts.find((product) => product.title === "Data Feeds") || {})?.learnMoreLink, - }, - ], + icon: dtaLogo, + title: "Digital Transfer Agent (DTA) Technical Standard", + description: "Unlock streamlined tokenized fund operations", + link: "/dta-technical-standard", }, - + ], + }, + compute: { + title: "Compute", + items: [ { - ...evmProducts.find((product) => product.title === "Data Streams"), - title: "Data Streams", - links: [ - { - label: "Docs", - href: (evmProducts.find((product) => product.title === "Data Streams") || {})?.docsLandingLink, - }, - { - label: "Learn", - href: (evmProducts.find((product) => product.title === "Data Streams") || {})?.learnMoreLink, - }, - ], + icon: functionsLogo, + title: "Functions", + description: "Connect smart contracts to any API", + link: "/chainlink-functions", }, - { - title: "Data resources", - image: resourcesLogo, - description: "Global standard for building secure cross-chain applications.", - learnMoreLink: "data-feeds", - links: [ - { - label: "Learn", - href: "https://dev.chain.link/products/data", - }, - ], + icon: automationLogo, + title: "Automation", + description: "Automate smart contracts via decentralized triggers", + link: "/chainlink-automation", + }, + { + icon: vrfLogo, + title: "VRF", + description: "Ensure fair outcomes in games, NFTs, and more", + link: "/vrf", }, ], }, - { - title: "Compute", + orchestration: { + title: "Orchestration", items: [ { - ...evmProducts.find((product) => product.title === "Automation"), - links: [ - { - label: "Docs", - href: (evmProducts.find((product) => product.title === "Automation") || {})?.docsLandingLink, - }, - { - label: "Learn", - href: (evmProducts.find((product) => product.title === "Automation") || {})?.learnMoreLink, - }, - ], + icon: creLogo, + title: "Chainlink Runtime Environment (CRE)", + description: "The global orchestration layer", + link: "/", + }, + ], + }, + other: { + title: "More", + items: [ + { + icon: generalGlobeLogo, + title: "General", + description: "Foundational Chainlink knowledge", + link: "/getting-started/conceptual-overview", }, { - ...evmProducts.find((product) => product.title === "Functions"), - links: [ - { - label: "Docs", - href: (evmProducts.find((product) => product.title === "Functions") || {})?.docsLandingLink, - }, - { - label: "Learn", - href: (evmProducts.find((product) => product.title === "Functions") || {})?.learnMoreLink, - }, - ], + icon: nodesLogo, + title: "Nodes", + description: "Be part of the Chainlink Network", + link: "/", }, { - ...evmProducts.find((product) => product.title === "VRF"), - links: [ - { - label: "Docs", - href: (evmProducts.find((product) => product.title === "VRF") || {})?.docsLandingLink, - }, - { - label: "Learn", - href: (evmProducts.find((product) => product.title === "VRF") || {})?.learnMoreLink, - }, - ], + icon: chainlinkLocalLogo, + title: "Chainlink local", + description: "Run services locally before transitioning to a testnet", + link: "/chainlink-local", }, ], }, -] - -function MegaMenu({ cancel, id }: MegaMenuProps) { - useEffect(() => { - const onESC = (ev: KeyboardEvent) => { - if (ev.key === "Escape") { - cancel() - } - } - window.addEventListener("keyup", onESC, false) - return () => { - window.removeEventListener("keyup", onESC, false) - } - }, []) +} +function MegaMenu({ cancel, isMobile }: { cancel?: () => void; isMobile?: boolean }) { return ( -
-
-
- {megaMenuSections.map((section) => ( -
-

{section.title}

- {section.items.map((item, index) => ( - -
- {item?.image?.src && {item.title}} -

{item.title}

-
-
-

{item.description}

- {item.links.map((link, index) => ( - - - {link.label} - - {index < item.links.length - 1 && } - - ))} -
- - ))} - {section.bottomLinks && ( -
- {section.bottomLinks.map((link, index) => ( - - ))} -
- )} -
- ))} +
+
+
+
+ + {megaMenuSections.orchestration.title} +
+
  • + {megaMenuSections.orchestration.items.map((link) => ( + + ))} +
    • -
    -

    Featured

    - - - -
    +
    +
    + + {megaMenuSections.interoperability.title} +
    +
  • + {megaMenuSections.interoperability.items.map((link) => ( + + ))} +
    • +
    +
    +
    + + {megaMenuSections.assetManagement.title} +
    +
  • + {megaMenuSections.assetManagement.items.map((link) => ( + + ))} +
    • +
    +
    -

    Hardhat CLI for Data Streams

    - -

    Try out Chainlink Automation

    - +
    +
    +
    + + {megaMenuSections.data.title} +
    +
  • + {megaMenuSections.data.items.map((link) => ( + + ))} +
    • +
    +
    +
    + + {megaMenuSections.compute.title} +
    +
  • + {megaMenuSections.compute.items.map((link) => ( + + ))} +
    • +
    +
    +
    + + {megaMenuSections.other.title} +
    +
  • + {megaMenuSections.other.items.map((link) => ( + + ))} +
    • diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/MegaMenuContainer.tsx b/src/components/Header/Nav/ProductNavigation/Desktop/MegaMenuContainer.tsx new file mode 100644 index 00000000000..17a6a2a25ce --- /dev/null +++ b/src/components/Header/Nav/ProductNavigation/Desktop/MegaMenuContainer.tsx @@ -0,0 +1,27 @@ +import { useEffect } from "react" +import styles from "./megaMenu.module.css" + +interface MegaMenuProps { + cancel: () => void + id?: string + children?: React.ReactNode +} + +export default function MegaMenuContainer({ cancel, id, children }: MegaMenuProps) { + useEffect(() => { + const onESC = (ev: KeyboardEvent) => { + if (ev.key === "Escape") { + cancel() + } + } + window.addEventListener("keyup", onESC, false) + return () => { + window.removeEventListener("keyup", onESC, false) + } + }, []) + return ( +
    + {children} +
    + ) +} diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx index c6e0768cb9f..9f9cfe6853c 100644 --- a/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx +++ b/src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx @@ -6,6 +6,7 @@ import { extendRadixComponent } from "../extendRadixComponent.ts" import styles from "./productNavigation.module.css" import { CaretIcon } from "../CaretIcon.tsx" import MegaMenu from "./MegaMenu.tsx" +import MegaMenuContainer from "./MegaMenuContainer.tsx" type Props = { setNavMenuOpen: (navMenuOpen: boolean) => void @@ -42,27 +43,20 @@ export const ProductNavigation = ({ setNavMenuOpen, showMegaMenu, isMegamenuOpen <> - + - Resources + Docs - - - Docs - - Demos @@ -84,7 +78,11 @@ export const ProductNavigation = ({ setNavMenuOpen, showMegaMenu, isMegamenuOpen - {isMegamenuOpen && } + {isMegamenuOpen && ( + + + + )} ) diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/megaMenu.module.css b/src/components/Header/Nav/ProductNavigation/Desktop/megaMenu.module.css index 83ba42a3509..6b3b9066541 100644 --- a/src/components/Header/Nav/ProductNavigation/Desktop/megaMenu.module.css +++ b/src/components/Header/Nav/ProductNavigation/Desktop/megaMenu.module.css @@ -9,15 +9,8 @@ justify-content: center; } -.wrapper { - max-width: 1360px; - width: 100%; - background-color: white; - height: fit-content; - border-radius: 0.5rem; - display: grid; - grid-template-columns: 3fr 1fr; - overflow: hidden; +/* applies shadow to dropdown version of mega-menu */ +.megaMenuContainer > .wrapper { box-shadow: 4.6px 9.3px 54px 1px rgba(152, 160, 185, 0.04), 2.1px 4.3px 32px -0.7px rgba(152, 160, 185, 0.31), @@ -25,108 +18,128 @@ 0.3px 0.5px 0.8px 0px rgba(152, 160, 185, 0.12); } -.wrapper h2 { - padding-bottom: var(--space-4x); - color: var(--gray-500); - text-transform: uppercase; - border-bottom: 1px solid var(--gray-200); - margin-bottom: var(--space-8x); -} +.wrapper { + max-width: 1500px; + width: 100%; + background-color: white; + height: fit-content; + overflow: hidden; + display: flex; + flex-direction: column; -.wrapper h3 { - font-family: var(--font-family-text); - color: var(--gray-900); + border: 1px solid var(--border); } -.wrapper p { - color: var(--gray-500); - margin-top: var(--space-2x); - margin-bottom: var(--space-3x); - line-height: var(--space-6x); +.row { + display: grid; + grid-template-columns: repeat(3, 1fr); + border-bottom: 1px solid var(--border); } -.resourcesMenuContentMain { - padding-top: var(--space-16x); - padding-left: var(--space-16x); - padding-bottom: var(--space-16x); - padding-right: var(--space-8x); - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: var(--space-16x); +.row:last-child { + border-bottom: none; } -.resourcesMenuContentRow { +.wrapper header { display: flex; - flex-direction: column; + align-items: center; + gap: var(--space-3x); + padding: var(--space-4x) var(--space-6x); } -.verticalDivider { - border-left: 1px solid var(--gray-300); - margin: 0 var(--space-3x); +.wrapper p { + margin-bottom: 0; } -.links { - margin-bottom: var(--space-10x); +.section { + display: flex; + flex-direction: column; + border-right: 1px solid var(--border); } -.links a { - font-weight: var(--font-weight-medium); - color: var(--color-text-link); +.section:last-child { + border-right: none; } -.resourcesMenuContentFeatured { - padding-top: var(--space-16x); - padding-left: var(--space-8x); - padding-bottom: var(--space-16x); - padding-right: var(--space-16x); - background-color: var(--gray-100); +.section header { + border-bottom: 1px solid var(--border); } -.megaMenuLink { +.groupItem { display: flex; align-items: center; - gap: var(--space-2x); -} - -.megaMenuLink h3 { - margin-bottom: 0; + padding: var(--space-6x) var(--space-8x); + gap: var(--space-4x); + text-decoration: none; + transition: background-color 0.2s; } -.megaMenuLink img { - width: var(--space-5x); - height: var(--space-5x); +.groupItem:hover { + background-color: var(--muted); } -.featuredImage { - width: 100%; +.groupItemIcon { + width: 24px; + height: 24px; + flex-shrink: 0; } -.divider { - border-bottom: 1px solid var(--gray-200); - margin: var(--space-8x) auto; -} - -.bottomLinks { - margin-top: auto; +.itemList { display: flex; flex-direction: column; - gap: var(--space-3x); } -.bottomLinks div { - display: flex; - align-items: center; - gap: var(--space-2x); - line-height: var(--space-6x); +.groupItemDescription { + display: -webkit-box; + -webkit-line-clamp: 1; + line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; } -.bottomLinks a { - color: var(--gray-900); +.groupItemTitle { + display: -webkit-box; + -webkit-line-clamp: 1; + line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; + font-size: 18px; + font-weight: 500; } -/* TODO: change with a var when available in the chainlink repo */ -.bottomLink a:hover { - color: #0847f7; +.wrapper.mobile { + border: none; + overflow: unset; + + & .row { + grid-template-columns: 1fr; + border-bottom: none; + } + + & .section header { + border-bottom: 1px solid var(--border); + border-top: 1px solid var(--border); + } + + & .section { + border-right: none; + } + + & .groupItemTitle { + display: block; + -webkit-line-clamp: unset; + line-clamp: unset; + -webkit-box-orient: unset; + overflow: visible; + } + + & .groupItemDescription { + display: block; + -webkit-line-clamp: unset; + line-clamp: unset; + -webkit-box-orient: unset; + overflow: visible; + } } @media screen and (min-width: 768px) { diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css b/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css index 4057b7ac853..048809c260c 100644 --- a/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css +++ b/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css @@ -57,19 +57,6 @@ opacity: 1; } -.megaMenu::after { - content: ""; - position: absolute; - bottom: -35px; - right: 35%; - transform: translateX(-50%) rotate(45deg); - width: 20px; - height: 20px; - z-index: 100; - background-color: white; - padding: var(--space-2x); -} - @media screen and (min-width: 992px) { .root { display: flex; diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/MegaMenu.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/MegaMenu.tsx deleted file mode 100644 index f3c1d0dfd6b..00000000000 --- a/src/components/Header/Nav/ProductNavigation/Mobile/MegaMenu.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import styles from "./megaMenu.module.css" -import { Fragment } from "react/jsx-runtime" -import { megaMenuSections } from "../Desktop/MegaMenu.tsx" -import { useState } from "react" - -function MegaMenu() { - return ( -
    -
    - {megaMenuSections.map((section) => ( -
    -

    {section.title}

    - {section.items.map((item, index) => ( - - ))} -
    - ))} - - -
    -
    -

    Featured

    - -
    - -

    Blockchain 101

    -
    - Docs - - SDK -
    -
    -
    - ) -} - -function MegaMenuItem({ - image, - title, - description, - links, -}: { - image?: string - title?: string - description?: string - links: { label: string; href: string | undefined }[] -}) { - const [open, setOpen] = useState(false) - return ( - <> - - {open && ( -
    -

    {description}

    - {links.map((link, index) => ( - - - {link.label} - - {index < links.length - 1 && } - - ))} -
    - )} - - ) -} - -export default MegaMenu diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx index dc0f0371d88..b00ccb80fb2 100644 --- a/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx +++ b/src/components/Header/Nav/ProductNavigation/Mobile/ProductNavigation.tsx @@ -6,7 +6,7 @@ import styles from "./productNavigation.module.css" import { MenuIcon } from "./MenuIcon.tsx" import { BackArrowIcon } from "./BackArrowIcon.tsx" import { CaretRightIcon } from "./CaretRightIcon.tsx" -import MegaMenu from "./MegaMenu.tsx" +import MegaMenu from "../Desktop/MegaMenu.tsx" const Trigger = extendRadixComponent(Dialog.Trigger) const Close = extendRadixComponent(Dialog.Close) @@ -71,14 +71,12 @@ export function ProductNavigation() { className={styles.productContentLink} onClick={() => setProductsSlidePosition("submenu")} data-testid="sub-product-navigation-trigger-mobile" - aria-label="Open Resources submenu" + aria-label="Open Docs submenu" > - Resources + Docs - - Docs - + Demos @@ -103,11 +101,11 @@ export function ProductNavigation() { > - Resources + Docs {/* Spacer */}
    - +
    diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/megaMenu.module.css b/src/components/Header/Nav/ProductNavigation/Mobile/megaMenu.module.css deleted file mode 100644 index cf8382f3d30..00000000000 --- a/src/components/Header/Nav/ProductNavigation/Mobile/megaMenu.module.css +++ /dev/null @@ -1,142 +0,0 @@ -.wrapper { - width: 100%; - border-radius: 0.5rem; - display: flex; - flex-direction: column; - max-height: calc(100vh - 68px); -} - -.wrapper h2 { - padding-bottom: var(--space-3x); - color: var(--gray-500); - text-transform: uppercase; - - border-bottom: 1px solid var(--gray-200); -} - -.wrapper h3 { - font-family: var(--font-family-text); - color: var(--gray-900); -} - -.wrapper p { - color: var(--gray-500); - margin-top: var(--space-2x); - margin-bottom: var(--space-3x); - line-height: var(--space-6x); -} - -.resourcesMenuContentMain { - padding: var(--space-6x) var(--space-8x) var(--space-4x) var(--space-8x); - display: flex; - flex-direction: column; - gap: var(--space-6x); -} - -.resourcesMenuContentRow { - display: flex; - flex-direction: column; -} - -.verticalDivider { - border-left: 1px solid var(--gray-300); - margin: 0 var(--space-3x); -} - -.links { - margin-bottom: var(--space-6x); - margin-left: var(--space-8x); -} - -.links a { - font-weight: var(--font-weight-medium); - color: var(--color-text-link); -} - -.resourcesMenuContentFeatured { - padding-top: var(--space-16x); - padding-left: var(--space-8x); - padding-bottom: var(--space-16x); - padding-right: var(--space-16x); - background-color: var(--gray-100); -} - -.megaMenuButton { - display: flex; - justify-content: space-between; - align-items: center; - padding: var(--space-4x) var(--space-1x); - cursor: pointer; -} - -.megaMenuButton span { - font-size: var(--space-6x); - font-weight: var(--font-weight-medium); - color: var(--gray-500); -} - -.megaMenuLink { - display: flex; - align-items: center; - gap: var(--space-2x); -} - -.megaMenuLink h3 { - margin-bottom: 0; -} - -.megaMenuLink img { - width: var(--space-5x); - height: var(--space-5x); -} - -.featuredImage { - width: 100%; -} - -.divider { - border-bottom: 1px solid var(--gray-200); - margin: var(--space-8x) auto; -} - -.bottomLinks { - padding: var(--space-6x) 0; - display: flex; - flex-direction: column; - gap: var(--space-8x); - border-top: 1px solid var(--gray-200); -} - -.bottomLinks div { - display: flex; - align-items: center; - gap: var(--space-2x); - line-height: var(--space-6x); -} - -.bottomLinks a { - color: var(--gray-900); -} - -/* TODO: change with a var when available in the chainlink repo */ -.bottomLink a:hover { - color: #0847f7; -} - -@media screen and (min-width: 768px) { - .megaMenuContainer { - display: flex; - } -} - -@media screen and (min-width: 1280px) { - .wrapper::before { - left: 31%; - } -} - -@media screen and (min-width: 1565px) { - .wrapper::before { - left: 35%; - } -} diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/productNavigation.module.css b/src/components/Header/Nav/ProductNavigation/Mobile/productNavigation.module.css index 5994b36a9e4..b3bb2b4c22c 100644 --- a/src/components/Header/Nav/ProductNavigation/Mobile/productNavigation.module.css +++ b/src/components/Header/Nav/ProductNavigation/Mobile/productNavigation.module.css @@ -34,6 +34,7 @@ width: 200vw; display: flex; transition: transform 0.3s; + height: 100%; } .main { @@ -71,11 +72,11 @@ overflow: scroll; list-style: none; width: 100vw; - padding-bottom: 56px; } .subProductContent { display: flex; flex-direction: column; + height: 100%; } .subProductContentTitle { diff --git a/src/components/JourneyCards/JourneyCards.astro b/src/components/JourneyCards/JourneyCards.astro index 4bcab29d6f9..39e85bdf1b5 100644 --- a/src/components/JourneyCards/JourneyCards.astro +++ b/src/components/JourneyCards/JourneyCards.astro @@ -198,7 +198,7 @@ const tabs = columns.map((column) => ({ } .section-title { - font-size: 32px; + font-size: 28px; margin-bottom: var(--space-10x); } @@ -249,4 +249,10 @@ const tabs = columns.map((column) => ({ line-height: 22px; } } + + @media screen and (min-width: 62em) { + .section-title { + font-size: 32px; + } + } diff --git a/src/components/LandingHero/LandingHero.astro b/src/components/LandingHero/LandingHero.astro new file mode 100644 index 00000000000..4303beed5ea --- /dev/null +++ b/src/components/LandingHero/LandingHero.astro @@ -0,0 +1,21 @@ +--- +import { Typography } from "@chainlink/blocks" +import MegaMenu from "../Header/Nav/ProductNavigation/Desktop/MegaMenu" +import styles from "./landingHero.module.css" +--- + +
    +
    + Explore docs & resources +
    + +
    +
    + +
    +
    +
    + +
    +
    +
    diff --git a/src/components/LandingHero/landingHero.module.css b/src/components/LandingHero/landingHero.module.css new file mode 100644 index 00000000000..c7a64507745 --- /dev/null +++ b/src/components/LandingHero/landingHero.module.css @@ -0,0 +1,69 @@ +.content { + padding: var(--space-16x); + max-width: 1440px; + width: 100%; + margin: 0 auto; + position: absolute; + inset: 0; + z-index: 5; +} + +.backgrounds { + display: flex; + height: 100%; +} + +.title { + font-weight: 400; + margin-bottom: var(--space-8x); +} + +.wrapper { + background-color: var(--muted); + position: relative; + inset: 0; + height: 746px; +} + +.heroImage { + width: 100%; + height: 100%; + object-fit: cover; +} + +.heroDotted { + width: 100%; + object-fit: cover; +} +.heroLeft { + display: flex; + align-items: end; +} + +.heroRight, +.heroLeft { + width: 50%; + height: 100%; +} + +@media screen and (max-width: 991px) { + .wrapper { + background-color: transparent; + height: auto; + padding: 36px var(--space-10x); + } + .backgrounds, + .content .menu { + display: none; + } + + .content { + position: unset; + padding: 0; + } + + .title { + font-size: 40px; + margin-bottom: 0; + } +} diff --git a/src/components/TechnicalStandards/TechnicalStandards.astro b/src/components/TechnicalStandards/TechnicalStandards.astro index 6ee45928373..11e4e1d85b4 100644 --- a/src/components/TechnicalStandards/TechnicalStandards.astro +++ b/src/components/TechnicalStandards/TechnicalStandards.astro @@ -18,26 +18,34 @@ const cards = [ ---
    - { - cards.map((card) => ( - -
    -
    -
    - {card.title} - - {card.description} - + Technical Standards + +
    + { + cards.map((card) => ( + +
    +
    +
    + {card.title} + + {card.description} + +
    -
    - -     - )) - } + + + )) + } +
    diff --git a/src/features/landing/sections/ProductTabs.astro b/src/features/landing/sections/ProductTabs.astro deleted file mode 100644 index 5e7a9b97b8d..00000000000 --- a/src/features/landing/sections/ProductTabs.astro +++ /dev/null @@ -1,8 +0,0 @@ ---- -import { Tabs } from "../components/Tabs" -import productTabs from "./ProductTabs.module.css" ---- - -
    - -
    diff --git a/src/features/landing/sections/ProductTabs.module.css b/src/features/landing/sections/ProductTabs.module.css deleted file mode 100644 index 8eed3c59bb1..00000000000 --- a/src/features/landing/sections/ProductTabs.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.container { - padding-top: var(--space-6x); - padding-bottom: 60px; -} diff --git a/src/pages/index.astro b/src/pages/index.astro index 4a2f794862f..52e505921c5 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,5 +1,4 @@ --- -import ProductTabs from "../features/landing/sections/ProductTabs.astro" import JourneyCards from "~/components/JourneyCards/JourneyCards.astro" import TechnicalStandards from "~/components/TechnicalStandards/TechnicalStandards.astro" import BaseLayout from "~/layouts/BaseLayout.astro" @@ -7,29 +6,21 @@ import BaseLayout from "~/layouts/BaseLayout.astro" import * as CONFIG from "../config" import Demos from "~/components/Demos.astro" import { Typography } from "@chainlink/blocks" +import LandingHero from "~/components/LandingHero/LandingHero.astro" const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}` ---
    -
    -
    -

    Chainlink Developer Docs

    -

    What are you building?

    + - -
    -
    -
    - Technical Standards - -
    +

    Recommended reading

    @@ -153,7 +144,7 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl flex-direction: column; gap: 82px; max-width: var(--fullwidth-max-width); - margin: 0 auto; + padding: 0 var(--space-10x); } @media (min-width: 50em) { @@ -195,11 +186,8 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl line-height: var(--space-6x); margin-bottom: var(--space-2x); } - .wrapper { - margin-top: 60px; - } } - @media (min-width: 72em) { + @media (min-width: 62em) { .hero { max-width: min(1200px, calc(100% - 2 * var(--space-16x))); padding: 0; @@ -209,5 +197,10 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl max-width: min(1200px, calc(100% - 2 * var(--space-16x))); padding: 0; } + + .wrapper { + margin: 0 auto; + margin-top: 60px; + } }