Turing-Tecnologia · lendrw · Jul 26, 2024 · Jul 30, 2024 · Jul 30, 2024 · Aug 1, 2024
diff --git a/pro-jr/index.html b/pro-jr/index.html
@@ -4,10 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PRO JR</title>
-
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">   
   </head>
   <body>
     <div id="root"></div>

diff --git a/pro-jr/package-lock.json b/pro-jr/package-lock.json
diff --git 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
@@ -1,4 +1,9 @@
 body, html {
   margin: 0;
   padding: 0;
+  font-family: 'Montserrat', sans-serif;
+}
+
+body {
+  margin-top: 8.5vh;
 }
diff --git a/pro-jr/src/App.jsx b/pro-jr/src/App.jsx
@@ -1,23 +1,33 @@
 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';
 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 (
     <>
-        {/*<Home/>*/}
-        {/*<About/>*/}
+        <OffsetProvider>
+          <Navbar />
+          <Home />
+        </OffsetProvider>
+        <About/>
         <OurServices/>
-        {/*<Impact/>*/}
-        {/*<OurClients/>*/}
-        {/*<Contact/>*/}
+        <Impact/>
+        <OurClients/>
+        <Contact/>
     </>
   )
 }

diff --git a/pro-jr/src/assets/ACESSIBILIDADE → Button.png b/pro-jr/src/assets/ACESSIBILIDADE → Button.png
diff --git a/pro-jr/src/assets/CAPA DE FRENTE SITE (2).png b/pro-jr/src/assets/CAPA DE FRENTE SITE (2).png
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
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
diff --git a/pro-jr/src/assets/logo_projr.png b/pro-jr/src/assets/logo_projr.png
diff --git a/pro-jr/src/components/Logo.jsx b/pro-jr/src/components/Logo.jsx
diff --git a/pro-jr/src/components/Logo.module.css b/pro-jr/src/components/Logo.module.css
diff --git a/pro-jr/src/components/Navbar.jsx b/pro-jr/src/components/Navbar.jsx
diff --git a/pro-jr/src/components/Navbar.module.css b/pro-jr/src/components/Navbar.module.css
diff --git a/pro-jr/src/components/Navbar/Navbar.jsx 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 (
+    <nav className={styles.menu}>
+      <ul>
+        <li>
+          <Link to="home" smooth={true} duration={500} offset={offset}>
+            <img 
+              src="./src/assets/logo_projr.png" 
+              alt="Logo"
+              className={styles.logo}
+            />
+          </Link>
+        </li>
+        <li>
+          <Link to="home" smooth={true} duration={500} offset={offset}>
+            Home
+          </Link>
+        </li>
+        <li>
+          <Link to="services" smooth={true} duration={500} offset={offset}>
+            Serviços
+          </Link>
+        </li>
+        <li>
+          <Link to="about" smooth={true} duration={500} offset={offset}>
+            Sobre nós
+          </Link>
+        </li>
+      </ul>
+      <button className={styles.btnDiagn}>Faça um diagnóstico gratuito!</button>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/pro-jr/src/components/Navbar/Navbar.module.css 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
@@ -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 (
+    <div className={styles['icon-wrapper']}>
+      <div className={styles.icon}>
+        <img 
+          src={StarLogo} 
+          alt='estrela laranja' 
+          className={styles.star}
+        />
+        <div>
+          <h2 className={isLargeTitle ? styles['large-title'] : ''}>
+            {title}
+          </h2>
+          <p className={descriptionClass}>
+            {description}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+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
@@ -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
@@ -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 (
+    <OffsetContext.Provider value={{ offset, setOffset }}>
+      {children}
+    </OffsetContext.Provider>
+  );
+};
+
+export const useOffset = () => useContext(OffsetContext);
diff --git a/pro-jr/src/index.css b/pro-jr/src/index.css
@@ -1,3 +1,3 @@
 .view {
-  min-height: 100vh;
+  height: 92vh;
 }
diff --git 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 (
-    <div className='view'>
+    <div id="contact" className='view'>
         <div>
             <h2>Contato</h2>