intial commit

ec1d92be · Manivasagam S · b02721c9 · ec1d92be · ec1d92be · ec1d92be
Commit ec1d92be authored Jul 16, 2025 by Manivasagam S
73 changed files
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+*storybook.log
+storybook-static
--- a/.storybook/main.js
+++ b/.storybook/main.js
+/** @type { import('@storybook/nextjs').StorybookConfig } */
+const config = {
+  "stories": [
+    "../Component/**/*.mdx",
+    "../Component/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [],
+  "framework": {
+    "name": "@storybook/nextjs",
+    "options": {}
+  },
+  "staticDirs": [
+    "..\\public"
+  ]
+};
+export default config;
\ No newline at end of file
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
+// .storybook/preview.js
+import "../Styles/theme.css";
+import "../app/globals.css";
+import React, { useEffect } from "react";
+import { ThemeProvider } from "../Context/ThemeContext";
+/** @type { import('@storybook/nextjs').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  globalTypes: {
+    theme: {
+      name: "Theme",
+      description: "Global theme toggle",
+      defaultValue: "light",
+      toolbar: {
+        icon: "mirror",
+        items: [
+          { value: "light", title: "Light Mode" },
+          { value: "dark", title: "Dark Mode" },
+        ],
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      const isDark = context.globals.theme === "dark";
+      useEffect(() => {
+        document.body.classList.toggle("dark-theme", isDark);
+        localStorage.setItem("theme", isDark ? "dark" : "light");
+      }, [isDark]);
+      return (
+        <ThemeProvider initialTheme={context.globals.theme}>
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+};
+export default preview;
--- a/Component/Base/Button/Button.jsx
+++ b/Component/Base/Button/Button.jsx
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import styles from "@/Component/Base/Button/Button.module.css";
+export const Button = ({ variant, size, label, loading, ...props }) => {
+  return (
+    <button
+      className={clsx(
+        styles.button,
+        styles[variant],
+        styles[size],
+        loading && styles.loading
+      )}
+      disabled={loading || props.disabled}
+      {...props}
+    >
+      {loading ? 'Loading...' : label}
+    </button>
+  );
+};
+Button.propTypes = {
+  variant: PropTypes.oneOf(['primary', 'secondary']).isRequired,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  label: PropTypes.string.isRequired,
+  loading: PropTypes.bool,
+};
+Button.defaultProps = {
+  size: 'md',
+  loading: false,
+};
--- a/Component/Base/Button/Button.module.css
+++ b/Component/Base/Button/Button.module.css
+.buttoncolumn {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: flex-start;
+   margin-top: 10rem;
+}
+.button {
+  font-weight: 700;
+  font-size: 1em;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  display: inline-block;
+  padding:0.625rem;
+  font-weight: 600;
+}
+.primary {
+  background-color: var(--primary-bgcolor);
+  color:var(--primary-color);
+  border-radius: 1rem;
+  width: 100%;
+}
+.primary:hover {
+  background-color: var(--primary-bgcolor);
+  opacity: 0.7;
+}
+.primary:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+.secondary {
+  background-color: var(--secondary-bgcolor);
+  color:var(--secondary-color);
+  border-radius: 1rem;
+  width: 100%;
+}
+.secondary:hover { 
+ background-color: var(--primary-bgcolor);
+ color:white;
+}
+.secondary:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+.sm {
+  font-size: 0.875em;
+  padding: 0.5rem 1rem;
+}
+.md {
+  font-size: 1em;
+  padding: 0.75rem 1.25rem;
+}
+.lg {
+  font-size: 1.125em;
+  padding: 1rem 1.5rem;
+}
+.loading{
+  cursor: wait !important;
+}
--- a/Component/Base/Button/Button.stories.jsx
+++ b/Component/Base/Button/Button.stories.jsx
+import {Button} from "@/Component/Base/Button/Button.jsx";
+import styles from "@/Component/Base/Button/Button.module.css"
+export default{
+    title:'Base/Button',
+    component:Button,
+    argTypes:{
+      onclick:{
+        action:"clicked"
+      }
+    }
+}
+export const Primary = () => (
+  <div className={styles.buttoncolumn}>
+    <Button variant="primary" label="Default" />
+    <Button variant="primary" label="Loading..." loading="true" />
+    <Button variant="primary" label="Disabled" disabled />
+    <Button variant="primary" label="Small" size="sm" />
+    <Button variant="primary" label="Medium" size="md" />
+    <Button variant="primary" label="Large" size="lg" />
+  </div>
+);
+export const Secondary = () => (
+  <div className={styles.buttoncolumn}>
+    <Button variant="secondary" label="Default" />
+    <Button variant="secondary" label="Loading..." loading="true" />
+    <Button variant="secondary" label="Disabled" disabled />
+    <Button variant="secondary" label="Small" size="sm" />
+    <Button variant="secondary" label="Medium" size="md" />
+    <Button variant="secondary" label="Large" size="lg" />
+  </div>
+);
--- a/Component/Base/Card/Card.jsx
+++ b/Component/Base/Card/Card.jsx
+import React from "react";
+import styles from "@/Component/Base/Card/Card.module.css";
+import Link from "next/link";
+import Image from "next/image";
+import { Icons } from "@/Component/Base/Icons/Icons.jsx";
+export const Card = ({
+  id,
+  title,
+  description,
+  image,
+  publishedDate,
+  author,
+  readingTime,
+}) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles["card-body"]}>
+        <Link href={`/blog/${id}`} className={styles.title}>
+          <Image
+            src={image.url}
+            className={styles["card-img"]}
+            alt={title}
+            width={image.width}
+            height={image.height}
+          />
+          <div className={styles["title-container"]}>
+            <p className={styles.titleContent}>{title}</p>
+          </div>
+        </Link>
+        <div>
+          <div className={styles["card-content"]}>
+            <p className={styles.description}>{description}</p>
+          </div>
+          <div className={styles["card-author"]}>
+            <div className={styles.imgcontainer}>
+              <Image
+                className={styles.img}
+                src={author.image.url}
+                height={author.image.height}
+                width={author.image.width}
+                loading="eager"
+                alt={author}
+              />
+            </div>
+            <div className={styles.authordescription}>
+              <p className={styles.authorName}>{author.name}</p>
+              <div className={styles["author-desc"]}>
+                {publishedDate}
+                <span className={styles.icon}>
+                  <Icons name="clock" size="small" />
+                </span>
+                <span className={styles.readtime}>{readingTime}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/Component/Base/Card/Card.module.css
+++ b/Component/Base/Card/Card.module.css
+.container {
+  background-color: var(--card-bg);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s ease;
+  max-width: 27rem;
+  height: 100%;
+}
+.container:hover {
+  transform: translateY(-5px);
+}
+.card-body {
+  display: flex;
+  flex-direction: column;
+}
+.title {
+  text-decoration: none;
+  color: inherit;
+  font-weight: 700;
+  font-size: 1.5rem;
+}
+.title-container {
+  max-width: 23rem;
+}
+.card-img {
+  width: 100%;
+  max-width: 27rem;
+  height: 300px;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  object-fit: cover;
+}
+.card-content {
+  padding: 1rem;
+  flex-grow: 1;
+}
+.description {
+  font-size: 1.2rem;
+  color: var(--des-color);
+}
+.card-author {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  gap: 0.75rem;
+  margin-left: 0.5rem;
+}
+.imgcontainer {
+  flex-shrink: 0;
+}
+.titleContent {
+  margin-left: 1rem;
+  margin-top: 1rem;
+  color: var(--light-text);
+}
+.img {
+  border-radius: 50%;
+  object-fit: cover;
+  width: 50px;
+  height: 50px;
+  margin-top: 5px;
+}
+.authordescription {
+  display: flex;
+  flex-direction: column;
+}
+.authorName {
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: var(--text-color);
+}
+.author-desc {
+  font-size: 1rem;
+  color: #777;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.icon {
+  display: flex;
+  align-items: center;
+  position: relative;
+  top: 3px;
+  margin-left: 3px;
+}
+.readtime {
+  font-size: 1.1rem;
+  position: relative;
+  right: 5px;
+}
--- a/Component/Base/Card/Card.stories.jsx
+++ b/Component/Base/Card/Card.stories.jsx
+import {Card} from '@/Component/Base/Card/Card.jsx'
+export default{
+    title:"shared/Card",
+    component:Card
+}
+export const cardTemplate = {
+  args: {
+    id: 1,
+    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, // Use require to load images
+      },
+    },
+    readingTime: "1 min",
+  },
+  render: (args) => {
+    return <Card {...args} />;
+  },
+};
--- a/Component/Base/Header/Header.jsx
+++ b/Component/Base/Header/Header.jsx
+"use client";
+import React, { useContext } from "react";
+import styles from "@/Component/Base/Header/Header.module.css";
+import Link from "next/link";
+import { Icons } from "@/Component/Base/Icons/Icons.jsx";
+import PropTypes from "prop-types";
+import { Search } from "@/Component/Base/Search/Search.jsx";
+import { ThemeContext } from "@/Context/ThemeContext";
+export const Header = ({ name, onchange }) => {
+  const { theme, toggleTheme } = useContext(ThemeContext);
+  return (
+    <header className={styles.header}>
+      <div className={styles.container}>
+        <nav className={styles.navbar}>
+          <Link className={styles["nav-brand"]} href="/">
+            <Icons
+              name="newspaper"
+              size="medium"
+              classes="newspaper-blueicon"
+            />
+            <h3 className={styles["nav-text"]}>{name}</h3>
+          </Link>
+          <div className={`${styles.searchWrapper}`}>
+            <Search onChange={onchange} />
+          </div>
+          <div className={styles.headerIcons}>
+            <div className={styles.themelight} onClick={toggleTheme}>
+              <Icons name={theme === "light" ? "sun" : "moon"} size="medium" />
+            </div>
+          </div>
+        </nav>
+      </div>
+    </header>
+  );
+};
+Header.propTypes = {
+  name: PropTypes.string,
+};
--- a/Component/Base/Header/Header.module.css
+++ b/Component/Base/Header/Header.module.css
+.header {
+  background-color: var(--header-bg);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 1rem 2rem;
+}
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.navbar {
+  display: flex;
+  justify-content: space-between;
+}
+.nav-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+  position: relative;
+  right: 5rem;
+}
+.nav-text {
+  margin: 0;
+  color: var(--text-color);
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+.searchWrapper {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  display: none;
+}
+.themelight {
+  display: flex;
+  align-items: center;
+}
+.header-ul {
+  display: flex;
+  gap: 2rem;
+  position: relative;
+  right: 0.8rem;
+  display: none;
+}
+.header-ul li {
+  list-style-type: none;
+}
+.headerIcons {
+  display: flex;
+  gap: 1rem;
+  cursor: pointer;
+  position: relative;
+  left: 5rem;
+}
+@media (min-width: 640px) {
+  .navbar {
+    gap: 3rem;
+  }
+  .nav-text {
+    font-size: 1.5rem;
+  }
+}
+@media (min-width: 1024px) {
+  /* .mobileMenu{
+    display: none;
+  } */
+  .header-ul {
+    display: inline-flex;
+  }
+  .searchWrapper {
+    display: inline-flex;
+  }
+  .menuIcon {
+    display: none;
+  }
+}
--- a/Component/Base/Header/Header.stories.jsx
+++ b/Component/Base/Header/Header.stories.jsx
+import {Header} from "@/Component/Base/Header/Header.jsx";
+import { action } from 'storybook/actions';
+export default{
+    title:'Base/Header',
+    component:Header
+}
+export const Heading=(args)=><Header {...args}/>
+Heading.args={
+    name:"NewsBlog",
+    onchange: action("Header Search Changed"),
+}
\ No newline at end of file
--- a/Component/Base/Icons/Icons.jsx
+++ b/Component/Base/Icons/Icons.jsx
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import styles from "./Icons.module.css";
+import React from "react";
+export const Icons = ({ name, size = "medium", classes = "" }) => {
+  const icons = {
+    search: (
+      <svg
+        stroke="currentColor"
+        fill="currentColor"
+        strokeWidth="0"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z" />
+      </svg>
+    ),
+    clock: (
+      <svg
+        stroke="currentColor"
+        fill="none"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <polyline points="12 6 12 12 16 14" />
+      </svg>
+    ),
+    moon: (
+      <svg
+        stroke="currentColor"
+        fill="none"
+        strokeWidth="2"
+        viewBox="0 0 27 27"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+      </svg>
+    ),
+    sun: (
+      <svg
+        stroke="currentColor"
+        fill="currentColor"
+        strokeWidth="0"
+        viewBox="0 0 25 25"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z" />
+      </svg>
+    ),
+    close: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    ),
+    newspaper: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="2em"
+        fill="currentColor"
+        viewBox="0 0 576 512"
+        stroke="currentColor"
+      >
+        <path d="M552 64H112c-20.858 0-38.643 13.377-45.248 32H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h496c13.255 0 24-10.745 24-24V88c0-13.255-10.745-24-24-24zM48 392V144h16v248c0 4.411-3.589 8-8 8s-8-3.589-8-8zm480 8H111.422c.374-2.614.578-5.283.578-8V112h416v288zM172 280h136c6.627 0 12-5.373 12-12v-96c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v96c0 6.627 5.373 12 12 12zm28-80h80v40h-80v-40zm-40 140v-24c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H172c-6.627 0-12-5.373-12-12zm192 0v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-144v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 72v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z" />
+      </svg>
+    ),
+    menu:(
+      <svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="3" y1="6" x2="21" y2="6" />
+  <line x1="3" y1="12" x2="21" y2="12" />
+  <line x1="3" y1="18" x2="21" y2="18" />
+</svg>
+    ),
+  };
+  const classNames = clsx(styles[size], styles[name], styles[classes]);
+  return <span className={classNames}>{icons[name]}</span>;
+};
+Icons.propTypes = {
+  name: PropTypes.oneOf([
+    "sun",
+    "moon",
+    "close",
+    "search",
+    "clock",
+    "newspaper",
+    "menu"
+  ]).isRequired,
+ size: PropTypes.oneOf(["small", "medium","large"]),
+  classes: PropTypes.string,
+};
+Icons.defaultProps = {
+  size: "medium",
+  classes: "",
+};
--- a/Component/Base/Icons/Icons.module.css
+++ b/Component/Base/Icons/Icons.module.css
+/* Icon size styles */
+.small svg {
+  height: 18px;
+  width: 18px;
+  color: var(--font-color-300);
+}
+.medium svg {
+  height: 25px;
+  width: 25x;
+  color: var(--font-color-300);
+}
+.large svg{
+   height: 35px;
+  width: 35px;
+  color: var(--font-color-300);
+}
+.moon svg,
+.sun svg {
+  height: 35px;
+  width: 35px;
+  color: var(--font-color-300);
+  vertical-align: sub;
+}
+.menu-icon svg {
+  background: #5a67d8;
+  color: white;
+  padding: 0.5rem 0.7rem;
+  border-radius: 5px;
+}
+.newspaper-blueicon svg {
+  color: #5a67d8;
+}
+.iconRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  padding: 1rem;
+  justify-content: center;
+  margin-top: 7rem;
+}
+.iconItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 0.75rem;
+  gap: 0.5rem;
+}
+@media(min-width:640px){
+  .medium svg{
+    width: 38px;
+    height: 38px;
+  }
+  .large svg{
+    width: 42px;
+    height: 42px;
+  }
+}
\ No newline at end of file
--- a/Component/Base/Icons/Icons.stories.jsx
+++ b/Component/Base/Icons/Icons.stories.jsx
+import { Icons } from "@/Component/Base/Icons/Icons.jsx";
+import styles from "@/Component/Base/Icons/Icons.module.css";
+export default {
+  title: "Base/Icons",
+  component: Icons,
+  argTypes: {
+    name:{table:{disable:true}},
+    size: {
+      control: {
+        type: "select",
+        options: ["small", "medium","large"],
+      },
+    },
+     classes: {
+      control: "text",
+    },
+  },
+};
+export const svgIcons = (args) => {
+  const iconList = ["close", "search", "clock", "sun", "moon", "newspaper","menu"];
+  return (
+    <div className={styles.iconRow}>
+      {iconList.map((name, index) => (
+        <div key={index} className={styles.iconItem}>
+          <Icons name={name} size={args.size} classes={args.classes}/>
+          <span>{name}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+svgIcons.args = {
+  size: "medium",
+  classes:""
+};
--- a/Component/Base/Input/Input.jsx
+++ b/Component/Base/Input/Input.jsx
+import React from 'react'
+import clsx from 'clsx';
+import styles from "@/Component/Base/Input/Input.module.css";
+export const Input =({type='text',placeholder='',isInvalid=false,onChange,value='',autoFocus,errorMessage="",...props}) => {
+  return (
+    <div >
+      <input className={clsx(styles.inputbox,isInvalid && styles.invalid) } type={type} placeholder={placeholder}  onChange={onChange} autoFocus={autoFocus} {...props}/>
+      {errorMessage && <p className={styles.error} style={{
+        color:'red'
+      }}>{errorMessage}</p>}
+    </div>
+  )
+}
--- a/Component/Base/Input/Input.module.css
+++ b/Component/Base/Input/Input.module.css
+.inputbox{
+ padding: 0.75rem 0.875rem;
+  font-size: 1em;
+  border-radius: 6px;
+  width: 100%;
+  min-width: 22rem;
+  box-sizing: border-box;
+  /* border: none;
+  outline: none; */
+  background: transparent;
+}
+.textbox{
+    display: flex;
+    flex-direction: column;
+    gap:1rem;
+}
+.invalid{
+   border: 1px solid red;
+}
+.invalid:focus{
+   outline-color: rgb(233, 129, 129);
+}
+.error{
+   font-size: small;
+   text-align: left;
+}
+.input:focus {
+  outline: none;
+  box-shadow: none;
+}
--- a/Component/Base/Input/Input.stories.jsx
+++ b/Component/Base/Input/Input.stories.jsx
+import { Input } from "@/Component/Base/Input/Input.jsx";
+import styles from "@/Component/Base/Input/Input.module.css"
+ export default{
+    title:'Base/Input',
+    component:Input
+ }
+ export const Default = {
+  args: {
+    type: "text",
+    placeholder:"Discover news, articles and more"
+  },
+  render: (args) => (
+    <div className={styles.textbox}>
+      <p>Without error message:</p>
+      <Input {...args} />
+      <p>With error message:</p>
+      <Input
+        {...args}
+        isInvalid={true}
+        errorMessage="This field is required"
+      />
+    </div>
+  ),
+};
--- a/Component/Base/Search/Search.jsx
+++ b/Component/Base/Search/Search.jsx
+"use client";
+import React, { useState } from "react";
+import styles from "@/Component/Base/Search/Search.module.css";
+import { Icons } from "@/Component/Base/Icons/Icons.jsx";
+export const Search = ({
+  placeholder = "Discover news, articles and more",
+  onSearch,
+  posts,
+}) => {
+  const [text, setText] = useState("");
+  const handleInputChange = (value) => {
+    setText(value);
+    onChange?.(value);
+  };
+  const handleClear = (e) => {
+    e.preventDefault();
+    setText("");
+  };
+  console.log(text);
+  return (
+    <div className={styles.searchContainer}>
+      <span className={styles.searchIcon}>
+        <Icons name="search" size="small" />
+      </span>
+      <div className={styles.inputBox}>
+        <input
+          type="text"
+          className={styles["input-box"]}
+          placeholder={placeholder}
+          value={text}
+          onChange={(e) => handleInputChange(e.target.value)}
+        />
+      </div>
+      {text && (
+        <span className={styles.closeIcon} onClick={handleClear}>
+          <Icons name="close" size="small" classes="newspaper-blueicon" />
+        </span>
+      )}
+    </div>
+  );
+};
--- a/Component/Base/Search/Search.module.css
+++ b/Component/Base/Search/Search.module.css
+.searchContainer {
+  display: flex;
+  align-items: center;
+  background-color: var(--search-color);
+  border-radius: 8px;
+  padding: 0.5rem 0.5rem;
+  max-width: 25rem;
+  width: 100%;
+  /* gap: 0.75rem; */
+  position: relative;
+}
+.searchIcon {
+  color: #718096;
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+  margin-left: 0.7rem;
+  margin-top: 5px;
+}
+.inputbox {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.input-box {
+  width: 20rem;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 1rem;
+  color: var(--text-color);
+  padding: 0.25rem 0;
+  margin-left: 1rem;
+}
+.closeIcon {
+  position: absolute;
+  right: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #2b6cb0;
+  margin-top: 7px;
+}
--- a/Component/Base/Search/Search.stories.jsx
+++ b/Component/Base/Search/Search.stories.jsx
+import {Search, search} from "@/Component/Base/Search/Search.jsx";
+import { action } from 'storybook/actions';
+export default{
+    title:"Shared/Search",
+    component:Search,
+    argsTypes:{
+        onchange:{
+            action:"changed"
+        }
+    }
+}
+export const Searchbar=(args)=><Search {...args}/>
+Searchbar.args={
+placeholder:"Discover news, articles and more",
+ onChange: action("Input Changed"),
+}
--- a/Component/Base/Typography.stories.jsx
+++ b/Component/Base/Typography.stories.jsx
+export default {
+  title: 'Base/Typography'
+};
+export const TitleAndParagraph = () => (
+  <div className="container">
+      <h1>Heading</h1>
+      <h2>Heading</h2>
+      <h3>Heading</h3>
+      <h4>Heading</h4>
+      <h5>Heading</h5>
+      <h6>Heading</h6>
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo et quae
+      consequuntur voluptatum quibusdam, autem velit quidem laborum, dignissimos
+      doloremque ullam eos fugit repellendus maiores eveniet repellat dolor eius
+      perspiciatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    </p>
+    <p>
+      Quasi aliquam impedit magnam tempora doloribus voluptatibus, at ea dolores
+      facilis et quod hic, cumque repellendus quidem expedita explicabo
+      architecto, possimus minima!
+    </p>
+  </div>
+);
\ No newline at end of file
--- a/Component/Top-level/CardList/CardList.jsx
+++ b/Component/Top-level/CardList/CardList.jsx
+"use client";
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import styles from "@/Component/Top-level/CardList/CardList.module.css";
+import { Pagination } from "@/Component/Top-level/Pagination/Pagination";
+import { Card } from "@/Component/Base/Card/Card";
+export const CardList = ({ title, description, blogs }) => {
+  const itemsPerPage = 6;
+  const [currentPage, setCurrentPage] = useState(1);
+  const handlePageChange = (pageNumber) => {
+    setCurrentPage(pageNumber);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const slicedData = blogs.slice(startIndex, endIndex);
+  const totalPages = Math.ceil(blogs.length / itemsPerPage);
+  return (
+    <div className={styles.cardListContainer}>
+      {title && <h1 className={styles.title}>{title}</h1>}
+      {description && <p className={styles.description}>{description}</p>}
+      <div className={styles.blogRow}>
+        {slicedData.map((blogdata, i) => (
+          <div key={i} className={styles.blogCard}>
+            <Card {...blogdata} />
+          </div>
+        ))}
+      </div>
+      {totalPages > 1 && (
+        <div className={styles.pagination}>
+          <Pagination
+            size={totalPages}
+            currentPage={currentPage}
+            onChange={handlePageChange}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+CardList.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  blogs: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
--- a/Component/Top-level/CardList/CardList.module.css
+++ b/Component/Top-level/CardList/CardList.module.css
+.cardListContainer {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+.description {
+  padding-left: 2rem;
+  margin-top: 1rem;
+  color: var(--des-color);
+}
+.title {
+  padding-left: 2rem;
+  padding-top: 2rem;
+  color: var(--light-text);
+}
+.blogRow {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  place-self: center;
+  margin-top: 2rem;
+}
+@media (min-width: 640px) {
+  .blogRow {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+}
+@media (min-width: 720px) {
+  .blogRow {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media (min-width: 1024px) {
+  .blogRow {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  .title {
+    margin-left: 2rem;
+  }
+  .description {
+    margin-left: 2rem;
+  }
+}
+@media (min-width: 1600px) {
+  .title {
+    padding-left: 14rem;
+  }
+  .description {
+    padding-left: 14rem;
+  }
+}
--- a/Component/Top-level/CardList/CardList.stories.jsx
+++ b/Component/Top-level/CardList/CardList.stories.jsx
+import { CardList } from "@/Component/Top-level/CardList/CardList.jsx";
+export default{
+    title:"Toplevel/CardList",
+    component:CardList
+}
+export const blogLists = {
+  args: {
+    title: "Lifestyle",
+    description:
+      "Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum",
+    blogs: [
+      {
+        id: 1,
+        title: "How to get 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,
+            height: 80,
+            width: 80,
+          },
+        },
+        readingTime: "1min",
+      },
+      {
+        id: 2,
+        title: "Great tools to improve your personal blogging experience",
+        description:
+          "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+        image: {
+          url: require("@/public/images/lifestyle2.jpg").default.src,
+          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",
+      },
+      {
+        id: 3,
+        title: "Blog Guide: How to Start a Personal blog on WordPress",
+        description:
+          "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+        image: {
+          url: require("@/public/images/lifestyle3.jpg").default.src,
+          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:
+          "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+        image: {
+          url: require("@/public/images/lifestyle4.jpg").default.src,
+          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",
+      },
+      {
+        id: 5,
+        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/lifestyle5.jpg").default.src,
+          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: 6,
+        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: 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",
+      },
+       {
+        id: 1,
+        title: "How to get 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,
+            height: 80,
+            width: 80,
+          },
+        },
+        readingTime: "1min",
+      },
+      {
+        id: 2,
+        title: "Great tools to improve your personal blogging experience",
+        description:
+          "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+        image: {
+          url: require("@/public/images/lifestyle2.jpg").default.src,
+          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",
+      },
+      {
+        id: 3,
+        title: "Blog Guide: How to Start a Personal blog on WordPress",
+        description:
+          "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+        image: {
+          url: require("@/public/images/lifestyle3.jpg").default.src,
+          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",
+      },
+    ],
+  },
+};
--- a/Component/Top-level/Pagination/Pagination.jsx
+++ b/Component/Top-level/Pagination/Pagination.jsx
+import React, { useState, useContext } from "react";
+import { Button } from "@/Component/Base/Button/Button";
+import styles from "./Pagination.module.css";
+import { ThemeContext } from "@/Context/ThemeContext"; 
+export const Pagination = ({ size, currentPage, onChange }) => {
+  const [isShow, setIsShow] = useState(false);
+  const count = 2;
+  const handleEllipsisClick = () => {
+    setIsShow(!isShow);
+  };
+  const renderPageButtons = () => {
+    const pages = [];
+    pages.push(
+      <Button
+        key="prev"
+        size="sm"
+        variant="secondary"
+        label="Prev"
+        onClick={() => onChange(currentPage - 1)}
+        disabled={currentPage <= 1}
+      />
+    );
+    if (currentPage > 2 && !isShow && size > 5) {
+      pages.push(
+        <Button
+          key="1"
+          size="sm"
+          variant="secondary"
+          label="1"
+          onClick={() => onChange(1)}
+        />,
+        <Button
+          key="ellipsis-start"
+          size="sm"
+          variant="secondary"
+          label="..."
+          onClick={handleEllipsisClick}
+        />
+      );
+    }
+    let startPage = isShow ? 1 : Math.max(currentPage, 1);
+    let endPage = isShow ? size : Math.min(currentPage + count, size);
+    if (size <= 5) {
+      startPage = 1;
+      endPage = size;
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(
+        <Button
+          key={i}
+          size="sm"
+          variant={currentPage === i ? "primary" : "secondary"}
+          label={String(i)}
+          onClick={() => onChange(i)}
+        />
+      );
+    }
+    if (!isShow && size - currentPage > count + 1 && size > 5) {
+      pages.push(
+        <Button
+          key="ellipsis-end"
+          size="sm"
+          variant="secondary"
+          label="..."
+          onClick={handleEllipsisClick}
+        />,
+        <Button
+          key={size}
+          size="sm"
+          variant="secondary"
+          label={String(size)}
+          onClick={() => onChange(size)}
+        />
+      );
+    }
+    pages.push(
+      <Button
+        key="next"
+        size="sm"
+        variant="secondary"
+        label="Next"
+        onClick={() => onChange(currentPage + 1)}
+        disabled={currentPage >= size}
+      />
+    );
+    return pages;
+  };
+  return <div className={styles.paginationWrapper}>{renderPageButtons()}</div>;
+};
--- a/Component/Top-level/Pagination/Pagination.module.css
+++ b/Component/Top-level/Pagination/Pagination.module.css
+.paginationWrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin: 70px 0;
+}
+.paginationWrapper button {
+  width: 3.4rem;
+  height: 50px;
+  padding: 0.8rem;
+  font-size: 0.9rem;
+  border-radius: 1rem;
+  text-align: center;
+}
--- a/Component/Top-level/Pagination/Pagination.stories.jsx
+++ b/Component/Top-level/Pagination/Pagination.stories.jsx
+import { Pagination } from "@/Component/Top-level/Pagination/Pagination.jsx";
+export default {
+  title: "Toplevel/Pagination",
+  component: Pagination,
+  argTypes: {
+    onChange: { action: "page changed" }, 
+  },
+};
+export const Default =(args)=> <Pagination {...args}/>
+  Default.args= {
+    size: 7,         
+    currentPage: 3,  
+  }
\ No newline at end of file
--- a/Component/Top-level/Singleblog/Singleblog.jsx
+++ b/Component/Top-level/Singleblog/Singleblog.jsx
+import React from "react";
+import styles from "@/Component/Top-level/Singleblog/Singleblog.module.css";
+import Image from "next/image";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+export const Singleblog = ({
+  title,
+  publishedDate,
+  author,
+  blogImage,
+  category,
+  readingTime,
+  categories,
+  markdown,
+}) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.textContent}>
+        <h1 className={styles.title}>{title}</h1>
+        <ul className={styles.textList}>
+          <li>
+            Posted on
+            <span className={styles["list-bold"]}>{publishedDate}</span>
+          </li>
+          <li>
+            By
+            <span className={styles["list-bold"]}>{author.name}</span>
+          </li>
+          <li>
+            Published in
+            <span className={styles["list-bold"]}>{category}</span>
+          </li>
+          <li>
+            <span className={styles["list-bold"]}>{readingTime}</span>
+          </li>
+        </ul>
+      </div>
+      <div className={styles["blog-container"]}>
+        <Image
+          className={styles.imgblog}
+          src={blogImage.url}
+          width={blogImage.width}
+          height={blogImage.height}
+          alt="single/image"
+          sizes="(min-width:640px) 50vw,(min-width:720px) 60vww"
+        />
+      </div>
+      <div className={styles["blog-content"]}>
+        <div className={styles["content"]}>
+          <ReactMarkdown rehypePlugins={[rehypeRaw]}>{markdown}</ReactMarkdown>
+        </div>
+        <div className={styles.tags}>
+          <span className={styles.tagtext}>Tags:</span>
+          {categories.map((tag, i) => (
+            <p key={i} className={styles.tagItems}>
+              {tag}
+            </p>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/Component/Top-level/Singleblog/Singleblog.module.css
+++ b/Component/Top-level/Singleblog/Singleblog.module.css
+.container {
+  margin-top: 2rem;
+}
+.list-bold {
+  font-weight: 600;
+  margin-left: 0.3rem;
+  color: var(--singleblog-color);
+  cursor: pointer;
+}
+.textList {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  list-style-type: none;
+  font-size: 1.2em;
+  margin-top: 0.5rem;
+  color: var(--singleblog-color);
+}
+/* .title {
+  font-size: 2em;
+  white-space: normal;
+  word-break: break-word;
+}*/
+.textContent {
+  margin-left: 2rem;
+  max-width: 80rem;
+}
+.blog-container {
+  margin-top: 2rem;
+  object-fit: cover;
+  max-width: 85vw;
+  margin: 0 auto;
+}
+.imgblog {
+  border-radius: 2rem;
+  max-width: 85vw;
+  object-fit: cover;
+  margin-top: 2rem;
+}
+.blog-content {
+  border: 1px solid transparent;
+  padding: 2rem;
+  border-radius: 2rem;
+  background-color: var(--card-bg);
+  margin-top: 2rem;
+  max-width: 82vw;
+  margin: 0 auto;
+}
+.content h3 {
+  margin-top: 1rem;
+  font-size: 1.5em;
+}
+.content p {
+  font-size: 1.1em;
+  margin-top: 1rem;
+}
+.content blockquote {
+  border-left: 2px solid #5a67d8;
+  padding: 0.6rem 1rem 1rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+.content ol {
+  margin-left: 2rem;
+  margin-top: 1rem;
+}
+.tags {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  margin-top: 1rem;
+}
+.tagtext {
+  font-weight: 600;
+}
+.tagItems {
+  border: 1px solid black;
+  padding: 0.3rem;
+  border-radius: 0.5rem;
+  background-color: rgb(91, 90, 90);
+  color: white;
+  border-color: transparent;
+  font-size: 0.9em;
+  width: 4rem;
+  text-align: center;
+}
+@media (min-width: 640px) {
+  .title {
+    font-size: 2.5em;
+  }
+  .textContent {
+    margin-left: 5rem;
+  }
+}
+@media (min-width: 720px) {
+  .title {
+    font-size: 2.9em;
+  }
+  .textContent {
+    margin-left: 8rem;
+  }
+}
+@media (min-width: 1024px) {
+  .title {
+    font-size: 3.5em;
+  }
+}
--- a/Component/Top-level/Singleblog/Singleblog.stories.jsx
+++ b/Component/Top-level/Singleblog/Singleblog.stories.jsx
+import { Singleblog } from "@/Component/Top-level/Singleblog/Singleblog.jsx";
+export default{
+    title:"Toplevel/Singleblog",
+    component:Singleblog
+}
+export const blogPage = {
+  args: {
+    title: "Create an Art that shows the beauty in everyone's ideas of flaws.",
+    publishedDate: "July 11,2020",
+    author: {
+      name: "Charlotte mia",
+    },
+    blogImage: {
+      url: require("@/public/images/blogsingle.jpg").default.src,
+      width: 1700,
+      height: 700,
+    },
+    category: "Fashion",
+    readingTime: "1 min read",
+    categories: ["Fashion", "Beauty"],
+    markdown: `
+### 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/Context/ThemeContext.jsx
+++ b/Context/ThemeContext.jsx
+import React, { createContext, useState, useEffect, useContext } from "react";
+export const ThemeContext = createContext();
+export const useThemeContext = () => useContext(ThemeContext);
+export const ThemeProvider = ({ children, initialTheme = null }) => {
+  const [theme, setTheme] = useState(() => {
+    if (typeof window !== "undefined") {
+      return initialTheme || localStorage.getItem("theme") || "light";
+    }
+    return initialTheme || "light";
+  });
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      document.body.classList.toggle("dark-theme", theme === "dark");
+      localStorage.setItem("theme", theme);
+    }
+  }, [theme]);
+  const toggleTheme = () =>
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
--- a/Styles/theme.css
+++ b/Styles/theme.css
+/* styles/theme.css */
+:root {
+  --bg-color: #ffffff;
+  --text-color: #000000;
+}
+.dark-theme {
+  --bg-color: #121212;
+  --text-color: #ffffff;
+}
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color 0.3s, color 0.3s;
+}
--- a/app/blog/[id]/page.js
+++ b/app/blog/[id]/page.js
+import { getAllPosts, getPostById } from "@/lib/post";
+import { Singleblog } from "@/Component/Top-level/Singleblog/Singleblog";
+export async function generateStaticParams() {
+  const posts = getAllPosts();
+  return posts.map((post) => ({
+    id: post.id.toString(),
+  }));
+}
+export default async function BlogPostPage({ params }) {
+  const post = getPostById(params.id);
+  if (!post) return <p>Post not found</p>;
+  return (
+    <div style={{ padding: "2rem" }}>
+      <Singleblog {...post} />
+    </div>
+  );
+}
--- a/app/components/Home.js
+++ b/app/components/Home.js
+"use client";
+import React, { useState, useMemo } from "react";
+import { CardList } from "@/Component/Top-level/CardList/CardList";
+import { Header } from "@/Component/Base/Header/Header";
+import { useThemeContext } from "@/Context/ThemeContext";
+import "../globals.css";
+export default function Home({ blogs }) {
+  const { theme, toggleTheme } = useThemeContext();
+  const [searchQuery, setSearchQuery] = useState("");
+  const handleSearch = (value) => {
+    setSearchQuery(value.toLowerCase());
+  };
+  // Filter markdown posts by title or author
+  const filteredPosts = useMemo(() => {
+    return blogs.filter(
+      (post) =>
+        post.title.toLowerCase().includes(searchQuery) ||
+        post.author.toLowerCase().includes(searchQuery)
+    );
+  }, [searchQuery, blogs]);
+  return (
+    <>
+      <Header
+        name="NewsBlog"
+        currentTheme={theme}
+        onThemeChange={toggleTheme}
+        onSearch={handleSearch} // Passed to <Search /> inside Header
+      />
+      <CardList
+        title="Lifestyle"
+        description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum"
+        blogs={filteredPosts} // ✅ Use filtered posts
+      />
+    </>
+  );
+}
--- a/app/favicon.ico
+++ b/app/favicon.ico
--- a/app/globals.css
+++ b/app/globals.css
-:root {
+@import url("https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap");
-  --background: #ffffff;
-  --foreground: #171717;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-html,
+body,
-body {
+html {
-  max-width: 100vw;
+  font-family: "Hind", sans-serif;
-  overflow-x: hidden;
+  color: var(--text-color);
+  transition: background-color 0.3s, color 0.3s;
 }
-body {
+h1,
-  color: var(--foreground);
+h2,
-  background: var(--background);
+h3,
-  font-family: Arial, Helvetica, sans-serif;
+h4,
-  -webkit-font-smoothing: antialiased;
+h5,
-  -moz-osx-font-smoothing: grayscale;
+h6 {
+  font-family: "Libre Baskerville", serif;
 }
 * {
-  box-sizing: border-box;
-  padding: 0;
  margin: 0;
+  padding: 0;
 }
+/* .light {
-a {
+  --primary-bgcolor: #5a67d8;
-  color: inherit;
+  --secondary-bgcolor: #fff;
-  text-decoration: none;
+  --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;
+} */
+:root {
+  /* --primary-bg:black; */
+  --primary-bgcolor: #5a67d8;
+  --primary-color: white;
+  /* --secondary-bg:white; */
+  --secondary-bgcolor: #ffffff;
+  --secondary-color: #8793a8;
+  --font-color-300: #b7b7b7;
+  --bg-color: #f0f1f3;
+  /*tertiary color*/
+  ---tertiary-bgcolor: #ffffff;
+  --tertiary-color: #8793a8;
+  /* --text-color: #000000; */
+  --header-bg: #ffffff;
+  --text-color: #1a202c;
+  /*Card color*/
+  --card-bg: #fff;
+  --light-text: #2d3748;
+  --singleblog-color: #7e91a2;
+  --search-color: #f0f1f3;
+  --background-color: #f8f9fa;
+  --des-color: #9ea9b8;
 }
-@media (prefers-color-scheme: dark) {
+.dark-theme {
-  html {
+  --bg-color: #000000;
-    color-scheme: dark;
+  --text-color: #ffffff;
-  }
+  --search-color: black;
+  --background-color: black;
+  --des-color: #c0bfb0;
+}
+body.dark-theme {
+  --header-bg: #131617;
+  --text-color: #ffffff;
+  --card-bg: #131617;
+  --light-text: #eeeeee;
+  --singleblog-color: #b0b8c1;
+  --secondary-bgcolor: #131617;
+}
+.bg-color {
+  background-color: var(--background-color);
 }
--- a/app/layout.js
+++ b/app/layout.js
-import { Geist, Geist_Mono } from "next/font/google";
+"use client";
 import "./globals.css";
+import "../Styles/theme.css";
-const geistSans = Geist({
+import { ThemeProvider } from "@/Context/ThemeContext";
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
 export default function RootLayout({ children }) {
  return (
    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+      <head>
-        {children}
+        <link
+          href="https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body cz-shortcut-listen="true" className="bg-color">
+        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );

--- a/app/page.js
+++ b/app/page.js
-import Image from "next/image";
+import { getAllPosts } from "@/lib/post";
-import styles from "./page.module.css";
+import Home from "@/app/components/Home";
-export default function Home() {
+export default async function Page() {
+  const blogs = getAllPosts();
  return (
-    <div className={styles.page}>
+    <>
-      <main className={styles.main}>
+      <Home blogs={blogs} />
-        <Image
+    </>
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol>
-          <li>
-            Get started by editing <code>app/page.js</code>.
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-        <div className={styles.ctas}>
-          <a
-            className={styles.primary}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className={styles.logo}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.secondary}
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className={styles.footer}>
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
  );
 }
--- a/app/page.module.css
+++ b/app/page.module.css
-.page {
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-  display: grid;
-  grid-template-rows: 20px 1fr 20px;
-  align-items: center;
-  justify-items: center;
-  min-height: 100svh;
-  padding: 80px;
-  gap: 64px;
-  font-family: var(--font-geist-sans);
-}
-@media (prefers-color-scheme: dark) {
-  .page {
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-  }
-}
-.main {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  grid-row-start: 2;
-}
-.main ol {
-  font-family: var(--font-geist-mono);
-  padding-left: 0;
-  margin: 0;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: -0.01em;
-  list-style-position: inside;
-}
-.main li:not(:last-of-type) {
-  margin-bottom: 8px;
-}
-.main code {
-  font-family: inherit;
-  background: var(--gray-alpha-100);
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-weight: 600;
-}
-.ctas {
-  display: flex;
-  gap: 16px;
-}
-.ctas a {
-  appearance: none;
-  border-radius: 128px;
-  height: 48px;
-  padding: 0 20px;
-  border: none;
-  border: 1px solid transparent;
-  transition:
-    background 0.2s,
-    color 0.2s,
-    border-color 0.2s;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 500;
-}
-a.primary {
-  background: var(--foreground);
-  color: var(--background);
-  gap: 8px;
-}
-a.secondary {
-  border-color: var(--gray-alpha-200);
-  min-width: 158px;
-}
-.footer {
-  grid-row-start: 3;
-  display: flex;
-  gap: 24px;
-}
-.footer a {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.footer img {
-  flex-shrink: 0;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  a.primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-  }
-  a.secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-  }
-  .footer a:hover {
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
-}
-@media (max-width: 600px) {
-  .page {
-    padding: 32px;
-    padding-bottom: 80px;
-  }
-  .main {
-    align-items: center;
-  }
-  .main ol {
-    text-align: center;
-  }
-  .ctas {
-    flex-direction: column;
-  }
-  .ctas a {
-    font-size: 14px;
-    height: 40px;
-    padding: 0 16px;
-  }
-  a.secondary {
-    min-width: auto;
-  }
-  .footer {
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-  }
-}
-@media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
-  }
-}
--- a/lib/post.js
+++ b/lib/post.js
+import fs from "fs";
+import path from "path";
+import matter from "gray-matter";
+const postsDirectory = path.join(process.cwd(), "posts");
+export function getAllPosts() {
+  const files = fs.readdirSync(postsDirectory);
+  return files.map((file) => {
+    const id = file.replace(/\.md$/, "");
+    const filePath = path.join(postsDirectory, file);
+    const fileContents = fs.readFileSync(filePath, "utf-8");
+    const { data } = matter(fileContents);
+    return {
+      id,
+      ...data,
+    };
+  });
+}
+export function getPostById(id) {
+  const filePath = path.join(postsDirectory, `${id}.md`);
+  const fileContents = fs.readFileSync(filePath, "utf-8");
+  const { data, content } = matter(fileContents);
+  return {
+    id,
+    ...data,
+    markdown: content,
+  };
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,11 +6,22 @@
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
  },
  "dependencies": {
+    "clsx": "^2.1.1",
+    "gray-matter": "^4.0.3",
+    "next": "15.3.4",
+    "prop-types": "^15.8.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "next": "15.3.4"
+    "react-markdown": "^10.1.0",
+    "rehype-raw": "^7.0.0"
+  },
+  "devDependencies": {
+    "@storybook/nextjs": "^9.0.13",
+    "storybook": "^9.0.13"
  }
 }
--- a/posts/1.md
+++ b/posts/1.md
+---
+id: 1
+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.
--- a/posts/10.md
+++ b/posts/10.md
+---
+id: 10
+image: { url: "/images/lifestyle7.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: "Eva maria", image: { url: "/images/a1.jpg", width: 80, height: 80 } }
+publishedDate: "2023-08-28."
+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.
--- a/posts/11.md
+++ b/posts/11.md
+---
+id: 11
+image: { url: "/images/lifestyle8.jpg", width: 470, height: 300 }
+title: "Great tools to improve your personal blogging experience"
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
+author:
+  { name: "Julie mia", image: { url: "/images/a2.jpg", width: 80, height: 80 } }
+publishedDate: "2023-02-16."
+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.
--- a/posts/12.md
+++ b/posts/12.md
+---
+id: 12
+image: { url: "/images/lifestyle2.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: "Liza ethan",
+    image: { url: "/images/a1.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2023-10-11."
+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.
--- a/posts/2.md
+++ b/posts/2.md
+---
+id: 2
+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.
--- a/posts/3.md
+++ b/posts/3.md
+---
+id: 3
+image: { url: "/images/lifestyle2.jpg", width: 470, height: 300 }
+title: "Great tools to improve your personal blogging experience"
+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-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.
--- a/posts/4.md
+++ b/posts/4.md
+---
+id: 4
+image: { url: "/images/lifestyle2.jpg", width: 470, height: 300 }
+title: "Great tools to improve your personal blogging experience"
+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-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.
--- a/posts/5.md
+++ b/posts/5.md
+---
+id: 5
+image: { url: "/images/lifestyle3.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: "Isabella ava",
+    image: { url: "/images/a3.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2023-07-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.
--- a/posts/6.md
+++ b/posts/6.md
+---
+id: 6
+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.
--- a/posts/7.md
+++ b/posts/7.md
+---
+id: 7
+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/a1.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.
--- a/posts/8.md
+++ b/posts/8.md
+---
+id: 8
+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/a1.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.
--- a/posts/9.md
+++ b/posts/9.md
+---
+id: 9
+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/a3.jpg", width: 80, height: 80 },
+  }
+publishedDate: "2023-09-20."
+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.
--- a/public/file.svg
+++ b/public/file.svg
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
--- a/public/globe.svg
+++ b/public/globe.svg
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
--- a/public/images/a1.jpg
+++ b/public/images/a1.jpg
--- a/public/images/a2.jpg
+++ b/public/images/a2.jpg
--- a/public/images/a3.jpg
+++ b/public/images/a3.jpg
--- a/public/images/blogsingle.jpg
+++ b/public/images/blogsingle.jpg
--- a/public/images/fashion.jpg
+++ b/public/images/fashion.jpg
--- a/public/images/lifestyle1.jpg
+++ b/public/images/lifestyle1.jpg
--- a/public/images/lifestyle2.jpg
+++ b/public/images/lifestyle2.jpg
--- a/public/images/lifestyle3.jpg
+++ b/public/images/lifestyle3.jpg
--- a/public/images/lifestyle4.jpg
+++ b/public/images/lifestyle4.jpg
--- a/public/images/lifestyle5.jpg
+++ b/public/images/lifestyle5.jpg
--- a/public/images/lifestyle6.jpg
+++ b/public/images/lifestyle6.jpg
--- a/public/images/lifestyle7.jpg
+++ b/public/images/lifestyle7.jpg
--- a/public/images/lifestyle8.jpg
+++ b/public/images/lifestyle8.jpg
--- a/public/next.svg
+++ b/public/next.svg
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
--- a/public/vercel.svg
+++ b/public/vercel.svg
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
--- a/public/window.svg
+++ b/public/window.svg
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file