Skip to content

Commit 4accf63

Browse files
alegaussalegauss
committed
Redesign homepage and update branding assets
Updated the homepage layout with new product cards, improved CSS for a modern look, and replaced branding assets including the logo and social card image. Adjusted Docusaurus config for new titles, taglines, and logo usage. Enhanced dark mode and primary color styling for better visual consistency.
1 parent 3a6f1bc commit 4accf63

File tree

5 files changed

+145
-37
lines changed

5 files changed

+145
-37
lines changed

‎docusaurus.config.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import type * as Preset from '@docusaurus/preset-classic';
55
// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
66

77
const config: Config = {
8-
title: 'Viglet Docs',
9-
tagline: 'Viglet Documentation',
8+
title: 'Viglet Documentation',
9+
tagline: 'Documentation about Viglet Products.',
1010
favicon: 'img/favicon.ico',
1111

1212
// Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
@@ -71,15 +71,15 @@ const config: Config = {
7171

7272
themeConfig: {
7373
// Replace with your project's social card
74-
image: 'img/docusaurus-social-card.jpg',
74+
image: 'img/viglet_logo_header.png',
7575
colorMode: {
7676
respectPrefersColorScheme: true,
7777
},
7878
navbar: {
79-
title: 'Viglet Docs',
79+
title: 'Docs',
8080
logo: {
8181
alt: 'Viglet Docs Logo',
82-
src: 'img/logo.svg',
82+
src: 'img/viglet_logo_header.png',
8383
},
8484
items: [
8585
{

‎src/css/custom.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@
88
--ifm-color-primary-light: orangered;
99
--ifm-color-primary-lighter: orangered;
1010
--ifm-color-primary-lightest: orangered;
11+
12+
--ifm-background-surface-color: orangered;
1113
}
1214

1315
/* Customização do Modo Escuro (Foco principal para parecer o docs.viglet.com) */
1416
[data-theme='dark'] {
1517
/* Fundo principal bem escuro (quase preto) */
16-
--ifm-background-color: #0d1117;
17-
--ifm-background-surface-color: #161b22;
18+
--ifm-background-color: black;
1819

1920
/* Cor do texto levemente suavizada para leitura */
2021
--ifm-font-color-base: #e6edf3;

‎src/pages/index.module.css‎

Lines changed: 66 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,80 @@
1-
/**
2-
* CSS files with the .module.css suffix will be treated as CSS modules
3-
* and scoped locally.
4-
*/
1+
/* Container da lista */
2+
.features {
3+
display: flex;
4+
align-items: center;
5+
padding: 2rem 0;
6+
width: 100%;
7+
}
58

9+
/* Ajuste do Banner */
610
.heroBanner {
711
padding: 4rem 0;
812
text-align: center;
913
position: relative;
1014
overflow: hidden;
1115
}
1216

13-
@media screen and (max-width: 996px) {
14-
.heroBanner {
15-
padding: 2rem;
16-
}
17+
/* O Card em si */
18+
.productCard {
19+
display: flex;
20+
flex-direction: column;
21+
height: 100%;
22+
padding: 1.5rem;
23+
background-color: var(--ifm-card-background-color);
24+
border: 1px solid var(--ifm-color-emphasis-200);
25+
border-radius: 8px;
26+
text-decoration: none !important; /* Remove sublinhado do link */
27+
transition: all 0.25s ease;
28+
margin-bottom: 2rem;
29+
color: var(--ifm-font-color-base);
30+
}
31+
32+
/* Efeito Hover estilo "Levitar" */
33+
.productCard:hover {
34+
transform: translateY(-5px);
35+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
36+
border-color: var(--ifm-color-primary);
1737
}
1838

19-
.buttons {
39+
/* Cabeçalho do Card (Flex para alinhar ícone e título) */
40+
.cardHeader {
41+
display: flex;
42+
align-items: center;
43+
margin-bottom: 1rem;
44+
}
45+
46+
/* Título do Card */
47+
.cardTitle {
48+
margin: 0;
49+
font-size: 1.5rem;
50+
font-weight: 700;
51+
}
52+
53+
/* O Quadrado com a Sigla (Sh, Tu) */
54+
.acronymBox {
2055
display: flex;
2156
align-items: center;
2257
justify-content: center;
58+
width: 48px;
59+
height: 48px;
60+
border-radius: 8px;
61+
margin-right: 1rem;
62+
font-size: 1.2rem;
63+
font-weight: bold;
64+
color: #fff; /* Texto branco dentro do quadrado */
65+
text-transform: uppercase;
2366
}
67+
68+
/* Corpo do texto */
69+
.cardBody p {
70+
font-size: 1rem;
71+
line-height: 1.5;
72+
color: var(--ifm-color-emphasis-700);
73+
flex-grow: 1; /* Empurra o footer para baixo */
74+
}
75+
76+
/* Rodapé "Read Documentation" */
77+
.cardFooter {
78+
margin-top: 1rem;
79+
font-weight: 600;
80+
}

‎src/pages/index.tsx‎

Lines changed: 71 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,94 @@
1-
import type {ReactNode} from 'react';
1+
import React from 'react';
22
import clsx from 'clsx';
3+
import Layout from '@theme/Layout';
34
import Link from '@docusaurus/Link';
45
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
5-
import Layout from '@theme/Layout';
6-
import HomepageFeatures from '@site/src/components/HomepageFeatures';
7-
import Heading from '@theme/Heading';
6+
import styles from './index.module.css'; // Vamos criar este CSS logo abaixo
7+
8+
// 1. Definição da Interface do Produto
9+
interface ProductItem {
10+
title: string;
11+
acronym: string; // Ex: 'Sh', 'Tu'
12+
description: string;
13+
link: string;
14+
color: string; // A cor da marca do produto
15+
}
816

9-
import styles from './index.module.css';
17+
// 2. Dados dos Produtos (Adicionei as cores próximas das originais)
18+
const ProductList: ProductItem[] = [
19+
{
20+
title: 'Shio CMS',
21+
acronym: 'Sh',
22+
description: 'Model Content, Use GraphQL and Create Site using Javascript with Native Cache and Search.',
23+
link: '/docs/cms/intro',
24+
color: '#00b894', // Verde estilo Shio
25+
},
26+
{
27+
title: 'Turing ES',
28+
acronym: 'Tu',
29+
description: 'Semantic Navigation, Chatbot using Search Engine and NLP Vendors.',
30+
link: '/docs/es/intro',
31+
color: '#0984e3', // Azul estilo Turing
32+
},
33+
];
1034

35+
// 3. Componente do Card de Produto
36+
function ProductCard({title, acronym, description, link, color}: ProductItem) {
37+
return (
38+
<div className={clsx('col col--6')}>
39+
<Link to={link} className={styles.productCard}>
40+
<div className={styles.cardHeader}>
41+
{/* O Ícone Quadrado Colorido */}
42+
<div className={styles.acronymBox} style={{ backgroundColor: color }}>
43+
{acronym}
44+
</div>
45+
<h3 className={styles.cardTitle}>{title}</h3>
46+
</div>
47+
<div className={styles.cardBody}>
48+
<p>{description}</p>
49+
</div>
50+
<div className={styles.cardFooter}>
51+
<span className={styles.learnMore} style={{ color: color }}>
52+
Read Documentation &rarr;
53+
</span>
54+
</div>
55+
</Link>
56+
</div>
57+
);
58+
}
59+
60+
// 4. Componente do Cabeçalho (Hero)
1161
function HomepageHeader() {
1262
const {siteConfig} = useDocusaurusContext();
1363
return (
14-
<header className={clsx('hero hero--primary', styles.heroBanner)}>
64+
<header className={clsx('hero', styles.heroBanner)}>
1565
<div className="container">
16-
<Heading as="h1" className="hero__title">
17-
{siteConfig.title}
18-
</Heading>
66+
<h1 className="hero__title">{siteConfig.title}</h1>
1967
<p className="hero__subtitle">{siteConfig.tagline}</p>
20-
<div className={styles.buttons}>
21-
<Link
22-
className="button button--secondary button--lg"
23-
to="/docs/intro">
24-
Docusaurus Tutorial - 5min ⏱️
25-
</Link>
26-
</div>
2768
</div>
2869
</header>
2970
);
3071
}
3172

32-
export default function Home(): ReactNode {
73+
// 5. Página Principal
74+
export default function Home(): React.ReactElement {
3375
const {siteConfig} = useDocusaurusContext();
3476
return (
3577
<Layout
36-
title={`Hello from ${siteConfig.title}`}
37-
description="Description will go into a meta tag in <head />">
78+
title={siteConfig.title}
79+
description="Documentation about Viglet Products">
3880
<HomepageHeader />
3981
<main>
40-
<HomepageFeatures />
82+
<section className={styles.features}>
83+
<div className="container">
84+
<div className="row">
85+
{ProductList.map((props, idx) => (
86+
<ProductCard key={idx} {...props} />
87+
))}
88+
</div>
89+
</div>
90+
</section>
4191
</main>
4292
</Layout>
4393
);
44-
}
94+
}

‎static/img/viglet_logo_header.png‎

3.22 KB
Loading

0 commit comments

Comments
 (0)