Style Landing Page (#1046)

website/src/components/carousel-demo.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Carousel } from 'nuka-carousel';
+import { LandingDivider } from './landing/landing-divider';
+
+function DemoCard({ title, description, imageSrc, price }) {
+  return (
+    <div className="min-w-[300px] m-4 first:ml-0 last:mr-0 bg-white rounded-sm shadow-md">
+      <div className="relative">
+        <div className="absolute top-4 left-4 py-0.5 px-2 bg-gray-800 rounded-sm text-white">
+          ${price.toFixed(2)}
+        </div>
+        <img src={imageSrc} alt={title} className="bg-cover" />
+      </div>
+      <div className="flex flex-col">
+        <div className="text-gray-800 text-center text-xl uppercase font-semibold mt-4">
+          {title}
+        </div>
+        <div className="flex-1 p-4 text-gray-600 text-center">
+          {description}
+        </div>
+        <div className="flex justify-center mb-4">
+          <a
+            href="#"
+            className="inline-block bg-[#dd4add] mx-auto px-6 py-2 text-white hover:text-white rounded-sm"
+          >
+            Buy Now
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const CarouselDemo = () => (
+  <div className="">
+    <div className="flex flex-col text-left mx-16 lg:mx-32 xl:mx-64 my-auto py-12">
+      <LandingDivider />
+      <h2 className="my-8 text-4xl font-semibold">Carousel Demo</h2>
+      <p className="text-lg max-w-prose">
+        This carousel library is small but mighty! Here's this demo of product
+        cards turned into a carousel with a few simple lines!
+      </p>
+    </div>
+    <div className="mx-16 lg:mx-32 xl:mx-64">
+      <Carousel showArrows showDots>
+        <DemoCard
+          title="Headphones"
+          description="Audio-Technica ATH-M50x Professional Studio Monitor Headphones"
+          imageSrc="/open-source/nuka-carousel/img/product-1.jpg"
+          price={45}
+        />
+        <DemoCard
+          title="Photography"
+          description="Vintage cameras and accessories for the modern photographer with a love of polaroids"
+          imageSrc="/open-source/nuka-carousel/img/product-3.jpg"
+          price={250}
+        />
+        <DemoCard
+          title="Watches"
+          description="High quality watches for the discerning customer available today at all locations"
+          imageSrc="/open-source/nuka-carousel/img/product-2.jpg"
+          price={90}
+        />
+        <DemoCard
+          title="Lotion"
+          description="Organic, natural, and cruelty-free lotions for the whole family. Just in time for holidays"
+          imageSrc="/open-source/nuka-carousel/img/product-4.jpg"
+          price={45}
+        />
+        <DemoCard
+          title="Body Care"
+          description="Our wonderful body care products take care of your skin and hair with all natural ingredients"
+          imageSrc="/open-source/nuka-carousel/img/product-5.jpg"
+          price={45}
+        />
+      </Carousel>
+    </div>
+  </div>
+);

website/src/components/landing/landing-banner.tsx

@@ -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>
+);

website/src/components/landing/landing-divider.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const LandingDivider = () => (
+  <div className="mt-8 h-px bg-grayscale-300" />
+);

website/src/components/landing/landing-featured-projects.tsx

@@ -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>
+);

website/src/components/landing/landing-features.tsx

@@ -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>
+);

website/src/components/landing/landing-hero.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { FeaturedBadge } 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">
+            <FeaturedBadge name="nuka" 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>
+  );
+};

website/src/components/landing/landing-logos.tsx

@@ -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>
+);

website/src/components/landing/nf-link-button.tsx

@@ -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>
+  );
+};

website/src/css/custom.css

@@ -7,6 +7,39 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+  scroll-behavior: smooth;
+  text-rendering: optimizeSpeed;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/inter/InterRegular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/inter/InterMedium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/inter/InterBold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+.hero-pattern {
+  background-image: url('../assets/images/hero-pattern.png');
+}
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #dd4add;