From de7614fc5d08fa327e5e64b339309dbbf425e433 Mon Sep 17 00:00:00 2001 From: Lucas LOUIS Date: Fri, 18 Nov 2022 18:06:18 +0100 Subject: [PATCH 1/4] feat: update the theme of the project (new colors, button & text) --- src/components/Button.tsx | 110 ++++++++++++++++++++++++++ src/theme/components/button.ts | 133 ++++++++++++++++++++++++++++++-- src/theme/components/text.ts | 82 +++++++++++++++++++- src/theme/foundations/colors.ts | 6 +- src/theme/index.ts | 3 + 5 files changed, 321 insertions(+), 13 deletions(-) create mode 100644 src/components/Button.tsx diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 00000000..65a4d33a --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,110 @@ +import { IconType } from 'react-icons'; + +import { Button as ChakraButton, ButtonProps, Icon, VStack } from '@chakra-ui/react'; + +import radius from 'theme/foundations/borderRadius'; + +type CustomButtonProps = { + buttonType?: 'no-icon' | 'left-icon' | 'right-icon'; + icon?: IconType; +}; + +const LeftIconButton = ({ children, icon, ...props }: ButtonProps & { icon: IconType }): JSX.Element => + props.variant === 'primary' ? ( + + + + {children} + + + ) : ( + + + {children} + + ); + +const RightIconButton = ({ children, icon, ...props }: ButtonProps & { icon: IconType }): JSX.Element => + props.variant === 'primary' ? ( + + + {children} + + + + ) : ( + + {children} + + + ); + +const NoIconButton = ({ children, ...props }: ButtonProps): JSX.Element => + props.variant === 'primary' ? ( + + {children} + + ) : ( + {children} + ); + +const Button = ({ children, buttonType = 'no-icon', icon, ...props }: CustomButtonProps & ButtonProps): JSX.Element => + buttonType === 'no-icon' || !icon ? ( + {children} + ) : buttonType === 'left-icon' ? ( + + {children} + + ) : ( + + {children} + + ); + +export default Button; diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts index d889d1a5..ccb09a5c 100644 --- a/src/theme/components/button.ts +++ b/src/theme/components/button.ts @@ -7,38 +7,155 @@ const Button = { fontWeight: 500, fontSize: '16px', lineHeight: '24px', - _hover: { - opacity: '90%', - }, }, sizes: { + // TODO: clean needed + oldMd: { + padding: '16px 32px', + height: '56px', + fontSize: '16px', + }, sm: { - padding: '8px 16px', - height: '44px', + padding: '2px 12px', + height: 'auto', fontSize: '12px', + fontWeight: 700, + borderRadius: '8px', }, md: { - padding: '16px 32px', - height: '56px', + padding: '4px 16px', + height: 'auto', fontSize: '16px', + fontWeight: 700, + borderRadius: '8px', + }, + lg: { + padding: '4px 16px', + height: 'auto', + fontSize: '20px', + fontWeight: 700, + borderRadius: '8px', + }, + xl: { + padding: '6px 16px', + height: 'auto', + fontSize: '24px', + fontWeight: 700, + borderRadius: '12px', + }, + '2xl': { + padding: '8px 20px', + height: 'auto', + fontSize: '28px', + fontWeight: 700, + borderRadius: '12px', + }, + '3xl': { + padding: '8px 24px', + height: 'auto', + fontSize: '32px', + fontWeight: 700, + borderRadius: '12px', }, }, variants: { + primary: { + backgroundImage: `linear-gradient(135deg, ${colors.blue[900]} 0%, ${colors.red[900]} 50%, ${colors.blue[900]} 100%)`, + color: 'blue.100', + bgClip: 'text', + backgroundSize: '200% 100%', + + mozTransition: 'all .6s ease-in-out', + oTransition: 'all .6s ease-in-out', + webkitTransition: 'all .6s ease-in-out', + transition: 'all .6s ease-in-out', + _hover: { + _disabled: { + backgroundImage: `linear-gradient(135deg, ${colors.blue[900]} 0%, ${colors.red[900]} 50%, ${colors.blue[900]} 100%)`, + backgroundSize: '200% 100%', + color: 'blue.100', + bgClip: 'text', + }, + color: 'blue.100', + background: 'blue.1100', + + mozTransition: 'all .6s ease-in-out', + oTransition: 'all .6s ease-in-out', + webkitTransition: 'all .6s ease-in-out', + transition: 'all .6s ease-in-out', + }, + }, + secondary: { + background: 'blue.100', + color: 'blue.1100', + + mozTransition: 'all .6s ease-in-out', + oTransition: 'all .6s ease-in-out', + webkitTransition: 'all .6s ease-in-out', + transition: 'all .6s ease-in-out', + _disabled: { + opacity: 0.5, + }, + _hover: { + _disabled: { + background: 'blue.100', + color: 'blue.1100', + }, + color: 'blue.100', + background: 'blue.1100', + + mozTransition: 'all .6s ease-in-out', + oTransition: 'all .6s ease-in-out', + webkitTransition: 'all .6s ease-in-out', + transition: 'all .6s ease-in-out', + }, + }, + special: { + backgroundImage: `linear-gradient(135deg, ${colors.blue[900]} 0%, ${colors.red[900]} 50%, ${colors.blue[900]} 100%)`, + color: 'blue.100', + backgroundSize: '200% 100%', + + mozTransition: 'all .6s ease-in-out', + oTransition: 'all .6s ease-in-out', + webkitTransition: 'all .6s ease-in-out', + transition: 'all .6s ease-in-out', + + _disabled: { + opacity: 0.5, + }, + + _hover: { + _disabled: { + backgroundImage: `linear-gradient(135deg, ${colors.blue[900]} 0%, ${colors.red[900]} 50%, ${colors.blue[900]} 100%)`, + color: 'blue.100', + backgroundSize: '200% 100%', + }, + backgroundPosition: '100% 0', + + mozTransition: 'all .6s ease-in-out', + oTransition: 'all .6s ease-in-out', + webkitTransition: 'all .6s ease-in-out', + transition: 'all .6s ease-in-out', + }, + }, + // TODO: clean needed gray: { background: `${colors.gray[300]}`, color: `${colors.gray[700]}`, }, + // TODO: clean needed inline: { bgGradient: `linear-gradient(90deg, ${colors.blue[700]} 0%, ${colors.red[700]} 100%)`, color: 'white', }, + // TODO: clean needed reverseInline: { bgGradient: `linear-gradient(90deg, ${colors.red[700]} 0%, ${colors.blue[700]} 100%)`, color: 'white', }, }, defaultProps: { - size: 'md', + size: 'oldMd', variant: 'gray', }, }; diff --git a/src/theme/components/text.ts b/src/theme/components/text.ts index 18952f93..f37555a2 100644 --- a/src/theme/components/text.ts +++ b/src/theme/components/text.ts @@ -1,10 +1,84 @@ +import colors from 'theme/foundations/colors'; + const Text = { baseStyle: { - color: '#515E63', - fontSize: '16px', - fontWeight: '400', + color: 'blue.1100', + fontFamily: 'Poppins', + }, + sizes: { + sm: { + fontSize: '12px', + fontWeight: 400, + }, + boldSm: { + fontSize: '12px', + fontWeight: 700, + }, + md: { + fontSize: '14px', + fontWeight: 400, + }, + boldMd: { + fontSize: '14px', + fontWeight: 700, + }, + lg: { + fontSize: '16px', + fontWeight: 500, + }, + boldLg: { + fontSize: '16px', + fontWeight: 700, + }, + xl: { + fontSize: '20px', + fontWeight: 600, + }, + boldXl: { + fontSize: '20px', + fontWeight: 700, + }, + '2xl': { + fontSize: '24px', + fontWeight: 700, + }, + '3xl': { + fontSize: '32px', + fontWeight: 700, + }, + '4xl': { + fontSize: '36px', + fontWeight: 700, + }, + '5xl': { + fontSize: '42px', + fontWeight: 700, + }, + '6xl': { + fontSize: '48px', + fontWeight: 700, + }, + '7xl': { + fontSize: '64px', + fontWeight: 700, + }, + }, + variants: { + bold: { + fontWeight: 700, + }, + gradient: { + backgroundImage: `linear-gradient(135deg, ${colors.blue[900]} 0%, ${colors.red[900]} 100%)`, + bgClip: 'text', + }, + reverseGradient: { + backgroundImage: `linear-gradient(135deg, ${colors.red[900]} 0%, ${colors.blue[900]} 100%)`, + bgClip: 'text', + }, + }, + defaultProps: { + size: 'md', }, - defaultProps: {}, }; export default Text; diff --git a/src/theme/foundations/colors.ts b/src/theme/foundations/colors.ts index 7e04475f..8674ee8a 100644 --- a/src/theme/foundations/colors.ts +++ b/src/theme/foundations/colors.ts @@ -1,17 +1,21 @@ const colors = { blue: { + 50: '#f1f5ff', 100: '#E8EBFF', 300: '#ADBAFF', 500: '#7388FF', 700: '#4B66FA', 900: '#0027FF', + 1000: '#0011CC', + 1100: '#000F60', }, red: { 100: '#FDE4E9', 300: '#FFADBF', 500: '#FF7491', 700: '#FA5074', - 900: '#FF0036', + 900: '#d10130', + 1000: '#99001A', }, gray: { 100: '#EDEDED', diff --git a/src/theme/index.ts b/src/theme/index.ts index 13ab9247..00d6f505 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -18,6 +18,9 @@ const breakpoints = createBreakpoints({ lg: '1024px', xl: '1280px', '2xl': '1440px', + '3xl': '1600px', + '4xl': '1920px', + '5xl': '2560px', }); const overrides = { From ee188eef8926af21557b9e393309f16da83be33b Mon Sep 17 00:00:00 2001 From: Lucas LOUIS Date: Fri, 18 Nov 2022 18:06:59 +0100 Subject: [PATCH 2/4] feat: add landing page & assets --- pages/connection.tsx | 26 +++++ pages/index.tsx | 37 ++++--- public/assets/icons/cloud-computing-logo.svg | 24 +++++ public/assets/icons/cloud-storage-logo.svg | 19 ++++ public/assets/icons/code-logo.svg | 9 ++ public/assets/icons/contact-logo.svg | 9 ++ public/assets/icons/folder-logo.svg | 9 ++ public/assets/icons/share-logo.svg | 9 ++ public/assets/icons/upload-files-logo.svg | 9 ++ public/assets/logos/aleph-logo.svg | 8 ++ public/assets/logos/discord-logo.svg | 3 + public/assets/logos/github-logo.svg | 3 + public/assets/logos/linkedin-logo.svg | 3 + public/assets/logos/poc-logo.svg | 12 +++ public/assets/meshes/blue-ellipse.svg | 3 + public/assets/meshes/gradient-mesh-1.svg | 1 + public/assets/meshes/gradient-mesh-2.svg | 1 + public/assets/meshes/gradient-mesh-3.svg | 1 + src/components/AuthPage.tsx | 25 +++-- .../landingPage/FeaturesSection.tsx | 96 +++++++++++++++++++ src/components/landingPage/Footer.tsx | 58 +++++++++++ src/components/landingPage/HeadingSection.tsx | 73 ++++++++++++++ src/components/landingPage/NavBar.tsx | 42 ++++++++ .../landingPage/PartnersSection.tsx | 20 ++++ .../landingPage/ServicesSection.tsx | 84 ++++++++++++++++ 25 files changed, 554 insertions(+), 30 deletions(-) create mode 100644 pages/connection.tsx create mode 100644 public/assets/icons/cloud-computing-logo.svg create mode 100644 public/assets/icons/cloud-storage-logo.svg create mode 100644 public/assets/icons/code-logo.svg create mode 100644 public/assets/icons/contact-logo.svg create mode 100644 public/assets/icons/folder-logo.svg create mode 100644 public/assets/icons/share-logo.svg create mode 100644 public/assets/icons/upload-files-logo.svg create mode 100644 public/assets/logos/aleph-logo.svg create mode 100644 public/assets/logos/discord-logo.svg create mode 100644 public/assets/logos/github-logo.svg create mode 100644 public/assets/logos/linkedin-logo.svg create mode 100644 public/assets/logos/poc-logo.svg create mode 100644 public/assets/meshes/blue-ellipse.svg create mode 100644 public/assets/meshes/gradient-mesh-1.svg create mode 100644 public/assets/meshes/gradient-mesh-2.svg create mode 100644 public/assets/meshes/gradient-mesh-3.svg create mode 100644 src/components/landingPage/FeaturesSection.tsx create mode 100644 src/components/landingPage/Footer.tsx create mode 100644 src/components/landingPage/HeadingSection.tsx create mode 100644 src/components/landingPage/NavBar.tsx create mode 100644 src/components/landingPage/PartnersSection.tsx create mode 100644 src/components/landingPage/ServicesSection.tsx diff --git a/pages/connection.tsx b/pages/connection.tsx new file mode 100644 index 00000000..60f0f493 --- /dev/null +++ b/pages/connection.tsx @@ -0,0 +1,26 @@ +import { Button } from '@chakra-ui/react'; +import Link from 'next/link'; + +import AuthPage from 'components/AuthPage'; +import OutlineButton from 'components/OutlineButton'; + +const Connection = (): JSX.Element => ( + + + + + +
+ +
+ + + } + /> +); + +export default Connection; diff --git a/pages/index.tsx b/pages/index.tsx index 8ae555da..b41dfd23 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,26 +1,23 @@ -import { Button } from '@chakra-ui/react'; -import Link from 'next/link'; +import { VStack } from '@chakra-ui/react'; -import AuthPage from 'components/AuthPage'; -import OutlineButton from 'components/OutlineButton'; +import NavBar from 'components/landingPage/NavBar'; +import HeadingSection from 'components/landingPage/HeadingSection'; +import PartnersSection from 'components/landingPage/PartnersSection'; +import ServicesSection from 'components/landingPage/ServicesSection'; +import FeaturesSection from 'components/landingPage/FeaturesSection'; +import Footer from 'components/landingPage/Footer'; const Home = (): JSX.Element => ( - - - - - -
- -
- - - } - /> + + + + + + + + +