Demo/open mic (#4)

* remove project reference

* add Hero component and theme from css

* Fixed test

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

Author: ulises-jeremias

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'),
 };

public/amalgam-32x32.png

@@ -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 />}>

public/favicon.ico

@@ -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/App.tsx

@@ -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/Animations/index.jsx

@@ -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/CircleShape/index.js

@@ -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/Header.test.tsx

@@ -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/Header/Header.tsx

@@ -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;