-
Notifications
You must be signed in to change notification settings - Fork 241
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update documentation site links and branding
- Loading branch information
1 parent
4a21fd4
commit 25bc0fc
Showing
36 changed files
with
749 additions
and
240 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import React from 'react'; | ||
| import { NFLinkButton } from './nf-link-button'; | ||
| import { LandingDivider } from './landing-divider'; | ||
|
|
||
| export const LandingBanner = ({ | ||
| body, | ||
| cta, | ||
| heading, | ||
| showDivider, | ||
| }: { | ||
| body: string; | ||
| cta: { link: string; text: string }; | ||
| heading: string; | ||
| showDivider?: boolean; | ||
| }) => ( | ||
| <div className="flex flex-col text-left mx-16 lg:mx-32 xl:mx-64 my-8"> | ||
| {showDivider && <LandingDivider />} | ||
|
|
||
| <h2 className="my-8 text-4xl font-semibold">{heading}</h2> | ||
| <p className="text-lg">{body}</p> | ||
| <NFLinkButton link={cta.link}>{cta.text}</NFLinkButton> | ||
| </div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import React from 'react'; | ||
|
|
||
| export const LandingDivider = () => ( | ||
| <div className="mt-8 h-px bg-grayscale-300" /> | ||
| ); |
58 changes: 58 additions & 0 deletions
58
website/src/components/landing/landing-featured-projects.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React from "react"; | ||
| import { FeaturedBadge } from "formidable-oss-badges"; | ||
| import { NFLinkButton } from "./nf-link-button"; | ||
| import { LandingDivider } from "./landing-divider"; | ||
|
|
||
| type featuredProject = | ||
| | "renature" | ||
| | "spectacle" | ||
| | "urql" | ||
| | "victory" | ||
| | "nuka" | ||
| | "owl" | ||
| | "groqd" | ||
| | "envy" | ||
| | "figlog"; | ||
|
|
||
| export const LandingFeaturedProjects = ({ | ||
| heading, | ||
| projects, | ||
| showDivider, | ||
| }: { | ||
| heading: string; | ||
| projects: { | ||
| name: featuredProject; | ||
| link: string; | ||
| description: string; | ||
| title?: string; | ||
| }[]; | ||
| showDivider?: boolean; | ||
| }) => ( | ||
| <div className="flex flex-col text-left mx-16 lg:mx-32 xl:mx-64 mt-12 py-12"> | ||
| {showDivider && <LandingDivider />} | ||
| <h2 className="my-8 text-4xl font-semibold">{heading}</h2> | ||
| <div className="grid grid-cols-2 gap-8"> | ||
| {projects.map(({ name, link, description, title }) => ( | ||
| <a | ||
| href={link} | ||
| key={link} | ||
| className="col-span-2 sm:col-span-1 block grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 align-center items-center text-theme-2 hover:text-theme-2 dark:text-white dark:hover:text-white" | ||
| > | ||
| <FeaturedBadge name={name} isHoverable className="col-span-1" /> | ||
| <span className="flex flex-col col-span-1 lg:col-span-2"> | ||
| <span className="text-xl font-semibold capitalize"> | ||
| {title || name} | ||
| </span> | ||
| <span className="text-sm ">{description}</span> | ||
| </span> | ||
| </a> | ||
| ))} | ||
| </div> | ||
|
|
||
| <div className="my-8 pt-8 align-center"> | ||
| <NFLinkButton link="https://commerce.nearform.com/open-source"> | ||
| View All Projects | ||
| </NFLinkButton> | ||
| </div> | ||
| </div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React from 'react'; | ||
| import { LandingDivider } from './landing-divider'; | ||
|
|
||
| export const LandingFeatures = ({ | ||
| heading, | ||
| list, | ||
| showDivider, | ||
| }: { | ||
| heading: string; | ||
| list: { imgSrc: string; alt: string; title: string; body: string }[]; | ||
| showDivider?: boolean; | ||
| }) => ( | ||
| <div className="flex flex-col text-left mx-16 lg:mx-32 xl:mx-64 my-12"> | ||
| {showDivider && <LandingDivider />} | ||
| <h2 className="my-8 text-4xl font-semibold">{heading}</h2> | ||
| <ul className="grid grid-cols-3 items-start content-start justify-items-start justify-between gap-12 list-none pl-0"> | ||
| {list.map(({ alt, body, imgSrc, title }) => ( | ||
| <li className="col-span-3 md:col-span-1 flex flex-col items-center text-center"> | ||
| <img src={imgSrc} alt={alt} className="max-h-72" /> | ||
| <span className="mt-8 text-2xl font-semibold">{title}</span> | ||
| <span className="mt-2 text-lg leading-8 mx-3">{body}</span> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import React from "react"; | ||
| import { ProjectBadge } from "formidable-oss-badges"; | ||
|
|
||
| export const LandingHero = ({ | ||
| body, | ||
| copyText, | ||
| heading, | ||
| navItems, | ||
| }: { | ||
| body: string; | ||
| copyText: string; | ||
| heading: string; | ||
| navItems: { link: string; title: string }[]; | ||
| }) => { | ||
| return ( | ||
| <div className="hero-pattern w-fill bg-cover bg-no-repeat"> | ||
| <div className="py-12 lg:py-24 mx-16 lg:mx-32 xl:mx-64 relative"> | ||
| <div className="flex-col md:flex-row flex justify-between gap-16 lg:gap-24 mx-auto"> | ||
| <div className="self-center md:self-left"> | ||
| <ProjectBadge | ||
| abbreviation="Re" | ||
| color="#5ABDEE" | ||
| description="React Live" | ||
| className="h-[320px] w-[320px]" | ||
| /> | ||
| </div> | ||
| <div className="text-left lg:w-6/12 text-white"> | ||
| <h1 className="text-4xl font-bold tracking-tight sm:text-6xl"> | ||
| {heading} | ||
| </h1> | ||
| <p className="mt-6 text-lg leading-8">{body}</p> | ||
| <div className="mt-10 flex flex-wrap flex-col xl:flex-row xl:items-center justify-start gap-6"> | ||
| <button | ||
| className="overflow-hidden grid-rows-2 md:grid-rows-1 lg:max-w-fit grid lg:grid-cols-6 align-center rounded-md shadow-sm border-none bg-white my-0 py-0 px-0 text-sm font-semibold text-theme-2 hover:text-theme-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-theme-1" | ||
| onClick={() => navigator.clipboard.writeText(copyText)} | ||
| > | ||
| <code className="max-w-fit py-2.5 pl-3.5 content-center grid-span-12 lg:col-span-4 border-0 bg-white"> | ||
| {copyText} | ||
| </code> | ||
| <span className="w-full lg:min-w-fit col-span-2 capitalize rounded-b-md lg:rounded-l-none lg:!rounded-r-md text-theme-2 bg-theme-1 lg:ml-2 pr-3.5 lg:pl-2.5 py-2.5 h-full"> | ||
| Copy | ||
| </span> | ||
| </button> | ||
| </div> | ||
| <nav className="mt-6"> | ||
| <ul className="list-none flex justify-items-start content-start items-start align-left pl-0 gap-6 lg:gap-12 font-bold"> | ||
| {navItems.map(({ link, title }) => ( | ||
| <li key={link}> | ||
| <a href={link} className="text-white hover:text-white"> | ||
| {title} | ||
| </a> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import React from 'react'; | ||
| import { LandingDivider } from './landing-divider'; | ||
|
|
||
| export const LandingLogos = ({ | ||
| body, | ||
| heading, | ||
| list, | ||
| showDivider, | ||
| }: { | ||
| body: string; | ||
| heading: string; | ||
| list: { imgSrc: string; alt: string }[]; | ||
| showDivider?: boolean; | ||
| }) => ( | ||
| <div> | ||
| <div className="flex flex-col text-left mx-16 lg:mx-32 xl:mx-64 my-12"> | ||
| {showDivider && <LandingDivider />} | ||
|
|
||
| <h2 className="my-8 text-4xl font-semibold">{heading}</h2> | ||
| <p className="text-lg max-w-prose">{body}</p> | ||
| <ul className="grid grid-cols-4 items-center content-start justify-items-start gap-8 list-none pl-0"> | ||
| {list.map(({ imgSrc, alt }) => ( | ||
| <li className="col-span-1 "> | ||
| <img src={imgSrc} alt={alt} /> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import React from 'react'; | ||
|
|
||
| interface ButtonProps { | ||
| children: ChildNode | React.ReactNode; | ||
| link: string; | ||
| screenReaderLabel?: string; | ||
| } | ||
|
|
||
| export const NFLinkButton = ({ children, link }: ButtonProps) => { | ||
| return ( | ||
| <a | ||
| className="bg-button-bg text-button-fg border-button-border hover:text-button-fg-hover after:bg-button-bg-hover border-2 font-bold rounded-full text-lg z-0 transition-colors delay-75 w-fit overflow-hidden py-[14px] px-[23px] relative flex gap-2.5 justify-between leading-[21px] after:absolute after:w-[200%] after:h-full after:bottom-0 after:transform-gpu after:-skew-x-[50deg] after:-right-[250%] after:-z-10 after:transition-transform after:duration-200 hover:after:-translate-x-[100%] hover:after:[-webkit-transform:translate3d(-100%,0,0)_!important]" | ||
| href={link} | ||
| > | ||
| {children} | ||
| </a> | ||
| ); | ||
| }; |
Oops, something went wrong.