Merge pull request #1 from pedrofeitosa98/develop

feature: player verdadeiro
pedrofeitosa98 · Nov 20, 2023 · 463f6a6 · 463f6a6
2 parents 9ea465b + e3223d8
commit 463f6a6
Show file tree

Hide file tree

Showing 28 changed files with 814 additions and 832 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   }

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
-    "eslint": "^8.45.0",
+    "eslint": "^8.54.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import-helpers": "^1.3.1",
     "eslint-plugin-prettier": "^5.0.0",

diff --git a/public/images/autodj-avatar.png b/public/images/autodj-avatar.png
diff --git a/public/images/logo.png b/public/images/logo.png
diff --git a/public/images/pf-icon.fw.png b/public/images/pf-icon.fw.png
diff --git a/public/images/repository-preview.png b/public/images/repository-preview.png
diff --git a/public/images/wave-small.svg b/public/images/wave-small.svg
diff --git a/public/images/wave.svg b/public/images/wave.svg
diff --git a/src/components/GradientButton/index.tsx b/src/components/GradientButton/index.tsx
diff --git a/src/components/GradientButton/style.ts b/src/components/GradientButton/style.ts
diff --git a/src/components/ProfileImage/index.tsx b/src/components/ProfileImage/index.tsx
diff --git a/src/components/ProfileImage/style.ts b/src/components/ProfileImage/style.ts
diff --git a/src/components/WaveAnimation/index.tsx b/src/components/WaveAnimation/index.tsx
@@ -0,0 +1,11 @@
+import { WaveAnimationContainer } from './style'
+
+export default function WaveAnimation() {
+  return (
+    <WaveAnimationContainer>
+      <div className="ocean">
+        <div className="wave"></div>
+      </div>
+    </WaveAnimationContainer>
+  )
+}
diff --git a/src/components/WaveAnimation/style.ts b/src/components/WaveAnimation/style.ts
@@ -0,0 +1,51 @@
+import styled from 'styled-components'
+
+export const WaveAnimationContainer = styled.div`
+  .ocean {
+    height: 5px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background: #d1d1d1;
+  }
+
+  .wave {
+    background: url(/images/wave.svg) repeat-x;
+    position: absolute;
+    top: -122px;
+    width: 6400px;
+    height: 122px;
+    animation: wave 5s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .wave:nth-of-type(2) {
+    top: -175px;
+    animation:
+      wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite,
+      swell 7s ease -1.25s infinite;
+    opacity: 1;
+  }
+
+  @keyframes wave {
+    0% {
+      margin-left: 0;
+    }
+    100% {
+      margin-left: -1600px;
+    }
+  }
+  @keyframes swell {
+    0%,
+    100% {
+      transform: translate3d(0, -25px, 0);
+    }
+    50% {
+      transform: translate3d(0, 5px, 0);
+    }
+  }
+  .endWave {
+    display: none;
+  }
+`
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,5 +1,5 @@
 import type { AppProps } from 'next/app'
-import { Source_Sans_3 } from 'next/font/google'
+import { Nunito } from 'next/font/google'
 import { StrictMode } from 'react'
 import { ToastContainer } from 'react-toastify'
 import { ThemeProvider } from 'styled-components'
@@ -11,7 +11,7 @@ import GlobalStyle from '../styles/global'
 import theme from '../styles/theme'
 import GlobalTypography from '../styles/typography'
 
-const font = Source_Sans_3({ subsets: ['latin'] })
+const font = Nunito({ subsets: ['latin'] })
 
 export default function App({ Component, pageProps }: AppProps) {
   return (

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,12 +1,14 @@
 // import Image from 'next/image
 import Head from '@/components/Head'
-import WorkInProgress from '@/templates/WorkInProgress'
+import Header from '@/patterns/Header'
+import MaintanceContent from '@/templates/MaintanceContent'
 
 function Home() {
   return (
     <>
-      <Head title="Pedro Feitosa - Portfólio" />
-      <WorkInProgress />
+      <Head title="Nappanautas - Início" />
+      <Header />
+      <MaintanceContent />
     </>
   )
 }

diff --git a/src/patterns/Header/index.tsx b/src/patterns/Header/index.tsx
@@ -0,0 +1,13 @@
+import WaveAnimation from '@/components/WaveAnimation'
+import { HeaderContainer } from './style'
+
+export default function Header() {
+  return (
+    <HeaderContainer>
+      <div className="logo-container">
+        <img src="/images/logo.png" alt="Logo Nappanautas" />
+      </div>
+      <WaveAnimation />
+    </HeaderContainer>
+  )
+}
diff --git a/src/patterns/Header/style.ts b/src/patterns/Header/style.ts
@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const HeaderContainer = styled.header`
+  width: 100%;
+  height: 150px;
+  position: relative;
+
+  .logo-container {
+    position: relative;
+    margin: 0 auto;
+    width: 114px;
+    height: 210px;
+  }
+
+  & img {
+    position: absolute;
+    z-index: 2;
+  }
+`
diff --git a/src/patterns/ProfileCard/index.tsx b/src/patterns/ProfileCard/index.tsx
diff --git a/src/patterns/ProfileCard/style.ts b/src/patterns/ProfileCard/style.ts
diff --git a/src/services/radioAPI.ts b/src/services/radioAPI.ts
@@ -0,0 +1,20 @@
+import axios from 'axios'
+
+// Chamadas pelo lado server com SSR
+const radioAPI = (ctx?: any) => {
+  // const { ['laravel_session']: token } = parseCookies(ctx)
+
+  const api = axios.create({
+    baseURL: 'https://sonic1.transmissaodigital.com',
+    timeout: 10000
+  })
+  // api.defaults.xsrfCookieName = 'laravel_session'
+  // api.defaults.withCredentials = true
+  // axios.defaults.headers.common = {
+  //   Accept: 'application/json'
+  // }
+
+  return api
+}
+
+export default radioAPI
diff --git a/src/styles/global.ts b/src/styles/global.ts
@@ -34,13 +34,20 @@ const GlobalStyle = createGlobalStyle`
   html {
     scroll-behavior: smooth;
     font-size: 100%;
-    color: ${(props) => props.theme.colors.main1};
+    color: ${(props) => props.theme.colors.white};
   }
 
   body, input, button, ::placeholder {
     font-family: inherit;
   }
 
+  main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100vh;
+  }
+
   a {
     display: inline-block;
     background: none;