Carousel added

tvalverdes · Feb 5, 2023 · 6155493 · 6155493
1 parent 8e80b54
commit 6155493
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 25 deletions.
diff --git a/components/navbar.jsx b/components/navbar.jsx
@@ -14,14 +14,13 @@ export function Navbar({ title, description }) {
   </Head>
 
 
-      <nav className="w-full bg-gray-700 top-0 left-0 right-0 z-10">
+      <nav className="w-full bg-neutral-900 top-0 left-0 right-0 z-10">
         <div className="justify-between px-4 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8">
-          <div>
+          <div className="w-1/3">
             <div className="flex items-center justify-between py-3 md:py-5 md:block">
               {/* LOGO */}
-              <Link href="/">
-                <h2 className="text-2xl text-cyan-600 font-bold ">LOGO</h2>
-              </Link>
+              <Image className="rounded-lg" src="/img/hutt.png" width={50} height={50} alt="Logo">
+              </Image>
               {/* HAMBURGER BUTTON FOR MOBILE */}
               <div className="md:hidden">
                 <button
@@ -43,29 +42,29 @@ export function Navbar({ title, description }) {
               </div>
             </div>
           </div>
-          <div>
+          <div className="w-2/3">
             <div
               className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
                 navbar ? 'p-12 md:p-0 block' : 'hidden'
               }`}
             >
-              <ul className="h-screen md:h-auto items-center justify-center md:flex ">
-                  <Link className="md:hover:border-b-4" href="#about" onClick={() => setNavbar(!navbar)}>
-                <li className="text-xl text-white py-2 md:px-6 text-center border-b-2 md:border-b-0  hover:bg-purple-900  border-purple-900  md:hover:text-purple-600 md:hover:bg-transparent">
+              <ul className="h-screen md:h-auto items-center justify-start md:flex">
+                  <Link href="#about" onClick={() => setNavbar(!navbar)}>
+                <li className="text-lg text-white py-2 md:pr-10 text-center md:hover:text-purple-600 md:hover:bg-transparent">
                     About
                 </li>
                   </Link>
-                <li className="text-xl text-white py-2 px-6 text-center  border-b-2 md:border-b-0  hover:bg-purple-600  border-purple-900  md:hover:text-purple-600 md:hover:bg-transparent">
+                <li className="text-lg text-white py-2 md:px-10 text-center  md:hover:text-purple-600 md:hover:bg-transparent">
                   <Link href="#blog" onClick={() => setNavbar(!navbar)}>
                     Blogs
                   </Link>
                 </li>
-                <li className="text-xl text-white py-2 px-6 text-center  border-b-2 md:border-b-0  hover:bg-purple-600  border-purple-900  md:hover:text-purple-600 md:hover:bg-transparent">
+                <li className="text-lg text-white py-2 md:px-10 text-center  md:hover:text-purple-600 md:hover:bg-transparent">
                   <Link href="#contact" onClick={() => setNavbar(!navbar)}>
                     Contact
                   </Link>
                 </li>
-                <li className="text-xl text-white py-2 px-6 text-center  border-b-2 md:border-b-0  hover:bg-purple-600  border-purple-900  md:hover:text-purple-600 md:hover:bg-transparent">
+                <li className="text-lg text-white py-2 md:px-10 text-center   md:hover:text-purple-600 md:hover:bg-transparent">
                   <Link href="#projects" onClick={() => setNavbar(!navbar)}>
                     Projects
                   </Link>

diff --git a/components/slider.jsx b/components/slider.jsx
@@ -6,19 +6,24 @@ export function Slider() {
   const slides = [
     {
       url: "/img/ellie.jpg",
+      title: "Information",
+      description: "Stay informed of your favorite games",
     },
     {
       url: "/img/hellblade_wallpaper.jpg",
+      title: "Ease",
+      description: "Find your favorite games easily",
     },
     {
       url: "/img/war_wallpaper.jpg",
+      title: "By gamers for gamers",
+      description: "We share the same hobby as you",
     },
 
     {
       url: "/img/illidan.jpg",
-    },
-    {
-      url: "/img/fondo.webp",
+      title: "Feedback",
+      description: "Do you know how we can improve? Contact us!",
     },
   ];
 
@@ -41,13 +46,18 @@ export function Slider() {
   };
 
   return (
-    <div>
-      <div className="max-w-[800px] h-[580px] w-full m-auto py-16 px-4 relative group">
+    <div className="bg-neutral-900">
+      <div className="max-w-[1200px] h-[680px] w-full m-auto py-16 px-4 relative group">
         <div
           style={{ backgroundImage: `url(${slides[currentIndex].url})` }}
           className="w-full h-full rounded-2xl bg-center bg-cover duration-500"
         >
-          <div className="relative group  bg-slate-800">aasd</div>
+        <div className="flex h-full items-end justify-center bg-trasparent text-center">
+          <div className="w-full h-1/5 bg-black bg-opacity-30 text-white inset-x-0 bottom-0 select-none pt-3 rounded-b-2xl">
+            <h2 className="font-bold text-2xl">{slides[currentIndex].title}</h2>
+            <h3 className="text-xl mt-3">{slides[currentIndex].description}</h3>
+          </div>
+        </div>
 
         </div>
         {/* Left Arrow */}
@@ -65,7 +75,7 @@ export function Slider() {
               onClick={() => goToSlide(slideIndex)}
               className="text-2xl cursor-pointer"
             >
-              <RxDotFilled />
+              <RxDotFilled className= {currentIndex == slideIndex ? "text-slate-400" : "text-white"} />
             </div>
           ))}
         </div>

diff --git a/pages/_document.js b/pages/_document.js
@@ -3,7 +3,11 @@ import { Html, Head, Main, NextScript } from 'next/document'
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+      <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=Ubuntu&display=swap" rel="stylesheet" />
+        </Head>
       <body>
         <Main />
         <NextScript />

diff --git a/pages/index.js b/pages/index.js
@@ -13,6 +13,7 @@ export default function Home() {
     <>
       <Navbar />
       <Slider />
+
     </>
   )
 }
diff --git a/public/img/hutt.png b/public/img/hutt.png
diff --git a/styles/globals.css b/styles/globals.css
@@ -2,12 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-html{
-  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-}
 
-.fondo {
-  background-image: url('/img/hellblade wallpaper.jpg');
+html{
+  font-family: 'Ubuntu', sans-serif;
 }
 
 h1 {
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,7 @@ export default function Home() { @@
         <>
           <Navbar />
           <Slider />
         </>
       )
     }