Merge pull request #68 from TeamXFive/devivan

Devivan

src/components/Home/CallToAction/CallToAction.jsx

@@ -0,0 +1,25 @@
+import "../../../../public/images/dex-androide.png"
+import "../../../style/Home/CallToAction/CallToAction.css"
+import CallToActionButton from '../CallToActionButton/CallToActionButton.jsx';
+
+function CallToAction() {
+    return(
+        <article className="call-to-action">
+            <div className="fig-container">
+                <img src="../../../../public/images/dex-androide.png" id="dex-fig"></img>
+            </div>
+
+            <section className="section-home-text">
+                <div className="home-text">
+                    DEX é um agente de IA generativa especializado em auxiliar os times de suporte a encontrarem soluções precisas de forma rapida e eficiente.
+                    <div className="call-button">
+                        <CallToActionButton/>
+                    </div>
+                </div>
+            </section>
+        </article>
+    )
+}
+
+
+export default CallToAction;

src/components/Home/CallToActionButton/CallToActionButton.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useNavigate } from "react-router-dom"
+
+function CallToActionButton() {
+
+
+    const navigate = useNavigate();
+
+    const redirectButton = () => {
+        navigate('/chat');
+    }
+
+    return (
+        <div className='call-button'>
+            <button onClick={redirectButton}>
+                Chatbot
+            </button>
+        </div>
+    )
+
+}
+
+export default CallToActionButton;

src/components/Home/Hero/Hero.jsx

@@ -1,15 +1,11 @@
 import '../../../style/Home/Hero/Hero.css'
-import Background from "../Background/Background.jsx";
-import Videoslider from "../Videoslider/Videoslider.jsx";
-import ConhecaDex from '../ConhecaDex/ConhecaDex.jsx';
+import CallToAction from '../CallToAction/CallToAction.jsx';
+
 
 function Hero() {
     return (
-        <div className="hero">
-            <Background/>
-            <ConhecaDex/>
-            <Videoslider/>
-
+        <div className= "hero ">
+            <CallToAction/>
         </div>
     )
 

src/pages/About/About.jsx

@@ -124,12 +124,10 @@ function About() {
                         />
                     </div>
                 </section>
-                <section>
                 <span className="divider-technologies"></span>
-                <div className="hero">
+                <div className="">
                     <Videoslider/>
                 </div>
-                </section>
                 <section id='technologies' className="technologies">
                     <span className="divider-technologies"></span>
                     <div className="technologies-introduction">

src/style/Home/CallToAction/CallToAction.css

@@ -0,0 +1,48 @@
+.call-to-action {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.fig-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50%;
+    height: 100%;
+
+}
+
+#dex-fig {
+    width: 50%;
+    border-radius: 20%;
+}
+
+.section-home-text {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    height: 100%;
+    align-items: flex-center;
+    justify-content: center;
+    font-size: 30px;
+    text-align: justify;
+
+    @media (max-width: 720px) {
+        font-size: 15px;
+    }
+}
+
+.home-text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 50%;
+    width: 50%;
+    color: white;
+}
+
+.call-button {
+    margin: 10px;
+}

src/style/Home/Hero/Hero.css

@@ -1,7 +1,7 @@
 .hero {
     display: flex;
     width: 100%;
-    height: 100%;
+    height: 90vh;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
@@ -10,6 +10,5 @@
 
 
 
-    background: transparent;
-
+
 }

src/style/Home/Home.css

@@ -0,0 +1,23 @@
+.hero-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    background: linear-gradient(0deg, rgba(var(--black-gray-rgb), 1), rgba(125, 179, 179, 0.1));
+
+}
+
+/* @media screen and (min-width: 768px) {
+    .hero-container {
+        height: 65vh;
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .hero-container {
+        height: 75vh;
+    }
+} */
+