From c8c87da0e7ee91007a38441a20d66da5c1c54f1b Mon Sep 17 00:00:00 2001 From: mildtomato Date: Fri, 27 Nov 2020 18:21:36 +0800 Subject: [PATCH] added mobile menu, started tidying up sections and working out site/grid widths --- www/components/ArticleThumb.tsx | 4 +- www/components/container.tsx | 2 +- www/components/features.tsx | 85 ++-- www/components/footer.tsx | 2 +- www/components/hero.tsx | 91 +---- .../index_sections/BuiltWithSupabase.tsx | 13 +- .../index_sections/CodeExamples.tsx | 2 +- .../index_sections/MadeForDevelopers.tsx | 17 +- www/components/layout.tsx | 2 +- www/components/nav.tsx | 370 +++++++++++++++--- www/components/nav/FlyOut.js | 71 ++-- www/data/Solutions.json | 4 +- www/tailwind.config.js | 16 + 13 files changed, 433 insertions(+), 246 deletions(-) diff --git a/www/components/ArticleThumb.tsx b/www/components/ArticleThumb.tsx index 0df9c75989d..9cca119029c 100644 --- a/www/components/ArticleThumb.tsx +++ b/www/components/ArticleThumb.tsx @@ -57,13 +57,13 @@ const ArticleThumb = (props: any) => { {iconMarkup} )} -

+

{type}

-

{title}

+

{title}

{description}

diff --git a/www/components/container.tsx b/www/components/container.tsx index cbe54e9cb55..d0284d38617 100644 --- a/www/components/container.tsx +++ b/www/components/container.tsx @@ -5,7 +5,7 @@ type Props = { } const Container: FunctionComponent = ({ children }: Props) => { - return
+ return
{children}
} diff --git a/www/components/features.tsx b/www/components/features.tsx index 0d9a0810651..c2589a4938d 100644 --- a/www/components/features.tsx +++ b/www/components/features.tsx @@ -1,9 +1,10 @@ import Badge from './badge' import Solutions from './../data/Solutions.json' +import SectionHeader from './UI/SectionHeader' const Features = () => { const IconSections = Object.values(Solutions).map((solution) => { - const { name, description, description_short, icon, label, url } = solution + const { name, description, icon, label, url } = solution return (
@@ -28,67 +29,39 @@ const Features = () => {
{description}
-
-
Learn more link
-
+ {url && ( +
+
Learn more link
+
+ )}
) }) return ( // -
-
-
- A better way to build products -

- Build Faster and Focus on Your Core Products -

-
-
- -
- - -
-
-
- {IconSections} -
-
-
-
-

- image here -

+
+
+ +
+
+
+
+
+ {IconSections} +
+
+
+
+

+ image here +

+
+
diff --git a/www/components/footer.tsx b/www/components/footer.tsx index 319a4d5e3fb..023b8829f7a 100644 --- a/www/components/footer.tsx +++ b/www/components/footer.tsx @@ -69,7 +69,7 @@ const Footer = () => {

- Solutions + Product

  • diff --git a/www/components/hero.tsx b/www/components/hero.tsx index 096e269f740..237eeee50f0 100644 --- a/www/components/hero.tsx +++ b/www/components/hero.tsx @@ -2,7 +2,7 @@ import Link from 'next/link' const Hero = () => { return ( -
    +
    +
    - -
    -
    +
    -

    +

    The Open Source Firebase Alternative

    @@ -128,7 +47,7 @@ const Hero = () => { diff --git a/www/components/index_sections/BuiltWithSupabase.tsx b/www/components/index_sections/BuiltWithSupabase.tsx index f2d056f5654..5432468df58 100644 --- a/www/components/index_sections/BuiltWithSupabase.tsx +++ b/www/components/index_sections/BuiltWithSupabase.tsx @@ -1,15 +1,22 @@ import React from 'react' import ArticleThumb from './../ArticleThumb' import ProjectExamples from "./../../data/ProjectExamples.json" +import SectionHeader from '../UI/SectionHeader' const BuiltExamples = () => { return ( -
    +
    -
    +
    + +
    + {/*
    Built with supabase

    @@ -20,6 +27,8 @@ const BuiltExamples = () => { atque, ducimus sed.

    +
    */} +
    { onClick={() => handleClick(id)} className={ 'm-1 mb-4 rounded-md border border-gray-200 px-4 py-2 text-base font-medium text-gray focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-transparent sm:w-auto sm:text-sm' + - (example === id ? ' border-brand-100 bg-brand-100 text-brand' : ' hover:bg-gray-200') + (example === id ? ' border-gray-900 bg-gray-900 text-white' : ' hover:bg-gray-200') } > { diff --git a/www/components/index_sections/MadeForDevelopers.tsx b/www/components/index_sections/MadeForDevelopers.tsx index 2776a30cf55..c54c94bc5fe 100644 --- a/www/components/index_sections/MadeForDevelopers.tsx +++ b/www/components/index_sections/MadeForDevelopers.tsx @@ -1,3 +1,4 @@ +import SectionHeader from '../UI/SectionHeader' import Badge from './../badge' import CodeExamples from './CodeExamples' @@ -6,17 +7,11 @@ const MadeForDevelopers = () => { return (
    -
    -
    - MADE FOR DEVELOPERS -

    - Supafast easy-to-use APIs that do the hard work for you -

    -

    - We inspect your database and provide APIs instantly so you can stop building - repetitive CRUD endpoints and focus on your product. -

    -
    + + + +
    +
    diff --git a/www/components/layout.tsx b/www/components/layout.tsx index 07679ce0618..8ef13c308d9 100644 --- a/www/components/layout.tsx +++ b/www/components/layout.tsx @@ -12,7 +12,7 @@ const Layout = ({ preview, children }: Props) => { <> + + +
    + {/*
    */} +
    +
    + +
    +
    + {/*
    */} +
    + +
    +

    Products available:

    + {iconSections} +
    +
    +
    +     + ) } export default Nav + + +//
    +//
    +//
    +//
    +// +//
    +//
    +// +//
    +//
    +// +//
    +//
    \ No newline at end of file diff --git a/www/components/nav/FlyOut.js b/www/components/nav/FlyOut.js index 1161868b858..912969a384b 100644 --- a/www/components/nav/FlyOut.js +++ b/www/components/nav/FlyOut.js @@ -1,5 +1,6 @@ import { useState, useEffect } from 'react' import Transition from '../../lib/Transition' +import Badge from '../badge' import Solutions from './../../data/Solutions.json' @@ -21,39 +22,51 @@ const FlyOut = () => { }, []) const iconSections = Object.values(Solutions).map((solution) => { - const { name, description, description_short, icon, label, url } = solution - return ( + const { name, description, icon, label, url } = solution + + const content = ( +
    +
    +
    + {/* */} + +
    +
    +
    +
    +

    + {name} {label && {label}} +

    +

    {description}

    +
    + {url && ( +

    + Learn more +

    + )} +
    +
    + ) + return url ? ( -
    -
    -
    - {/* */} - -
    -
    -
    -
    -

    {name}

    -

    {description}

    -
    -

    - Learn more -

    -
    -
    + {content}     + ) : ( +
    + {content} +
    ) }) @@ -64,7 +77,7 @@ const FlyOut = () => { className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300" onClick={() => handleToggle()} > - Solutions + Product @media (min-width: 640px) { ... } + + 'md': '768px', + // => @media (min-width: 768px) { ... } + + 'lg': '1024px', + // => @media (min-width: 1024px) { ... } + + 'xl': '1280px', + // => @media (min-width: 1280px) { ... } + + '2xl': '1536px', + // => @media (min-width: 1536px) { ... } + }, colors: { 'accent-1': '#FAFAFA', 'accent-2': '#EAEAEA',