11 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/app/components/ToggleTheme.tsx:
--------------------------------------------------------------------------------
1 | import { BsSun, BsFillMoonFill } from 'react-icons/bs';
2 |
3 | import { useTheme, Theme } from '~/utils/theme-provider';
4 |
5 | export default function ToggleTheme() {
6 | const [theme, setTheme] = useTheme();
7 | const toggleTheme = () => {
8 | setTheme((prevTheme) =>
9 | prevTheme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT,
10 | );
11 | };
12 |
13 | if (theme === Theme.DARK) {
14 | return (
15 |
12 |
18 | {title}
17 |{description}
19 |
15 |
16 | S{seasonInfo.seasonName}
17 |
18 |
19 | {' | '}
20 | {seasonInfo?.rankingPosition}º Lugar
21 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/app/routes/action/set-theme.tsx:
--------------------------------------------------------------------------------
1 | import { json } from '@remix-run/node';
2 | import type { ActionFunction } from '@remix-run/node';
3 |
4 | import { getThemeSession } from '~/utils/theme.server';
5 | import { isTheme } from '~/utils/theme-provider';
6 |
7 | export const action: ActionFunction = async ({ request }) => {
8 | const themeSession = await getThemeSession(request);
9 | const requestText = await request.text();
10 | const form = new URLSearchParams(requestText);
11 | const theme = form.get('theme');
12 |
13 | if (!isTheme(theme)) {
14 | return json({
15 | success: false,
16 | message: `theme value of ${theme} is not a valid theme`,
17 | });
18 | }
19 |
20 | themeSession.setTheme(theme);
21 | return json(
22 | { success: true },
23 | { headers: { 'Set-Cookie': await themeSession.commit() } },
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/styles/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer components {
6 | .slick-list,
7 | .slick-slider {
8 | @apply relative block;
9 | }
10 |
11 | .slick-list {
12 | @apply m-0 overflow-hidden p-0;
13 | }
14 |
15 | .slick-slide {
16 | @apply float-left block h-fit;
17 | }
18 |
19 | .slick-arrow {
20 | @apply absolute -bottom-8 z-10 block h-8 w-8 text-[0px] leading-[0px];
21 | }
22 |
23 | .slick-prev {
24 | @apply left-1/3 rotate-180 transform lg:left-[50%];
25 | }
26 |
27 | .slick-next {
28 | @apply right-1/3 left-[unset] lg:left-[60%] lg:right-[unset];
29 | }
30 |
31 | .slick-arrow::before {
32 | @apply absolute left-1/2 top-1/2 block h-[10px] w-[6px] -translate-x-1/2 -translate-y-1/2 transform text-4xl text-black;
33 | content: ' ';
34 | background: url('/assets/icons/arrow-right.svg') center center no-repeat;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/app/services/fetchMedals.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { notFound, serverError } from 'remix-utils';
3 | import type { BadgeInfo } from '~/types/profile';
4 |
5 | const baseURL = process.env.MSR_MEDALS_URL;
6 |
7 | if (!baseURL) {
8 | throw new Error('MSR_MEDALS_URL env not found');
9 | }
10 |
11 | export async function fetchMedals(userId: string): Promise
6 | 
11 |
28 | );
29 |
30 | export default UserCard;
31 |
--------------------------------------------------------------------------------
/app/utils/theme.server.ts:
--------------------------------------------------------------------------------
1 | import { createCookieSessionStorage } from '@remix-run/node';
2 |
3 | import type { Theme } from './theme-provider';
4 | import { isTheme } from './theme-provider';
5 |
6 | const sessionSecret = process.env.SESSION_SECRET;
7 | if (!sessionSecret) {
8 | throw new Error('SESSION_SECRET must be set');
9 | }
10 |
11 | const themeStorage = createCookieSessionStorage({
12 | cookie: {
13 | name: 'my_remix_theme',
14 | secure: true,
15 | secrets: [sessionSecret],
16 | sameSite: 'lax',
17 | path: '/',
18 | httpOnly: true,
19 | },
20 | });
21 |
22 | async function getThemeSession(request: Request) {
23 | const session = await themeStorage.getSession(request.headers.get('Cookie'));
24 | return {
25 | getTheme: () => {
26 | const themeValue = session.get('theme');
27 | return isTheme(themeValue) ? themeValue : null;
28 | },
29 | setTheme: (theme: Theme) => session.set('theme', theme),
30 | commit: () => themeStorage.commitSession(session),
31 | };
32 | }
33 |
34 | export { getThemeSession };
35 |
--------------------------------------------------------------------------------
/app/components/profile/ProfilePicture.tsx:
--------------------------------------------------------------------------------
1 | import type { APPProfile } from '~/types/profile';
2 | import ProfileProgressBar from './ProfileProgressBar';
3 | import ProfileSeasonBadge from './ProfileSeasonBadge';
4 |
5 | type ProfilePictureProps = Pick<
6 | APPProfile,
7 | 'nickname' | 'level' | 'profilePicture' | 'seasonInfo' | 'experience'
8 | >;
9 |
10 | export default function ProfilePicture({
11 | profilePicture,
12 | nickname,
13 | level,
14 | experience,
15 | ...seasonInfo
16 | }: ProfilePictureProps) {
17 | return (
18 |
12 |
27 |
13 |
18 |
24 | 14 | {username} 15 |
16 | {occupation} 17 |
19 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/app/components/profile/ProfileProgressBar.tsx:
--------------------------------------------------------------------------------
1 | type ProfileProgressBarProps = {
2 | imageSrc: string;
3 | imageAlt: string;
4 | percentage: number;
5 | };
6 |
7 | export default function ProfileProgressBar({
8 | imageSrc,
9 | imageAlt,
10 | percentage,
11 | }: ProfileProgressBarProps) {
12 | return (
13 |
20 |
30 |
27 | Lvl. {level}
28 |
29 |
14 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/public/brands/heart.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/components/PartnerCard.tsx:
--------------------------------------------------------------------------------
1 | export type PartnerCardProps = {
2 | name: string;
3 | specialty: string;
4 | description: string;
5 | contact: string;
6 | logo: string;
7 | };
8 |
9 | export default function PartnerCard({
10 | name,
11 | specialty,
12 | description,
13 | contact,
14 | logo,
15 | }: PartnerCardProps) {
16 | return (
17 | <>
18 |
15 | 
20 |
21 |
34 |
35 |
19 | 
20 |
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/app/services/fetchProfile.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import type { APIProfile, APPProfile } from '~/types/profile';
3 | import { apiProfileToAppProfile } from '~/utils/api';
4 | import { notFound, serverError } from 'remix-utils';
5 |
6 | const baseURL = process.env.BASE_URL;
7 |
8 | if (!baseURL) {
9 | throw new Error('BASE_URL env not found');
10 | }
11 | const apikey = process.env.API_KEY;
12 |
13 | if (!apikey) {
14 | throw new Error('API_KEY env not found');
15 | }
16 |
17 | export async function fetchProfile(userId: string): Promise
21 |
37 |
22 |
25 | {name}
23 | {specialty} 24 |26 | {description} 27 |
28 | 34 | Entrar em contato 35 | 36 |
8 |
27 |
9 |
18 |
24 | Entrar em contato
25 |
26 | 10 | Novas perspectivas geram novas oportunidades 11 |
12 |13 | Junte-se a nós e revolucione a maneira de aprender. Seja 14 | patrocinador de sonhos e ajude milhares de pessoas a alcançarem 15 | seus objetivos. 16 |
17 |
20 |
37 | 38 |
20 |
30 | 21 | Nossos parceiros 22 |
23 |24 | Com o esforço de nossos parceiros estamos na missão de fazer o 25 | impossível. Juntos criamos soluções que mudará a maneira de aprender, 26 | garantindo oportunidade para todos. Faça parte dessa história, seja um 27 | parceiro. 28 |
29 |
31 | {partners.map((partner) => (
32 |
35 | 🏆 Conquistas
7 |8 | Seção de conquistas referentes à gameficação do servidor e eventos 9 | externos. 10 |
11 |
12 | {badges?.map(({ name, description, image_url, role_id }) => (
13 |
32 |
14 | 
{
19 | currentTarget.onerror = null;
20 | currentTarget.src = '/images/default-badge.png';
21 | }}
22 | />
23 |
30 | ))}
31 |
24 |
29 | {name}
25 | 26 | {description} 27 | 28 |
33 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/app/components/ForNoobs.tsx:
--------------------------------------------------------------------------------
1 | export default function ForNoobs() {
2 | return (
3 |
34 |
42 |
36 |
41 |
8 | 
35 |
36 |
9 |
10 | Educação sem barreiras.
11 |
12 |
30 | 13 | Conheça o 4Noobs, uma biblioteca com mais de 35 cursos 14 | open-source feita pela comunidade. 15 |
16 |17 | Com apoio de profissionais e estudantes apaixonados por tecnologia 18 | desenvolvemos a maior biblioteca open source do mundo para você 19 | aprender, aprimorar e contribuir seus conhecimentos. 20 |
21 | 27 | Conhecer o 4Noobs 28 | 29 |
35 |
14 |
19 |
36 | );
37 |
38 | export default function Staff() {
39 | return (
40 |
20 |
35 |
21 |
26 |
32 | {username}
22 | 23 | {occupation} 24 | 25 |45 | Com grandes poderes vem grandes{' '} 46 | responsabilidades 47 |
48 |49 | O impossível é nosso ponto de partida favorito. Conheça como a 50 | autencidade de cada membro da administração fez possível uma comunidade 51 | extraordinária. Somos movidos não pelo fácil, mas pelo surpreendente 52 |
53 |
54 | {users.map((user) => (
55 |
58 |
7 | 
12 |
51 |
12 |
13 |
50 | 14 | Afinal, o que é a{' '} 15 | He4rt Developers? 16 |
17 |18 | Temos como filosofia o ensino, tecnologia e as pessoas.{' '} 19 | 20 | Acreditamos que quando alinhados conseguimos mudar o mundo 21 | 22 | . Descubra uma cultura colaborativa de crescimento, originalidade, 23 | apoio e inclusão que podem fazer a diferença na sua vida.{' '} 24 | 25 | Ajude a moldar nossa comunidade: faça parte dela. 26 | 27 |
28 |29 | Como posso me juntar a{' '} 30 | He4rt? 31 |
32 |33 | Faça parte do nosso{' '} 34 | 40 | Discord 41 | {' '} 42 | e contribua com diversos projetos que podem mudar a maneira como as 43 | pessoas aprendem ao redor do mundo.{' '} 44 | 45 | Acompanhe a He4rt nas redes sociais 46 | {' '} 47 | e descubra nossas iniciativas tecnológicas. 48 |
49 |
16 |
21 |
22 | Feito pela{' '}
23 |
24 | comunidade{' '}
25 |
26 |
31 |
50 |
22 | Feito pela{' '}
23 |
24 | comunidade{' '}
25 |
26 |
para a{' '}
27 |
28 | comunidade
29 |
30 |
31 | 32 | Aqui é o lugar aonde mentes extraordinárias se encontram com o 33 | objetivo de alcançar milhares de pessoas com o poder da tecnologia.{' '} 34 | 35 | Aqui mais do que participar, você vai contribuir. 36 | 37 |
38 |
39 |
44 |
47 |
48 |
49 |
51 |
53 |
45 |
55 | 46 | O que eu encontrarei na{' '} 47 | He4rt? 48 |
49 |50 | Nós temos os recursos para levar qualquer ideia para frente, nenhum 51 | sonho é louco demais para nós. Descubra como desenvolver projetos 52 | que revolucionam a maneira de aprender. 53 |
54 |
56 |
86 |
57 | {skills.map((topic) => (
58 |
61 |
62 | 
67 |
85 |
67 |
68 |
84 | 69 | Venha participar do nosso Discord 70 |
71 |72 | Nós temos os recursos para levar qualquer ideia para frente, 73 | nenhum sonho é louco demais para nós. 74 |
75 | 81 | Entrar no Discord 82 | 83 |
38 |
39 | {contributors?.map((contributor) => (
40 |
88 |
89 | );
90 | };
91 |
92 | export default Projects;
93 |
--------------------------------------------------------------------------------
/app/components/SectionRecords.tsx:
--------------------------------------------------------------------------------
1 | export default function SectionRecords() {
2 | return (
3 |
41 |
86 | ))}
87 |
42 |
85 |
43 | 
48 |
49 |
56 |
57 |
50 |
55 | 51 | {contributor.name} 52 |
53 |{contributor.username}
54 |
58 |
75 |
76 |
82 | Acessar
83 |
84 | 59 | 4Noobs{' '} 60 | 61 | -{' '} 62 | {contributor.projectTitle.split('4noobs'.toLowerCase())[0]} 63 | 64 |
65 |66 | {contributor.projectCategory} 67 |
68 | 69 | 70 | 71 |72 | {contributor.projectDescription} 73 |
74 |
8 |
49 |
50 |
9 |
23 |
24 | 10 | O acesso a educação não é 11 | questão de sorte. 12 |
13 | 14 |15 | Acreditamos que todos têm o direito de aprender e se desenvolver, 16 | independentemente de sua origem ou situação financeira. Por isso, 17 | lutamos para garantir que todos tenham acesso à educação acessível e 18 | de qualidade. Conheça nossos eventos He4rt Conf e He4rt Meetup que 19 | reune o melhor da tecnologia, educação, network e oportunidade em um 20 | só lugar: na comunidade. 21 |
22 |
25 |
48 |
26 |
29 | +13
27 |Palestras
28 |
30 |
35 | +70,980
31 |32 | Espectadores Únicos 33 |
34 |
36 |
41 | +4,677
37 |38 | Espectadores Simutâneos 39 |
40 |
42 |
47 | +70,980
43 |44 | Espectadores ùnicos 45 |
46 |
51 |
67 | 52 | Limites foram feitos para serem{' '} 53 | 54 | quebrados 55 | 56 |
57 | 58 |59 | A inovação é liderada por pessoas que sabem o que fazem, sejam elas 60 | profissionais jovens em início de carreira ou especialistas com anos 61 | de experiência. Na He4rt, o ensino não depende só de indivíduos 62 | brilhantes, mas de uma comunidade com foco no futuro, e não no 63 | passado. Promovemos essa cultura e damos espaço para essas pessoas 64 | assumirem responsabilidades com o mundo. 65 |
66 |
22 |
32 | );
33 | }
34 |
35 | const MessagesIcon = () => (
36 |
45 | );
46 |
47 | const BadgesIcon = () => (
48 |
60 | );
61 |
62 | const RankingIcon = () => (
63 |
94 | );
95 |
--------------------------------------------------------------------------------
/app/components/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { AiOutlineClose, AiOutlineMenu } from 'react-icons/ai';
3 | import { useMedia } from 'react-use';
4 |
5 | import ToggleTheme from './ToggleTheme';
6 |
7 | type AnchorLinkProps = {
8 | to: string;
9 | children: string;
10 | };
11 |
12 | const links: AnchorLinkProps[] = [
13 | {
14 | children: 'Início',
15 | to: '#init',
16 | },
17 | {
18 | children: 'Sobre nós',
19 | to: '#about',
20 | },
21 | {
22 | children: '4noobs',
23 | to: '#4noobs',
24 | },
25 | {
26 | children: 'Staff',
27 | to: '#staff',
28 | },
29 | {
30 | children: 'Recordes',
31 | to: '#records',
32 | },
33 | {
34 | children: 'Parceiros',
35 | to: '#partners',
36 | },
37 | ];
38 |
39 | const AnchorLink = ({ to, children }: AnchorLinkProps) => (
40 |
44 | {children}
45 |
46 | );
47 |
48 | const MobileNavbar = () => {
49 | const [open, setOpen] = useState(false);
50 |
51 | const toggleMenu = () => setOpen((prev) => !prev);
52 |
53 | useEffect(() => {
54 | document.body.style.overflowY = open ? 'hidden' : 'auto';
55 | }, [open]);
56 |
57 | if (!open) {
58 | return (
59 |
23 |
25 |
26 | {count}
27 |
28 | {name}
29 |
30 |
31 |
69 |
104 | );
105 | };
106 |
107 | export default function Navbar() {
108 | const isWide = useMedia('(min-width: 960px)');
109 |
110 | if (!isWide) {
111 | return
70 |
77 |
78 |
79 |
103 |
80 | {links.map((props) => (
81 |
84 |
85 |
86 |
102 | 87 | Conheça a He4rt Devs 88 |
89 |90 | Faça parte do nosso Discord e venha aprender com diversos projetos e 91 | cursos feitos pela comunidade. 92 |
93 | 99 | Entrar em contato 100 | 101 |10 | 11 | ### Seções Rápidas 12 | 13 | - [Tecnologias utilizadas](#tecnologias-utilizadas) 14 | - [Figma](#figma) 15 | - [Instalação](#instalação) 16 | - [Pré requisitos](#pré-requisitos) 17 | - [Baixando o projeto](#baixando-o-projeto) 18 | - [Instalando as dependências](#instalando-as-dependências) 19 | - [Iniciando a aplicação](#iniciando-a-aplicação) 20 | - [Contribuir](#como-contribuir) 21 | 22 | [//]: # '- [Documentação](./doc/Padroes.md)' 23 | 24 |
25 | 26 | ### Tecnologias utilizadas 27 | 28 | O projeto foi construido utilizando as seguintes tecnologias: 29 | 30 | | Tecnologia | Versão | 31 | | --------------------------------------------- | ---------------------------------------------------------------- | 32 | | [Remix](https://remix.run/) |  | 33 | | [TypeScript](https://www.typescriptlang.org/) |  | 34 | | [Tailwind CSS](https://tailwindcss.com/) |  | 35 | | [axios](https://axios-http.com/ptbr/) |  | 36 | 37 | ### Figma 38 | 39 | Veja o design proposto da aplicação no [link do figma](https://www.figma.com/file/vCJ4Cd2SBXcdB1jiwzHmnS/%F0%9F%92%9C-%7C-He4rt-Devs?node-id=2278%3A1624&t=GdXeC37IEpLW5CTi-0), alterações e propostas de melhorias são bem vindas. 40 | 41 | ### Instalação 42 | 43 | Para fazer a instalação do He4rtLanding, siga as etapas abaixo: 44 | 45 | #### **Pré requisitos** 46 | 47 | - [Git](https://git-scm.com/downloads) 48 | - [Node.js](https://nodejs.org/pt-br/) versão 16.4.2 49 | - [Yarn](https://yarnpkg.com/) 50 | 51 | A maneira de instalar os pacotes acima podem variar de acordo com o seu sistema operacional. Para verificar qual instalação é mais adequada para você, acesse a página oficial dos pacotes requisitados e siga as instruções. 52 | 53 | #### **Baixando o Projeto** 54 | 55 | Com o `git` instalado, clone o repositório 56 | 57 | ```shell 58 | 59 | $ git clone https://github.com/he4rt/he4rt-landing-ssr.git && cd he4rt-landing-ssr 60 | ``` 61 | 62 | #### **Instalando as dependências** 63 | 64 | Instale todas as dependências executando o seguinte em seu terminal 65 | 66 | ```shell 67 | # Utilizando o npm 68 | $ npm install 69 | 70 | # Utilizando o yarn 71 | $ yarn 72 | ``` 73 | 74 | #### **Iniciando a aplicação** 75 | 76 | Parabéns 🎉, você realizou a instalação do projeto. Agora basta iniciar a aplicação 77 | 78 | ```shell 79 | # Utilizando o npm 80 | $ npm run dev 81 | 82 | # Utilizando o yarn 83 | $ yarn dev 84 | ``` 85 | 86 | ## Como contribuir 87 | 88 | Contribuições fazem com que a comunidade open source seja um lugar incrível para aprender, inspirar e criar. Todas as contribuições 89 | são **extremamente apreciadas**! 90 | 91 | 1. Realize um Fork do projeto 92 | 2. Crie um branch com a nova feature (`git checkout -b feature/featurebraba`) 93 | 3. Realize o Commit (`git commit -m 'feature/featurebraba'`) 94 | 4. Realize o Push no Branch (`git push origin feature/featurebraba`) 95 | 5. Quando finalizar abra um Pull Request 96 | 97 |
98 | 99 | [//]: # 'Veja [Documentação](./doc/Padroes.md) para saber mais sobre o projeto.' 100 | 101 |
102 | 103 |
104 |
109 |
--------------------------------------------------------------------------------
/app/utils/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext, useEffect, useRef, useState } from 'react';
2 | import type { Dispatch, ReactNode, SetStateAction } from 'react';
3 | import { useFetcher } from '@remix-run/react';
4 |
5 | enum Theme {
6 | DARK = 'dark',
7 | LIGHT = 'light',
8 | }
9 |
10 | type ThemeContextType = [Theme | null, DispatchAll Design and Code made with 💜
105 | 106 | MIT License - Copyright (c) 2023 [He4rt](https://github.com/he4rt/) 107 | 108 |
4 |
6 | );
7 | }
8 |
9 | function He4rtLogo() {
10 | return (
11 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/.idea/dbnavigator.xml:
--------------------------------------------------------------------------------
1 |
2 |