feat: add Slides

Davilands · Oct 5, 2024 · 970a1d4 · 970a1d4
1 parent 426f97f
commit 970a1d4
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 19 deletions.
diff --git a/app/header/page.tsx b/app/header/page.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import Image from 'next/image';
+// import Image from 'next/image';
 import '@/styles/header.css';
 
 export default function Header() {
@@ -9,7 +9,7 @@ export default function Header() {
 
         <div className="header" id="header">
           <div className="logo">
-            <Image src="/img/ico/frog-bc.png" alt="F8" />
+            <img src="/img/ico/frog-bc.png" alt="F8" />
             <h1 className=""><a className="_subTitle_vdbp4_58 d-lg-none" href="/"> <Link href={"/"}>DaviLands</Link> </a></h1>
           </div>
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -6,6 +6,7 @@ import Header from '@/app/header/page';
 import Menu from '@/app/menu/page';
 import Footer from '@/app/footer/page';
 import Login from '@/app/login/page';
+import Slides from '@/app/slider/page';
 import Link from 'next/link';
 const inter = Inter({ subsets: ['latin'] })
 
@@ -41,6 +42,7 @@ export default function RootLayout({
       <body>
         <Header />
 
+        {/* <Slides /> */}
         <div className="main">
           <Menu />
           {/* <Login /> */}

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import Image from 'next/image';
+import Slides from '@/app/slider/page';
+// import Image from 'next/image';
 import Link from 'next/link';
 import '@/styles/slider.css';
 import '@/styles/post-viral.css';
@@ -10,6 +11,9 @@ export default function Home() {
 
   return (
     <div>
+
+      {/* <Slides /> */}
+
       <div id="slider">
         <div className="left">
           <div className="text-content">
@@ -32,7 +36,7 @@ export default function Home() {
         </div>
 
         <div className="right">
-          <Image src="/img/facion/frog-techs.gif" alt="Description of image" />
+          <img src="/img/facion/frog-techs.gif" alt="Description of image" />
         </div>
       </div>
 
@@ -47,7 +51,7 @@ export default function Home() {
         <div className="cards">
           <div className="card">
             <div className="card-header">
-              <Image src="/img/blog/img/banner.png" alt="rover" />
+              <img src="/img/blog/img/banner.png" alt="rover" />
             </div>
             <div className="card-body">
               <span className="tag tag-teal">Technology</span>
@@ -58,7 +62,7 @@ export default function Home() {
                 ExpressJS, Ejs, MySQL, MongoDB
               </p>
               <div className="user">
-                <Image
+                <img
                   src="https://yt3.ggpht.com/a/AGF-l7-0J1G0Ue0mcZMw-99kMeVuBmRxiPjyvIYONg=s900-c-k-c0xffffffff-no-rj-mo"
                   alt="user" />
                 <div className="user-info">
@@ -70,7 +74,7 @@ export default function Home() {
           </div>
           <div className="card">
             <div className="card-header">
-              <Image src="/img/blog/img/laravel-socket.10ac0667.png" alt="ballons" />
+              <img src="/img/blog/img/laravel-socket.10ac0667.png" alt="ballons" />
             </div>
             <div className="card-body">
               <span className="tag tag-purple">Popular</span>
@@ -82,7 +86,7 @@ export default function Home() {
                 deal with that fear.
               </p>
               <div className="user">
-                <Image src="https://lh3.googleusercontent.com/ogw/ADGmqu8sn9zF15pW59JIYiLgx3PQ3EyZLFp5Zqao906l=s32-c-mo"
+                <img src="https://lh3.googleusercontent.com/ogw/ADGmqu8sn9zF15pW59JIYiLgx3PQ3EyZLFp5Zqao906l=s32-c-mo"
                   alt="user" />
                 <div className="user-info">
                   <h5>Eyup Ucmaz</h5>
@@ -93,7 +97,7 @@ export default function Home() {
           </div>
           <div className="card">
             <div className="card-header">
-              <Image src="/img/blog/img/main.png" alt="city" />
+              <img src="/img/blog/img/main.png" alt="city" />
             </div>
             <div className="card-body">
               <span className="tag tag-pink">Design</span>
@@ -104,7 +108,7 @@ export default function Home() {
                 Dashboard Design Guidelines
               </p>
               <div className="user">
-                <Image src="https://studyinbaltics.ee/wp-content/uploads/2020/03/3799Ffxy.jpg" alt="user" />
+                <img src="https://studyinbaltics.ee/wp-content/uploads/2020/03/3799Ffxy.jpg" alt="user" />
                 <div className="user-info">
                   <h5>Carrie Br/ewer</h5>
                   <small>1w ago</small>
@@ -114,7 +118,7 @@ export default function Home() {
           </div>
           <div className="card">
             <div className="card-header">
-              <Image src="/img/blog/img/SummaryTable-of-System-Design-for-API-design.421e3983.png" alt="city" />
+              <img src="/img/blog/img/SummaryTable-of-System-Design-for-API-design.421e3983.png" alt="city" />
             </div>
             <div className="card-body">
               <span className="tag tag-pink">Design</span>
@@ -125,7 +129,7 @@ export default function Home() {
                 Dashboard Design Guidelines
               </p>
               <div className="user">
-                <Image src="https://studyinbaltics.ee/wp-content/uploads/2020/03/3799Ffxy.jpg" alt="user" />
+                <img src="https://studyinbaltics.ee/wp-content/uploads/2020/03/3799Ffxy.jpg" alt="user" />
                 <div className="user-info">
                   <h5>Carrie Br/ewer</h5>
                   <small>1w ago</small>

diff --git a/app/slider/page.tsx b/app/slider/page.tsx
@@ -2,9 +2,9 @@
 
 import Link from 'next/link';
 import { useState, useEffect } from 'react';
-import '@/styles/menu.css';
+import '@/styles/slides.css';
 
-export default function Slider() {
+export default function Slides() {
   const [slideIndex, setSlideIndex] = useState(1); // Đặt trạng thái cho slideIndex
 
   useEffect(() => {
@@ -46,7 +46,7 @@ export default function Slider() {
   return (
     <div className="slider-container">
       <div className="slides" id="slideContainer">
-        <div className="slide slide-3">
+        <div className="slide 3">
           <div className="left">
             <p className="title">Trang 3</p>
             <p className="desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit...</p>
@@ -57,7 +57,7 @@ export default function Slider() {
           </div>
         </div>
 
-        <div className="slide slide-1">
+        <div className="slide 1">
           <div className="left">
             <p className="title">Đây là tiêu đề</p>
             <p className="desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit...</p>
@@ -68,7 +68,7 @@ export default function Slider() {
           </div>
         </div>
 
-        <div className="slide slide-2">
+        <div className="slide 2">
           <div className="left">
             <p className="title">Trang 2</p>
             <p className="desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit...</p>
@@ -79,7 +79,7 @@ export default function Slider() {
           </div>
         </div>
 
-        <div className="slide slide-3">
+        <div className="slide 3">
           <div className="left">
             <p className="title">Trang 3</p>
             <p className="desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit...</p>
@@ -91,7 +91,7 @@ export default function Slider() {
         </div>
 
         {/* Slide "ảo" (sao chép từ slide đầu tiên) */}
-        <div className="slide slide-1">
+        <div className="slide 1">
           <div className="left">
             <p className="title">Đây là tiêu đề</p>
             <p className="desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit...</p>