diff --git a/pro-jr/index.html b/pro-jr/index.html index ec66e9b..ef53bc7 100644 --- a/pro-jr/index.html +++ b/pro-jr/index.html @@ -4,10 +4,9 @@ PRO JR - - +
diff --git a/pro-jr/package-lock.json b/pro-jr/package-lock.json index c530da1..c5f39b5 100644 --- a/pro-jr/package-lock.json +++ b/pro-jr/package-lock.json @@ -8,6 +8,7 @@ "name": "pro-jr", "version": "0.0.0", "dependencies": { + "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.24.1", diff --git a/pro-jr/package.json b/pro-jr/package.json index 58eba61..357bf30 100644 --- a/pro-jr/package.json +++ b/pro-jr/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.24.1", diff --git a/pro-jr/src/App.css b/pro-jr/src/App.css index 7c9a9e0..a48dfcc 100644 --- a/pro-jr/src/App.css +++ b/pro-jr/src/App.css @@ -1,4 +1,9 @@ body, html { margin: 0; padding: 0; + font-family: 'Montserrat', sans-serif; +} + +body { + margin-top: 8.5vh; } \ No newline at end of file diff --git a/pro-jr/src/App.jsx b/pro-jr/src/App.jsx index 34b19d4..1167f9b 100644 --- a/pro-jr/src/App.jsx +++ b/pro-jr/src/App.jsx @@ -1,5 +1,9 @@ import './App.css'; +{/* context */} +import { OffsetProvider } from './context/OffsetContext'; + +{/* pages */} import About from './pages/About/About'; import Contact from './pages/Contact/Contact'; import Home from './pages/Home/Home'; @@ -7,17 +11,23 @@ import Impact from './pages/Impact/Impact'; import OurClients from './pages/OurClients/OurClients'; import OurServices from './pages/OurServices/OurServices'; +{/* components */} +import Navbar from './components/Navbar/Navbar'; + function App() { return ( <> - {/**/} - {/**/} + + + + + - {/**/} - {/**/} - {/**/} + + + ) } diff --git "a/pro-jr/src/assets/ACESSIBILIDADE \342\206\222 Button.png" "b/pro-jr/src/assets/ACESSIBILIDADE \342\206\222 Button.png" new file mode 100644 index 0000000..8a3a463 Binary files /dev/null and "b/pro-jr/src/assets/ACESSIBILIDADE \342\206\222 Button.png" differ diff --git a/pro-jr/src/assets/CAPA DE FRENTE SITE (2).png b/pro-jr/src/assets/CAPA DE FRENTE SITE (2).png new file mode 100644 index 0000000..de9e5ca Binary files /dev/null and b/pro-jr/src/assets/CAPA DE FRENTE SITE (2).png differ diff --git a/pro-jr/src/assets/LOGO_PRO_JR_PNG-removebg-preview 1.png b/pro-jr/src/assets/LOGO_PRO_JR_PNG-removebg-preview 1.png new file mode 100644 index 0000000..c9353f1 Binary files /dev/null and b/pro-jr/src/assets/LOGO_PRO_JR_PNG-removebg-preview 1.png differ diff --git a/pro-jr/src/assets/PRO_PNJ-removebg-preview (2) 1.png b/pro-jr/src/assets/PRO_PNJ-removebg-preview (2) 1.png new file mode 100644 index 0000000..77905d3 Binary files /dev/null and b/pro-jr/src/assets/PRO_PNJ-removebg-preview (2) 1.png differ diff --git a/pro-jr/src/assets/logo_projr.png b/pro-jr/src/assets/logo_projr.png new file mode 100644 index 0000000..78f1528 Binary files /dev/null and b/pro-jr/src/assets/logo_projr.png differ diff --git a/pro-jr/src/components/Logo.jsx b/pro-jr/src/components/Logo.jsx deleted file mode 100644 index 9f9c065..0000000 --- a/pro-jr/src/components/Logo.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const Logo = () => { - return ( - - ) -} - -export default Logo \ No newline at end of file diff --git a/pro-jr/src/components/Logo.module.css b/pro-jr/src/components/Logo.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/pro-jr/src/components/Navbar.jsx b/pro-jr/src/components/Navbar.jsx deleted file mode 100644 index cbce307..0000000 --- a/pro-jr/src/components/Navbar.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import './Navbar.module.css'; - -import { Link } from 'react-scroll'; - -const Navbar = () => { - return ( - - ); -} - -export default Navbar; diff --git a/pro-jr/src/components/Navbar.module.css b/pro-jr/src/components/Navbar.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/pro-jr/src/components/Navbar/Navbar.jsx b/pro-jr/src/components/Navbar/Navbar.jsx new file mode 100644 index 0000000..516b4b9 --- /dev/null +++ b/pro-jr/src/components/Navbar/Navbar.jsx @@ -0,0 +1,42 @@ +import React from "react"; +import { Link } from "react-scroll"; +import styles from './Navbar.module.css'; +import { useOffset } from '../../context/OffsetContext'; + +const Navbar = () => { + const { offset } = useOffset(); + + return ( + + ); +}; + +export default Navbar; diff --git a/pro-jr/src/components/Navbar/Navbar.module.css b/pro-jr/src/components/Navbar/Navbar.module.css new file mode 100644 index 0000000..e58d6df --- /dev/null +++ b/pro-jr/src/components/Navbar/Navbar.module.css @@ -0,0 +1,52 @@ +.menu { + display: flex; + align-items: center; + top: 0; + position: fixed; + width: 100%; + background-color: #00026a; + height: 8.5vh; + overflow: hidden; + z-index: 1000; +} + +.menu ul { + display: flex; + align-items: center; + cursor: pointer; + list-style: none; + padding-left: 15%; +} + +.menu li { + margin-left: 8%; + font-size: 14px; + color: #fff; + white-space: nowrap; +} + +.menu li a { + color: #fff; +} + +.logo { + height: 65px; + margin-top: 10%; +} + +.btnDiagn { + background-color: #fe4e00; + border-radius: 50px; + padding: 11px; + border: none; + color: #fff; + cursor: pointer; + font-weight: 900; + margin-left: auto; + margin-right: 3%; + transition: background-color 0.4s; +} + +.btnDiagn:hover { + background-color: #fe4e0099; +} diff --git a/pro-jr/src/components/ServicesIcon/ServicesIcon.jsx b/pro-jr/src/components/ServicesIcon/ServicesIcon.jsx new file mode 100644 index 0000000..519a10d --- /dev/null +++ b/pro-jr/src/components/ServicesIcon/ServicesIcon.jsx @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './ServicesIcon.module.css'; +import StarLogo from '../../assets/ProJr_ServicesStar.png'; + +const ServicesIcon = ({ title, description }) => { + const isLargeTitle = title.length > 25; + + let descriptionClass; + if (description.length < 100) { + descriptionClass = styles['short-description']; + } else if (description.length >= 100 && description.length <= 250) { + descriptionClass = styles['medium-description']; + } else { + descriptionClass = styles['long-description']; + } + + return ( +
+
+ estrela laranja +
+

+ {title} +

+

+ {description} +

+
+
+
+ ); +}; + +ServicesIcon.propTypes = { + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired +}; + +export default ServicesIcon; diff --git a/pro-jr/src/components/ServicesIcon/ServicesIcon.module.css b/pro-jr/src/components/ServicesIcon/ServicesIcon.module.css new file mode 100644 index 0000000..8d48e6d --- /dev/null +++ b/pro-jr/src/components/ServicesIcon/ServicesIcon.module.css @@ -0,0 +1,92 @@ +.icon-wrapper { + position: relative; + width: 541px; + height: 100px; + overflow: visible; + } + + .icon { + display: flex; + align-items: center; + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 16px; + background-color: #C7C8D7; + color: #00026A; + position: relative; + border-radius: 20px; + box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); + transition: height 0.5s ease, transform 0.3s ease; + } + + .icon > div { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + } + + .icon h2 { + font-size: 26px; + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + margin: 0; + white-space: nowrap; + transition: transform .6s ease; + } + + .icon:hover h2 { + margin-top: -55px; + } + + .icon h2.large-title { + font-size: 20px; + white-space: normal; + } + + .icon p { + text-align: justify; + margin-left: 7%; + margin-right: 7%; + opacity: 0; + transition: opacity 0.1s ease; + } + + .icon p.short-description { + margin-top: 20%; + } + + .icon p.medium-description { + margin-top: 14%; + } + + .icon p.long-description { + font-size: 15px; + margin-top: 11.5%; + } + + .star { + width: 60px; + position: absolute; + top: -8%; + transform: translate(-76%, 0); + transition: transform 0.5s ease; + } + + .icon:hover .star { + transform: translate(-76%, 0) rotate(180deg); + } + + .icon-wrapper:hover .icon { + height: 200px; + } + + .icon-wrapper:hover .icon p { + opacity: 1; + transition: opacity 0.7s ease; + } + diff --git a/pro-jr/src/context/OffsetContext.jsx b/pro-jr/src/context/OffsetContext.jsx new file mode 100644 index 0000000..0fb3344 --- /dev/null +++ b/pro-jr/src/context/OffsetContext.jsx @@ -0,0 +1,15 @@ +import React, { createContext, useState, useContext } from 'react'; + +const OffsetContext = createContext(); + +export const OffsetProvider = ({ children }) => { + const [offset, setOffset] = useState(-8.5 * window.innerHeight / 100); + + return ( + + {children} + + ); +}; + +export const useOffset = () => useContext(OffsetContext); diff --git a/pro-jr/src/index.css b/pro-jr/src/index.css index b3c1ee2..8b616eb 100644 --- a/pro-jr/src/index.css +++ b/pro-jr/src/index.css @@ -1,3 +1,3 @@ .view { - min-height: 100vh; + height: 92vh; } \ No newline at end of file diff --git a/pro-jr/src/pages/Contact/Contact.jsx b/pro-jr/src/pages/Contact/Contact.jsx index 286e21b..fe4c54e 100644 --- a/pro-jr/src/pages/Contact/Contact.jsx +++ b/pro-jr/src/pages/Contact/Contact.jsx @@ -2,7 +2,7 @@ import './Contact.module.css' const Contact = () => { return ( -
+

Contato

diff --git a/pro-jr/src/pages/Home/Home.jsx b/pro-jr/src/pages/Home/Home.jsx index ced9adb..b0f29bd 100644 --- a/pro-jr/src/pages/Home/Home.jsx +++ b/pro-jr/src/pages/Home/Home.jsx @@ -1,24 +1,52 @@ -import Navbar from '../../components/Navbar' - -import './Home.moduele.css' +import style from "../Home/Home.module.css"; +import { Link } from "react-scroll"; +import { useOffset } from '../../context/OffsetContext'; const Home = () => { + const { offset } = useOffset(); + return ( -
- -
-

Evoluindo processos, impactando resultados!

- -
-
-

ProJúnior

-
- - -
+
+ Botão de acessibilidade +
+

+ Evoluindo processos, +
impactando resultados! +

+ +

ProJúnior

+ +
+ + + + + +
+
+ +
+ Logo da PROJR + Símbolo de engrenagem com uma lâmpada no centro +
- ) -} + ); +}; -export default Home \ No newline at end of file +export default Home; diff --git a/pro-jr/src/pages/Home/Home.moduele.css b/pro-jr/src/pages/Home/Home.moduele.css deleted file mode 100644 index e69de29..0000000 diff --git a/pro-jr/src/pages/Home/Home.module.css b/pro-jr/src/pages/Home/Home.module.css new file mode 100644 index 0000000..8cd3a85 --- /dev/null +++ b/pro-jr/src/pages/Home/Home.module.css @@ -0,0 +1,90 @@ +.home { + background-image: url("src/assets/CAPA DE FRENTE SITE (2).png"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + height: 100vh; + width: 100%; + align-items: center; + justify-content: center; +} + +.slogan { + color: #FFFFFF; + padding-top: 10vh; + padding-left: 8%; + box-sizing: border-box; +} + +.slogan h1 { + font-size: 58px; +} + +.slogan h2 { + font-size: 30px; + font-weight: 400; +} + +.accessibility { + position: absolute; + right: 0; + width: 55px; + cursor: pointer; +} + +.btnLearnMore { + background-color: #FE4E00; + border-radius: 25px; + padding: 0.8%; + color: #fff; + border: none; + margin-right: 20px; + cursor: pointer; + font-weight: 900; + transition: background-color 0.4s; +} + +.btnLearnMore:hover { + background-color: #FE4E0099; +} + +.btnContact { + background-color: #EAEAEA80; + border: none; + padding: 0.8%; + border-radius: 25px; + cursor: pointer; + color: #fff; + font-weight: 900; + transition: background-color 0.4s; +} + +.btnContact:hover { + background-color: #EAEAEA60; +} + +.imgsProjr { + position: absolute; + right: 13vh; + top: 48vh; + display: flex; + align-items: center; +} + +.imgsProjr img { + width: 350px; +} + +.projrLogo { + margin-top: 7%; +} + +@media (max-width: 1366px) { + .slogan h1 { + font-size: 50px; + } + + .imgsProjr img { + width: 310px; + } +} diff --git a/pro-jr/src/pages/OurServices/OurServices.jsx b/pro-jr/src/pages/OurServices/OurServices.jsx index a725c6b..61b03f5 100644 --- a/pro-jr/src/pages/OurServices/OurServices.jsx +++ b/pro-jr/src/pages/OurServices/OurServices.jsx @@ -1,191 +1,47 @@ +import React from 'react'; +import ServicesIcon from '../../components/ServicesIcon/ServicesIcon'; import styles from './OurServices.module.css'; -import StarLogo from '../../assets/ProJr_ServicesStar.png'; +import ProJrLogo from '../../assets/LOGO_PRO_JR_PNG-removebg-preview 1.png'; + +const servicesData = [ + { title: "MAPEAMENTO DE PROCESSOS", description: "O mapeamento de processos identifica minuciosamente todas as etapas, fluxos e objetivos de seus processos, mas também aponta com precisão onde estão as oportunidades de melhoria." }, + { title: "CRONOANÁLISE", description: "A cronoanálise é uma ferramenta de estudo de tempos e movimentos, e é a chave para a otimização em sua linha de produção ou logística! Com ela, você ganha controle absoluto sobre seu negócio e identifica oportunidades valiosas para maximizar a eficiência." }, + { title: "ELABORAÇÃO DE LAYOUT", description: "Processo de organização de espaço que leva em conta cada detalhe, desde equipamentos até o fluxo de produção. Criamos o posicionamento perfeito para seus equipamentos, garantindo o máximo aproveitamento e eficiência no fluxo de produção." }, + { title: "GESTÃO DE ESTOQUE", description: "Planejamento, execução e controle dos seus recursos da melhor forma. Garantindo que você compre a quantidade certa de matérias-primas, mantenha suas mercadorias organizadas e nunca enfrente falta ou excesso." }, + { title: "PREVISÃO DE DEMANDA", description: "Realização da estimativa com precisão da quantidade de produtos ou serviços que seus clientes necessitarão, permitindo que você organize suas operações de forma impecável. Evitando o excesso e a escassez, garantindo o fornecimento ideal." }, + { title: "ATENDIMENTO AO CLIENTE", description: "Conjunto de práticas e estratégias para melhor atender os seus clientes, identificando as necessidades, e assim garantir a sua fidelização para com a sua empresa." }, + { title: "MODELO DE NEGÓCIOS", description: "Técnicas de análise de mercado para criar, entregar e capturar valor de maneira impecável. É a partir do modelo de negócios que você pode criar a sua empresa." }, + { title: "PLANEJAMENTO ESTRATÉGICO", description: "Estabelecimento de metas, estratégias de ação precisas e identificação dos recursos necessários para alcançá-las. Essencial para orientar e revitalizar sua empresa em busca de resultados excepcionais." }, + { title: "IMPLEMENTAÇÃO E MELHORIA DE DELIVERY", description: "Gestão de pedidos, preparação e entrega de produtos ou serviços através de plataformas de delivery." }, + { title: "FLUXO DE CAIXA", description: "Mantenha total controle sobre suas finanças, registrando meticulosamente todas as entradas e saídas de dinheiro. Tenha uma visão nítida de sua situação financeira atual e futura, permitindo decisões informadas que impulsionam o crescimento e a estabilidade." }, + { title: "CUSTEIO E PRECIFICAÇÃO", description: "Identificação e análise a cerca do que está envolvido dentre os custos de produção e, em seguida, definição dos preços de venda, de forma estratégica, garantindo a melhor lucratividade para seu negócio." }, + { title: "VIABILIDADE FINANCEIRA", description: "Metodologia de análise de custo-benefício como o critério definitivo para determinar a viabilidade financeira de projetos ou negócios. Apurando meticulosamente os custos e benefícios, permitindo que você tome decisões informadas e seguras." }, + { title: "GESTÃO DE REDES SOCIAIS", description: "Oferecemos soluções personalizadas para impulsionar a presença digital da sua empresa, desde consultorias simples até gestão completa, incluindo estratégias de postagem, criação de conteúdo e design visual exclusivo para aumentar o engajamento e a relevância da sua marca online." } +]; const OurServices = () => { + const chunks = []; + for (let i = 0; i < servicesData.length; i += 4) { + chunks.push(servicesData.slice(i, i + 4)); + } + return (
-

Nossos serviços

-
-
- estrela laranja -
-

MAPEAMENTO DE PROCESSOS

-

- O mapeamento de processos identifica - minuciosamente todas as etapas, fluxos e - objetivos de seus processos, mas também - aponta com precisão onde estão as - oportunidades de melhoria. -

-
-
-
- estrela laranja -
-

CRONOANÁLISE

-

- A cronoanálise é uma ferramenta de estudo - de tempos e movimentos, e é a chave para a - otimização em sua linha de produção ou - logística! Com ela, você ganha controle - absoluto sobre seu negócio e identifica - oportunidades valiosas para maximizar a - eficiência. -

-
-
-
- estrela laranja -
-

ELABORAÇÃO DE LAYOUT

-

- Processo de organização de espaço que leva - em conta cada detalhe, desde equipamentos - até o fluxo de produção. Criamos o - posicionamento perfeito para seus - equipamentos, garantindo o máximo - aproveitamento e eficiência no fluxo de - produção. -

-
-
-
- estrela laranja -
-

GESTÃO DE ESTOQUE

-

- Planejamento, execução e controle dos seus - recursos da melhor forma. Garantindo que - você compre a quantidade certa de matérias- - primas, mantenha suas mercadorias - organizadas e nunca enfrente falta ou - excesso. -

-
-
-
- estrela laranja -
-

PREVISÃO DE DEMANDA

-

- Realização da estimativa com precisão da - quantidade de produtos ou serviços que seus - clientes necessitarão, permitindo que você - organize suas operações de forma - impecável. Evitando o excesso e a escassez, - garantindo o fornecimento ideal. -

-
-
-
- estrela laranja -
-

ATENDIMENTO AO CLIENTE

-

- Conjunto de práticas e estratégias para - melhor atender os seus clientes, - identificando as necessidades, e assim - garantir a sua fidelização para com a sua - empresa. -

-
-
-
- estrela laranja -
-

MODELO DE NEGÓCIOS

-

- Técnicas de análise de mercado para criar, - entregar e capturar valor de maneira - impecável. É a partir do modelo de negócios - que você pode criar a sua empresa. -

-
-
-
- estrela laranja -
-

PLANEJAMENTO ESTRATÉGICO

-

- Estabelecimento de metas, estratégias de - ação precisas e identificação dos recursos - necessários para alcançá-las. Essencial para - orientar e revitalizar sua empresa em busca - de resultados excepcionais. -

-
-
-
- estrela laranja -
-

IMPLEMENTAÇÃO E MELHORIA DE DELIVERY

-

- Gestão de pedidos, preparação e entrega de - produtos ou serviços através de plataformas - de delivery. -

-
-
-
- estrela laranja -
-

FLUXO DE CAIXA

-

- Mantenha total controle sobre suas finanças, - registrando meticulosamente todas as - entradas e saídas de dinheiro. Tenha uma - visão nítida de sua situação financeira atual e - futura, permitindo decisões informadas que - impulsionam o crescimento e a estabilidade. -

-
-
-
- estrela laranja -
-

CUSTEIO E PRECIFICAÇÃO

-

- Identificação e analise a cerca do que está - envolvido dentre os custos de produção e, - em seguida, definição dos preços de venda, - de forma estratégica, garantindo a melhor - lucratividade para seu negócio. -

-
-
-
- estrela laranja -
-

VIABILIDADE FINANCEIRA

-

- Metodologia de análise de custo-benefício - como o critério definitivo para determinar a - viabilidade financeira de projetos ou - negócios. Apurando meticulosamente os - custos e benefícios, permitindo que você - tome decisões informadas e seguras. -

-
-
-
- estrela laranja -
-

GESTÃO DE REDES SOCIAIS

-

- Oferecemos soluções personalizadas para - impulsionar a presença digital da sua - empresa, desde consultorias simples até - gestão completa, incluindo estratégias de - postagem, criação de conteúdo e design - visual exclusivo para aumentar o - engajamento e a relevância da sua marca - online. -

-
-
+

Nossos serviços

+ {chunks.map((chunk, index) => ( +
+ {chunk.map((service, i) => ( + + ))} + Logo Pro Jr
+ ))}
- ) -} + ); +}; export default OurServices; diff --git a/pro-jr/src/pages/OurServices/OurServices.module.css b/pro-jr/src/pages/OurServices/OurServices.module.css index f086936..e867e58 100644 --- a/pro-jr/src/pages/OurServices/OurServices.module.css +++ b/pro-jr/src/pages/OurServices/OurServices.module.css @@ -1,22 +1,43 @@ .services { - padding: 20px; -} - -.container { + background-color: #EAEAEAEA; + position: relative; + padding-top: 2vh; + } + + .services > h2 { + text-align: center; + font-size: 30px; + color: #00026A; + } + + .container { display: grid; grid-template-columns: 1fr 1fr; - gap: 16px; -} - -.container > div { + height: 92vh; + gap: 16px; + align-items: center; + justify-items: center; + position: relative; + } + + .container > img { + width: 127px; + position: absolute; + right: 0; + top: 0; + } + + .lastContainer { + height: 56vh; + grid-template-columns: 1fr; display: flex; - align-items: flex-start; -} - -.container img { - margin-right: 16px; -} - -.container h2, .container p { - margin: 0; -} + justify-content: center; + align-items: center; + } + + @media (max-width: 1366px) { + .container { + gap: 0; + } + } + \ No newline at end of file