Skip to content

Commit

Permalink
Melhoria de desing
Browse files Browse the repository at this point in the history
  • Loading branch information
@GeovaneSec
GeovaneSec authored Jun 16, 2024
2 parents e643c49 + 46df6d0 commit ad05326
Show file tree
Hide file tree
Showing 13 changed files with 368 additions and 428 deletions.
7 changes: 3 additions & 4 deletions app/not-found.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,14 @@ const NotFoundPage = () => {
width={600}
height={600}
/>
<h2 className="mt-4">Página não encontrada</h2>
<p className="lead">
<h2 className="mt-4 display-4 fw-bold">Página não encontrada</h2>
<p className="lead text-muted">
A página que você está procurando pode ter sido removida ou não está mais disponível.
</p>
<Link href="/" passHref className="btn btn-primary rounded-pill">Voltar para a página inicial</Link>
<Link href="/" className="btn btn-primary rounded-pill shadow-lg py-3">Voltar para a página inicial</Link>
</div>
</div>
</div>

<Footer />
</div>
);
Expand Down
29 changes: 15 additions & 14 deletions app/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";
import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';
Expand All @@ -12,10 +13,10 @@ const HeroSection = () => {
<div className="row">
<div className="col-lg-12">
<div className="hero-content">
<img src="/B3API.png" alt="B3API Logo" width="140" height="140" />
<h1 className="hero-title">B3API</h1>
<p className="lead-text">Sua fonte confiável de dados em tempo real sobre ações, cotações e índices do mercado financeiro brasileiro.</p>
<Link href="/docs" className="btn btn-primary btn-lg rounded-pill start-button">Comece Agora</Link>
<Image src="/B3API.png" width={140} height={140} alt="B3API logo" priority={true} />
<h1 className="hero-title display-3 fw-bold">B3API</h1>
<p className="lead text-muted fs-5 mb-4">Sua fonte confiável de dados em tempo real sobre ações, cotações e índices do mercado financeiro brasileiro.</p>
<Link href="/docs" className="btn btn-primary btn-lg rounded-pill shadow-lg py-3">Comece Agora</Link>
</div>
</div>
</div>
Expand All @@ -28,30 +29,30 @@ const FeatureSection = () => {
return (
<section className="feature-section text-center my-5">
<div className="container">
<h2 className="section-title">Por que Escolher a B3API?</h2>
<h2 className="section-title display-4 fw-bold mb-5">Por que Escolher a B3API?</h2>
<div className="row justify-content-center">
<FeatureItem title="Dados Abrangentes" text="Acesse uma ampla gama de dados do mercado de ações, incluindo métricas e índices financeiros." color="blue" icon="fas fa-database" />
<FeatureItem title="Atualizações em Tempo Real" text="Mantenha-se informado com dados atualizados do mercado de ações." color="green" icon="fas fa-clock" />
<FeatureItem title="Integração Fácil" text="Integração simples e fácil em suas aplicações com nossa API amigável para desenvolvedores." color="teal" icon="fas fa-plug" />
<FeatureItem title="Dados Abrangentes" text="Acesse uma ampla gama de dados do mercado de ações, incluindo métricas e índices financeiros." color="info" icon="database" />
<FeatureItem title="Atualizações em Tempo Real" text="Mantenha-se informado com dados atualizados do mercado de ações." color="success" icon="clock" />
<FeatureItem title="Integração Fácil" text="Integração simples e fácil em suas aplicações com nossa API amigável para desenvolvedores." color="warning" icon="plug" />
</div>
</div>
</section>
);
};

function FeatureItem({ title, text, color, icon }) {
const FeatureItem = ({ title, text, color, icon }) => {
return (
<div className="col-lg-4 mb-4">
<div className={`card bg-${color} text-dark shadow`}>
<div className={`card text-dark bg-${color} bg-opacity-25 shadow-lg rounded-pill py-4`}>
<div className="card-body">
<i className={`fas ${icon} fa-3x mb-3`} />
<h5 className="card-title">{title}</h5>
<i className={`fas fa-${icon} fa-3x mb-3`} />
<h5 className="card-title fw-bold">{title}</h5>
<p className="card-text">{text}</p>
</div>
</div>
</div>
);
}
};

const Home = () => {
return (
Expand All @@ -64,4 +65,4 @@ const Home = () => {
);
};

export default Home;
export default Home;
46 changes: 29 additions & 17 deletions components/DocsMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,42 @@ import Link from 'next/link';
import { useRouter } from 'next/router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle, faLink } from '@fortawesome/free-solid-svg-icons';
import { Card, ListGroup } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const DocsMenu = () => {
const router = useRouter();

return (
<div className="col-md-3">
<div className="bg-light p-4 rounded shadow">
<h3 className="text-center mb-4">
<Link href="/docs" passHref className="text-decoration-none text-dark">Documentação</Link>
</h3>
<ul className="list-group list-group-flush">
<li className={`list-group-item border-0 rounded-pill ${router.pathname === '/docs/introduction' ? 'active rounded-pill text-light' : ''}`}>
<Link href="/docs/introduction" passHref className={`text-decoration-none text-dark rounded-pill d-block p-2 ${router.pathname === '/docs/introduction' ? 'bg-primary text-white' : ''}`} style={{ fontSize: '1.1rem' }}>
<FontAwesomeIcon icon={faInfoCircle} /> Introdução
<Card className="bg-light p-2 rounded shadow-sm border-0">
<Card.Body>
<Card.Title className="text-center mb-4">
<Link href="/docs" passHref className="text-decoration-none text-dark fs-3 fw-bold">Documentação</Link>
</Card.Title>
<ListGroup variant="flush">
<ListGroup.Item className="border-0 p-0 mb-2">
<Link href="/docs/introduction" passHref
className={`text-decoration-none d-block py-2 px-3 rounded transition ${
router.pathname === '/docs/introduction' ? 'bg-primary text-white' : 'text-dark'
}`}
style={{ fontSize: '1.2rem', fontWeight: '500' }}
>
<FontAwesomeIcon icon={faInfoCircle} className="me-2" /> Introdução
</Link>
</li>
<li className={`list-group-item border-0 rounded-pill ${router.pathname === '/docs/endpoints' ? 'active rounded-pill text-light' : ''}`}>
<Link href="/docs/endpoints" passHref className={`text-decoration-none text-dark rounded-pill d-block p-2 ${router.pathname === '/docs/endpoints' ? 'bg-primary text-white' : ''}`} style={{ fontSize: '1.1rem' }}>
<FontAwesomeIcon icon={faLink} /> Endpoints
</ListGroup.Item>
<ListGroup.Item className="border-0 p-0 mb-2">
<Link href="/docs/endpoints" passHref
className={`text-decoration-none d-block py-2 px-3 rounded transition ${
router.pathname === '/docs/endpoints' ? 'bg-primary text-white' : 'text-dark'
}`}
style={{ fontSize: '1.2rem', fontWeight: '500' }}
>
<FontAwesomeIcon icon={faLink} className="me-2" /> Endpoints
</Link>
</li>
</ul>
</div>
</div>
</ListGroup.Item>
</ListGroup>
</Card.Body>
</Card>
);
};

Expand Down
20 changes: 10 additions & 10 deletions components/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,24 @@ import { Navbar, Container, Nav } from 'react-bootstrap';

const BoostrapNavbar = () => {
return (
<Navbar bg="dark" expand="lg" variant="dark" className="py-2">
<Navbar bg="dark" expand="lg" variant="dark" className="py-3 shadow-sm">
<Container>
<Link href="/" passHref className="text-decoration-none">
<Navbar.Brand className="d-flex align-items-center text-center">
<img src="/B3API.png" alt="B3API Icon" width="50" height="50" />
<div className="fw-bold ms-2">B3API</div>
<Link href="/" className="text-decoration-none">
<Navbar.Brand className="d-flex align-items-center">
<img src="/B3API.png" width="50" height="50" alt="B3API logo" />
<div className="fw-bold ms-3 text-uppercase">B3API</div>
</Navbar.Brand>
</Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
<Nav className="ms-auto align-items-center">
<Nav.Item>
<Link href="/docs" passHref className="btn btn-primary rounded-pill mx-3" style={{ padding: '0.75rem 1.5rem', fontSize: '1.1rem', fontWeight: '500' }}>Documentação</Link>
<Nav className="align-items-center">
<Nav.Item className="me-3">
<Link href="/docs" passHref className="btn btn-primary rounded-pill px-4 py-3 text-uppercase" style={{ fontSize: '1rem', fontWeight: '600' }}>Documentação</Link>
</Nav.Item>
<Nav.Item>
<Link href="https://github.com/GeovaneDev/B3API" passHref target="_blank" className="nav-link" rel="noopener noreferrer">
<Link href="https://github.com/GeovaneDev/B3API" passHref className="nav-link d-flex align-items-center" target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faGithub} size="lg" />
<span className="d-inline ms-2">GitHub</span>
<span className="ms-2">GitHub</span>
</Link>
</Nav.Item>
</Nav>
Expand Down
92 changes: 46 additions & 46 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "b3api",
"version": "1.3.4",
"version": "1.3.5",
"private": true,
"scripts": {
"dev": "next dev",
Expand Down
Loading

0 comments on commit ad05326

Please sign in to comment.