diff --git a/docusaurus.config.js b/docusaurus.config.js index 30043a318d..a05b7020a9 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -409,8 +409,8 @@ const config = { label: 'Core Contracts & Standards', }, { - href: 'https://academy.ecdao.org/', - label: 'Emerald DAO Bootcamp', + href: '/evm/about', + label: 'EVM', }, ], }, @@ -503,6 +503,43 @@ const config = { }, }), plugins: [ + function customizedSvgo() { + return { + name: 'docusaurus-svgo', + configureWebpack(config) { + // allow svgr to use svgo config file + for (const rule of config.module.rules) { + if ( + typeof rule === 'object' && + rule.test.toString() === '/\\.svg$/i' + ) { + for (const nestedRule of rule.oneOf) { + if (nestedRule.use instanceof Array) { + for (const loader of nestedRule.use) { + if ( + typeof loader === 'object' && + loader.loader === require.resolve('@svgr/webpack') + ) { + if (typeof loader.options === 'object') { + loader.options.svgoConfig = null; + } + } + } + } + } + } + } + return { + mergeStrategy: { + 'module.rules': 'replace', + }, + module: { + rules: config.module.rules, + }, + }; + }, + }; + }, function tailwindPlugin() { return { name: 'docusaurus-tailwindcss', diff --git a/src/data/pages/home.tsx b/src/data/pages/home.tsx index 7f94d6fc27..946d0cd246 100644 --- a/src/data/pages/home.tsx +++ b/src/data/pages/home.tsx @@ -1,29 +1,7 @@ import { type ContentNavigationListProps } from '../../ui/design-system/src/lib/Components/ContentNavigationList'; -import { type HomepageStartItemProps } from '../../ui/design-system/src/lib/Components/HomepageStartItem'; - -const homepageStartProjectData: HomepageStartItemProps[] = [ - { - title: 'Getting Started', - text: 'Dive into key concepts with a Hello World quickstart', - link: '/build/getting-started/quickstarts/hello-world', - icon: 'learn', - }, - { - title: 'Developer Guides', - text: 'Create your first dApp in just a few minutes', - link: '/build/guides/flow-app-quickstart', - icon: 'quickstart', - }, - { - title: 'Resources', - text: 'All the developer tools you need', - link: '/tools/flow-cli', - icon: 'documentation', - }, -]; const contentNavigationListItems: ContentNavigationListProps = { - header: 'Explore Key Concepts and Features', + header: 'Key Features', contentNavigationItems: [ { title: 'Why Flow', @@ -52,4 +30,4 @@ const contentNavigationListItems: ContentNavigationListProps = { ], }; -export { homepageStartProjectData, contentNavigationListItems }; +export { contentNavigationListItems }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9c6bfcbd3d..d56c5e7417 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -6,17 +6,13 @@ import { allEvents } from '../data/events'; import HomePage from '../ui/design-system/src/lib/Pages/HomePage'; // import { refreshTools } from '../cms/tools.server' import { externalLinks } from '../data/external-links'; -import { - contentNavigationListItems, - homepageStartProjectData, -} from '../data/pages/home'; +import { contentNavigationListItems } from '../data/pages/home'; const data = { discordUrl: externalLinks.discord, discourseUrl: externalLinks.discourse, twitterUrl: externalLinks.twitter, contentNavigationListItems, - homepageStartProjectData, flips: { // ...flips, temporary empty arrays goodPlacesToStartFlips: [], @@ -38,7 +34,6 @@ const Index = (): JSX.Element => { discourseUrl={externalLinks.discourse} flips={data.flips} githubUrl={externalLinks.github} - homepageStartProjectData={data.homepageStartProjectData} twitterUrl={externalLinks.twitter} upcomingEvents={data.upcomingEvents} /> diff --git a/src/ui/design-system/images/gradients/home.svg b/src/ui/design-system/images/gradients/home.svg index 71c291bb4b..1c20fc4365 100644 --- a/src/ui/design-system/images/gradients/home.svg +++ b/src/ui/design-system/images/gradients/home.svg @@ -1,27 +1,44 @@ - - - - + + + - - + + + + + + + + + + - + + + + + + + + + + + - + - + - + - + - + diff --git a/src/ui/design-system/images/misc/bento-card-cadence-course.png b/src/ui/design-system/images/misc/bento-card-cadence-course.png new file mode 100644 index 0000000000..3fb11d96f6 Binary files /dev/null and b/src/ui/design-system/images/misc/bento-card-cadence-course.png differ diff --git a/src/ui/design-system/images/misc/bento-card-cadence-course@2x.png b/src/ui/design-system/images/misc/bento-card-cadence-course@2x.png new file mode 100644 index 0000000000..e8e44011f9 Binary files /dev/null and b/src/ui/design-system/images/misc/bento-card-cadence-course@2x.png differ diff --git a/src/ui/design-system/images/misc/bento-card-cadence-lang-reference.png b/src/ui/design-system/images/misc/bento-card-cadence-lang-reference.png new file mode 100644 index 0000000000..b95dda6506 Binary files /dev/null and b/src/ui/design-system/images/misc/bento-card-cadence-lang-reference.png differ diff --git a/src/ui/design-system/images/misc/bento-card-cadence-lang-reference@2x.png b/src/ui/design-system/images/misc/bento-card-cadence-lang-reference@2x.png new file mode 100644 index 0000000000..0a0ecd8e3c Binary files /dev/null and b/src/ui/design-system/images/misc/bento-card-cadence-lang-reference@2x.png differ diff --git a/src/ui/design-system/images/misc/bento-card-path-quest.png b/src/ui/design-system/images/misc/bento-card-path-quest.png new file mode 100644 index 0000000000..89397fb88e Binary files /dev/null and b/src/ui/design-system/images/misc/bento-card-path-quest.png differ diff --git a/src/ui/design-system/images/misc/bento-card-start-here.png b/src/ui/design-system/images/misc/bento-card-start-here.png new file mode 100644 index 0000000000..a445e6dbd1 Binary files /dev/null and b/src/ui/design-system/images/misc/bento-card-start-here.png differ diff --git a/src/ui/design-system/images/misc/bg-social-section.jpg b/src/ui/design-system/images/misc/bg-social-section.jpg new file mode 100644 index 0000000000..837b8ff1c0 Binary files /dev/null and b/src/ui/design-system/images/misc/bg-social-section.jpg differ diff --git a/src/ui/design-system/images/misc/blockchain-updates.png b/src/ui/design-system/images/misc/blockchain-updates.png new file mode 100644 index 0000000000..84c3093aaf Binary files /dev/null and b/src/ui/design-system/images/misc/blockchain-updates.png differ diff --git a/src/ui/design-system/images/misc/cadence-cookbook.png b/src/ui/design-system/images/misc/cadence-cookbook.png new file mode 100644 index 0000000000..1560334018 Binary files /dev/null and b/src/ui/design-system/images/misc/cadence-cookbook.png differ diff --git a/src/ui/design-system/images/misc/cadence-playground.png b/src/ui/design-system/images/misc/cadence-playground.png new file mode 100644 index 0000000000..5924afe535 Binary files /dev/null and b/src/ui/design-system/images/misc/cadence-playground.png differ diff --git a/src/ui/design-system/images/misc/cadence-vscode.png b/src/ui/design-system/images/misc/cadence-vscode.png new file mode 100644 index 0000000000..7f314811e8 Binary files /dev/null and b/src/ui/design-system/images/misc/cadence-vscode.png differ diff --git a/src/ui/design-system/images/misc/create-fungible-tokens.png b/src/ui/design-system/images/misc/create-fungible-tokens.png new file mode 100644 index 0000000000..fc2e4a1687 Binary files /dev/null and b/src/ui/design-system/images/misc/create-fungible-tokens.png differ diff --git a/src/ui/design-system/images/misc/discord-image.png b/src/ui/design-system/images/misc/discord-image.png new file mode 100644 index 0000000000..95d07beb1e Binary files /dev/null and b/src/ui/design-system/images/misc/discord-image.png differ diff --git a/src/ui/design-system/images/misc/docs-advanced.png b/src/ui/design-system/images/misc/docs-advanced.png new file mode 100644 index 0000000000..870b01b19b Binary files /dev/null and b/src/ui/design-system/images/misc/docs-advanced.png differ diff --git a/src/ui/design-system/images/misc/docs-fundamentals.png b/src/ui/design-system/images/misc/docs-fundamentals.png new file mode 100644 index 0000000000..85d675751c Binary files /dev/null and b/src/ui/design-system/images/misc/docs-fundamentals.png differ diff --git a/src/ui/design-system/images/misc/docs-introduction.png b/src/ui/design-system/images/misc/docs-introduction.png new file mode 100644 index 0000000000..ca2b9f36f8 Binary files /dev/null and b/src/ui/design-system/images/misc/docs-introduction.png differ diff --git a/src/ui/design-system/images/misc/docs-the-stack.png b/src/ui/design-system/images/misc/docs-the-stack.png new file mode 100644 index 0000000000..9a0c7b1342 Binary files /dev/null and b/src/ui/design-system/images/misc/docs-the-stack.png differ diff --git a/src/ui/design-system/images/misc/ecosystem-tools.png b/src/ui/design-system/images/misc/ecosystem-tools.png new file mode 100644 index 0000000000..d597e86e8d Binary files /dev/null and b/src/ui/design-system/images/misc/ecosystem-tools.png differ diff --git a/src/ui/design-system/images/misc/emerald-examples.png b/src/ui/design-system/images/misc/emerald-examples.png new file mode 100644 index 0000000000..b69f918b1c Binary files /dev/null and b/src/ui/design-system/images/misc/emerald-examples.png differ diff --git a/src/ui/design-system/images/misc/emerald-snippets.png b/src/ui/design-system/images/misc/emerald-snippets.png new file mode 100644 index 0000000000..f726ce210c Binary files /dev/null and b/src/ui/design-system/images/misc/emerald-snippets.png differ diff --git a/src/ui/design-system/images/misc/feature-code-scripts-image.png b/src/ui/design-system/images/misc/feature-code-scripts-image.png new file mode 100644 index 0000000000..8fb0f16c1e Binary files /dev/null and b/src/ui/design-system/images/misc/feature-code-scripts-image.png differ diff --git a/src/ui/design-system/images/misc/feature-evm-image.png b/src/ui/design-system/images/misc/feature-evm-image.png new file mode 100644 index 0000000000..8578cd0610 Binary files /dev/null and b/src/ui/design-system/images/misc/feature-evm-image.png differ diff --git a/src/ui/design-system/images/misc/feature-stacks-image.png b/src/ui/design-system/images/misc/feature-stacks-image.png new file mode 100644 index 0000000000..c988f113b3 Binary files /dev/null and b/src/ui/design-system/images/misc/feature-stacks-image.png differ diff --git a/src/ui/design-system/images/misc/feature-wand-image.png b/src/ui/design-system/images/misc/feature-wand-image.png new file mode 100644 index 0000000000..c4a2ce8dfd Binary files /dev/null and b/src/ui/design-system/images/misc/feature-wand-image.png differ diff --git a/src/ui/design-system/images/misc/feature-why-flow-image.png b/src/ui/design-system/images/misc/feature-why-flow-image.png new file mode 100644 index 0000000000..798a923ed3 Binary files /dev/null and b/src/ui/design-system/images/misc/feature-why-flow-image.png differ diff --git a/src/ui/design-system/images/misc/github-image.png b/src/ui/design-system/images/misc/github-image.png new file mode 100644 index 0000000000..8783c49e46 Binary files /dev/null and b/src/ui/design-system/images/misc/github-image.png differ diff --git a/src/ui/design-system/images/misc/landing-home.png b/src/ui/design-system/images/misc/landing-home.png index 1a54bd5d85..2db5ef09eb 100644 Binary files a/src/ui/design-system/images/misc/landing-home.png and b/src/ui/design-system/images/misc/landing-home.png differ diff --git a/src/ui/design-system/images/misc/landing-home@2x.png b/src/ui/design-system/images/misc/landing-home@2x.png index a7c90e2102..171c091eef 100644 Binary files a/src/ui/design-system/images/misc/landing-home@2x.png and b/src/ui/design-system/images/misc/landing-home@2x.png differ diff --git a/src/ui/design-system/images/misc/launch-an-nft.png b/src/ui/design-system/images/misc/launch-an-nft.png new file mode 100644 index 0000000000..4497e78a2b Binary files /dev/null and b/src/ui/design-system/images/misc/launch-an-nft.png differ diff --git a/src/ui/design-system/images/misc/pill-dev-office-hours.png b/src/ui/design-system/images/misc/pill-dev-office-hours.png new file mode 100644 index 0000000000..492bf152ad Binary files /dev/null and b/src/ui/design-system/images/misc/pill-dev-office-hours.png differ diff --git a/src/ui/design-system/images/misc/pill-developer-chat.png b/src/ui/design-system/images/misc/pill-developer-chat.png new file mode 100644 index 0000000000..aaa187afaa Binary files /dev/null and b/src/ui/design-system/images/misc/pill-developer-chat.png differ diff --git a/src/ui/design-system/images/misc/pill-flow-assisstant-gpt.png b/src/ui/design-system/images/misc/pill-flow-assisstant-gpt.png new file mode 100644 index 0000000000..718b2ebdd9 Binary files /dev/null and b/src/ui/design-system/images/misc/pill-flow-assisstant-gpt.png differ diff --git a/src/ui/design-system/images/misc/pill-network-updated.png b/src/ui/design-system/images/misc/pill-network-updated.png new file mode 100644 index 0000000000..52db69ccdd Binary files /dev/null and b/src/ui/design-system/images/misc/pill-network-updated.png differ diff --git a/src/ui/design-system/images/misc/quickstart-impl.png b/src/ui/design-system/images/misc/quickstart-impl.png new file mode 100644 index 0000000000..4cfabcd479 Binary files /dev/null and b/src/ui/design-system/images/misc/quickstart-impl.png differ diff --git a/src/ui/design-system/images/misc/social-bg.png b/src/ui/design-system/images/misc/social-bg.png new file mode 100644 index 0000000000..13642bc148 Binary files /dev/null and b/src/ui/design-system/images/misc/social-bg.png differ diff --git a/src/ui/design-system/images/misc/x.com-image.png b/src/ui/design-system/images/misc/x.com-image.png new file mode 100644 index 0000000000..bb782684d5 Binary files /dev/null and b/src/ui/design-system/images/misc/x.com-image.png differ diff --git a/src/ui/design-system/images/page/arrow-right.svg b/src/ui/design-system/images/page/arrow-right.svg new file mode 100644 index 0000000000..4c9909ff9a --- /dev/null +++ b/src/ui/design-system/images/page/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/ui/design-system/images/page/feature-code-scripts-icon.svg b/src/ui/design-system/images/page/feature-code-scripts-icon.svg new file mode 100644 index 0000000000..2a711e9254 --- /dev/null +++ b/src/ui/design-system/images/page/feature-code-scripts-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/ui/design-system/images/page/feature-evm-icon.svg b/src/ui/design-system/images/page/feature-evm-icon.svg new file mode 100644 index 0000000000..a46e15831a --- /dev/null +++ b/src/ui/design-system/images/page/feature-evm-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/ui/design-system/images/page/feature-stacks-icon.svg b/src/ui/design-system/images/page/feature-stacks-icon.svg new file mode 100644 index 0000000000..d9b456f060 --- /dev/null +++ b/src/ui/design-system/images/page/feature-stacks-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/ui/design-system/images/page/feature-wand-icon.svg b/src/ui/design-system/images/page/feature-wand-icon.svg new file mode 100644 index 0000000000..5dddb688b0 --- /dev/null +++ b/src/ui/design-system/images/page/feature-wand-icon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/ui/design-system/images/page/feature-why-flow-icon.svg b/src/ui/design-system/images/page/feature-why-flow-icon.svg new file mode 100644 index 0000000000..9827d1fd96 --- /dev/null +++ b/src/ui/design-system/images/page/feature-why-flow-icon.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/ui/design-system/images/page/flow-assistant-gpt-icon.svg b/src/ui/design-system/images/page/flow-assistant-gpt-icon.svg new file mode 100644 index 0000000000..7557e25331 --- /dev/null +++ b/src/ui/design-system/images/page/flow-assistant-gpt-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/ui/design-system/images/page/flow-dev-office-hours-icon.svg b/src/ui/design-system/images/page/flow-dev-office-hours-icon.svg new file mode 100644 index 0000000000..410f47e0d5 --- /dev/null +++ b/src/ui/design-system/images/page/flow-dev-office-hours-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/ui/design-system/images/page/flow-developer-chat-icon.svg b/src/ui/design-system/images/page/flow-developer-chat-icon.svg new file mode 100644 index 0000000000..ee3d88cf18 --- /dev/null +++ b/src/ui/design-system/images/page/flow-developer-chat-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/ui/design-system/images/page/flow-lang-reference-icon.svg b/src/ui/design-system/images/page/flow-lang-reference-icon.svg new file mode 100644 index 0000000000..0b48954813 --- /dev/null +++ b/src/ui/design-system/images/page/flow-lang-reference-icon.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/ui/design-system/images/page/flow-network-upgrade-icon.svg b/src/ui/design-system/images/page/flow-network-upgrade-icon.svg new file mode 100644 index 0000000000..c2fff00f28 --- /dev/null +++ b/src/ui/design-system/images/page/flow-network-upgrade-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/ui/design-system/images/page/flow-path-quest-icon.svg b/src/ui/design-system/images/page/flow-path-quest-icon.svg new file mode 100644 index 0000000000..e6ff707937 --- /dev/null +++ b/src/ui/design-system/images/page/flow-path-quest-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/ui/design-system/images/page/flow-start-here-icon.svg b/src/ui/design-system/images/page/flow-start-here-icon.svg new file mode 100644 index 0000000000..d3878665e9 --- /dev/null +++ b/src/ui/design-system/images/page/flow-start-here-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/ui/design-system/images/page/flow-starthere-icon.svg b/src/ui/design-system/images/page/flow-starthere-icon.svg new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/ui/design-system/images/page/icon-arrow.svg b/src/ui/design-system/images/page/icon-arrow.svg new file mode 100644 index 0000000000..7af2fa2262 --- /dev/null +++ b/src/ui/design-system/images/page/icon-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/ui/design-system/images/page/page-carousel-back-2.svg b/src/ui/design-system/images/page/page-carousel-back-2.svg new file mode 100644 index 0000000000..9c0fc4ad33 --- /dev/null +++ b/src/ui/design-system/images/page/page-carousel-back-2.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/ui/design-system/images/page/page-carousel-back.svg b/src/ui/design-system/images/page/page-carousel-back.svg new file mode 100644 index 0000000000..d165eb5d31 --- /dev/null +++ b/src/ui/design-system/images/page/page-carousel-back.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/ui/design-system/images/page/page-carousel-forward-2.svg b/src/ui/design-system/images/page/page-carousel-forward-2.svg new file mode 100644 index 0000000000..358aa69753 --- /dev/null +++ b/src/ui/design-system/images/page/page-carousel-forward-2.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/ui/design-system/images/page/page-carousel-forward.svg b/src/ui/design-system/images/page/page-carousel-forward.svg new file mode 100644 index 0000000000..e335d5965c --- /dev/null +++ b/src/ui/design-system/images/page/page-carousel-forward.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/ui/design-system/images/page/read-docs.svg b/src/ui/design-system/images/page/read-docs.svg new file mode 100644 index 0000000000..aca170cc65 --- /dev/null +++ b/src/ui/design-system/images/page/read-docs.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/ui/design-system/src/lib/Components/Button/index.tsx b/src/ui/design-system/src/lib/Components/Button/index.tsx index 9258884dee..152640913b 100644 --- a/src/ui/design-system/src/lib/Components/Button/index.tsx +++ b/src/ui/design-system/src/lib/Components/Button/index.tsx @@ -1,88 +1,94 @@ -import React from 'react' -import clsx from "clsx" -import ChevronRightIcon from "../../../../images/arrows/chevron-right-sm.svg" -import ExternalLinkIcon from "../../../../images/content/external-link-variant.svg" -import AppLink from "../AppLink" +import React from 'react'; +import clsx from 'clsx'; +import ChevronRightIcon from '../../../../images/arrows/chevron-right-sm.svg'; +import ExternalLinkIcon from '../../../../images/content/external-link-variant.svg'; +import AppLink from '../AppLink'; const BASE_CLASSES = - "inline-flex items-center justify-center font-semibold text-center border dark:hover:shadow-2xl-dark hover:shadow-2xl" + 'inline-flex items-center justify-center font-semibold text-center border dark:hover:shadow-2xl-dark hover:shadow-2xl'; const VARIANTS = { primary: [ - "bg-black text-white border-transparent", - "hover:border-black hover:bg-white hover:text-black cursor-pointer", - "active:border-gray-500 active:bg-white active:text-gray-500", - "dark:bg-white dark:text-black", - "dark:hover:border-white dark:hover:bg-black dark:hover:text-white", - "dark:active:border-gray-500 dark:active:bg-black dark:active:text-gray-500", - "disabled:opacity-50 disabled:bg-gray-200 disabled:cursor-not-allowed", + 'bg-black text-white border-transparent', + 'hover:border-black hover:bg-white hover:text-black cursor-pointer', + 'active:border-gray-500 active:bg-white active:text-gray-500', + 'dark:bg-white dark:text-black', + 'dark:hover:border-white dark:hover:bg-black dark:hover:text-white', + 'dark:active:border-gray-500 dark:active:bg-black dark:active:text-gray-500', + 'disabled:opacity-50 disabled:bg-gray-200 disabled:cursor-not-allowed', ], - "primary-no-darkmode": [ - "bg-black text-white border-transparent", - "hover:border-black hover:bg-white hover:text-black", - "active:border-gray-500 active:bg-white active:text-gray-500", - "disabled:opacity-50 disabled:bg-gray-200 disabled:cursor-not-allowed", + 'primary-no-darkmode': [ + 'bg-black text-white border-transparent', + 'hover:border-black hover:bg-white hover:text-black', + 'active:border-gray-500 active:bg-white active:text-gray-500', + 'disabled:opacity-50 disabled:bg-gray-200 disabled:cursor-not-allowed', ], secondary: [ - "text-primary-blue border-primary-blue", - "hover:bg-primary-blue hover:text-white cursor-pointer", - "active:bg-blue-hover active:text-white", - "dark:bg-black dark:text-blue-dark dark:border-blue-dark", - "dark:hover:bg-blue-dark dark:hover:text-white", - "dark:active:bg-blue-hover-dark dark:active:text-white dark:active:border-blue-hover-dark", - "disabled:opacity-50 disabled:cursor-not-allowed", + 'text-primary-blue border-primary-blue', + 'hover:bg-primary-blue hover:text-white cursor-pointer', + 'active:bg-blue-hover active:text-white', + 'dark:bg-black dark:text-blue-dark dark:border-blue-dark', + 'dark:hover:bg-blue-dark dark:hover:text-white', + 'dark:active:bg-blue-hover-dark dark:active:text-white dark:active:border-blue-hover-dark', + 'disabled:opacity-50 disabled:cursor-not-allowed', ], -} + accent: [ + 'bg-green-dark text-white border-accent-blue', + 'hover:bg-green-dark hover:text-white cursor-pointer', + 'active:bg-green-hover active:text-white', + 'disabled:opacity-50 disabled:cursor-not-allowed', + ], +}; const SIZES = { - sm: ["text-sm min-w-[172px] p-2 rounded-md gap-2"], - md: ["text-sm min-w-[172px] p-4 rounded-lg gap-3"], -} + sm: ['text-sm min-w-[172px] p-2 rounded-md gap-2'], + md: ['text-sm min-w-[172px] p-4 rounded-lg gap-3'], +}; type ButtonContentProps = { - children: React.ReactNode - leftIcon?: "left" - rightIcon?: "right" | "external" - external?: boolean -} + children: React.ReactNode; + leftIcon?: 'left'; + rightIcon?: 'right' | 'external'; + external?: boolean; +}; type ButtonBaseProps = { - variant?: keyof typeof VARIANTS - size?: keyof typeof SIZES -} & ButtonContentProps + variant?: keyof typeof VARIANTS; + size?: keyof typeof SIZES; +} & ButtonContentProps; -export type ButtonProps = React.ComponentPropsWithoutRef<"button"> & - ButtonBaseProps +export type ButtonProps = React.ComponentPropsWithoutRef<'button'> & + ButtonBaseProps; function ButtonContent({ leftIcon, rightIcon, external, children, -}: ButtonContentProps) { +}: ButtonContentProps): JSX.Element { return ( <> - {leftIcon === "left" && ( + {leftIcon === 'left' && (
)} {children} - {rightIcon === "right" && } - {rightIcon === "external" && } + {rightIcon === 'right' && } + {rightIcon === 'external' && } - ) + ); } export function Button({ className, - size = "md", - variant = "primary", + size = 'md', + variant = 'primary', leftIcon, rightIcon, children, ...props -}: ButtonProps) { +}: ButtonProps): JSX.Element { return ( - ) + ); } -export type ButtonLinkProps = React.ComponentPropsWithoutRef<"a"> & +export type ButtonLinkProps = React.ComponentPropsWithoutRef<'a'> & ButtonBaseProps & { - href: string - children: React.ReactNode - } + href: string; + children: React.ReactNode; + }; export function ButtonLink({ className, - size = "md", - variant = "primary", + size = 'md', + variant = 'primary', href, leftIcon, rightIcon, @@ -123,5 +129,5 @@ export function ButtonLink({ children={children} /> - ) + ); } diff --git a/src/ui/design-system/src/lib/Components/ContentFeatureList/ContentFeature.tsx b/src/ui/design-system/src/lib/Components/ContentFeatureList/ContentFeature.tsx new file mode 100644 index 0000000000..5c850f4426 --- /dev/null +++ b/src/ui/design-system/src/lib/Components/ContentFeatureList/ContentFeature.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { ContentFeatureIcon } from './ContentFeatureIcon'; +import AppLink from '../AppLink'; + +export interface ContentFeatureProps { + icon: string; + image: string; + header: string; + text: string; + link: string; +} + +export function ContentFeature({ + icon, + image, + header, + text, + link, +}: ContentFeatureProps): React.ReactElement { + return ( + +
+
+ {header} +
+
{text}
+
+
+ + +
+ + ); +} diff --git a/src/ui/design-system/src/lib/Components/ContentFeatureList/ContentFeatureIcon.tsx b/src/ui/design-system/src/lib/Components/ContentFeatureList/ContentFeatureIcon.tsx new file mode 100644 index 0000000000..03d63aea79 --- /dev/null +++ b/src/ui/design-system/src/lib/Components/ContentFeatureList/ContentFeatureIcon.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import WhyFlow from '../../../../images/page/feature-why-flow-icon.svg'; +import WhyFlowImage from '../../../../images/misc/feature-why-flow-image.png'; +import WandIcon from '../../../../images/page/feature-wand-icon.svg'; +import WandImage from '../../../../images/misc/feature-wand-image.png'; +import Stacks from '../../../../images/page/feature-stacks-icon.svg'; +import StacksImage from '../../../../images/misc/feature-stacks-image.png'; +import CodeScripts from '../../../../images/page/feature-code-scripts-icon.svg'; +import CodeScriptsImage from '../../../../images/misc/feature-code-scripts-image.png'; +import EvmCompat from '../../../../images/page/feature-evm-icon.svg'; +import EvmCompatImage from '../../../../images/misc/feature-evm-image.png'; + +export interface ContentFeatureIconProps { + icon: string; +} + +export function ContentFeatureIcon({ + icon, +}: ContentFeatureIconProps): React.ReactElement { + switch (icon) { + case 'feature-why-flow-icon': + return ; + case 'feature-why-flow-image': + return Why Flow; + case 'feature-wand-icon': + return ; + case 'feature-wand-image': + return Smart Accounts; + case 'feature-stacks-icon': + return ; + case 'feature-stacks-image': + return Bundle & Scripted Transactions; + case 'feature-code-scripts-icon': + return ; + case 'feature-code-scripts-image': + return Scripted Queries; + case 'feature-evm-icon': + return ; + case 'feature-evm-image': + return EVM Compatibility; + default: + throw new Error(`Icon type not recognized: ${icon}`); + } +} diff --git a/src/ui/design-system/src/lib/Components/ContentFeatureList/index.tsx b/src/ui/design-system/src/lib/Components/ContentFeatureList/index.tsx new file mode 100644 index 0000000000..430d965b3b --- /dev/null +++ b/src/ui/design-system/src/lib/Components/ContentFeatureList/index.tsx @@ -0,0 +1,70 @@ +import React from 'react'; +import { ContentFeature, type ContentFeatureProps } from './ContentFeature'; + +const ContentFeatures: Record = { + 'why-flow': { + icon: 'feature-why-flow-icon', + image: 'feature-why-flow-image', + header: 'Why Flow', + text: 'Introduction to the Network', + link: '/build/flow', + }, + 'smart-accounts': { + icon: 'feature-wand-icon', + image: 'feature-wand-image', + header: 'Smart Accounts', + text: 'Enhance UX with a flexible Account structure and key management', + link: 'build/basics/accounts', + }, + transactions: { + icon: 'feature-stacks-icon', + image: 'feature-stacks-image', + header: 'Bundle & Scripted Transactions', + text: 'Introduction to gasless, scripted and bundled transactions', + link: '/build/basics/transactions', + }, + 'code-scripts': { + icon: 'feature-code-scripts-icon', + image: 'feature-code-scripts-image', + header: 'Scripted Queries', + text: 'Introduction to Queries', + link: '/build/basics/scripts', + }, + evm: { + icon: 'feature-evm-icon', + image: 'feature-evm-image', + header: 'EVM Equivalency', + text: 'Coming in from EVM? Discover key similarities and differences to launch faster', + link: '/evm/about', + }, +}; + +export function ContentFeatureList(): React.ReactElement { + return ( +
+
+
Key Features
+ Discover the unique features of Flow, unlocking innovative possibilities + for your decentralized applications and smart contracts. +
+
+
+ +
+
+ +
+
+ +
+
+ +
+ {/* This div will span two columns at the 'md' breakpoint */} +
+ +
+
+
+ ); +} diff --git a/src/ui/design-system/src/lib/Components/ContentNavigationList/index.tsx b/src/ui/design-system/src/lib/Components/ContentNavigationList/index.tsx index 15cf06f8e2..1131f85f87 100644 --- a/src/ui/design-system/src/lib/Components/ContentNavigationList/index.tsx +++ b/src/ui/design-system/src/lib/Components/ContentNavigationList/index.tsx @@ -18,7 +18,10 @@ export function ContentNavigationList({ }: ContentNavigationListProps) { return (
- + {header}
diff --git a/src/ui/design-system/src/lib/Components/HomepageStartItem/HomepagePillItem.tsx b/src/ui/design-system/src/lib/Components/HomepageStartItem/HomepagePillItem.tsx new file mode 100644 index 0000000000..bcf8d25802 --- /dev/null +++ b/src/ui/design-system/src/lib/Components/HomepageStartItem/HomepagePillItem.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import AppLink from '../AppLink'; +import { HomepageStartItemIcons } from './HomepageStartIcons'; + +export interface HomepagePillItemsProps { + link: string; + icon: string; + text: string; + subText?: string; +} + +export function HomepagePillItem({ + link, + text, + icon, + subText = 'View Latest', +}: HomepagePillItemsProps): React.ReactElement { + return ( + + +
+
+ {text} +
+ {/* Subtext (hidden by default and shown on hover) */} +
+ {subText} → +
+
+ + ); +} diff --git a/src/ui/design-system/src/lib/Components/HomepageStartItem/HomepageStartIcons.tsx b/src/ui/design-system/src/lib/Components/HomepageStartItem/HomepageStartIcons.tsx index 50a609e0e7..58e465c156 100644 --- a/src/ui/design-system/src/lib/Components/HomepageStartItem/HomepageStartIcons.tsx +++ b/src/ui/design-system/src/lib/Components/HomepageStartItem/HomepageStartIcons.tsx @@ -1,21 +1,74 @@ -import React from 'react' -import Learn from '../../../../images/page/flow-learn-icon.svg' -import Quickstart from '../../../../images/page/flow-quickstart-icon.svg' -import Documentation from '../../../../images/page/flow-documentation-icon.svg' - +import React from 'react'; +import Learn from '../../../../images/page/flow-learn-icon.svg'; +import Quickstart from '../../../../images/page/flow-quickstart-icon.svg'; +import Documentation from '../../../../images/page/flow-documentation-icon.svg'; +import BentoCardStartHere from '../../../../images/misc/bento-card-start-here.png'; +import BentoCardCadenceCourse from '../../../../images/misc/bento-card-cadence-course.png'; +import BentoCardCadenceCourse2 from '../../../../images/misc/bento-card-cadence-course@2x.png'; +import BentoCardPathQuest from '../../../../images/misc/bento-card-path-quest.png'; +import BentoCardLangReference from '../../../../images/misc/bento-card-cadence-lang-reference.png'; +import BentoCardLangReference2 from '../../../../images/misc/bento-card-cadence-lang-reference@2x.png'; +import DevOfficeHours from '../../../../images/page/flow-dev-office-hours-icon.svg'; +import AssistantGpt from '../../../../images/page/flow-assistant-gpt-icon.svg'; +import DeveloperChat from '../../../../images/page/flow-developer-chat-icon.svg'; +import NetworkUpgrade from '../../../../images/page/flow-network-upgrade-icon.svg'; export interface HomepageStartItemIconsProps { - icon: string + icon: string; } -export function HomepageStartItemIcons ({ icon }: HomepageStartItemIconsProps) { +export function HomepageStartItemIcons({ + icon, +}: HomepageStartItemIconsProps): React.ReactElement { switch (icon) { case 'learn': - return + return ; case 'quickstart': - return + return ; case 'documentation': - return + return ; + case 'start-here': + return Start Here; + case 'cadence-course': + return ( + <> + Cadence Course + Cadence Course + + ); + case 'path-quest': + return ; + case 'lang-reference': + return ( + <> + Language Reference + Language Reference + + ); + case 'dev-office-hours': + return ; + case 'flow-assistant-gpt': + return ; + case 'developer-chat': + return ; + case 'network-upgrade': + return ; default: - throw new Error('Icon type not recognized') + throw new Error(`Icon type not recognized ${icon}`); } } diff --git a/src/ui/design-system/src/lib/Components/HomepageStartItem/index.tsx b/src/ui/design-system/src/lib/Components/HomepageStartItem/index.tsx index 365b6c156a..8e52ea7868 100644 --- a/src/ui/design-system/src/lib/Components/HomepageStartItem/index.tsx +++ b/src/ui/design-system/src/lib/Components/HomepageStartItem/index.tsx @@ -6,31 +6,20 @@ import { } from './HomepageStartIcons'; export type HomepageStartItemProps = { - title: string; - text: string; link: string; + icon: string; } & HomepageStartItemIconsProps; export function HomepageStartItem({ - title, - text, link, icon, -}: HomepageStartItemProps) { +}: HomepageStartItemProps): React.ReactElement { return ( -
-
- -
-
- {title} -
-
{text}
-
+ ); } diff --git a/src/ui/design-system/src/lib/Components/HomepageStartList/index.tsx b/src/ui/design-system/src/lib/Components/HomepageStartList/index.tsx index c417f1258c..00e8c589cd 100644 --- a/src/ui/design-system/src/lib/Components/HomepageStartList/index.tsx +++ b/src/ui/design-system/src/lib/Components/HomepageStartList/index.tsx @@ -1,24 +1,81 @@ -import React from 'react' -import { HeaderWithLink } from '../HeaderWithLink' -import { HomepageStartItem, type HomepageStartItemProps } from '../HomepageStartItem' +import React from 'react'; +import { + HomepageStartItem, + type HomepageStartItemProps, +} from '../HomepageStartItem'; +import { + HomepagePillItem, + type HomepagePillItemsProps, +} from '../HomepageStartItem/HomepagePillItem'; -export interface HomepageStartListProps { - items: HomepageStartItemProps[] -} +const homepageData: Record = { + 'cadence-course': { + link: 'https://academy.ecdao.org/en/catalog/courses/learn-cadence-beginner', + icon: 'cadence-course', + }, + 'beginner-dapp': { + link: '/build/getting-started/quickstarts/hello-world', + icon: 'start-here', + }, + 'flow-quest': { + link: 'https://flownaut.ecdao.org/en', + icon: 'path-quest', + }, + 'lang-reference': { + link: 'https://cadence-lang.org/', + icon: 'lang-reference', + }, +}; -export function HomepageStartList ({ items }: HomepageStartListProps) { +const homepagePillData: Record = { + 'dev-office-hours': { + link: 'https://calendar.google.com/calendar/ical/c_47978f5cd9da636cadc6b8473102b5092c1a865dd010558393ecb7f9fd0c9ad0%40group.calendar.google.com/public/basic.ics', + icon: 'dev-office-hours', + text: 'Dev Office Hours', + subText: 'Join the call', + }, + 'flow-assistant': { + link: '/tools/flow-cli', + icon: 'flow-assistant-gpt', + text: 'Flow Assistant GPT', + subText: 'Check it out', + }, + 'developer-chat': { + link: 'https://onflow.org/discord', + icon: 'developer-chat', + text: 'Developers Chat', + subText: 'Chat with devs', + }, + 'network-upgrade': { + link: '/build/flow', + icon: 'network-upgrade', + text: 'Network Upgrade', + subText: 'View latest', + }, +}; +export function HomepageStartList(): React.ReactElement { return ( -
- - Start Building Today - -
- {items.map((itemData: HomepageStartItemProps, index: number) => ( - - ))} +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + + +
- ) + ); } diff --git a/src/ui/design-system/src/lib/Components/LandingHeaderHome/index.tsx b/src/ui/design-system/src/lib/Components/LandingHeaderHome/index.tsx index 9879f9b0c0..3828e8cd1e 100644 --- a/src/ui/design-system/src/lib/Components/LandingHeaderHome/index.tsx +++ b/src/ui/design-system/src/lib/Components/LandingHeaderHome/index.tsx @@ -1,6 +1,7 @@ import React, { type ReactNode } from 'react'; import LandingImage from '../../../../images/misc/landing-home.png'; import LandingImage2x from '../../../../images/misc/landing-home@2x.png'; +import { ButtonLink } from '../Button'; export interface LandingHeaderHomeProps { description: string | ReactNode; @@ -20,17 +21,19 @@ export function LandingHeaderHome({ title, }: LandingHeaderHomeProps): JSX.Element { return ( -
+
-

- #{tag} -

-

+

{title}

-
+
{description}
+
+ + Read Docs + +
Introduction; + case 'docs-fundamentals': + return Fundamentals; + case 'docs-the-stack': + return The Stack; + case 'docs-advanced': + return Advanced; + default: + throw new Error(`Icon type not recognized: ${imageName}`); + } +} diff --git a/src/ui/design-system/src/lib/Components/LinkGrid/index.tsx b/src/ui/design-system/src/lib/Components/LinkGrid/index.tsx new file mode 100644 index 0000000000..150a1370c4 --- /dev/null +++ b/src/ui/design-system/src/lib/Components/LinkGrid/index.tsx @@ -0,0 +1,202 @@ +import React from 'react'; +import { LinkGridImage } from './LinkGridImage'; +import ReadDocs from '../../../../images/page/read-docs.svg'; +import ArrowRight from '../../../../images/page/arrow-right.svg'; + +export interface GridLink { + title: string; + href: string; +} + +export interface LinkGridSection { + links: GridLink[]; + header: string; + imageName: string; + more: string; +} + +export interface LinkGridProps { + sections: LinkGridSection[]; +} + +const sections: LinkGridSection[] = [ + { + header: 'Introduction', + links: [ + { + title: 'Hello World Tutorial', + href: '/build/getting-started/quickstarts/hello-world', + }, + { + title: 'App Architecture', + href: '/build/getting-started/app-architecture', + }, + { title: 'EVM', href: '/evm/about' }, + { title: 'Flownaut', href: 'https://flownaut.ecdao.org/en' }, + { title: 'Playground', href: 'https://play.flow.com/' }, + { + title: 'Mobile Quickstart', + href: '/build/guides/mobile/overview', + }, + ], + imageName: 'docs-introduction', + more: '/build/basics/blocks', + }, + { + header: 'Fundamentals', + links: [ + { + title: 'Wallets', + href: '/ecosystem/wallets', + }, + { + title: 'Deployment', + href: '/build/smart-contracts/deploying', + }, + { + title: 'Block Explorer', + href: '/ecosystem/block-explorers', + }, + { + title: 'Accounts', + href: '/build/basics/accounts', + }, + { + title: 'Faucets', + href: '/ecosystem/faucets', + }, + { + title: 'Bridges', + href: '/ecosystem/bridges', + }, + ], + imageName: 'docs-fundamentals', + more: '/build/basics/blocks', + }, + { + header: 'The Stack', + links: [ + { + title: 'Flow Virtual Machine', + href: 'https://flow.com/technical-paper', + }, + { + title: 'Cadence Smart Contracts', + href: '/build/smart-contracts/overview', + }, + { + title: 'Cadence Smart Contract Testing', + href: '/build/smart-contracts/testing', + }, + { title: 'Flow CLI', href: '/tools/flow-cli' }, + { + title: 'Node Operations', + href: '/networks/node-ops', + }, + { + title: 'Network Architecture', + href: 'https://jan-bernatik.medium.com/introduction-to-flow-blockchain-7532977c8af8', + }, + ], + imageName: 'docs-the-stack', + more: 'https://flow.com/decentralization', + }, + { + header: 'Advanced', + links: [ + { + title: 'Account Abstraction', + href: '/build/differences-vs-evm/account-abstraction', + }, + { + title: 'Understanding Transaction Time', + href: '/build/differences-vs-evm/transaction-time', + }, + { + title: 'FLIX', + href: '/build/advanced-concepts/flix', + }, + { + title: 'Metadata Views', + href: '/build/advanced-concepts/metadata-views', + }, + { + title: 'VRF', + href: '/build/advanced-concepts/randomness', + }, + { + title: 'Sponsored Transactions', + href: '/build/differences-vs-evm/account-abstraction#sponsored-transactions', + }, + { + title: 'Multi-auth Transactions', + href: '/build/differences-vs-evm/account-abstraction#multi-sig-transactions', + }, + ], + imageName: 'docs-advanced', + more: '/build/advanced-concepts/flix', + }, +]; + +const SectionCard = ({ + header, + links, + imageName, + more, +}: LinkGridSection): React.ReactNode => { + return ( +
+ +

{header}

+
+ {links.map((link, index) => ( + + + {link.title} + + + ))} +
+ + View All + + More + + +
+ ); +}; + +export const LinkGrid = (): React.ReactNode => ( +
+
+
Explore the Docs
+ +
+ Read Docs + + +
+ +
+
+ {sections.map((section, index) => ( + + ))} +
+
+); diff --git a/src/ui/design-system/src/lib/Components/PageCarousel/PageCard.tsx b/src/ui/design-system/src/lib/Components/PageCarousel/PageCard.tsx new file mode 100644 index 0000000000..a6e5ecfa40 --- /dev/null +++ b/src/ui/design-system/src/lib/Components/PageCarousel/PageCard.tsx @@ -0,0 +1,95 @@ +import React from 'react'; +import { PageCardImage } from './PageCardImages'; +import AppLink from '../AppLink'; +import { PageNavigation } from './PageNavigation'; + +export interface PageCardProps { + link: string; + title: string; + subtitle: string; + imageName: string; + hoverText: string; +} + +export const PageCard = ({ + link, + title, + subtitle, + imageName, + hoverText, +}: PageCardProps): React.ReactElement => { + return ( + + {/* Apply the scale transition classes to the PageCardImage component */} +
+ +
+
+
{title}
+

{subtitle}

+
+
+
+
+ {hoverText} → +
+
+ + ); +}; + +export interface PageOfCardsProps { + cards: PageCardProps[]; + category: string; + cardsPerPage?: number; + showCategory?: boolean; +} + +export const PageOfCards = ({ + cards, + category, + cardsPerPage = 1, + showCategory = true, +}: PageOfCardsProps): React.ReactNode => { + const [currentPage, setCurrentPage] = React.useState(0); + + const incrementPage = (increment: number): void => { + const totalPages = Math.ceil(cards.length / cardsPerPage); + const nPage = currentPage + increment; + const nextPage = nPage < 0 ? totalPages - 1 : nPage % totalPages; + setCurrentPage(nextPage); + }; + + // Calculate the cards to show on the current page + const startIndex = currentPage * cardsPerPage; + const endIndex = startIndex + cardsPerPage; + const cardsToShow = cards.slice(startIndex, endIndex); + const showNavigation = cards.length > cardsPerPage; + return ( + <> +
+ {showCategory && category} +
+ +
+
+ {cardsToShow.map((card) => ( + + ))} +
+ { + incrementPage(-1); + }} + forward={() => { + incrementPage(1); + }} + /> +
+ + ); +}; diff --git a/src/ui/design-system/src/lib/Components/PageCarousel/PageCardImages.tsx b/src/ui/design-system/src/lib/Components/PageCarousel/PageCardImages.tsx new file mode 100644 index 0000000000..4ba4797562 --- /dev/null +++ b/src/ui/design-system/src/lib/Components/PageCarousel/PageCardImages.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import CreateFungibleTokens from '../../../../images/misc/create-fungible-tokens.png'; +import LaunchAnNFT from '../../../../images/misc/launch-an-nft.png'; +import QuickstartImpl from '../../../../images/misc/quickstart-impl.png'; +import EmeraldSnippets from '../../../../images/misc/emerald-snippets.png'; +import EmeraldExamples from '../../../../images/misc/emerald-examples.png'; +import CadenceCookbook from '../../../../images/misc/cadence-cookbook.png'; +import EcosystemTools from '../../../../images/misc/ecosystem-tools.png'; +import CadenceVscode from '../../../../images/misc/cadence-vscode.png'; +import CadencePlayground from '../../../../images/misc/cadence-playground.png'; + +export interface ContentFeatureIconProps { + imageName: string; +} + +export function PageCardImage({ + imageName, +}: ContentFeatureIconProps): React.ReactElement { + switch (imageName) { + case 'ecosystem-tools': + return Ecosystem & Tools; + case 'cadence-vscode': + return Cadence; + case 'cadence-playground': + return Cadence Playground; + case 'emerald-snippets': + return Emerald Snippets; + case 'emerald-examples': + return Emerald Examples; + case 'cadence-cookbook': + return Cadence Cookbook; + case 'create-fungible-tokens': + return Create Fungible Tokens; + case 'launch-an-nft': + return Launch an NFT; + case 'quickstart-impl': + return Quick Starts; + default: + throw new Error(`Icon type not recognized: ${imageName}`); + } +} diff --git a/src/ui/design-system/src/lib/Components/PageCarousel/PageNavigation.tsx b/src/ui/design-system/src/lib/Components/PageCarousel/PageNavigation.tsx new file mode 100644 index 0000000000..9d7b29fa88 --- /dev/null +++ b/src/ui/design-system/src/lib/Components/PageCarousel/PageNavigation.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import PageBack from '../../../../images/page/page-carousel-back.svg'; +import PageForward from '../../../../images/page/page-carousel-forward.svg'; +import PageBack2 from '../../../../images/page/page-carousel-back-2.svg'; +import PageForward2 from '../../../../images/page/page-carousel-forward-2.svg'; + +export interface PageNavigationProps { + forward: () => void; + back: () => void; + show?: boolean; +} + +export const PageNavigation = ({ + forward, + back, + show = true, +}: PageNavigationProps): React.ReactNode => { + if (!show) { + return null; + } + + return ( + <> +
+ + +
+
+ + +
+ + ); +}; diff --git a/src/ui/design-system/src/lib/Components/PageCarousel/index.tsx b/src/ui/design-system/src/lib/Components/PageCarousel/index.tsx new file mode 100644 index 0000000000..b764396814 --- /dev/null +++ b/src/ui/design-system/src/lib/Components/PageCarousel/index.tsx @@ -0,0 +1,124 @@ +import React from 'react'; +import { PageCard, PageOfCards } from './PageCard'; +import { PageNavigation } from './PageNavigation'; + +const categories = ['Guides', 'Code Snippets', 'Resources']; +const cards = { + Guides: [ + { + title: 'Create Fungible Tokens', + subtitle: 'Deploy fungible tokens for your project', + imageName: 'create-fungible-tokens', + hoverText: 'Get Started', + link: '/build/guides/fungible-token', + }, + { + title: 'Launch an NFT', + subtitle: 'Deploy your first NFT collection', + imageName: 'launch-an-nft', + hoverText: 'Get Started', + link: '/build/guides/nft', + }, + { + title: 'Quickstarts', + subtitle: 'Some codes for quick implementation', + imageName: 'quickstart-impl', + hoverText: 'Get Started', + link: 'https://academy.ecdao.org/en/quickstarts', + }, + ], + 'Code Snippets': [ + { + title: 'Emerald Snippets', + subtitle: 'Examples of how to code things in Cadence and Flow.', + imageName: 'emerald-snippets', + hoverText: 'Get Started', + link: 'https://academy.ecdao.org/en/snippets', + }, + { + title: 'Emerald Examples', + subtitle: 'Basic Cadence code examples', + imageName: 'emerald-examples', + hoverText: 'Get Started', + link: 'https://academy.ecdao.org/en/cadence-by-example', + }, + { + title: 'Cookbook', + subtitle: + 'Explore Cadence smart contracts and transaction scripts for different use cases', + imageName: 'cadence-cookbook', + hoverText: 'Get Started', + link: 'https://cookbook.flow.com/', + }, + ], + Resources: [ + { + title: 'Ecosystem', + subtitle: + 'Explore an array of exciting, grassroots initiatives, and projects', + imageName: 'ecosystem-tools', + hoverText: 'Get Started', + link: '/ecosystem', + }, + { + title: 'Cadence', + subtitle: 'Forge the future of decentralized apps.', + imageName: 'cadence-vscode', + hoverText: 'Get Started', + link: 'https://cadence-lang.org/', + }, + { + title: 'Playground', + subtitle: 'A smart contract tutorial for Cadence.', + imageName: 'cadence-playground', + hoverText: 'Get Started', + link: 'https://play.onflow.org/', + }, + ], +}; +export const PageCarousel = (): React.ReactNode => { + const [activeCategory, setActiveCategory] = React.useState(categories[0]); + + return ( +
+
+ Start building #onflow +
+
+ {categories.map((category) => ( + + ))} +
+
+
+ +
+
+ {Object.keys(cards).map((category, i) => ( + + ))} +
+
+
+ ); +}; diff --git a/src/ui/design-system/src/lib/Components/SocialCards/SocialCardIcon.tsx b/src/ui/design-system/src/lib/Components/SocialCards/SocialCardIcon.tsx new file mode 100644 index 0000000000..fe413eaf40 --- /dev/null +++ b/src/ui/design-system/src/lib/Components/SocialCards/SocialCardIcon.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import Discord from '../../../../images/misc/discord-image.png'; +import XdotCom from '../../../../images/misc/x.com-image.png'; +import Github from '../../../../images/misc/github-image.png'; + +export interface SocialCardIconProps { + icon: string; +} + +export function SocialCardIcon({ + icon, +}: SocialCardIconProps): React.ReactElement { + switch (icon) { + case 'discord': + return Discord; + case 'x.com': + return X.com; + case 'github': + return GitHub; + default: + throw new Error(`Icon type not recognized: ${icon}`); + } +} diff --git a/src/ui/design-system/src/lib/Components/SocialCards/SocialCardItem.tsx b/src/ui/design-system/src/lib/Components/SocialCards/SocialCardItem.tsx new file mode 100644 index 0000000000..dd9690de79 --- /dev/null +++ b/src/ui/design-system/src/lib/Components/SocialCards/SocialCardItem.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { SocialCardIcon } from './SocialCardIcon'; +import AppLink from '../AppLink'; +export interface SocialCardItemProps { + icon: string; + title: string; + subText: string; + url: string; +} + +export const SocialCardItem = ({ + icon, + title, + subText, + url, +}: SocialCardItemProps): React.ReactElement => { + return ( + +
+ +
{title}
+
{subText}
+
+ + ); +}; diff --git a/src/ui/design-system/src/lib/Components/SocialCards/index.tsx b/src/ui/design-system/src/lib/Components/SocialCards/index.tsx new file mode 100644 index 0000000000..a992eb64ff --- /dev/null +++ b/src/ui/design-system/src/lib/Components/SocialCards/index.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { SocialCardItem } from './SocialCardItem'; + +const socialCardData = [ + { + icon: 'discord', + title: 'Discord', + subText: 'Join Server', + url: 'https://onflow.org/discord', + }, + { + icon: 'x.com', + title: 'X.com', + subText: 'Follow @flow_blockchain', + url: 'https://www.x.com/flow_blockchain', + }, + { + icon: 'github', + title: 'GitHub', + subText: 'Connect at @flow_blockchain', + url: 'https://github.com/onflow', + }, +]; + +export const SocialCards = (): React.ReactElement => { + return ( +
+
Get involved
+
+ There are tones of ways to get involved with Flow. If you have any + questions or want to join the community, jump into our{' '} + + Discord + {' '} + server or join our weekly{' '} + + Developer Office Hours + {' '} + every Thursday! Or apply for Flow developer{' '} + + grants + + . +
+
+ + +
+ +
+
+
+ ); +}; diff --git a/src/ui/design-system/src/lib/Pages/HomePage/index.tsx b/src/ui/design-system/src/lib/Pages/HomePage/index.tsx index 4843dd45d7..7147d31a62 100644 --- a/src/ui/design-system/src/lib/Pages/HomePage/index.tsx +++ b/src/ui/design-system/src/lib/Pages/HomePage/index.tsx @@ -1,74 +1,69 @@ -import React from "react" -import { - Flips, - LandingHeaderHome, - HomepageStartList, - UpcomingEvents, -} from "../../Components" -import { - ContentNavigationList, - type ContentNavigationListProps, -} from "../../Components/ContentNavigationList" -import {type SocialLinksSignupProps} from "../../Components/SocialLinksSignup" -import {type TutorialCardProps} from "../../Components/TutorialCard" -import {type UpcomingEventsProps} from "../../Components/UpcomingEvents" -import PageBackground from "../shared/PageBackground" -import PageSection from "../shared/PageSection" -import PageSections from "../shared/PageSections" -import {type HomepageStartItemProps} from "../../Components/HomepageStartItem" +import React from 'react'; +import { LandingHeaderHome, HomepageStartList } from '../../Components'; +import { type ContentNavigationListProps } from '../../Components/ContentNavigationList'; +import { type SocialLinksSignupProps } from '../../Components/SocialLinksSignup'; +import { type TutorialCardProps } from '../../Components/TutorialCard'; +import { type UpcomingEventsProps } from '../../Components/UpcomingEvents'; +import PageBackground from '../shared/PageBackground'; +import PageSection from '../shared/PageSection'; +import PageSections from '../shared/PageSections'; +import { ContentFeatureList } from '../../Components/ContentFeatureList'; +import { PageCarousel } from '../../Components/PageCarousel'; +import { LinkGrid } from '../../Components/LinkGrid'; +import { SocialCards } from '../../Components/SocialCards'; +import BgImage from '../../../../images/misc/bg-social-section.jpg'; +import TransitionPageSection from '../shared/TransitionPageSection'; export type HomePageProps = SocialLinksSignupProps & { - concepts?: TutorialCardProps[] - homepageStartProjectData: HomepageStartItemProps[] - contentNavigationListItems: ContentNavigationListProps - upcomingEvents: UpcomingEventsProps -} + concepts?: TutorialCardProps[]; + contentNavigationListItems: ContentNavigationListProps; + upcomingEvents: UpcomingEventsProps; +}; const Description = (): JSX.Element => ( <> - Start your Flow journey now with the{" "} - Flow Playground, or explore our - comprehensive guides, resources, and references to kickstart your Flow - development. + Dive into a rich collection of resources, tutorials, autonomous realms and + vibrant communities that unlock the full potential of Web3. Whether a + tinkerer or a seasoned developer, find everything you need to start and + elevate your projects. -) - -const HomePage = ({ - homepageStartProjectData, - contentNavigationListItems, - discordUrl, - githubUrl, - upcomingEvents, -}: HomePageProps): JSX.Element => { +); +const HomePage = ({ discordUrl, githubUrl }: HomePageProps): JSX.Element => { return ( - + } discordUrl={discordUrl} githubUrl={githubUrl} - tag='onflow' - title='Developer Documentation' + tag="onflow" + title="Build with Flow" /> - + - {upcomingEvents.events.length > 0 && ( - - - - )} - - - + + + + + + + + + +
+ + + +
- ) -} + ); +}; -export default HomePage +export default HomePage; diff --git a/src/ui/design-system/src/lib/Pages/shared/PageSection.tsx b/src/ui/design-system/src/lib/Pages/shared/PageSection.tsx index 2fcb5b4dab..b8b00bfa40 100644 --- a/src/ui/design-system/src/lib/Pages/shared/PageSection.tsx +++ b/src/ui/design-system/src/lib/Pages/shared/PageSection.tsx @@ -1,18 +1,20 @@ -import React from 'react' -import clsx from "clsx" +import React from 'react'; +import clsx from 'clsx'; + +export interface PageSectionProps { + className?: string; + children?: React.ReactNode; + sectionId?: string; +} export default function PageSection({ className, children, - sectionId = "", // used for allowing links to scroll to section if `#{sectionId}` is in url -}: { - className?: string - children?: React.ReactNode - sectionId?: string -}) { + sectionId = '', // used for allowing links to scroll to section if `#{sectionId}` is in url +}: PageSectionProps): React.ReactNode { return ( -
+
{children}
- ) + ); } diff --git a/src/ui/design-system/src/lib/Pages/shared/TransitionPageSection.tsx b/src/ui/design-system/src/lib/Pages/shared/TransitionPageSection.tsx new file mode 100644 index 0000000000..e3019fc129 --- /dev/null +++ b/src/ui/design-system/src/lib/Pages/shared/TransitionPageSection.tsx @@ -0,0 +1,49 @@ +import React, { useEffect, useRef, useState } from 'react'; +import PageSection, { type PageSectionProps } from './PageSection'; + +const Section = ({ + className, + children, + sectionId, +}: PageSectionProps): React.ReactNode => { + const [isVisible, setIsVisible] = useState(false); + const sectionRef = useRef(null); + + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + setIsVisible(entry.isIntersecting); + }, + { + root: null, + rootMargin: '0px', + threshold: 0.3, // Trigger when 10% of the section is visible + }, + ); + + if (sectionRef.current) { + observer.observe(sectionRef.current); + } + + return () => { + if (sectionRef.current) { + observer.unobserve(sectionRef.current); + } + }; + }, []); + + // Tailwind classes for styling + const sectionClasses = `transition-opacity duration-500 ease-out ${ + isVisible ? 'opacity-100' : 'opacity-0' + }`; + + return ( +
+ + {children} + +
+ ); +}; + +export default Section; diff --git a/src/ui/design-system/styles/fonts.css b/src/ui/design-system/styles/fonts.css index a2964002f2..c05fee85a8 100644 --- a/src/ui/design-system/styles/fonts.css +++ b/src/ui/design-system/styles/fonts.css @@ -49,21 +49,21 @@ } @font-face { - font-family: "Termina"; - src: local("Termina"), - url(/fonts/termina/Termina-Regular.otf) format("opentype"); + font-family: "Inter"; + src: local("Inter"), + url(/fonts/inter/Inter-Regular.ttf) format("opentype"); } @font-face { - font-family: "Termina"; - src: local("Termina"), url(/fonts/termina/Termina-Bold.otf) format("opentype"); + font-family: "Inter"; + src: local("Inter"), url(/fonts/inter/Inter-Bold.ttf) format("opentype"); font-weight: 700; } @font-face { - font-family: "Termina"; - src: local("Termina"), - url(/fonts/termina/Termina-Heavy.otf) format("opentype"); + font-family: "Inter"; + src: local("Inter"), + url(/fonts/inter/Inter-ExtraBold.ttf) format("opentype"); font-weight: 800; } diff --git a/static/fonts/inter/Inter-Black.ttf b/static/fonts/inter/Inter-Black.ttf new file mode 100644 index 0000000000..b27822baea Binary files /dev/null and b/static/fonts/inter/Inter-Black.ttf differ diff --git a/static/fonts/inter/Inter-Bold.ttf b/static/fonts/inter/Inter-Bold.ttf new file mode 100644 index 0000000000..fe23eeb9c9 Binary files /dev/null and b/static/fonts/inter/Inter-Bold.ttf differ diff --git a/static/fonts/inter/Inter-ExtraBold.ttf b/static/fonts/inter/Inter-ExtraBold.ttf new file mode 100644 index 0000000000..874b1b0dd7 Binary files /dev/null and b/static/fonts/inter/Inter-ExtraBold.ttf differ diff --git a/static/fonts/inter/Inter-ExtraLight.ttf b/static/fonts/inter/Inter-ExtraLight.ttf new file mode 100644 index 0000000000..c993e82216 Binary files /dev/null and b/static/fonts/inter/Inter-ExtraLight.ttf differ diff --git a/static/fonts/inter/Inter-Light.ttf b/static/fonts/inter/Inter-Light.ttf new file mode 100644 index 0000000000..71188f5cb2 Binary files /dev/null and b/static/fonts/inter/Inter-Light.ttf differ diff --git a/static/fonts/inter/Inter-Medium.ttf b/static/fonts/inter/Inter-Medium.ttf new file mode 100644 index 0000000000..a01f3777a6 Binary files /dev/null and b/static/fonts/inter/Inter-Medium.ttf differ diff --git a/static/fonts/inter/Inter-Regular.ttf b/static/fonts/inter/Inter-Regular.ttf new file mode 100644 index 0000000000..5e4851f0ab Binary files /dev/null and b/static/fonts/inter/Inter-Regular.ttf differ diff --git a/static/fonts/inter/Inter-SemiBold.ttf b/static/fonts/inter/Inter-SemiBold.ttf new file mode 100644 index 0000000000..ecc7041e23 Binary files /dev/null and b/static/fonts/inter/Inter-SemiBold.ttf differ diff --git a/static/fonts/inter/Inter-Thin.ttf b/static/fonts/inter/Inter-Thin.ttf new file mode 100644 index 0000000000..fe77243fc7 Binary files /dev/null and b/static/fonts/inter/Inter-Thin.ttf differ diff --git a/tailwind.config.js b/tailwind.config.js index 5dda328377..c2f674dfa7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -47,7 +47,7 @@ module.exports = { extend: { fontFamily: { sans: ['Acumin Pro', ...defaultTheme.fontFamily.sans], - display: 'Termina', + display: 'Inter', mono: 'IBM Plex Mono', }, colors: { @@ -61,12 +61,13 @@ module.exports = { 'green-success': '#05CE7A', 'blue-hover': '#3031D1', 'blue-hover-dark': '#A183E0', - 'green-dark': '#47FFB2', + 'green-dark': '#00BF6F', 'blue-dark': '#B795FF', 'pink-dark': '#F4C6FB', 'red-error-dark': '#F67D65', 'green-success-dark': '#7AFFC8', 'primary-gray': { + 10: '#F2F4F7', 50: '#F6F7F9', 100: '#DEE2E9', 200: '#ABB3BF', @@ -94,6 +95,18 @@ module.exports = { '2xl-dark': '0px 4px 40px #FFFFFF22', '2xl-dark-strong': '0px 0px 40px #FFFFFF32', }, + borderRadius: { + DEFAULT: '0.5rem', + custom: '60px', + lg: '1rem', + }, + backgroundColor: { + 'light-card': '#32343E', // Custom background color for light mode + }, + backgroundImage: { + 'card-gradient': + 'linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.60) 25%, #32343E 100%)', + }, typography: (theme) => ({ DEFAULT: { css: { diff --git a/tsconfig.json b/tsconfig.json index 5bc702dbd8..19118d1d6d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,6 +2,7 @@ // This file is not used in compilation. It is here just for a nice editor experience. "extends": "@tsconfig/docusaurus/tsconfig.json", "compilerOptions": { + "jsx": "react", "baseUrl": ".", "strictNullChecks": true }