Update

.prettierrc.cjs

@@ -0,0 +1,9 @@
+// prettier.config.js, .prettierrc.js, prettier.config.cjs, or .prettierrc.cjs
+
+/** @type {import("prettier").Config} */
+const config = {
+  bracketSameLine: true,
+  plugins: ["prettier-plugin-tailwindcss"],
+};
+
+module.exports = config;

.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  semi: false,
+  trailingComma: 'all',
+  singleQuote: true,
+  arrowParens: 'always',
+  jsxSingleQuote: false,
+  printWidth: 120,
+  plugins: ['prettier-plugin-tailwindcss'],
+}

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

components/FeaturedPosts.tsx

@@ -0,0 +1,23 @@
+export default function FeaturedPosts() {
+  const posts = [
+    { title: 'The Joy of Coding', excerpt: 'Exploring the art of writing clean and efficient code.', image: '/coding.jpg' },
+    { title: 'Design Tips for Beginners', excerpt: 'Essential design principles for beautiful web layouts.', image: '/design.jpg' },
+    { title: 'The Future of AI', excerpt: 'What lies ahead in the world of artificial intelligence?', image: '/ai.jpg' },
+  ];
+  return (
+    <div className="py-16 bg-gray-100">
+      <h2 className="text-4xl font-bold text-center mb-8">Featured Posts</h2>
+      <div className="flex justify-center space-x-8">
+        {posts.map((post, index) => (
+          <div key={index} className="w-80 bg-white shadow-lg rounded-lg overflow-hidden">
+            <img src={post.image} className="w-full h-48 object-cover" alt={post.title} />
+            <div className="p-6">
+              <h3 className="text-2xl font-bold mb-2">{post.title}</h3>
+              <p className="text-gray-700">{post.excerpt}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

components/Footer.tsx

@@ -0,0 +1,9 @@
+export default function Footer() {
+  return (
+    <footer className="bg-gray-800 py-8">
+      <div className="container mx-auto text-center text-gray-400">
+        <p>&copy; 2024 MyBlog. All Rights Reserved.</p>
+      </div>
+    </footer>
+  );
+}

components/Hero.tsx

@@ -0,0 +1,14 @@
+export default function Hero() {
+  return (
+    <div className="relative bg-cover bg-center h-screen" style={{ backgroundImage: "url('/hero-image.jpg')" }}>
+      <div className="absolute inset-0 bg-black bg-opacity-50"></div>
+      <div className="relative z-10 text-center flex flex-col items-center justify-center h-full">
+        <h1 className="text-5xl font-bold text-white">Welcome to My Blog</h1>
+        <p className="mt-4 text-lg text-gray-300">Sharing thoughts, ideas, and inspiration.</p>
+        <button className="mt-8 px-6 py-3 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600">
+          Explore Now
+        </button>
+      </div>
+    </div>
+  );
+}

components/Navbar.tsx

@@ -0,0 +1,12 @@
+export default function Navbar() {
+  return (
+    <nav className="flex justify-between items-center py-4 px-8 bg-white shadow-md">
+      <div className="text-2xl font-bold text-gray-800">MyBlog</div>
+      <ul className="flex space-x-6">
+        <li><a href="#" className="text-gray-600 hover:text-gray-900">Home</a></li>
+        <li><a href="#" className="text-gray-600 hover:text-gray-900">About</a></li>
+        <li><a href="#" className="text-gray-600 hover:text-gray-900">Contact</a></li>
+      </ul>
+    </nav>
+  );
+}

package.json

@@ -9,18 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.14",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.14"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8",
-    "eslint-config-next": "14.2.14"
+    "eslint-config-next": "14.2.14",
+    "postcss": "^8.4.47",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "0.4.1",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5"
   }
 }