storybook completed

23d453d7 · Sujeeth AV · ed5fe251 · 23d453d7 · 23d453d7 · 23d453d7
Commit 23d453d7 authored Jul 25, 2025 by Sujeeth AV
57 changed files
--- a/.storybook/GlobalStyle.js
+++ b/.storybook/GlobalStyle.js
+import { createGlobalStyle } from "styled-components";
+export const GlobalStyle = createGlobalStyle`
+body{
+background-color:${({theme})=>theme.background};
+color:${({theme})=>theme.text};
+transition:all 0.25s linear;
+}
+`;
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -8,7 +8,9 @@ const config = {
  ],
-  "addons": [],
+  "addons": [
+    "@storybook/addon-themes"
+  ],
  "framework": {
    "name": "@storybook/nextjs",
    "options": {}

--- a/.storybook/preview.js
+++ b/.storybook/preview.js
 /** @type { import('@storybook/nextjs').Preview } */
 import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import { ThemeProvider } from 'styled-components';
-import { createGlobalStyle, ThemeProvider } from 'styled-components';
+import { darkMode,lightMode } from './theme';
+import { GlobalStyle } from './GlobalStyle';
 const preview = {
-  // decorators: [
+  decorators: [
-  //   withThemeFromJSXProvider({
+    withThemeFromJSXProvider({
-  //     themes: {
+      themes: {
-  //       light: lightTheme,
+        light: lightMode,
-  //       dark: darkTheme,
+        dark: darkMode,
-  //     },
+      },
-  //     defaultTheme: 'light',
+      defaultTheme: 'light',
-  //     Provider: ThemeProvider,
+      Provider: ThemeProvider,
-  //     GlobalStyles,
+      GlobalStyles:GlobalStyle,
-  //   }),
+    }),
-  // ],
+  ],
  parameters: {
    controls: {
      matchers: {

--- a/.storybook/theme.js
+++ b/.storybook/theme.js
+export const lightMode={
+    background:'#fff',
+    text:'#000',
+}
+export const darkMode={
+    background:'#000',
+    text:'#fff',
+}
\ No newline at end of file
--- a/app/globals.css
+++ b/app/globals.css
-* {
+@import url("//fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600&display=swap");
+@import url("//fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap");
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  text-decoration: none;
+  --heading1: clamp(0.8rem, 1.5rem + 2.3vw, 2.8rem);
+  --heading2: clamp(1rem, 1.4rem + 2.2vw, 2.4rem);
+  --heading3: clamp(1rem, 1rem + 1.4vw, 1.7rem);
+  --heading4: clamp(1rem, 1rem + 1.2vw, 1.5rem);
+  --heading5: clamp(1rem, 1rem + 1vw, 1.3rem);
+  --heading6: clamp(0.9rem, 1rem + 0.8vw, 1.1rem);
+  line-height: 1.2;
+}
+.light {
+  --primary-bgcolor: #5a67d8;
+  --secondary-bgcolor: #fff;
+  --primary-color: #fff;
+  --secondary-color: #718096;
+  --font-color-900: #2d3748;
+  --font-color-300: #718096;
+  --title-color: #2d3748;
+  --bg-color: #f8f9fa;
+  --input-bg: #f4f4f4;
+  --card-bg: #fff;
+  --heading-color: #2d3748;
+  --border-radius: 6px;
+  --border-radius-full: 15px;
+  --border-color: transparent;
+  --bg-grey: #f4f4f4;
+  --bg-lightgrey: #f8f9fa;
+  --btn-bg: #e2e8f0;
+  --font-color-700: black;
+  --placeholder-color: #9f9f9f;
+}
+.dark {
+  --bg-color: black;
+  --input-bg: black;
+  --card-bg: #131617;
+  --font-color-300: #b7b7b7;
+  --placeholder-color: #b7b7b7;
+  --font-color-900: #fff;
+  --title-color: #fff;
+  --font-color-700: #fff;
+  --border-color: rgba(255, 255, 255, 0.2);
+  --primary-bgcolor: #5a67d8;
+  --secondary-bgcolor: #131617;
+  --primary-color: #fff;
+  --secondary-color: #fff;
+}
+body,
+html {
  padding: 0;
  margin: 0;
+  scroll-behavior: smooth;
+  background: var(--bg-color);
+  max-width: 1920px;
+  margin: 0 auto;
+  color: #718096;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
-html,
+h1 {
-body {
+  font-size: var(--heading1);
-  height: 100%;
-  width: 100%;
 }
-body {
+h2 {
+  font-size: var(--heading2);
+  color: var(--font-color-900);
+}
+h3 {
+  font-size: var(--heading3);
+  color: var(--font-color-900);
+}
+h4 {
+  font-size: var(--heading4);
+}
+h5 {
+  font-size: var(--heading5);
+}
+h6 {
+  font-size: var(--heading6);
+}
+h1,
+h2,
+h4,
+h3,
+h5,
+h6 {
+  color: var(--title-color);
+  font-family: "Libre Baskerville", serif;
+  margin: 20px 0px;
+}
+p {
+  font-size: 18px;
+  line-height: 28px;
+}
+.icon-container {
  display: flex;
-  justify-content: center;
+  gap: 1em;
-  align-items: center;
+}
-  background-color: #0b0d0e;
+:root[data-theme="light"] {
-  min-height: 100vh;
+  --bg-color: white;
+  --text-color: black;
+}
+:root[data-theme="dark"] {
+  --bg-color: #121212;
+  --text-color: white;
+}
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
 }
--- a/app/layout.js
+++ b/app/layout.js
@@ -12,7 +12,7 @@ const geistMono = Geist_Mono({
 });
 export const metadata = {
-  title: "Create Next App",
+  title: "Blog Website",
  description: "Generated by create next app",
 };

--- a/app/page.js
+++ b/app/page.js
+import { Bloglisting } from "@/context/Bloglisting";
 export default function Home() {
  return (
-    <h1 className="text-3xl font-bold underline">
+ <Bloglisting/>
-    Hello world!
-  </h1>
  );
 }
--- a/blog-backend/.gitignore
+++ b/blog-backend/.gitignore
+############################
+# OS X
+############################
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+.Spotlight-V100
+.Trashes
+._*
+############################
+# Linux
+############################
+*~
+############################
+# Windows
+############################
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/
+*.cab
+*.msi
+*.msm
+*.msp
+############################
+# Packages
+############################
+*.7z
+*.csv
+*.dat
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.seed
+*.so
+*.swo
+*.swp
+*.swn
+*.swm
+*.out
+*.pid
+############################
+# Logs and databases
+############################
+.tmp
+*.log
+*.sql
+*.sqlite
+*.sqlite3
+############################
+# Misc.
+############################
+*#
+ssl
+.idea
+nbproject
+public/uploads/*
+!public/uploads/.gitkeep
+.tsbuildinfo
+.eslintcache
+############################
+# Node.js
+############################
+lib-cov
+lcov.info
+pids
+logs
+results
+node_modules
+.node_history
+############################
+# Package managers
+############################
+.yarn/*
+!.yarn/cache
+!.yarn/unplugged
+!.yarn/patches
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+yarn-error.log
+############################
+# Tests
+############################
+coverage
+############################
+# Strapi
+############################
+.env
+license.txt
+exports
+.strapi
+dist
+build
+.strapi-updater.json
+.strapi-cloud.json
\ No newline at end of file
--- a/blog-backend/README.md
+++ b/blog-backend/README.md
+# 🚀 Getting started with Strapi
+Strapi comes with a full featured [Command Line Interface](https://docs.strapi.io/dev-docs/cli) (CLI) which lets you scaffold and manage your project in seconds.
+### `develop`
+Start your Strapi application with autoReload enabled. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-develop)
+```
+npm run develop
+# or
+yarn develop
+```
+### `start`
+Start your Strapi application with autoReload disabled. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-start)
+```
+npm run start
+# or
+yarn start
+```
+### `build`
+Build your admin panel. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-build)
+```
+npm run build
+# or
+yarn build
+```
+## ⚙️ Deployment
+Strapi gives you many possible deployment options for your project including [Strapi Cloud](https://cloud.strapi.io). Browse the [deployment section of the documentation](https://docs.strapi.io/dev-docs/deployment) to find the best solution for your use case.
+```
+yarn strapi deploy
+```
+## 📚 Learn more
+- [Resource center](https://strapi.io/resource-center) - Strapi resource center.
+- [Strapi documentation](https://docs.strapi.io) - Official Strapi documentation.
+- [Strapi tutorials](https://strapi.io/tutorials) - List of tutorials made by the core team and the community.
+- [Strapi blog](https://strapi.io/blog) - Official Strapi blog containing articles made by the Strapi team and the community.
+- [Changelog](https://strapi.io/changelog) - Find out about the Strapi product updates, new features and general improvements.
+Feel free to check out the [Strapi GitHub repository](https://github.com/strapi/strapi). Your feedback and contributions are welcome!
+## ✨ Community
+- [Discord](https://discord.strapi.io) - Come chat with the Strapi community including the core team.
+- [Forum](https://forum.strapi.io/) - Place to discuss, ask questions and find answers, show your Strapi project and get feedback or just talk with other Community members.
+- [Awesome Strapi](https://github.com/strapi/awesome-strapi) - A curated list of awesome things related to Strapi.
+---
+<sub>🤫 Psst! [Strapi is hiring](https://strapi.io/careers).</sub>
--- a/blog-backend/config/admin.ts
+++ b/blog-backend/config/admin.ts
+export default ({ env }) => ({
+  auth: {
+    secret: env('ADMIN_JWT_SECRET'),
+  },
+  apiToken: {
+    salt: env('API_TOKEN_SALT'),
+  },
+  transfer: {
+    token: {
+      salt: env('TRANSFER_TOKEN_SALT'),
+    },
+  },
+  secrets: {
+    encryptionKey: env('ENCRYPTION_KEY'),
+  },
+  flags: {
+    nps: env.bool('FLAG_NPS', true),
+    promoteEE: env.bool('FLAG_PROMOTE_EE', true),
+  },
+});
--- a/blog-backend/config/api.ts
+++ b/blog-backend/config/api.ts
+export default {
+  rest: {
+    defaultLimit: 25,
+    maxLimit: 100,
+    withCount: true,
+  },
+};
--- a/blog-backend/config/database.ts
+++ b/blog-backend/config/database.ts
+import path from 'path';
+export default ({ env }) => {
+  const client = env('DATABASE_CLIENT', 'sqlite');
+  const connections = {
+    mysql: {
+      connection: {
+        host: env('DATABASE_HOST', 'localhost'),
+        port: env.int('DATABASE_PORT', 3306),
+        database: env('DATABASE_NAME', 'strapi'),
+        user: env('DATABASE_USERNAME', 'strapi'),
+        password: env('DATABASE_PASSWORD', 'strapi'),
+        ssl: env.bool('DATABASE_SSL', false) && {
+          key: env('DATABASE_SSL_KEY', undefined),
+          cert: env('DATABASE_SSL_CERT', undefined),
+          ca: env('DATABASE_SSL_CA', undefined),
+          capath: env('DATABASE_SSL_CAPATH', undefined),
+          cipher: env('DATABASE_SSL_CIPHER', undefined),
+          rejectUnauthorized: env.bool('DATABASE_SSL_REJECT_UNAUTHORIZED', true),
+        },
+      },
+      pool: { min: env.int('DATABASE_POOL_MIN', 2), max: env.int('DATABASE_POOL_MAX', 10) },
+    },
+    postgres: {
+      connection: {
+        connectionString: env('DATABASE_URL'),
+        host: env('DATABASE_HOST', 'localhost'),
+        port: env.int('DATABASE_PORT', 5432),
+        database: env('DATABASE_NAME', 'strapi'),
+        user: env('DATABASE_USERNAME', 'strapi'),
+        password: env('DATABASE_PASSWORD', 'strapi'),
+        ssl: env.bool('DATABASE_SSL', false) && {
+          key: env('DATABASE_SSL_KEY', undefined),
+          cert: env('DATABASE_SSL_CERT', undefined),
+          ca: env('DATABASE_SSL_CA', undefined),
+          capath: env('DATABASE_SSL_CAPATH', undefined),
+          cipher: env('DATABASE_SSL_CIPHER', undefined),
+          rejectUnauthorized: env.bool('DATABASE_SSL_REJECT_UNAUTHORIZED', true),
+        },
+        schema: env('DATABASE_SCHEMA', 'public'),
+      },
+      pool: { min: env.int('DATABASE_POOL_MIN', 2), max: env.int('DATABASE_POOL_MAX', 10) },
+    },
+    sqlite: {
+      connection: {
+        filename: path.join(__dirname, '..', '..', env('DATABASE_FILENAME', '.tmp/data.db')),
+      },
+      useNullAsDefault: true,
+    },
+  };
+  return {
+    connection: {
+      client,
+      ...connections[client],
+      acquireConnectionTimeout: env.int('DATABASE_CONNECTION_TIMEOUT', 60000),
+    },
+  };
+};
--- a/blog-backend/config/middlewares.ts
+++ b/blog-backend/config/middlewares.ts
+export default [
+  'strapi::logger',
+  'strapi::errors',
+  'strapi::security',
+  'strapi::cors',
+  'strapi::poweredBy',
+  'strapi::query',
+  'strapi::body',
+  'strapi::session',
+  'strapi::favicon',
+  'strapi::public',
+];
--- a/blog-backend/config/plugins.ts
+++ b/blog-backend/config/plugins.ts
+export default () => ({});
--- a/blog-backend/config/server.ts
+++ b/blog-backend/config/server.ts
+export default ({ env }) => ({
+  host: env('HOST', '0.0.0.0'),
+  port: env.int('PORT', 1337),
+  app: {
+    keys: env.array('APP_KEYS'),
+  },
+});
--- a/blog-backend/database/migrations/.gitkeep
+++ b/blog-backend/database/migrations/.gitkeep
--- a/blog-backend/favicon.png
+++ b/blog-backend/favicon.png
--- a/blog-backend/package-lock.json
+++ b/blog-backend/package-lock.json
--- a/blog-backend/package.json
+++ b/blog-backend/package.json
+{
+  "name": "blog-backend",
+  "version": "0.1.0",
+  "private": true,
+  "description": "A Strapi application",
+  "scripts": {
+    "build": "strapi build",
+    "console": "strapi console",
+    "deploy": "strapi deploy",
+    "dev": "strapi develop",
+    "develop": "strapi develop",
+    "start": "strapi start",
+    "strapi": "strapi",
+    "upgrade": "npx @strapi/upgrade latest",
+    "upgrade:dry": "npx @strapi/upgrade latest --dry"
+  },
+  "dependencies": {
+    "@strapi/plugin-cloud": "5.18.1",
+    "@strapi/plugin-users-permissions": "5.18.1",
+    "@strapi/strapi": "5.18.1",
+    "better-sqlite3": "11.3.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0",
+    "styled-components": "^6.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5"
+  },
+  "engines": {
+    "node": ">=18.0.0 <=22.x.x",
+    "npm": ">=6.0.0"
+  },
+  "strapi": {
+    "uuid": "9a9c91aa-2f71-408e-8278-eb295a6361d6",
+    "installId": "de9f4b6f674daf1cbaa04da0b0f8394fc20ffff343bc0890b39f2481896756cc"
+  }
+}
--- a/blog-backend/public/robots.txt
+++ b/blog-backend/public/robots.txt
+# To prevent search engines from seeing the site altogether, uncomment the next two lines:
+# User-Agent: *
+# Disallow: /
--- a/blog-backend/public/uploads/.gitkeep
+++ b/blog-backend/public/uploads/.gitkeep
--- a/blog-backend/src/admin/app.example.tsx
+++ b/blog-backend/src/admin/app.example.tsx
+import type { StrapiApp } from '@strapi/strapi/admin';
+export default {
+  config: {
+    locales: [
+      // 'ar',
+      // 'fr',
+      // 'cs',
+      // 'de',
+      // 'dk',
+      // 'es',
+      // 'he',
+      // 'id',
+      // 'it',
+      // 'ja',
+      // 'ko',
+      // 'ms',
+      // 'nl',
+      // 'no',
+      // 'pl',
+      // 'pt-BR',
+      // 'pt',
+      // 'ru',
+      // 'sk',
+      // 'sv',
+      // 'th',
+      // 'tr',
+      // 'uk',
+      // 'vi',
+      // 'zh-Hans',
+      // 'zh',
+    ],
+  },
+  bootstrap(app: StrapiApp) {
+    console.log(app);
+  },
+};
--- a/blog-backend/src/admin/tsconfig.json
+++ b/blog-backend/src/admin/tsconfig.json
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["../plugins/**/admin/src/**/*", "./"],
+  "exclude": ["node_modules/", "build/", "dist/", "**/*.test.ts"]
+}
--- a/blog-backend/src/admin/vite.config.example.ts
+++ b/blog-backend/src/admin/vite.config.example.ts
+import { mergeConfig, type UserConfig } from 'vite';
+export default (config: UserConfig) => {
+  // Important: always return the modified config
+  return mergeConfig(config, {
+    resolve: {
+      alias: {
+        '@': '/src',
+      },
+    },
+  });
+};
--- a/blog-backend/src/api/.gitkeep
+++ b/blog-backend/src/api/.gitkeep
--- a/blog-backend/src/extensions/.gitkeep
+++ b/blog-backend/src/extensions/.gitkeep
--- a/blog-backend/src/index.ts
+++ b/blog-backend/src/index.ts
+// import type { Core } from '@strapi/strapi';
+export default {
+  /**
+   * An asynchronous register function that runs before
+   * your application is initialized.
+   *
+   * This gives you an opportunity to extend code.
+   */
+  register(/* { strapi }: { strapi: Core.Strapi } */) {},
+  /**
+   * An asynchronous bootstrap function that runs before
+   * your application gets started.
+   *
+   * This gives you an opportunity to set up your data model,
+   * run jobs, or perform some special logic.
+   */
+  bootstrap(/* { strapi }: { strapi: Core.Strapi } */) {},
+};
--- a/blog-backend/tsconfig.json
+++ b/blog-backend/tsconfig.json
+{
+  "compilerOptions": {
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "lib": ["ES2020"],
+    "target": "ES2019",
+    "strict": false,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noEmitOnError": true,
+    "noImplicitThis": true,
+    "outDir": "dist",
+    "rootDir": "."
+  },
+  "include": [
+    // Include root files
+    "./",
+    // Include all ts files
+    "./**/*.ts",
+    // Include all js files
+    "./**/*.js",
+    // Force the JSON files in the src folder to be included
+    "src/**/*.json"
+  ],
+  "exclude": [
+    "node_modules/",
+    "build/",
+    "dist/",
+    ".cache/",
+    ".tmp/",
+    // Do not include admin files in the server compilation
+    "src/admin/",
+    // Do not include test files
+    "**/*.test.*",
+    // Do not include plugins in the server compilation
+    "src/plugins/**"
+  ]
+}
--- a/blog-backend/types/generated/components.d.ts
+++ b/blog-backend/types/generated/components.d.ts
+/*
+ * The app doesn't have any components yet.
+ */
--- a/blog-backend/types/generated/contentTypes.d.ts
+++ b/blog-backend/types/generated/contentTypes.d.ts
--- a/components/Base/Form/search/Search.jsx
+++ b/components/Base/Form/search/Search.jsx
@@ -5,6 +5,7 @@ export const Search = ({
  onChange,
  icon: Icon,
  iconClassName,
+  onComplete,
  ...props
 }) => {
  return (
@@ -14,7 +15,9 @@ export const Search = ({
          <Icon className={`${style.icn} ${iconClassName || ""}`} />
        </span>
      )}
+      <span className={style.block}>
        <input placeholder={placeholder} onChange={onChange} {...props} />
+      </span>
    </div>
  );
 };
--- a/components/Base/Form/search/Search.module.css
+++ b/components/Base/Form/search/Search.module.css
-.searchContainer {
+/* .searchContainer {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
+  width: 100%;
 }
 .searchContainer input {
  width: 100%;
  height: 2rem;
 }
-input:focus {
+.block input:focus {
  outline: none;
 }
 .icon {
@@ -20,8 +21,27 @@ input:focus {
  transform: translateY(-50%);
  pointer-events: none;
 }
-input {
+.block input {
  padding: 3px 7.5px 4.3px 35px;
  background-color: #f3f3f3;
  border: none;
+} */
+.block {
+  width: 100%;
+  box-sizing: border-box;
+}
+.block input {
+  width: 100%;
+  border: none;
+  background-color: #f3f3f3;
+  height: 3.5rem;
+  font-size: 1rem;
+  padding-left: 1.2rem;
+  margin-bottom: 0.9rem;
+}
+.block input:focus {
+  outline: none;
 }
--- a/components/Base/Icons/Icons.jsx
+++ b/components/Base/Icons/Icons.jsx
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import cn from "classnames";
 import styles from "@/components/Base/Icons/Icons.module.css";
-export const Icons = ({ name, size = 20, classes }) => {
+export const Icons = ({ name, size = 20, className }) => {
  const icons = {
    search: (
      <svg
@@ -83,10 +83,7 @@ export const Icons = ({ name, size = 20, classes }) => {
      </svg>
    ),
  };
-  const classNames = cn({
+  const classNames = cn(className, styles[size]);
-    [styles[classes]]: classes,
-    [styles[size]]: size,
-  });
  return <span className={classNames}>{icons[name]}</span>;
 };

--- a/components/Base/Icons/Icons.module.css
+++ b/components/Base/Icons/Icons.module.css
@@ -5,8 +5,8 @@
 }
 .moon svg,
 .sun svg {
-  height: 50px;
+  height: 40px;
-  width: 50px;
+  width: 40px;
  color: var(--font-color-300);
  vertical-align: sub;
 }
@@ -18,8 +18,8 @@
 }
 .medium svg {
-  height: 38px;
+  height: 25px;
-  width: 38px;
+  width: 25px;
  color: #98a3b3;
 }
 .newspaper-icon svg {
@@ -27,3 +27,15 @@
  height: 20px;
  width: 20px;
 }
+@media (min-width: 768px) {
+  .moon svg .sun svg {
+    height: 50px;
+    width: 50px;
+  }
+  .medium svg {
+    height: 38px;
+    width: 38px;
+    color: #98a3b3;
+  }
+}
--- a/components/Shared/Card/Card.jsx
+++ b/components/Shared/Card/Card.jsx
 import React from "react";
-import style from "./Card.module.css";
+import styles from "./Card.module.css";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
 import { Header } from "@/components/Layout/Card/Header";
 import Image from "next/image";
 import blog from "@/public/images/blogsingle.jpg";
 import { Typo, Details } from "@/components/Base/Typography/Typo";
 export const Card = ({
  title,
-  description,
+  publishedDate,
-  posted,
  author,
-  publish,
+  category,
-  time,
+  readingTime,
-  details,
+  categories,
-  extradetails,
+  markdown,
-  extradescription,
-  moredetails,
-  moredescription,
-  data,
-  heading,
-  authorname,
 }) => {
  return (
    <>
-      <div className={style.container}>
+      <div className={styles["container"]}>
-        <div className={style.block}>
+        <div className={styles.headtitle}>
-          <div className={style.head}>
+          <h1 className={styles.title}>{title}</h1>
-            <Header title={title} />
        </div>
-          <div className={style.publish}>
+        <div className={styles["blog-list"]}>
-            <span>{posted}</span>
+          <ul>
-            <span>{author}</span>
+            <li>
-            <span>{publish}</span>
+              Posted on&nbsp;
-            <span>{time}</span>
+              <span className={styles["list-bold"]}>{publishedDate}</span>
+            </li>
+            <li>
+              By&nbsp;
+              <a href="#" className={styles["list-bold"]}>
+                {author.name}
+              </a>
+            </li>
+            <li>
+              Published in&nbsp;
+              <a href="#" className={styles["list-bold"]}>
+                {category}
+              </a>
+            </li>
+            <li>
+              <a href="#" className={styles["list-bold"]}>
+                {readingTime}
+              </a>
+            </li>
+          </ul>
        </div>
+        <div className={styles["blog-container"]}>
+          <div className={styles.blogimage}>
+            <Image className={styles.img} src={blog} alt={author.name} />
          </div>
-        <div className={style.img}>
+          <div className={styles["blog-content"]}>
-          <Image src={blog} alt="Blog-image" className={style.imgstyle} />
+            <ReactMarkdown rehypePlugins={[rehypeRaw]}>
+              {markdown}
+            </ReactMarkdown>
+            <div className={styles.tag}>
+              <span>Tags:</span>
+              {categories && categories.map((e, i) => <p key={i}>{e}</p>)}
            </div>
-        <div className={style.description}>
-          <Details details={details} />
-          <Typo description={description} />
-          <div className={style.auth}>
-            <Details details={heading} />
-            <Typo description={authorname} />
          </div>
-          <Typo description={data} />
-          <Details details={extradetails} />
-          <Typo description={extradescription} />
-          <Details details={moredetails} />
-          <Typo description={moredescription} />
        </div>
      </div>
    </>

--- a/components/Shared/Card/Card.module.css
+++ b/components/Shared/Card/Card.module.css
-@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
-:root {
-  --gray: #818182;
-  --white: #eeeeee;
-  --black: #000;
-}
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 85rem;
-  margin: 0 auto;
-}
 .head {
  justify-content: flex-start;
  align-self: flex-start;
  margin-left: 8rem;
 }
-.publish {
+.container {
-  display: flex;
+  padding-top: 5rem;
-  flex-direction: row;
+  padding-bottom: 3rem;
-  column-gap: 1rem;
-  justify-content: flex-start;
-  align-self: flex-start;
-  margin-left: 5rem;
-  color: var(--gray);
 }
-.img {
+.headtitle,
-  position: relative;
+.blog-list ul {
-  box-sizing: border-box;
+  padding: 0rem 2.3rem;
-  border-radius: 2rem;
+}
-  display: flex;
+.blog-content {
-  justify-content: center;
+  padding: 1rem;
-  overflow: hidden;
+  border-radius: 15px;
  margin-top: 2rem;
+  font-size: 18px;
+  line-height: 1.2;
+  background: var(--card-bg);
+}
+.blog-content p,
+.blog-content ol li {
+  font-size: clamp(1rem, 0.8rem + 1vw, 1.2rem);
+}
+.blogimage {
+  overflow: hidden;
+  border-radius: 15px;
+  width: 100%;
+  margin-top: 2.5rem;
 }
-.imgstyle {
+.img {
+  max-width: 100%;
+  max-height: 30vmax;
  object-fit: cover;
-  max-width: 85vw;
+  display: block;
-  box-sizing: border-box;
-  border-radius: 2rem;
 }
-.head {
+.blog-content blockquote p {
-  color: var(--gray);
+  font-size: 20px;
-  font-size: 1.6rem;
+}
-  margin-left: 0;
+.blog-list ul {
-}
+  display: flex;
-.description {
+  flex-wrap: wrap;
-  padding: 4rem;
+  list-style: none;
-  margin-top: 0.5rem;
+  gap: 1em;
-  border-radius: 2rem;
+  color: var(--font-color-300);
+}
+.blog-list ul li {
+  font-size: clamp(1rem, 0.4rem + 0.5vw, 1.1rem);
+  line-height: 1;
+}
+.blog-list ul li a {
+  text-decoration: none;
+  color: var(--font-color-300);
+}
+.blog-container {
+  width: 90%;
+  margin: 0 auto;
+}
+.tag {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+.tag > p {
+  background: #e2e8f0;
+  padding: 0.3em 1em;
+  border-radius: 40px;
+  color: #718096;
+  font-weight: 400;
+  font-size: 17px;
+}
+.tag > span {
+  font-weight: 400;
+  font-size: 22px;
+}
+.tag p:hover {
+  background: var(--violet);
  color: var(--white);
-  background-color: var(--gray);
+}
-  width: 85vw;
+.blog-content blockquote {
-  max-width: 102rem;
+  padding: 0.66001rem 1rem 1rem;
-  box-sizing: border-box;
+  border-left: 3px solid var(--violet);
+  margin: 0;
+}
+.blog-content blockquote p::before {
+  content: "\2014\00A0";
+}
+.head-container {
+  width: 90%;
+  margin-inline: auto;
+}
+.title {
+  margin: 0;
+  font-weight: 600;
+  color: var(--font-color-900);
+}
+.list-bold {
+  font-weight: bold;
 }
 @media (min-width: 768px) {
-  .publish {
+  .headtitle,
-    display: flex;
+  .blog-list ul {
-    flex-direction: row;
+    width: min(80rem, 90%);
-    margin-left: 0;
+    padding: 0rem 3.5rem;
-    column-gap: 3rem;
  }
-  .block {
+  .blog-content {
-    display: flex;
+    padding: 3rem;
-    flex-direction: column;
+  }
-    justify-content: flex-start;
+  .tag {
-    align-self: flex-start;
+    gap: 1rem;
+  }
+}
+@media (min-width: 1440px) {
+  .container {
+    padding-inline: 40px;
+  }
+  .headtitle,
+  .blog-list ul {
+    width: min(70rem, 90%);
+    margin: 0 auto;
+  }
+  .blog-list ul {
+    margin-top: 1rem;
  }
 }
--- a/components/Shared/Card/Card.stories.jsx
+++ b/components/Shared/Card/Card.stories.jsx
@@ -12,25 +12,51 @@ export const Singlecard = {
  render: (args) => <Card {...args} />,
  args: {
-    title: "Create an Art that shows the beauty in everyone's ideas of flaws",
+    title: "Create an Art that shows the beauty in everyone ideas of flaws.",
-    posted: "Posted on July 11,2020",
+    publishedDate: "July 11,2020",
-    author: "By Charlotte mia",
+    author: {
-    publish: "Published in Fashion",
+      name: "Charlotte mia",
-    time: "1 min read",
+    },
-    details:
-      "How to create an Art that shows the beauty in everyone's idea of flaws",
+    category: "Fashion",
-    description:
+    readingTime: "1 min read",
-      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+    categories: ["Fashion", "Beauty"],
-    data: " Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
+    markdown: `
+### How to create an Art that shows the beauty in everyone ideas of flaws.
-    extradetails: "Fusce faucibus ante vitae justo efficitur",
-    extradescription:
+Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
-      " Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
+faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
-    moredetails: "Quisque sagittis laccus eu lorem sodales",
+vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur elementum.
-    moredescription:
-      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
-    heading:
+ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
-      "For dull and lifeless skin, mix apple juice with honey.Apply a thin layer to  your face, and leave it fro 5 minutes.",
-    authorname: "-Kelvin edison",
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+>
+> Kelvin edison
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu  elementum ,luctus justo.ac purus semper.
+Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu  elementum..
+### Fusce faucibus ante vitae justo efficitur
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
+   1. Quisque sagittis lacus eu lorem sodalesd enean adipiscing.
+   2. Donec ipsum faucibus arcu elementum, luctus justo.
+   3. Nam libero tempore, cum soluta nobis est eligendi optio.
+   4. Sed ut perspiciatis unde omnis natus
+### Quisque sagittis lacus eu lorem sodales
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.
+Fusce faucibus arcu faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu.`,
  },
 };
--- a/components/Shared/SearchHeader/SearchHeader.jsx
+++ b/components/Shared/SearchHeader/SearchHeader.jsx
-import React from "react";
+"use client";
+import Link from "next/link";
+import React, { useEffect, useState } from "react";
 import styles from "./SearchHeader.module.css";
-import { Header } from "@/components/Layout/Card/Header";
 import { Search } from "@/components/Base/Form/search/Search";
 import { Icons } from "@/components/Base/Icons/Icons";
-export const SearchHeader = ({ title, placeholder }) => {
+export const SearchHeader = ({ title, onComplete, placeholder }) => {
+  const [theme, setTheme] = useState("light");
+  const [mobSearch, setMobSearch] = useState(false);
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+    document.documentElement.setAttribute("data-theme", savedTheme);
+  }, []);
+  const toggleTheme = () => {
+    const newTheme = theme === "light" ? "dark" : "light";
+    setTheme(newTheme);
+    localStorage.setItem("theme", newTheme);
+    document.documentElement.setAttribute("data-theme", newTheme);
+  };
+  const handleSearch = (value) => {
+    onComplete(value);
+  };
+  const handleClose = () => {
+    onClose("");
+  };
+  const monSearch = () => {
+    setMobSearch((prev) => !prev);
+  };
  return (
+    <header className={styles.header}>
      <div className={styles.container}>
-      <span className={styles.newspaper}>
+        <nav className={styles.navbar}>
-        <Icons name="newspaper" />
+          <Link className={styles.navbarbrand} href="/">
-      </span>
+            <Icons
-      <span>
+              name="newspaper"
-        <Header title={title} />
+              size="medium"
-      </span>
+              className={styles.newspaper}
-      <span className={styles.input}>
+            />
-        <Search placeholder={placeholder} />
+            <h3>{title}</h3>
-      </span>
+          </Link>
-      <span>
+          <div className={styles.search}>
-        <Icons name="moon" size="90" />
+            <Search
-      </span>
+              onComplete={handleSearch}
+              onClose={handleClose}
+              placeholder={placeholder}
+            />
          </div>
+          <div className={styles.mobsearch} onClick={monSearch}>
+            <Icons name="search" size="medium" />
+          </div>
+          <div className={styles.themelight} onClick={toggleTheme}>
+            <Icons name={theme === "light" ? "moon" : "sun"} size="medium" />
+          </div>
+        </nav>
+      </div>
+    </header>
  );
 };
--- a/components/Shared/SearchHeader/SearchHeader.module.css
+++ b/components/Shared/SearchHeader/SearchHeader.module.css
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
 .container {
-  display: flex;
+  box-shadow: 2.5px 2.5px 2.5px 2.5px var(--grey);
-  /* column-gap: 12rem; */
+}
-  box-shadow: 1px 1px 1px 1px #000;
+.header {
-  padding-left: 2rem;
+  position: sticky;
-  font-family: "Ubuntu", sans-serif;
+  z-index: 1000;
-}
+  margin-bottom: 40px;
+}
-.input {
+.header .container {
-  margin-top: 1.59rem;
+  background-color: var(--white);
  width: 100%;
-  max-width: 28%;
-  margin-left: 19rem;
 }
+.header .container .navbar {
-.newspaper {
+  display: flex;
-  margin-top: 1.5rem;
+  align-items: center;
-  color: #8d78dd;
+  justify-content: space-between;
+  padding-left: 10%;
+  padding-right: 10%;
+}
+.header .container .navbar .navbarbrand {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1rem;
+  align-items: center;
+  text-decoration: none;
+}
+.header .container .navbar .navbarbrand h2 {
+  color: var(--black);
+}
+.header .container .navbar .navbarbrand .themelight {
+  display: flex;
+  gap: 1rem;
+}
+.search {
+  display: none;
+  margin-top: 12px;
+  width: 20rem;
+}
+.mobsearch {
+  display: block;
+}
+@media (min-width: 768px) {
+  .search {
+    display: block;
+  }
+  .mobsearch {
+    display: none;
+  }
 }
--- a/components/Shared/SearchHeader/SearchHeader.stories.jsx
+++ b/components/Shared/SearchHeader/SearchHeader.stories.jsx
@@ -2,13 +2,27 @@ import { SearchHeader } from "./SearchHeader";
 export default {
  title: "Shared/Search-header",
-  description: SearchHeader,
+  component: SearchHeader,
+  argTypes: {
+    onChange: {
+      action: "ChangeMode",
+    },
+  },
 };
+const ThemeDecorator = (Story, context) => {
-export const Searchheader = {
+  const { iconName } = context.args;
-  render: (args) => <SearchHeader {...args} />,
+  const theme = iconName === "moon" ? "light-theme" : "dark-theme";
-  args: {
+  return (
-    title: "NewsBlog",
+    <div className={theme}>
-    placeholder: "Discover news, articles and more",
+      <Story />
+    </div>
+  );
+};
+export const Whitemode = {
+  render:(args) => <SearchHeader {...args} />,
+  args:{
+    title:"NewsBlog",
+    placeholder:"Discover news, articles and more",
+    iconName:"sun",
  },
 };
--- a/components/Top-level/Blog-Lisiting/Blog.stories.jsx
+++ b/components/Top-level/Blog-Lisiting/Blog.stories.jsx
 import { BlogList } from "./BlogList";
-import img1 from "@/public/images/lifestyle1.jpg";
-import img2 from "@/public/images/lifestyle2.jpg";
-import img3 from "@/public/images/lifestyle3.jpg";
-import img4 from "@/public/images/lifestyle4.jpg";
-import img5 from "@/public/images/lifestyle5.jpg";
-import img6 from "@/public/images/lifestyle6.jpg";
-import a1 from "@/public/images/a1.jpg";
-import a2 from "@/public/images/a2.jpg";
-import a3 from "@/public/images/a3.jpg";
 export default {
  title: "Top-level/blogList",
  component: BlogList,
@@ -15,60 +7,210 @@ export default {
    layout: "centered",
  },
 };
-const sampleBlogs = [
+export const BlogListing = {
+  render: (args) => <BlogList {...args} />,
+  args: {
+    title: "Lifestyle",
+    response: "No Blogs available,at this momemt",
+    placeholder: "Discover news,article and more",
+    description:
+      "Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum",
+    blogs: [
      {
-    title: "How to get perfect stars for beginnng runners",
+        id: 1,
+        title: "How to get perfect start for beginning runners",
        description:
-      "Lore ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit ",
+          "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-    image: img1,
+        image: {
-    chip: "Isabella ava",
+          url: require("@/public/images/lifestyle1.jpg").default.src,
-    img: "/images/a1.jpg",
+          width: 470,
+          height: 300,
+        },
+        publishedDate: "July 13, 2020.",
+        author: {
+          name: "Isabella ava",
+          image: {
+            url: require("@/public/images/a1.jpg").default.src,
+            height: 80,
+            width: 80,
+          },
+        },
+        readingTime: "1min",
      },
      {
+        id: 2,
        title: "Great tools to improve your personal blogging experience",
        description:
-      "Lore ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit ",
+          "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-    image: img2,
+        image: {
-    chip: "Charlotte mia",
+          url: require("@/public/images/lifestyle2.jpg").default.src,
-    img: "/images/a2.jpg",
+          width: 470,
+          height: 300,
+        },
+        publishedDate: "July 13, 2020.",
+        author: {
+          name: "Charlotte mia",
+          image: {
+            url: require("@/public/images/a2.jpg").default.src,
+            width: 80,
+            height: 80,
+          },
+        },
+        readingTime: "1min",
      },
      {
-    title: "Blog Guide:How to Start a Personal Blog on Wordpress",
+        id: 3,
+        title: "Blog Guide: How to Start a Personal blog on WordPress",
        description:
-      "Lore ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit ",
+          "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-    image: img3,
+        image: {
-    chip: "Elizabeth",
+          url: require("@/public/images/lifestyle3.jpg").default.src,
-    img: a3,
+          width: 470,
+          height: 300,
+        },
+        publishedDate: "July 13, 2020.",
+        author: {
+          name: "Elizabeth",
+          image: {
+            url: require("@/public/images/a3.jpg").default.src,
+            width: 80,
+            height: 80,
+          },
+        },
+        readingTime: "1min",
      },
      {
+        id: 4,
        title: "The technical setup when starting a personal blog",
        description:
-      "Lore ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit ",
+          "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-    image: img4,
+        image: {
-    chip: "Charlotte mia",
+          url: require("@/public/images/lifestyle4.jpg").default.src,
-    img: a2,
+          width: 470,
+          height: 300,
+        },
+        publishedDate: "July 13, 2020.",
+        author: {
+          name: "Charlotte mia",
+          image: {
+            url: require("@/public/images/a1.jpg").default.src,
+            width: 80,
+            height: 80,
+          },
+        },
+        readingTime: "1min",
      },
      {
-    title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe ",
+        id: 5,
+        title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
        description:
-      "Lore ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit ",
+          "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-    image: img5,
+        image: {
-    chip: "Elizabeth",
+          url: require("@/public/images/lifestyle5.jpg").default.src,
-    img: a3,
+          width: 470,
+          height: 300,
+        },
+        publishedDate: "July 13, 2020.",
+        author: {
+          name: "Elizabeth",
+          image: {
+            url: require("@/public/images/a3.jpg").default.src,
+            width: 80,
+            height: 80,
+          },
+        },
+        readingTime: "1min",
      },
      {
-    title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
+        id: 6,
+        title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
        description:
-      "Lore ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit ",
+          "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
-    image: img6,
+        image: {
-    chip: "Isabella ava",
+          url: require("@/public/images/lifestyle6.jpg").default.src,
-    img: a1,
+          width: 470,
+          height: 300,
        },
-];
+        publishedDate: "July 13, 2020.",
+        author: {
-export const BlogListing = {
+          name: "Isabella ava",
-  render: (args) => <BlogList {...args} />,
+          image: {
-  args: {
+            url: require("@/public/images/a1.jpg").default.src,
-    blogs: sampleBlogs,
+            width: 80,
+            height: 80,
+          },
+        },
+        readingTime: "1min",
+      },
+      {
+        id: 7,
+        title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
+        description:
+          "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+        image: {
+          url: require("@/public/images/lifestyle6.jpg").default.src,
+          width: 470,
+          height: 300,
+        },
+        publishedDate: "July 13, 2020.",
+        author: {
+          name: "Isabella ava",
+          image: {
+            url: require("@/public/images/a1.jpg").default.src,
+            width: 80,
+            height: 80,
+          },
+        },
+        readingTime: "1min",
+      },
+      {
+        id: 8,
+        title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
+        description:
+          "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+        image: {
+          url: require("@/public/images/lifestyle6.jpg").default.src,
+          width: 470,
+          height: 300,
+        },
+        publishedDate: "July 13, 2020.",
+        author: {
+          name: "Isabella ava",
+          image: {
+            url: require("@/public/images/a1.jpg").default.src,
+            width: 80,
+            height: 80,
+          },
+        },
+        readingTime: "1min",
+      },
+      {
+        id: 9,
+        title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
+        description:
+          "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+        image: {
+          url: require("@/public/images/lifestyle6.jpg").default.src,
+          width: 470,
+          height: 300,
+        },
+        publishedDate: "July 13, 2020.",
+        author: {
+          name: "Isabella ava",
+          image: {
+            url: require("@/public/images/a1.jpg").default.src,
+            width: 80,
+            height: 80,
+          },
+        },
+        readingTime: "1min",
+      },
+    ],
  },
 };
--- a/components/Top-level/Blog-Lisiting/BlogList.jsx
+++ b/components/Top-level/Blog-Lisiting/BlogList.jsx
-import React from "react";
+"use client";
+import React, { useEffect, useState } from "react";
 import { Card } from "@/components/Top-level/Card/Card";
 import style from "./BlogList.module.css";
-export const BlogList = ({ blogs }) => {
+import { useSearchParams } from "next/navigation";
-  if (!blogs || blogs.length === 0) return <h2>No Blogs available</h2>;
+import { Pagination } from "../Pagination/Pagination";
+export const BlogList = ({
+  blogs,
+  description,
+  title,
+  response,
+  placeholder,
+}) => {
+  const Search = useSearchParams();
+  let searchPage = Search ? Search.get("page") : null;
+  const length = blogs.length;
+  const itemsPerPage = 6;
+  const [currentPage, setCurrentPage] = useState(searchPage);
+  const startPage = blogs.length > 6 ? (currentPage - 1) * itemsPerPage : 0;
+  const endPage = startPage + itemsPerPage;
+  const sliceData = blogs.slice(startPage, endPage);
+  if (blogs.length === 0) {
+    console.log("Blogs Completed");
+    return <p className={style.response}>{response}</p>;
+  }
+  useEffect(() => {
+    setCurrentPage(parseInt(searchPage) || 1);
+  }, [searchPage]);
+  const handlePageChange = (pageNumber) => {
+    setCurrentPage(pageNumber);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
  return (
    <div className={style.blogcontainer}>
-      {blogs.map((blog, index) => (
+      <div className={style.wrapper}>
-        <Card
+        <h2 className={style.title}>{title}</h2>
-          key={index}
+        <p className={style.description}>{description}</p>
-          title={blog.title}
+      </div>
-          description={blog.description}
+      <div className={style.block}>
-          image={blog.image}
+        {sliceData.map((blogData, i) => (
-          img={blog.img}
+          <div key={i} className={style.col}>
-          chip={blog.chip}
+            <Card {...blogData} />
-        />
+          </div>
        ))}
      </div>
+      <div className={style.pagination}>
+        <Pagination
+          currentPage={currentPage}
+          totalPage={length}
+          perPage={itemsPerPage}
+          onPageChange={handlePageChange}
+        />
+      </div>
+    </div>
  );
 };
--- a/components/Top-level/Blog-Lisiting/BlogList.module.css
+++ b/components/Top-level/Blog-Lisiting/BlogList.module.css
 .blogcontainer {
+  max-width: 1250px;
+  margin: 0 auto;
+  margin-bottom: 2rem;
+  scroll-behavior: smooth;
+  padding-inline: 1rem;
+}
+.blogcontainer .title {
+  line-height: 25px;
+  font-weight: 600;
+  padding-inline: 0.5rem;
+  color: var(--title-color);
+}
+.blogcontainer .description {
+  color: var(--font-color-300);
+  padding-inline: 0.5rem;
+  margin-bottom: 2em;
+  font-size: clamp(1rem, 0.9rem + 1vw, 1.2rem);
+}
+.blogcontainer .block {
  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  margin: 0;
-  gap: 1.5rem;
+  grid-row-gap: 2rem;
+  grid-column-gap: 11.5rem;
+  justify-self: start;
+}
+.blogcontainer .block .col {
+  display: flex;
+  align-self: normal;
+  justify-content: center;
+  flex: 1 0 auto;
+}
+.pagination {
+  margin-top: 3rem;
+}
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+@media (min-width: 768px) {
+  .block {
+    grid-template-columns: repeat(3, minmax(20rem, 1fr));
+    justify-items: center;
+    grid-row-gap: 3rem;
+  }
+}
+@media (min-width: 1280px) {
+  .bloglistcontainer {
+    padding: 0 100px;
+  }
+  .bloglistcontainer .block {
+    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
+    justify-items: center;
+  }
 }
--- a/components/Top-level/Card/Card.jsx
+++ b/components/Top-level/Card/Card.jsx
 import React from "react";
 import Image from "next/image";
+import Link from "next/link";
 import img_1 from "../../../public/images/lifestyle1.jpg";
 import a1 from "../../../public/images/a1.jpg";
 import styles from "./Card.module.css";
 import { Icons } from "@/components/Base/Icons/Icons";
-export const Card = ({ title, description, image, chip, img, date, time }) => {
+export const Card = ({
+  id,
+  title,
+  description,
+  image,
+  publishedDate,
+  author,
+  readingTime,
+}) => {
+  const blogImage = {
+    url: image?.url || img_1.src,
+    width: image?.width || 470,
+    height: image?.height || 300,
+  };
+  const authorImage = {
+    url: author?.image?.url || a1.src,
+    width: author?.image?.width || 80,
+    height: author?.image?.height || 80,
+  };
  return (
-    <div className={styles.container}>
+    <div className={styles.card}>
+      <div className={styles["card-body"]}>
+        <Link href={`singleblog/${id}`}>
          <Image
-        src={image || img_1}
-        height={180}
-        width={320}
-        alt="Lifestyle image"
            className={styles.img}
+            src={blogImage.url}
+            height={blogImage.height}
+            width={blogImage.width}
+            loading="eager"
+            alt={title || "Blog image"}
          />
-      <div className={styles.block}>
+          <p className={styles.title}>{title}</p>
-        <h4 className={styles.title}>{title}</h4>
+        </Link>
-        <p className={styles.text}>{description}</p>{" "}
+        <div className={styles["card-content"]}>
-      </div>
+          <p className={styles.description}>{description}</p>
-      <div className={styles.chip}>
+          <div className={styles["card-author"]}>
            <Image
-          src={img || a1}
+              className={styles.img}
-          alt="Person"
+              src={authorImage.url}
-          height={36}
+              height={authorImage.height}
-          width={36}
+              width={authorImage.width}
-          style={{ borderRadius: "50%" }}
+              loading="eager"
+              alt={author?.name || "Author"}
            />
-        <h5 className={styles.inpt}>{chip}</h5>
+            <div className={styles.authordescription}>
-        <p>
+              <p className={styles.authorName}>
-          {date}
+                {author?.name || "Unknown Author"}
-          <Icons name="clock" />
-          {time}
              </p>
+              <div className={styles["author-desc"]}>
+                {publishedDate}
+                <span className={styles.icon}>
+                  <Icons name="clock" size="small" />
+                  <span className="readtime">{readingTime}</span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
      </div>
    </div>
  );

--- a/components/Top-level/Card/Card.module.css
+++ b/components/Top-level/Card/Card.module.css
-.container {
+.card {
+  background-color: var(--card-bg);
+  border-radius: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  transition: all 0.3s ease-in-out;
+  word-wrap: break-word;
+}
+.card:hover {
+  transform: translateY(-10px);
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px -1px,
+    rgba(0, 0, 0, 0.06) 0px 2px 8px -1px;
+}
+.card .img {
  width: 100%;
-  max-width: 18rem;
+  height: auto;
-  box-shadow: 1px 1px 1px 1px #3333;
+  border-top-right-radius: 20px;
+  border-top-left-radius: 20px;
+}
+.card-body {
+  height: 100%;
+  display: inline-block;
+  margin-top: auto;
+  align-self: normal;
+}
-  border-radius: 0.9rem;
+.card-content {
+  padding-inline: 1.5rem;
+  padding-bottom: 2rem;
+}
+.card-content .description {
+  color: var(--font-color-300);
+  font-weight: 600px;
+  word-wrap: break-word;
 }
-.img {
+.card-content .card-author {
-  margin: 0 auto;
+  display: grid;
-  border-top-left-radius: 0.9rem;
+  grid-template-columns: 60px auto;
-  border-top-right-radius: 0.9rem;
+  grid-gap: 1em;
-  max-width: 18rem;
+  align-items: center;
 }
-.block {
+.card-content .card-author .img {
-  padding: 0.5rem;
+  border-radius: 50%;
+  height: auto;
+  max-width: 100%;
+}
+.card-content .card-author .authordescription .authorName {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 0;
+}
+.card-content .card-author .authordescription .author-desc {
+  display: flex;
+  align-items: center;
+  color: var(--font-color-300);
+  gap: 0.5rem;
+  font-size: 0.9rem;
 }
-.chip {
+.card-content .card-author .authordescription .author-desc span {
  display: flex;
+  align-items: center;
+  gap: 0.2em;
+}
+.title {
+  color: var(--font-color-900);
+  font-size: 22px;
+  font-weight: 600;
+  padding-inline: 1.5rem;
+}
+.title:hover {
+  color: #5a67d8;
+}
+@media (min-width: 768px) {
+  .card {
+    width: min(90%, 25rem);
+  }
+  .card-content .card-author .authordescription .author-desc {
+    font-size: clamp(0.8rem, 0.5rem + 1vw, 1rem);
+    grid-gap: 1rem;
+  }
 }
-.inpt {
+@media (min-width: 1280px) {
-  margin-top: 0.7rem;
+  .card {
-  margin-left: 0.3rem;
+    width: 30rem;
+  }
 }
--- a/components/Top-level/Card/Card.stories.jsx
+++ b/components/Top-level/Card/Card.stories.jsx
 import { Card } from "./Card";
-import { faker } from "@faker-js/faker";
 export default {
  title: "Top-level/Card",
@@ -12,7 +11,24 @@ export default {
 export const Blogcard = {
  render: (args) => <Card {...args} />,
  args: {
-    title: "Great tools to improve your personal blogging experience",
+    id: 1,
-    description: faker.lorem.sentence(),
+    title: "How to get a perfect start for beginning runners",
+    description:
+      "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+    image: {
+      url: require("@/public/images/lifestyle1.jpg").default.src,
+      width: 470,
+      height: 300,
+    },
+    publishedDate: "July 13, 2020.",
+    author: {
+      name: "Isabella Ava",
+      image: {
+        url: require("@/public/images/a1.jpg").default.src,
+        width: 80,
+        height: 80,
+      },
+    },
+    readingTime: "1 min",
  },
 };
--- a/components/Top-level/Pagination/Pagination.jsx
+++ b/components/Top-level/Pagination/Pagination.jsx
+"use client";
 import React from "react";
 import style from "./Pagination.module.css";

--- a/context/Blog.module.css
+++ b/context/Blog.module.css
+.container {
+  width: 100%;
+  margin: 0 auto;
+  height: 100svh;
+}
+.mid {
+  margin-left: 2rem;
+}
+.block {
+  margin-top: 2rem;
+  display: grid;
+  grid-template-rows: repeat(6, auto);
+  gap: 1.2rem;
+  justify-content: center;
+  font-size: 1.2rem;
+}
+.footer {
+  margin-top: 1.5rem;
+}
+.type {
+  font-size: 1.2rem;
+  color: #979bae;
+}
+.dark {
+  background: #121212;
+  color: white;
+}
+@media (min-width: 768px) {
+  .mid {
+    margin-left: 15rem;
+  }
+  .block {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    grid-template-rows: unset;
+    gap: 2rem;
+  }
+}
+@media (min-width: 1024px) {
+  .block {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+  }
+}
--- a/context/Bloglisting.jsx
+++ b/context/Bloglisting.jsx
+"use client";
+import React, { useState } from "react";
+import style from "./Blog.module.css";
+import { SearchHeader } from "@/components/Shared/SearchHeader/SearchHeader";
+import { BlogList } from "@/components/Top-level/Blog-Lisiting/BlogList";
+import img1 from "@/public/images/lifestyle1.jpg";
+import img2 from "@/public/images/lifestyle2.jpg";
+import img3 from "@/public/images/lifestyle3.jpg";
+import img4 from "@/public/images/lifestyle4.jpg";
+import img5 from "@/public/images/lifestyle5.jpg";
+import img6 from "@/public/images/lifestyle6.jpg";
+import a1 from "@/public/images/a1.jpg";
+import a2 from "@/public/images/a2.jpg";
+import a3 from "@/public/images/a3.jpg";
+import { Header } from "@/components/Layout/Card/Header";
+import { Typo } from "@/components/Base/Typography/Typo";
+export const Bloglisting = () => {
+  const [darkMode, setDarkMode] = useState(false);
+  const toggleSearch = () => {
+    setDarkMode((prev) => !prev);
+    console.log("DarkMode Changed");
+  };
+  const sampleBlogs = [
+    {
+      id: 1,
+      title: "How to get perfect stars for beginning runners",
+      description:
+        "Learn how to set realistic goals and achieve them step by step.",
+      image: {
+        url: img1.src,
+        width: 470,
+        height: 300,
+      },
+      author: {
+        name: "Isabella Ava",
+        image: {
+          url: a1.src,
+          width: 80,
+          height: 80,
+        },
+      },
+      publishedDate: "July 21, 2025",
+      readingTime: "5 min read",
+    },
+    {
+      id: 2,
+      title: "Great tools to improve your personal blogging experience",
+      description: "Essential blogging tools for efficiency and creativity.",
+      image: {
+        url: img2.src,
+        width: 470,
+        height: 300,
+      },
+      author: {
+        name: "Charlotte Mia",
+        image: {
+          url: a2.src,
+          width: 80,
+          height: 80,
+        },
+      },
+      publishedDate: "July 20, 2025",
+      readingTime: "4 min read",
+    },
+    {
+      id: 3,
+      title: "Blog Guide: How to Start a Personal Blog on Wordpress",
+      description: "A complete guide to launching your blog with ease.",
+      image: {
+        url: img3.src,
+        width: 470,
+        height: 300,
+      },
+      author: {
+        name: "Elizabeth",
+        image: {
+          url: a3.src,
+          width: 80,
+          height: 80,
+        },
+      },
+      publishedDate: "July 19, 2025",
+      readingTime: "6 min read",
+    },
+    {
+      id: 4,
+      title: "The technical setup when starting a personal blog",
+      description: "Everything you need to set up your blog technically.",
+      image: {
+        url: img4.src,
+        width: 470,
+        height: 300,
+      },
+      author: {
+        name: "Charlotte Mia",
+        image: {
+          url: a2.src,
+          width: 80,
+          height: 80,
+        },
+      },
+      publishedDate: "July 18, 2025",
+      readingTime: "5 min read",
+    },
+    {
+      id: 5,
+      title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe",
+      description: "Revamp your style with these easy outfit formulas.",
+      image: {
+        url: img5.src,
+        width: 470,
+        height: 300,
+      },
+      author: {
+        name: "Elizabeth",
+        image: {
+          url: a3.src,
+          width: 80,
+          height: 80,
+        },
+      },
+      publishedDate: "July 17, 2025",
+      readingTime: "3 min read",
+    },
+    {
+      id: 6,
+      title: "Healthy Breakfast Ideas for Busy Mornings",
+      description: "Quick and nutritious breakfasts to fuel your day.",
+      image: {
+        url: img6.src,
+        width: 470,
+        height: 300,
+      },
+      author: {
+        name: "Isabella Ava",
+        image: {
+          url: a1.src,
+          width: 80,
+          height: 80,
+        },
+      },
+      publishedDate: "July 16, 2025",
+      readingTime: "4 min read",
+    },
+    {
+      id: 7,
+      title: "Top 5 Travel Destinations in 2025",
+      description: "Explore the best destinations to travel this year.",
+      image: {
+        url: img3.src,
+        width: 470,
+        height: 300,
+      },
+      author: {
+        name: "Michael John",
+        image: {
+          url: a2.src,
+          width: 80,
+          height: 80,
+        },
+      },
+      publishedDate: "July 15, 2025",
+      readingTime: "7 min read",
+    },
+    {
+      id: 8,
+      title: "Mastering Minimalist Living in Small Apartments",
+      description: "Make the most of your small space with minimalism.",
+      image: {
+        url: img5.src,
+        width: 470,
+        height: 300,
+      },
+      author: {
+        name: "Sophia Lee",
+        image: {
+          url: a3.src,
+          width: 80,
+          height: 80,
+        },
+      },
+      publishedDate: "July 14, 2025",
+      readingTime: "5 min read",
+    },
+    {
+      id: 9,
+      title: "Daily Yoga Routines for a Healthier Life",
+      description: "Simple yoga practices to improve your health.",
+      image: {
+        url: img2.src,
+        width: 470,
+        height: 300,
+      },
+      author: {
+        name: "Emma Watson",
+        image: {
+          url: a1.src,
+          width: 80,
+          height: 80,
+        },
+      },
+      publishedDate: "July 13, 2025",
+      readingTime: "6 min read",
+    },
+  ];
+  return (
+    <div className={`${style.container} ${darkMode ? style.dark : ""}`}>
+      <div className={style.head}>
+        <SearchHeader
+          title="NewsBlog"
+          placeholder="Discover news, articles and more"
+          iconName="moon"
+          className={style.logo}
+          onClick={toggleSearch}
+        />
+      </div>
+      <div className={style.mid}>
+        <Header title="Lifestyle" />
+        <span className={style.type}>
+          <Typo description="Lore ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolonum." />
+        </span>
+      </div>
+      <div className={style.block}>
+        <BlogList blogs={sampleBlogs} className={style.blogListBlock} />
+      </div>
+    </div>
+  );
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -14,10 +14,14 @@
    "@faker-js/faker": "^9.9.0",
    "classnames": "^2.5.1",
    "clsx": "^2.1.1",
+    "gray-matter": "^4.0.3",
+    "markdown-it": "^14.1.0",
    "next": "15.3.5",
    "prop-types": "^15.8.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "rehype-raw": "^7.0.0",
    "styled-components": "^6.1.19"
  },
  "devDependencies": {
@@ -26,6 +30,7 @@
    "@storybook/nextjs": "^9.0.16",
    "@tailwindcss/postcss": "^4",
    "autoprefixer": "^10.4.21",
+    "babel-plugin-styled-components": "^2.1.4",
    "eslint": "^9",
    "eslint-config-next": "15.3.5",
    "eslint-plugin-storybook": "^9.0.16",

--- a/posts/blog1.md
+++ b/posts/blog1.md
+id: 1
+image: { url: "/images/lifestyle1.jpg", width: 470, height: 300 }
+title: "How to get a perfect start for beginning runners"
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
+author:
+  {
+    name: "Isabella ava",
+    image: { url: "/images/a1.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2023-05-14."
+readingTime: "1 min"
+category: "Fashion"
+categories: ["Fashion", "Beauty"]
+blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
+### How to create an Art that shows the beauty in everyone ideas of flaws.
+Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
+faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur elementum.
+Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
+ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+>
+> Kelvin edison
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
+Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
+### Fusce faucibus ante vitae justo efficitur
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
+1.  Quisque sagittis lacus eu lorem sodalesd enean adipiscing.
+2.  Donec ipsum faucibus arcu elementum, luctus justo.
+3.  Nam libero tempore, cum soluta nobis est eligendi optio.
+4.  Sed ut perspiciatis unde omnis natus
+### Quisque sagittis lacus eu lorem sodales
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.
+Fusce faucibus arcu faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu.
\ No newline at end of file
--- a/posts/blog2.md
+++ b/posts/blog2.md
+id:2
+image:{url:"/images/lifestyle2.jpg",width:470,height:300}
+title:"Great tools to improve your personal blogging experience"
+description:"Fuse faucibus ante vitae justo efficitur elementum.Donc et ipsum"
+author:{
+    name:"Charlotte mia"
+    image:{url:"/images/a2.jpg",width:80,height:80},
+}
+publishedDate:"2023-03-24."
+readingTime:"1 min",
+category:"Fashion"
+categories: ["Fashion","Beauty"]
+blogImage:{url:"/images/blogsingle.jpg",width:1920,height:500}
+### How to create an Art that shows the beauty in everyone ideas of flaws.
+Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
+faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur elementum.
+Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
+ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+>
+> Kelvin edison
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
+Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
+### Fusce faucibus ante vitae justo efficitur
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
+1.  Quisque sagittis lacus eu lorem sodalesd enean adipiscing.
+2.  Donec ipsum faucibus arcu elementum, luctus justo.
+3.  Nam libero tempore, cum soluta nobis est eligendi optio.
+4.  Sed ut perspiciatis unde omnis natus
+### Quisque sagittis lacus eu lorem sodales
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.
+Fusce faucibus arcu faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu.
\ No newline at end of file
--- a/posts/blog3.md
+++ b/posts/blog3.md
+id: 3
+image: { url: "/images/lifestyle3.jpg", width: 470, height: 300 }
+title: "Blog Guide:How to Start a Personal on WordPress"
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
+author:
+  {
+    name: "Isabella ava",
+    image: { url: "/images/a3.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2023-05-18."
+readingTime: "1 min"
+category: "Fashion"
+categories: ["Fashion", "Beauty"]
+blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
+### How to create an Art that shows the beauty in everyone ideas of flaws.
+Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
+faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur elementum.
+Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
+ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+>
+> Kelvin edison
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
+Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
+### Fusce faucibus ante vitae justo efficitur
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
+1.  Quisque sagittis lacus eu lorem sodalesd enean adipiscing.
+2.  Donec ipsum faucibus arcu elementum, luctus justo.
+3.  Nam libero tempore, cum soluta nobis est eligendi optio.
+4.  Sed ut perspiciatis unde omnis natus
+### Quisque sagittis lacus eu lorem sodales
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.
+Fusce faucibus arcu faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu.
\ No newline at end of file
--- a/posts/blog4.md
+++ b/posts/blog4.md
+id: 4
+image: { url: "/images/lifestyle4.jpg", width: 470, height: 300 }
+title: "The technical setup when starting a personal blog"
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
+author:
+  {
+    name: "Charlotte mia",
+    image: { url: "/images/a2.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2023-07-12."
+readingTime: "1 min"
+category: "Fashion"
+categories: ["Fashion", "Beauty"]
+blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
+### How to create an Art that shows the beauty in everyone ideas of flaws.
+Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
+faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur elementum.
+Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
+ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+>
+> Kelvin edison
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
+Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
+### Fusce faucibus ante vitae justo efficitur
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
+1.  Quisque sagittis lacus eu lorem sodalesd enean adipiscing.
+2.  Donec ipsum faucibus arcu elementum, luctus justo.
+3.  Nam libero tempore, cum soluta nobis est eligendi optio.
+4.  Sed ut perspiciatis unde omnis natus
+### Quisque sagittis lacus eu lorem sodales
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.
+Fusce faucibus arcu faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu.
\ No newline at end of file
--- a/posts/blog5.md
+++ b/posts/blog5.md
+id: 5
+image: { url: "/images/lifestyle5.jpg", width: 470, height: 300 }
+title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe"
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
+author:
+  {
+    name: "Elizabeth",
+    image: { url: "/images/a2.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2023-01-09."
+readingTime: "1 min"
+category: "Fashion"
+categories: ["Fashion", "Beauty"]
+blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
+### How to create an Art that shows the beauty in everyone ideas of flaws.
+Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
+faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur elementum.
+Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
+ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+>
+> Kelvin edison
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
+Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
+### Fusce faucibus ante vitae justo efficitur
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
+1.  Quisque sagittis lacus eu lorem sodalesd enean adipiscing.
+2.  Donec ipsum faucibus arcu elementum, luctus justo.
+3.  Nam libero tempore, cum soluta nobis est eligendi optio.
+4.  Sed ut perspiciatis unde omnis natus
+### Quisque sagittis lacus eu lorem sodales
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.
+Fusce faucibus arcu faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu.
\ No newline at end of file
--- a/posts/blog6.md
+++ b/posts/blog6.md
+id: 6
+image: { url: "/images/lifestyle6.jpg", width: 470, height: 300 }
+title: "Blog Guide:How To Start a Personal Blog on WordPress"
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
+author:
+  {
+    name: "Johnson smith",
+    image: { url: "/images/a2.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2023-01-09."
+readingTime: "1 min"
+category: "Fashion"
+categories: ["Fashion", "Beauty"]
+blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
+### How to create an Art that shows the beauty in everyone ideas of flaws.
+Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
+faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur elementum.
+Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
+ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+>
+> Kelvin edison
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
+Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
+### Fusce faucibus ante vitae justo efficitur
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
+1.  Quisque sagittis lacus eu lorem sodalesd enean adipiscing.
+2.  Donec ipsum faucibus arcu elementum, luctus justo.
+3.  Nam libero tempore, cum soluta nobis est eligendi optio.
+4.  Sed ut perspiciatis unde omnis natus
+### Quisque sagittis lacus eu lorem sodales
+Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
+vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.
+Fusce faucibus arcu faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu.
\ No newline at end of file