Demo/open mic (#4)

* remove project reference

* add Hero component and theme from css

* Fixed test

Co-authored-by: Roberto Molina <[email protected]>

config/common-paths.js

@@ -21,8 +21,7 @@ module.exports = {
   locales: path.resolve(__dirname, '..', 'static/locales/'),
   images: path.resolve(__dirname, '..', 'static/images/'),
   template: path.resolve(__dirname, '..', 'public/index.html'),
-  // favicon: path.resolve(__dirname, '..', 'public/favicon.ico'),
-  favicon: path.resolve(__dirname, '..', 'public/amalgam-32x32.png'),
+  favicon: path.resolve(__dirname, '..', 'public/favicon.ico'),
   manifest: path.resolve(__dirname, '..', 'public/manifest.json'),
   serviceWorker: path.resolve(__dirname, '..', 'src/', 'service-worker.ts'),
 };

src/App.tsx

@@ -6,6 +6,9 @@ import 'theme';
 import Loading from 'components/Loading';
 import AppRoutes from 'routes/AppRoutes';
 import ReactQueryProvider from 'providers/ReactQueryProvider';
+import { toggleTheme } from 'utils/utils';
+
+window.toggleTheme = toggleTheme;
 
 const App: FC = () => (
   <Suspense fallback={<Loading />}>

src/components/Animations/index.jsx

@@ -0,0 +1,49 @@
+import styled, { keyframes, css } from 'styled-components';
+
+export const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+export const upDown = keyframes`
+  from {
+    transform: translate3d(0,25px,0);
+  }
+  to {
+    transform: translate3d(0,-50px,0);
+  }
+`;
+
+export const upDownWide = keyframes`
+  from {
+    transform: translate3d(0,0,0);
+  }
+  to {
+    transform: translate3d(0,-150px,0);
+  }
+`;
+
+export const upDownAnimation = css`
+  animation: ${upDown} 7s ease-in-out infinite alternate;
+`;
+
+export const upDownWideAnimation = css`
+  animation: ${upDownWide} 15s ease-in-out infinite alternate;
+`;
+
+export const UpDown = styled.div`
+  ${upDownAnimation};
+  position: relative;
+  ${(props) => props}
+`;
+
+export const UpDownWide = styled.div`
+  ${upDownWideAnimation};
+  position: relative;
+  ${(props) => props}
+`;

src/components/CircleShape/index.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const CircleShape = styled.div`
+  position: relative;
+  background-image: linear-gradient(${(props) => `${props.deg}, ${props.primary}, ${props.secondary}`});
+  border-radius: 9999px;
+  z-index: 1;
+  height: 100px;
+  width: 100px;
+  ${(props) => props};
+`;
+
+export default CircleShape;

src/components/Header/Header.test.tsx

@@ -4,5 +4,5 @@ import Header from './Header';
 
 test('testing i18n in Header', async () => {
   render(<Header />);
-  expect(screen.getByText('How it Works')).toBeTruthy();
+  expect(screen.getByText('Router example')).toBeTruthy();
 });

src/components/Header/Header.tsx

@@ -6,28 +6,29 @@ import { Link, NavLink } from 'react-router-dom';
 import { Routes } from 'routes/Routes';
 import Button from 'components/Button';
 import Sparkles from 'components/Sparkles';
-import logo from 'app-assets/images/logo.png';
+import NanBrand from 'components/NanBrand';
 
 const Header: FC = () => {
   const { t } = useTranslation(['config', 'translations']);
   const isFixed = useScroll(50);
+
   return (
     <FixedContainer>
       <Nav condensed={isFixed}>
         <NavContainer>
           <Link to={Routes.ROOT}>
-            <Brand src={logo} alt={t('app.title', { ns: 'config' })} />
+            <Brand>
+              <NanBrand />
+            </Brand>
           </Link>
 
           <NavList>
             <NavItem>
-              <NavLink to={Routes.LINKS_EXAMPLES}>{t('header.howItWorks', { ns: 'translations' })}</NavLink>
+              <NavLink to={Routes.LINKS_EXAMPLES}>{t('header.routerLinkExample', { ns: 'translations' })}</NavLink>
             </NavItem>
             <NavItem>
               <NavLink to={Routes.API_EXAMPLES}>{t('header.integrations', { ns: 'translations' })}</NavLink>
             </NavItem>
-            <NavItem>{t('header.pricing', { ns: 'translations' })}</NavItem>
-            <NavItem>{t('header.aboutUs', { ns: 'translations' })}</NavItem>
           </NavList>
 
           <Sparkles colors={['#FFC700', '#22d0b6', '#22d0b6', '#80a6e9', '#f280b9', '#e35da0', '#0cea86']}>

src/components/Header/styles.ts

@@ -21,7 +21,7 @@ export const Nav = styled.nav<NavProps>`
   color: black;
   background-color: #fefefe;
   transition: all 0.2s ease-in-out 0s;
-  padding: ${({ condensed }) => (condensed ? '20px 0' : '60px 20px')};
+  padding: ${({ condensed }) => (condensed ? '20px 0' : '40px 20px')};
   box-shadow: ${({ condensed }) => (condensed ? '0 2px 10px 0 rgba(36, 50, 66, 0.075)' : 'none')};
 `;
 
@@ -34,7 +34,7 @@ export const NavContainer = styled.div`
   padding: 0 20px;
 `;
 
-export const Brand = styled.img`
+export const Brand = styled.div`
   padding-right: 20px;
 `;
 

src/components/Hero/index.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import logo from 'app-assets/images/react.svg';
+import NanLabsIcon from 'components/NanLabsIcon';
+import ShapeBackground from 'components/ShapeBackground';
+import useWindowSize from 'hooks/useWindowSize';
+
+import {
+  Root,
+  HeroContainer,
+  TextContainer,
+  Title,
+  Subtitle,
+  IllustrationContainer,
+  Image,
+  ImageContainer,
+} from './styles.js';
+
+const Hero = () => {
+  const windowSize = useWindowSize();
+  const showIllustration = windowSize.width > 1200;
+
+  console.log('showIllustration', showIllustration);
+
+  return (
+    <Root>
+      <HeroContainer>
+        <TextContainer fullWidth={!showIllustration}>
+          <Title>Agregar un titulo</Title>
+          <Subtitle>Agregar un subtitulo</Subtitle>
+        </TextContainer>
+        {showIllustration && (
+          <IllustrationContainer>
+            <Image src={logo} position="absolute" alt="logo" top="-12vw" right="-5vw" height="21vw" />
+            <ImageContainer top="1vw" right="10vw">
+              <NanLabsIcon
+                fill={'#5d73f5'}
+                width="17vw"
+                height="17vw"
+                filter={'drop-shadow( 3px 3px 2px rgba(0, 0, 0, .4))'}
+              />
+            </ImageContainer>
+          </IllustrationContainer>
+        )}
+        <ShapeBackground />
+      </HeroContainer>
+    </Root>
+  );
+};
+export default Hero;

src/components/Hero/styles.js

@@ -0,0 +1,80 @@
+import styled from 'styled-components';
+
+export const Root = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  overflow: hidden;
+  background-color: var(--background-color);
+`;
+
+export const HeroContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: flex-start;
+  height: 100%;
+  max-width: 1500px;
+  min-height: 250px;
+  margin: 60px 100px;
+  position: relative;
+
+  @media (max-width: var(--breakpoint-mobile)px) {
+    margin: 60px 30px;
+  }
+`;
+
+export const TextContainer = styled.div`
+  display: flex;
+  width: ${(props) => (props.fullWidth ? '100%' : '50%')};
+  flex-direction: column;
+  z-index: 100;
+`;
+
+export const Title = styled.h1`
+  color: var(--text-color-primary);
+  font-size: 48px;
+  font-weight: 700;
+  text-align: left;
+  line-height: 1.25;
+  margin: 4px 0;
+
+  @media (max-width: var(--breakpoint-mobile)px) {
+    font-size: 26px;
+  }
+`;
+
+export const Subtitle = styled.h2`
+  color: var(--text-color-secondary);
+  font-size: 20px;
+  font-weight: 400;
+  text-align: left;
+  line-height: 1.65;
+  margin: 10px 0;
+
+  @media (max-width: var(--breakpoint-mobile)px) {
+    font-size: 18px;
+  }
+`;
+
+export const IllustrationContainer = styled.div`
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+`;
+
+export const Image = styled.img`
+  position: absolute;
+  z-index: 10;
+  ${(props) => props};
+`;
+
+export const ImageContainer = styled.div`
+  position: absolute;
+  z-index: 10;
+  ${(props) => props};
+`;

src/components/NanBrand/index.js

@@ -0,0 +1 @@
+export { default } from './NanBrand.js';

src/components/NanLabsIcon/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const NanLabsIcon = (props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 108 108" {...props}>
+      <path d="m54 0c-29.8 0-54 24.2-54 54s24.2 54 54 54 54-24.2 54-54-24.2-54-54-54zm16.2 14v60.8l-30.3-61.6c4.4-1.5 9.1-2.4 14.1-2.4 5.7 0 11.2 1.1 16.2 3.2zm-59.4 40c0-13.6 6.3-25.8 16.2-33.7v67.4c-9.9-7.9-16.2-20.1-16.2-33.7zm26.9 40v-60.8l30.3 61.6c-4.4 1.5-9.1 2.4-14.1 2.4-5.7 0-11.2-1.1-16.2-3.2zm43.3-6.3v-67.4c9.9 7.9 16.2 20.1 16.2 33.7s-6.4 25.8-16.2 33.7z"></path>
+    </svg>
+  );
+};
+
+export default NanLabsIcon;

src/components/RingShape/index.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const RingShape = styled.div`
+  position: relative;
+  background-color: transparent;
+  z-index: 1;
+  border-width: 20px;
+  border-style: solid;
+  border-radius: 9999px;
+  height: ${(props) => props.size || '100px'};
+  width: ${(props) => props.size || '100px'};
+  border-color: ${(props) => props.color || 'teal'};
+  border-width: ${(props) => props.ring || '20px'};
+  ${(props) => props};
+`;
+
+export default RingShape;