Re-estilizacao da landingPage

src/app/components/banner/landingBanner.tsx

@@ -0,0 +1,12 @@
+
+
+export default function LandingBanner(){
+    return(
+        <div className="bg-landingImage bg-center bg-cover bg-no-repeat h-96 w-full border-b-4">
+            <div className="flex flex-col justify-center items-center w-full h-full backdrop-blur-sm">
+                <h2 className="text-white text-4xl font-bold">Bem vindo ao Deafy!</h2>
+                <p className="text-white">Nosso aplicativo de música voltado à inclusão!</p>
+            </div>
+        </div>
+    );
+}

src/app/components/body/landingBody.tsx

@@ -19,26 +19,7 @@ export default function LandingBody(){
     return(
         <div>
             <div className="flex justify-between px-4 py-2 items-center bg-slate-800 h-16">
-                <Image
-                        src={deafyicon}
-                        style={{ cursor: "pointer" }}
-                        alt="Deafy Icon"
-                        className=" w-20"
-                    />
-                <Image
-                    src={menubars}
-                    style={{ cursor: "pointer" }}
-                    alt="Menu bars"
-                    className={`${isOpen? "hidden" : "w-10"} mr-2`}
-                    onClick={alteraEstado}
-                />
-                <Image
-                    src={closebutton}
-                    style={{ cursor: "pointer" }}
-                    alt="Close button"
-                    className={`${isOpen? "w-8" : "hidden"} mr-3`}
-                    onClick={alteraEstado}
-                />
+
             </div>
             <div className={`${isOpen? "w-screen overflow-hidden" : "hidden"} h-screen bg-slate-800`}>
                 <div className="flex flex-col gap-8 text-neutral-200 text-3xl font-bold p-8">

src/app/components/card/landingCard.tsx

@@ -0,0 +1,21 @@
+import Image from "next/image";
+
+interface ImageProps {
+    imagem: any;
+    titulo : string;
+    texto : string;
+}
+
+export default function LandingCard({imagem, titulo, texto} : ImageProps) {
+    return(
+        <div className=" flex px-2 gap-2">
+            <div className="flex items-center justify-center bg-gradient-to-b from-slate-300 via-slate-500 to-slate-800 rounded-full max-w-[6rem] min-w-[6rem] h-24">
+                <Image src={imagem} alt="Text Icon" className="w-14"/>
+            </div>
+            <div className="flex flex-col justify-center">
+                <h2 className="text-xl font-semibold">{titulo}</h2>
+                <p className="">{texto}</p>
+            </div>
+        </div>
+    );
+}

src/app/components/header/landingHeader.tsx

@@ -0,0 +1,30 @@
+import Image from "next/image"
+import Link from "next/link";
+import loginIcon from "../../../../public/loginIcon.png"
+import Button from "../button/button";
+
+interface ImageProps {
+    image: any;
+}
+
+export default function LandingHeader({image} : ImageProps) {
+    return (
+        <div className="flex justify-between p-4 items-center bg-slate-800 h-16">
+
+            <Image
+                    src={image}
+                    style={{ cursor:"pointer" }}
+                    alt="Deafy Icon"
+                    className=" w-16"
+            />
+            <div className="flex items-center gap-2">
+                <Link href='/register'>
+                    <p className="text-neutral-300 font-semibold hover:text-white focus:underline">Inscreva-se</p>
+                </Link>
+                <Link href='/login'>
+                    <Button nome="Entrar"/>
+                </Link>
+            </div>
+        </div>
+    );
+}

src/app/layout.tsx

@@ -4,6 +4,7 @@ import "./globals.css";
 import SideBar from "./components/bar/sideBar";
 import NavBar from "./components/bar/navBar";
 import Providers from "./Providers/providers";
+import HeaderHome from "./components/header/header";
 
 
 const inter = Inter({ subsets: ["latin"] });

src/app/page.tsx

@@ -1,6 +1,13 @@
-import LandingBody from "./components/body/landingBody";
+import LandingHeader from "./components/header/landingHeader";
 import RootLayout from "./layout";
-
+import deafyicon from "../../public/deafyicon.png"
+import LandingBanner from "./components/banner/landingBanner";
+import LandingCard from "./components/card/landingCard";
+import texticon from "../../public/texticon.png"
+import upload from "../../public/upload.png"
+import music from "../../public/musicicon.png"
+import Button from "./components/button/button";
+import Link from "next/link";
 
 export default function home() {
 
@@ -9,7 +16,28 @@ export default function home() {
 
   return (
     <RootLayout layoutProps={layoutProps}>
-        <LandingBody/>
+        <LandingHeader image = {deafyicon}/>
+        <LandingBanner/>
+        <div className="py-6 flex flex-col items-center gap-10">
+          <h2 className="text-black text-2xl font-bold">Porque utilizar o Deafy?</h2>
+          <div className="flex flex-col gap-10">
+            <LandingCard imagem={texticon} titulo="Transcreva seus áudios." texto="Inclusão para compreensão de áudios na palma da sua mão."/>
+            <LandingCard imagem={upload} titulo="Escolha o que ler." texto="Faça upload dos áudios do seu dispositivo."/>
+            <LandingCard imagem={music} titulo="Podcasts e Músicas." texto="Temos uma biblioteca de mais de 5 podcasts e músicas a sua disposição."/>
+          </div>
+          <div>
+            <div className="flex flex-col justify-end items-center mt-9 bg-gradient-to-b from-white from-20% via-slate-400 to-slate-500 h-52 w-screen">
+              <h2 className="text-white font-semibold text-4xl">É grátis.</h2>
+              <p className="text-white font-semibold text-2xl">Só baixar e usar.</p>
+            </div>
+            <div className="flex flex-col justify-top items-center bg-gradient-to-b from-slate-500 to-slate-800 h-52 w-screen gap-4">
+              <p className="text-white text-2xl font-semibold">Venha se juntar a nós.</p>
+              <Link href='/register'>
+                <Button nome="Inscreva-se já"/>
+              </Link>
+            </div>
+          </div>
+        </div>
     </RootLayout>
   );
 }