changed theme

src/components/BlogForm.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
 const BlogForm = ({ onCreateBlog }) => {
   const [title, setTitle] = useState("");
@@ -26,8 +26,10 @@ const BlogForm = ({ onCreateBlog }) => {
   };
 
   return (
-    <div className="max-w-lg mx-auto bg-white p-6 rounded-lg shadow-md">
-      <h2 className="text-2xl font-bold mb-6 text-center">Create New Blog</h2>
+    <div className="max-w-lg mx-auto bg-secondary p-6 rounded-lg shadow-md">
+      <h2 className="text-2xl font-bold mb-6 text-white text-center">
+        Create New Blog
+      </h2>
       <form onSubmit={handleSubmit}>
         <div className="mb-4">
           <label htmlFor="title" className="block text-gray-700">

src/components/Footer.jsx

@@ -2,15 +2,15 @@
 
 const Footer = () => {
   return (
-    <footer className="bg-gray-900 text-white py-12">
+    <footer className="bg-secondary text-white py-12">
       <div className="container mx-auto text-center">
         <h2 className="text-xl font-bold mb-4">
           Let’s get started on something great
         </h2>
         <p className="mb-8">
           Join 4,000+ startups already growing with Untitled.
         </p>
-        <button className="px-4 py-2 bg-indigo-600 text-white rounded-lg">
+        <button className="px-4 py-2 bg-primary text-white rounded-lg">
           Start Free
         </button>
 

src/components/HeroSection.jsx

@@ -47,7 +47,7 @@ const HeroSection = ({ posts, autoSlideInterval = 5000 }) => {
               {post.title}
             </h1>
             <p className="mt-4 text-gray-200">{post.description}</p>
-            <button className="px-4 py-2 mt-6 bg-white text-gray-900 rounded-lg">
+            <button className="px-4 py-2 mt-6 bg-primary text-white rounded-lg">
               Read More
             </button>
           </div>

src/components/LoadMoreButton.jsx

@@ -3,7 +3,7 @@
 const LoadMoreButton = () => {
   return (
     <div className="text-center mt-8">
-      <button className="px-4 py-2 bg-gray-900 text-white rounded-lg">
+      <button className="px-4 py-2 bg-primary text-white rounded-lg">
         Load More
       </button>
     </div>

src/components/NavBar.jsx

@@ -2,15 +2,15 @@
 
 const NavBar = () => {
   return (
-    <nav className="flex justify-between items-center px-12   h-24 py-4">
+    <nav className="flex justify-between items-center px-12 bg-secondary  h-24 py-4">
       <img className="h-16" src="/assets/mlsa-logo.png" />
 
       {/* <Button label="Log In" className="h-12" /> */}
       <div className="flex gap-5">
-        <button className="w-fit underline underline-offset-2 text-xl px-3 items-center font-semibold justify-center py-2 h-fit ">
+        <button className="w-fit rounded-md text-white bg-primary text-xl px-3 items-center font-semibold justify-center py-2 h-fit ">
           Login
         </button>
-        <button className="w-fit rounded-md text-white bg-gray-900 text-xl px-3 items-center font-semibold justify-center py-2 h-fit ">
+        <button className="w-fit rounded-md text-white bg-primary text-xl px-3 items-center font-semibold justify-center py-2 h-fit ">
           Create Blogs
         </button>
       </div>

src/components/PostCard.jsx

@@ -2,15 +2,15 @@
 
 const PostCard = ({ post }) => {
   return (
-    <div className="bg-white rounded-lg shadow-md overflow-hidden">
+    <div className="bg-secondary rounded-lg shadow-md overflow-hidden">
       <img
         src={post.img}
         alt={post.title}
         className="w-full h-64 object-fill object-center"
       />
       <div className="p-4">
-        <h3 className="text-lg font-bold">{post.title}</h3>
-        <p className="text-gray-600">
+        <h3 className="text-lg text-white font-bold">{post.title}</h3>
+        <p className="text-gray-200">
           By {post.author} on {post.date}
         </p>
       </div>

src/components/RecentPosts.jsx

@@ -5,7 +5,9 @@ import LoadMoreButton from "./LoadMoreButton";
 const RecentPosts = ({ posts }) => {
   return (
     <section className="container mx-auto px-4 py-12">
-      <h2 className="text-2xl font-semibold mb-8">Recent blog posts</h2>
+      <h2 className="text-2xl text-white font-semibold mb-8">
+        Recent blog posts
+      </h2>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         {posts.map((post) => (
           <PostCard key={post.id} post={post} />

src/pages/CreateBlogs.jsx

@@ -2,7 +2,7 @@ import BlogForm from "../components/BlogForm";
 
 const CreateBlogs = () => {
   return (
-    <div>
+    <div className="w-full p-12 justify-center items-center bg-background">
       <BlogForm />
     </div>
   );

src/pages/Home.jsx

@@ -1,3 +1,4 @@
+import Footer from "../components/Footer";
 import HeroSection from "../components/HeroSection";
 import RecentPosts from "../components/RecentPosts";
 
@@ -71,12 +72,14 @@ const Home = () => {
   ];
 
   return (
-    <div className="bg-gray-100 min-h-screen">
+    <div className="bg-background min-h-screen">
       {/* Hero Section with multiple posts */}
       <HeroSection posts={heroPosts} />
 
       {/* Recent Blog Posts */}
       <RecentPosts posts={blogPosts} />
+
+      <Footer />
     </div>
   );
 };