feat: layout improvements (#122)

infinyon · Jul 22, 2024 · 0883552 · 0883552
1 parent a4c2eeb
commit 0883552
Show file tree

Hide file tree

Showing 11 changed files with 192 additions and 65 deletions.
diff --git a/src/components/Landing/components/Contribute/ContributeCard.tsx b/src/components/Landing/components/Contribute/ContributeCard.tsx
@@ -10,23 +10,13 @@ export function ContributeCard(props: {
   return (
     <article className="relative pl-16">
       <dt className="text-base font-semibold leading-7 text-gray-900">
-        <div className="text-white p-2 absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
+        <div className="text-white p-2 absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-zinc-600">
           {props.icon}
         </div>
-        <span className="text-gray-900 dark:text-gray-100">
+        <a className="text-gray-900 dark:text-gray-100" href={props.ctaUrl}>
           {props.title}
-        </span>
-      </dt>
-      <dd className="m-0 mt-2 text-base leading-7 text-gray-600">
-        <p className="text-gray-600 dark:text-gray-300">
-          {props.description}
-        </p >
-        <a
-          href={props.ctaUrl}
-          className="text-sm underline text-indigo-600 dark:text-indigo-400 dark:hover:text-indigo-300 hover:text-indigo-900 flex items-center mt-2">
-          {props.cta}
         </a>
-      </dd>
+      </dt>
     </article>
   );
 }
diff --git a/src/components/Landing/components/Hero.tsx b/src/components/Landing/components/Hero.tsx
@@ -1,62 +1,82 @@
-import ArrowUp from "./icons/ArrowUp";
+import Cloud from "./icons/Cloud";
+import Local from "./icons/Local";
 
 export function Hero(): JSX.Element {
   return (
-    <section className="relative pt-14 dark:text-white">
-      <figure
+    <section className="relative pt-4 dark:text-white">
+      {/* <figure
         className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
         aria-hidden="true"
       >
         <div
           className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-          style={{ clipPath: 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)' }}
+          style={{
+            clipPath:
+              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+          }}
         ></div>
-      </figure>
-      <article className="py-24 sm:py-32">
+      </figure> */}
+      <article className="py-8">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
-          <div className="mx-auto max-w-2xl text-center">
-            <h1 className="text-4xl font-bold tracking-tight sm:text-6xl text-gray-900 dark:text-gray-100">
-              The backbone of user facing analytics
+          <div className="mx-auto text-center">
+            <h1 className="text-3xl font-bold tracking-tight sm:text-4xl text-gray-900 dark:text-gray-100">
+              Fluvio is powered by Rust & WASM
             </h1>
-            <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
-              Fluvio is a lean and mean distributed streaming engine to build edge to core event streaming data flows,
-              indispensable for operational analytics and real-time AI/ML
+            <p className="text-lg text-gray-600 dark:text-gray-300">
+              Maximum efficiency, minimum infrastructure overhead, and intuitive
+              developer experience.
             </p>
-            <div className="mt-10 flex items-center justify-center gap-x-6">
-              <a
-                className="hover:text-white hover:no-underline rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-                href="https://fluvio-docs.pages.dev/docs/fluvio/overview#installing-the-cli"
-                target="_blank"
-              >
-                Run on InfinyOn Cloud
-              </a>
-              <a
-                className="text-sm font-semibold leading-6 text-gray-900 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-200"
-                href="/docs/fluvio/quickstart#install-fluvio"
-              >
-                Get Started Local <span aria-hidden="true">→</span>
-              </a>
+            <div className="flex items-center justify-center gap-x-6">
+              <span className="text-lg">Get Started<span aria-hidden="true" className="mx-4">→</span></span>
+              <div className="flex justify-between space-x-6">
+                <a
+                  className="flex flex-col justify-center items-center text-sm font-semibold leading-6 text-gray-900 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-200"
+                  href="/docs/fluvio/quickstart#install-fluvio"
+                >
+                  <Cloud className="w-6 h-6" />
+                  Cloud
+                </a>
+                <a
+                  className="flex flex-col justify-center items-center text-sm font-semibold text-gray-900 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-200"
+                  href="/docs/fluvio/quickstart#install-fluvio"
+                >
+                  <Local className="w-6 h-6" />
+                  Local
+                </a>
+              </div>
             </div>
           </div>
         </div>
-        <div className="p-12">
+        {/* <div className="p-12">
           <div className="bg-indigo-100 dark:bg-indigo-800 border-2 border-solid border-indigo-600 mx-auto rounded-md flex justify-center items-center p-4 w-11/12 md:w-[400px]">
-            <a className="flex flex-col md:flex-row items-center hover:no-underline" href="https://gitHub.com/infinyon/fluvio/" target="_blank">
-              <span className="mr-2 mb-2 md:mb-0 dark:text-white">Give us a start on GitHub!</span>
-              <img src="https://img.shields.io/github/stars/infinyon/fluvio?style=social" alt="GitHub stars"/>
+            <a
+              className="flex flex-col md:flex-row items-center hover:no-underline"
+              href="https://gitHub.com/infinyon/fluvio/"
+              target="_blank"
+            >
+              <span className="mr-2 mb-2 md:mb-0 dark:text-white">
+                Give us a start on GitHub!
+              </span>
+              <img
+                src="https://img.shields.io/github/stars/infinyon/fluvio?style=social"
+                alt="GitHub stars"
+              />
             </a>
           </div>
-        </div>
+        </div> */}
       </article>
-      <figure
+      {/* <figure
         className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
         aria-hidden="true"
       >
         <div
           className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
-          style={{ clipPath: 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)' }}
+          style={{
+            clipPath:
+              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+          }}
         ></div>
-      </figure>
+      </figure> */}
     </section>
   );
 }
diff --git a/src/components/Landing/components/Products/Card.tsx b/src/components/Landing/components/Products/Card.tsx
@@ -0,0 +1,18 @@
+export function Card(props: {
+  children: React.ReactNode;
+  flip?: boolean;
+  imgSrc: string;
+  imgAlt: string;
+}): JSX.Element {
+  const cardClass = ['flex', 'flex-col', 'md:flex-row', 'md:gap-6', props.flip ? 'md:flex-row-reverse' : 'md:flex-row'];
+  return (
+    <article className={cardClass.join(' ')}>
+      <figure className="bg-gray-50 dark:bg-zinc-900 border border-solid border-gray-100 dark:border-zinc-950 rounded flex items-center justify-center p-6 md:py-12 w-full md:w-[500px]">
+        <img src={props.imgSrc} alt={props.imgAlt} />
+      </figure>
+      <div className="w-full md:w-8/12 p-6">
+        {props.children}
+      </div>
+    </article>
+  );
+}
diff --git a/src/components/Landing/components/Products/index.tsx b/src/components/Landing/components/Products/index.tsx
@@ -0,0 +1,45 @@
+import { Card } from "./Card";
+
+export function Products(): JSX.Element {
+  return (
+    <section className="dark:text-white max-w-[1200px] mx-auto">
+      <Card imgSrc="/img/landing/fluvio-diagram.png" imgAlt="Fluvio Diagram">
+        <h2>Transform, Enrich & Materialize</h2>
+        <p>
+          lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+        <div className="space-x-2">
+          <button>Read Fluvio Docs</button>
+          <button>Read Fluvio Docs</button>
+        </div>
+      </Card>
+      <Card
+        flip
+        imgSrc="/img/landing/fluvio-connectors.png"
+        imgAlt="Fluvio Connectors"
+      >
+        <h2>Integrate with any Data Source</h2>
+        <p>
+          lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+        <button>Read Connectors Docs</button>
+      </Card>
+      <Card imgSrc="/img/landing/fluvio-apis.png" imgAlt="Fluvio APIs">
+        <h2>Run Everywhere</h2>
+        <p>
+          lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+        <button>Read APIs Docs</button>
+      </Card>
+    </section>
+  );
+}
diff --git a/src/components/Landing/components/WhyFluvio.tsx b/src/components/Landing/components/WhyFluvio.tsx
diff --git a/src/components/Landing/components/icons/Cloud.tsx b/src/components/Landing/components/icons/Cloud.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+function Icon(props: {
+  className: string;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 256 256"
+      className={props.className}
+      fill="currentColor"
+    >
+      <path d="M160 40a88.09 88.09 0 00-78.71 48.67A64 64 0 1072 216h88a88 88 0 000-176zm0 160H72a48 48 0 010-96c1.1 0 2.2 0 3.29.11A88 88 0 0072 128a8 8 0 0016 0 72 72 0 1172 72z"></path>
+    </svg>
+  );
+}
+
+export default Icon;
diff --git a/src/components/Landing/components/icons/Local.tsx b/src/components/Landing/components/icons/Local.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+
+function Icon(props: {
+  className: string;
+}) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" className={props.className}>
+      <path fill="none" d="M0 0H256V256H0z"></path>
+      <rect
+        width="192"
+        height="144"
+        x="32"
+        y="48"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+        rx="16"
+        transform="rotate(180 128 120)"
+      ></rect>
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+        d="M160 224L96 224"
+      ></path>
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+        d="M32 152L224 152"
+      ></path>
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+        d="M128 192L128 224"
+      ></path>
+    </svg>
+  );
+}
+
+export default Icon;
diff --git a/src/components/Landing/index.tsx b/src/components/Landing/index.tsx
@@ -1,9 +1,9 @@
 import Layout from '@theme/Layout';
 
 import { Hero } from './components/Hero';
-import { WhyFluvio } from './components/WhyFluvio';
 import { Contribute } from './components/Contribute';
 import { GitHubInsights } from './components/GitHubInsights';
+import { Products } from './components/Products';
 
 export default function Home(): JSX.Element {
   return (
@@ -13,7 +13,7 @@ export default function Home(): JSX.Element {
     >
       <main>
         <Hero />
-        <WhyFluvio />
+        <Products />
         <Contribute />
         <GitHubInsights />
       </main>

diff --git a/static/img/landing/fluvio-apis.png b/static/img/landing/fluvio-apis.png
diff --git a/static/img/landing/fluvio-connectors.png b/static/img/landing/fluvio-connectors.png
diff --git a/static/img/landing/fluvio-diagram.png b/static/img/landing/fluvio-diagram.png