Lession1

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
     "bcryptjs": "^2.4.3",
     "eslint": "8.41.0",
     "eslint-config-next": "13.4.3",
@@ -18,5 +19,10 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "swr": "^2.1.5"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.23",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18"
   }
 }

src/app/layout.js

@@ -8,7 +8,7 @@ import AuthProvider from "@/components/AuthProvider/AuthProvider";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "Lama Dev",
+  title: "Surafel Mengist",
   description: "This is the description",
 };
 

src/app/next14/next.module.css

@@ -0,0 +1,21 @@
+.header{
+    background-color:black;
+    padding:4px;
+    width:100%;
+    display:flex;
+    color:white;
+    justify-content:space-between;
+    flex-items:center;
+}
+.title{
+    color:white;
+    font-size:10px;
+    flex-items:center;
+}
+.nav{
+    display:flex;
+    justify-content:center;
+    items-center;
+    gap:10px;
+
+}

src/app/next14/page.jsx

@@ -0,0 +1,19 @@
+
+import { Link } from 'next/link';
+import styles from "./next.module.css";
+const Header = () => {
+  return (
+    <div className={styles.header}>
+      <h1 className={styles.title}>Welcome to Next.js 14!</h1>
+
+      <nav className={styles.nav}>
+          <Link href="/">Home</Link>
+          <Link href="/about">About</Link>
+          <Link href="/contact">Contact</Link>
+      </nav>
+
+    </div>
+  )
+}
+
+export default Header

src/app/product/page.jsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react"
+import styles from "./product.module.css"
+
+const Products = () => {
+  const [data, setData] = useState([])
+
+  useEffect(() => {
+    fetch("https://jsonplaceholder.typicode.com/posts")
+      .then((res) => res.json())
+      .then((data) => setData(data))
+  }, [])
+
+  return (
+    <div>
+      <ul className={styles.ul}>
+        {data.map((list) => (
+          <li key={list.id}>
+            <p>{list.id}</p>
+            <p>{list.title}</p>
+            <p>{list.body}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default Products

src/app/product/product.module.css

@@ -0,0 +1,4 @@
+.ul{
+    border:1px solid gray;
+    border-radius:10px;
+}

src/components/footer/Footer.jsx

@@ -3,9 +3,10 @@ import styles from "./footer.module.css";
 import Image from "next/image";
 
 const Footer = () => {
+   const year= new Date().getFullYear();
   return (
     <div className={styles.container}>
-      <div>©2023 Lamamia. All rights reserved.</div>
+      <div>&copy;{year}. All rights reserved.</div>
       <div className={styles.social}>
         <Image src="/1.png" width={15} height={15} className={styles.icon} alt="Lama Dev Facebook Account" />
         <Image src="/2.png" width={15} height={15} className={styles.icon} alt="Lama Dev" />

src/components/navbar/Navbar.jsx

@@ -27,13 +27,18 @@ const links = [
     title: "About",
     url: "/about",
   },
-  {
+    {
     id: 5,
+    title: "product",
+    url: "/product",
+  },
+  {
+    id: 6,
     title: "Contact",
     url: "/contact",
   },
   {
-    id: 6,
+    id: 7,
     title: "Dashboard",
     url: "/dashboard",
   },
@@ -45,7 +50,7 @@ const Navbar = () => {
   return (
     <div className={styles.container}>
       <Link href="/" className={styles.logo}>
-        lamamia
+         My Next
       </Link>
       <div className={styles.links}>
         <DarkModeToggle />

src/components/navbar/navbar.module.css

@@ -1,6 +1,7 @@
 .container {
   height: 100px;
   display: flex;
+  width:100%;
   justify-content: space-between;
   align-items: center;
 }