diff --git a/public/arrow.svg b/public/arrow.svg new file mode 100644 index 0000000..e22e61a --- /dev/null +++ b/public/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/members.svg b/public/members.svg new file mode 100644 index 0000000..ca689c4 --- /dev/null +++ b/public/members.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/message.svg b/public/message.svg new file mode 100644 index 0000000..eb75632 --- /dev/null +++ b/public/message.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/projects.svg b/public/projects.svg new file mode 100644 index 0000000..03943c7 --- /dev/null +++ b/public/projects.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Button/Button.stories.ts b/src/components/Button/Button.stories.ts new file mode 100644 index 0000000..dd9163b --- /dev/null +++ b/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 = { + title: 'Example/Button', + component: Button, + tags: ['autodocs'], + argTypes: { + label: { + type: 'string', + }, + }, +} + +export default meta +type Story = StoryObj + +// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args +export const Primary: Story = { + args: { + label: 'Button', + }, +} diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx new file mode 100644 index 0000000..54bb749 --- /dev/null +++ b/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 {label} +} diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts new file mode 100644 index 0000000..7424881 --- /dev/null +++ b/src/components/Button/Button.types.ts @@ -0,0 +1,4 @@ +import { ButtonHTMLAttributes } from "react"; +export type ButtonProps = ButtonHTMLAttributes & { + label: string +} \ No newline at end of file diff --git a/src/components/Button/style.ts b/src/components/Button/style.ts new file mode 100644 index 0000000..9a848cb --- /dev/null +++ b/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; + } + +` + + diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx new file mode 100644 index 0000000..f3fa55e --- /dev/null +++ b/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 ( + + {/* Componente icon */} + + + {label} + + + + {/* Componente icon */} + + ) + +} \ No newline at end of file diff --git a/src/components/Card/Card.types.ts b/src/components/Card/Card.types.ts new file mode 100644 index 0000000..2ac16a6 --- /dev/null +++ b/src/components/Card/Card.types.ts @@ -0,0 +1,3 @@ +export type CardProps = { + label: string | any, +} \ No newline at end of file diff --git a/src/components/Card/style.ts b/src/components/Card/style.ts new file mode 100644 index 0000000..85f23a2 --- /dev/null +++ b/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; +` + \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f7fca58..0cb483f 100644 --- a/src/pages/index.tsx +++ b/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() {
+ Conheça os membros que fazem a He4rt acontecer} /> + Encontre mentores para conversar e tirar dúvidas} /> + Participe de projetos para fortalecer seu portfóli} /> Open Start +
) diff --git a/src/styles/Globals.ts b/src/styles/Globals.ts index 6096dc5..f1ecd90 100644 --- a/src/styles/Globals.ts +++ b/src/styles/Globals.ts @@ -1,13 +1,15 @@ 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; @@ -15,6 +17,7 @@ const GlobalStyle = createGlobalStyle` } * { box-sizing: border-box; + font-family: 'Inter', sans-serif; } ` diff --git a/src/styles/pages/Home.ts b/src/styles/pages/Home.ts index 36acb09..bf4be5a 100644 --- a/src/styles/pages/Home.ts +++ b/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; +` \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 967ee69..98c0a17 100644 --- a/tsconfig.json +++ b/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" + ] }