Feat/card

src/components/Button/Button.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ButtonProps } from './Button.types'
+import { Button } from './Button'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<ButtonProps> = {
+    title: 'Example/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            type: 'string',
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<ButtonProps>
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+    args: {
+        label: 'Button',
+    },
+}

src/components/Button/Button.tsx

@@ -0,0 +1,7 @@
+import * as S from './style'
+import { ButtonProps } from './Button.types'
+
+
+export const Button = ({label, ...props}:ButtonProps) => {
+    return <S.Button {...props}>{label}</S.Button>
+}

src/components/Button/Button.types.ts

@@ -0,0 +1,4 @@
+import { ButtonHTMLAttributes } from "react";
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string
+} 

src/components/Button/style.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const Button = styled.button`
+    font-size: 16px;
+    color: #DEB4FF;
+    width: 121px;
+    height: 35px;
+    border: 1px solid #DEB4FF;
+    background: none;
+    border-radius: 3px;
+
+    &:hover {
+        background-color: #DEB4FF;
+        color: #161217;
+    }
+
+`
+
+

src/components/Card/Card.tsx

@@ -0,0 +1,19 @@
+import * as C from './style'
+import { CardProps } from './Card.types'
+
+export const Card = ({label}:CardProps) => {
+
+    return (
+        <C.Card href='#'>
+            {/* Componente icon */}
+
+            <C.Label>
+                {label}
+
+            </C.Label>
+
+           {/* Componente icon */}
+        </C.Card>
+    )
+
+}

src/components/Card/Card.types.ts

@@ -0,0 +1,3 @@
+export type CardProps = {
+    label: string | any,
+}

src/components/Card/style.ts

@@ -0,0 +1,22 @@
+import  Styled  from 'styled-components'
+
+export const Card = Styled.a`
+    background: rgba(255, 255, 255, 0.06);
+    backdrop-filter: blur(90px);
+    width: 386px;
+    height: 88px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    color: #fff;
+`
+
+export const Label = Styled.span`
+    width: 207px;
+    font-weight: 400;
+    font-size: 16px;
+    margin: 0 38px 0 30px;
+    line-height: 20px;
+` 
+

src/pages/index.tsx

@@ -1,5 +1,9 @@
 import Head from 'next/head'
 import * as S from '../styles/pages/Home'
+import { Button } from 'src/components/Button/style'
+import { Card } from 'src/components/Card/Card'
+
+
 
 export default function Home() {
   return (
@@ -11,7 +15,11 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main>
+      <Card image='members' label={<span>Conheça os <S.TextHighlight>membros</S.TextHighlight> que fazem a He4rt acontecer</span>} />
+        <Card image='message' label={<span>Encontre <S.TextHighlight>mentores</S.TextHighlight> para conversar e tirar dúvidas</span>} />
+        <Card image='projects' label={<span>Participe de <S.TextHighlight>projetos</S.TextHighlight> para fortalecer seu portfóli</span>} />
         <S.Hero>Open  Start</S.Hero>
+        <Button>Login</Button>
       </main>
     </>
   )

src/styles/Globals.ts

@@ -1,20 +1,23 @@
 import { createGlobalStyle } from 'styled-components'
 
 const GlobalStyle = createGlobalStyle`
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
   html,
   body {
     padding: 0;
     margin: 0;
-    background: black;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-      Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    background: #160e13;
+;
+
+
   }
   a {
     color: inherit;
     text-decoration: none;
   }
   * {
     box-sizing: border-box;
+    font-family: 'Inter', sans-serif;
   }
 `
 

src/styles/pages/Home.ts

@@ -6,3 +6,8 @@ export const Hero = styled.div`
     padding: 96px 0;
     text-align: center;
 `
+
+export const TextHighlight = styled.span`
+    color: #DEB4FF;
+    font-weight: 500;
+`

tsconfig.json

@@ -1,32 +1,46 @@
 {
-    "compilerOptions": {
-        "target": "es5",
-        "lib": ["dom", "dom.iterable", "esnext"],
-        "allowJs": true,
-        "skipLibCheck": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "noEmit": true,
-        "esModuleInterop": true,
-        "module": "esnext",
-        "moduleResolution": "node",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "jsx": "react-jsx",
-        "baseUrl": ".",
-        "paths": {
-            "@components/*": ["components/*"],
-            "@utils/*": ["utils/*"],
-            "@lib/*": ["lib/*"],
-            "@services/*": ["services/*"]
-        },
-        "incremental": true
-    },
-    "include": [
-        "next-env.d.ts",
-        "**/*.ts",
-        "**/*.tsx",
-        "src/pages/_document.tss"
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
     ],
-    "exclude": ["node_modules"]
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": [
+        "components/*"
+      ],
+      "@utils/*": [
+        "utils/*"
+      ],
+      "@lib/*": [
+        "lib/*"
+      ],
+      "@services/*": [
+        "services/*"
+      ]
+    },
+    "incremental": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "src/pages/_document.tss"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }