diff --git a/www/components/features.tsx b/www/components/features.tsx index 504f3fc74cd..0d9a0810651 100644 --- a/www/components/features.tsx +++ b/www/components/features.tsx @@ -1,13 +1,47 @@ import Badge from './badge' +import Solutions from './../data/Solutions.json' const Features = () => { + const IconSections = Object.values(Solutions).map((solution) => { + const { name, description, description_short, icon, label, url } = solution + + return ( +
+
+
+ {/* */} + +
+
+ {name} {label && {label}} +
+
+
+
{description}
+
+
+
Learn more link
+
+
+ ) + }) + return ( //
A better way to build products -

+

Build Faster and Focus on Your Core Products

@@ -45,142 +79,20 @@ const Features = () => {
-
-
+
+
+ {IconSections} +
+
+
-
-
- {/* */} - -
-
Database
-
-
-
- Built on top of Postgres, an extremely scalable relational database, so you can - start building with the best tool in hand. -
-
+

+ image here +

- -
-
-
- {/* */} - -
-
Authentication
-
-
-
- Manage your users easily, leverage on PostgreSQL’s Row Level Security, and even - write policies which fit your unique needs. -
-
-
- -
-
-
- {/* */} - -
-
- Storage Coming soon Q1 2021 -
-
-
-
- Store, organize, and serve any amount of assets from anywhere. Any media, - including videos of any size and format. -
-
-
- -
-
-
- {/* */} - -
-
- Functions Coming soon Q1 2021 -
-
-
-
- Trigger backend code automatically with database events, without ever worrying - about scaling a server. -
-
-
-
-
-
-
-

- image here -

-
) } diff --git a/www/components/nav.tsx b/www/components/nav.tsx index 5a4471bbb63..c8ce77d3ac7 100644 --- a/www/components/nav.tsx +++ b/www/components/nav.tsx @@ -43,16 +43,16 @@ const Nav = () => {
- + */} -
+ {/*
-
+
*/}
-
+
Dashboard Team diff --git a/www/components/nav/FlyOut.js b/www/components/nav/FlyOut.js index 7189fad9b6a..1161868b858 100644 --- a/www/components/nav/FlyOut.js +++ b/www/components/nav/FlyOut.js @@ -1,6 +1,8 @@ import { useState, useEffect } from 'react' import Transition from '../../lib/Transition' +import Solutions from './../../data/Solutions.json' + const FlyOut = () => { const [show, setShow] = useState(false) @@ -10,14 +12,50 @@ const FlyOut = () => { useEffect(() => { // window is accessible here. - window.addEventListener('scroll', function(e){ + window.addEventListener('scroll', function (e) { // close Fly Out window if user scrolls past 96px from top if (window.pageYOffset > 96) { setShow(false) } - }); - }, []); + }) + }, []) + const iconSections = Object.values(Solutions).map((solution) => { + const { name, description, description_short, icon, label, url } = solution + return ( + +
+
+
+ {/* */} + +
+
+
+
+

{name}

+

{description}

+
+

+ Learn more +

+
+
+ + ) + }) return ( @@ -72,161 +110,7 @@ const FlyOut = () => { className="grid gap-y-10 px-4 py-8 bg-white sm:grid-cols-2 sm:gap-x-8 sm:py-12 sm:px-6 lg:px-8 xl:pr-12" aria-labelledby="solutionsHeading" > - -
-
-
- {/* */} - -
-
-
-
-

Database

-

- Built on top of Postgres, an extremely scalable relational database, so you can start building with the best tool in hand. -

-
-

- Learn more -

-
-
- - - -
-
-
- {/* */} - -
-
-
-
-

Authentication

-

- Manage your users easily, leverage on PostgreSQL’s Row Level Security, and even write policies which fit your unique needs. -

-
-

- Learn more -

-
-
- - - -
-
-
- {/* */} - -
-
-
-
-

Storage

-

- Store, organize, and serve any amount of assets from anywhere. Any media, including videos of any size and format. -

-
-

- Learn more -

-
-
- - - -
-
-
- {/* */} - -
-
-
-
-

Functions

-

- Trigger backend code automatically with database events, without ever worrying about scaling a server. -

-
-

- Learn more -

-
-
- + {iconSections}
@@ -298,7 +182,7 @@ const FlyOut = () => { style={{ zIndex: 100, marginLeft: 0, - pointerEvents: 'visiblePainted' + pointerEvents: 'visiblePainted', }} onClick={() => handleToggle()} > diff --git a/www/data/Solutions.json b/www/data/Solutions.json new file mode 100644 index 00000000000..e3872c10876 --- /dev/null +++ b/www/data/Solutions.json @@ -0,0 +1,34 @@ +{ + "database": { + "name": "Database", + "icon" : "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4", + "description": "Built on top of Postgres, an extremely scalable relational database, so you can start building with the best tool in hand.", + "description_short": "", + "label": "", + "url" : "https://supabase.io/docs" + }, + "authentication": { + "name": "Authentication", + "icon" : "M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z", + "description": "Manage your users easily, leverage on PostgreSQL’s Row Level Security, and even write policies which fit your unique needs.", + "description_short": "", + "label": "", + "url" : "https://supabase.io/docs" + }, + "storage": { + "name": "Storage", + "icon" : "M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4", + "description": "Store, organize, and serve any amount of assets from anywhere. Any media, including videos of any size and format.", + "description_short": "", + "label": "Coming soon", + "url" : "https://supabase.io/docs" + }, + "functions": { + "name": "Functions", + "icon" : "M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z", + "description": "Trigger backend code automatically with database events, without ever worrying about scaling a server.", + "description_short": "", + "label": "Coming soon Q1 2021", + "url" : "https://supabase.io/docs" + } +}