diff --git a/.astro/collections/blogs.schema.json b/.astro/collections/blogs.schema.json
index 01bee94f..bcb58842 100644
--- a/.astro/collections/blogs.schema.json
+++ b/.astro/collections/blogs.schema.json
@@ -8,6 +8,9 @@
           "type": "string",
           "maxLength": 60
         },
+        "slug": {
+          "type": "string"
+        },
         "publishDate": {
           "anyOf": [
             {
diff --git a/.astro/data-store.json b/.astro/data-store.json
index f13bbb5b..331498cb 100644
--- a/.astro/data-store.json
+++ b/.astro/data-store.json
@@ -1 +1 @@
-[["Map",1,2,9,10,202,203],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.1.1","content-config-digest","5284684971596d0f","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://parixan.xyz\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"server\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true},\"redirects\":{},\"prefetch\":true,\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":false},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"svg\":{\"mode\":\"inline\"}},\"legacy\":{\"collections\":false}}","blogs",["Map",11,12,58,96,130,131,155,156],"technology-used",{"id":11,"data":13,"body":20,"filePath":21,"digest":22,"rendered":23},{"title":14,"publishDate":15,"tags":16,"draft":18,"description":19},"The tech stack that we preferred",["Date","2024-12-23T18:30:00.000Z"],[17],"rz",false,"The tech stack that we work with and why we choose it ? ","## **Project Technology Stack Documentation**\n\n## **Frontend**\n\n### **Astro.js**\n\n- **Purpose**: Utilized as the core frontend framework for building the project.\n- **Features**:\n  - File-based routing.\n  - Supports server-side rendering (SSR) and static site generation (SSG).\n  - Integrates seamlessly with other frameworks like React.\n\n### **React**\n\n- **Purpose**: Used for creating interactive and dynamic components within the Astro.js framework.\n- **Features**:\n  - Component-based architecture.\n  - State management and lifecycle methods.\n\n### **Styling**\n\n#### **Tailwind CSS**\n\n- **Purpose**: A utility-first CSS framework used for styling.\n- **Features**:\n  - Rapid prototyping with predefined classes.\n  - Highly customizable via a configuration file.\n\n### **Component Library**\n\n#### **shadcn/ui**\n\n- **Purpose**: A pre-built React-based component library for faster UI development.\n- **Features**:\n  - Offers accessible and customizable components.\n  - Works seamlessly with Tailwind CSS.\n\n### **Icons**\n\n- **Purpose**: Used for visual enhancements and icons across the application.\n- **Libraries**:\n  - **Astro Icons**: Icon library designed for use in Astro.js.\n  - **React Icons**: A collection of popular icon libraries for React.\n  - **Lucide Icons**: Modern, consistent, and open-source icon library.\n\n### **State Management**\n\n#### **Zustand**\n\n- **Purpose**: Lightweight state management library for handling global state in the frontend.\n- **Features**:\n  - Minimal boilerplate.\n  - Simple and scalable API for managing state.\n\n### **Data Validation**\n\n#### **Zod**\n\n- **Purpose**: Schema-based data validation library.\n- **Features**:\n  - Runtime validation for form data and API responses.\n  - TypeScript integration for type safety.\n\n---\n\n## **Backend**\n\n### **Node.js**\n\n- **Purpose**: Backend runtime environment.\n- **Features**:\n  - Non-blocking, event-driven architecture for handling asynchronous operations.\n  - Large ecosystem of libraries and tools.\n\n### **Hono.js Framework**\n\n- **Purpose**: Lightweight, high-performance framework for building backend APIs.\n- **Features**:\n  - Minimalistic API design.\n  - Excellent for creating RESTful services.\n\n---\n\n## **Database**\n\n### **MongoDB**\n\n- **Purpose**: NoSQL database used for storing application data.\n- **Features**:\n  - Document-oriented storage.\n  - Scalable and flexible schema design.\n\n### **Mongoose**\n\n- **Purpose**: Object Relational Mapping (ORM) library for MongoDB.\n- **Features**:\n  - Simplifies data modeling and validation.\n  - Provides built-in schema and middleware support.\n\n---\n\n## **Other Tools**\n\n### **Code Formatting & Linting**\n\n- **Prettier**: For consistent code formatting.\n- **ESLint**: For identifying and fixing coding errors.","src/content/blog/technology-used.md","aabc9237546da961",{"html":24,"metadata":25},"\u003Ch2 id=\"project-technology-stack-documentation\">\u003Cstrong>Project Technology Stack Documentation\u003C/strong>\u003C/h2>\n\u003Ch2 id=\"frontend\">\u003Cstrong>Frontend\u003C/strong>\u003C/h2>\n\u003Ch3 id=\"astrojs\">\u003Cstrong>Astro.js\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Utilized as the core frontend framework for building the project.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>File-based routing.\u003C/li>\n\u003Cli>Supports server-side rendering (SSR) and static site generation (SSG).\u003C/li>\n\u003Cli>Integrates seamlessly with other frameworks like React.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"react\">\u003Cstrong>React\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Used for creating interactive and dynamic components within the Astro.js framework.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Component-based architecture.\u003C/li>\n\u003Cli>State management and lifecycle methods.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"styling\">\u003Cstrong>Styling\u003C/strong>\u003C/h3>\n\u003Ch4 id=\"tailwind-css\">\u003Cstrong>Tailwind CSS\u003C/strong>\u003C/h4>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: A utility-first CSS framework used for styling.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Rapid prototyping with predefined classes.\u003C/li>\n\u003Cli>Highly customizable via a configuration file.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"component-library\">\u003Cstrong>Component Library\u003C/strong>\u003C/h3>\n\u003Ch4 id=\"shadcnui\">\u003Cstrong>shadcn/ui\u003C/strong>\u003C/h4>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: A pre-built React-based component library for faster UI development.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Offers accessible and customizable components.\u003C/li>\n\u003Cli>Works seamlessly with Tailwind CSS.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"icons\">\u003Cstrong>Icons\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Used for visual enhancements and icons across the application.\u003C/li>\n\u003Cli>\u003Cstrong>Libraries\u003C/strong>:\n\u003Cul>\n\u003Cli>\u003Cstrong>Astro Icons\u003C/strong>: Icon library designed for use in Astro.js.\u003C/li>\n\u003Cli>\u003Cstrong>React Icons\u003C/strong>: A collection of popular icon libraries for React.\u003C/li>\n\u003Cli>\u003Cstrong>Lucide Icons\u003C/strong>: Modern, consistent, and open-source icon library.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"state-management\">\u003Cstrong>State Management\u003C/strong>\u003C/h3>\n\u003Ch4 id=\"zustand\">\u003Cstrong>Zustand\u003C/strong>\u003C/h4>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Lightweight state management library for handling global state in the frontend.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Minimal boilerplate.\u003C/li>\n\u003Cli>Simple and scalable API for managing state.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"data-validation\">\u003Cstrong>Data Validation\u003C/strong>\u003C/h3>\n\u003Ch4 id=\"zod\">\u003Cstrong>Zod\u003C/strong>\u003C/h4>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Schema-based data validation library.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Runtime validation for form data and API responses.\u003C/li>\n\u003Cli>TypeScript integration for type safety.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"backend\">\u003Cstrong>Backend\u003C/strong>\u003C/h2>\n\u003Ch3 id=\"nodejs\">\u003Cstrong>Node.js\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Backend runtime environment.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Non-blocking, event-driven architecture for handling asynchronous operations.\u003C/li>\n\u003Cli>Large ecosystem of libraries and tools.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"honojs-framework\">\u003Cstrong>Hono.js Framework\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Lightweight, high-performance framework for building backend APIs.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Minimalistic API design.\u003C/li>\n\u003Cli>Excellent for creating RESTful services.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"database\">\u003Cstrong>Database\u003C/strong>\u003C/h2>\n\u003Ch3 id=\"mongodb\">\u003Cstrong>MongoDB\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: NoSQL database used for storing application data.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Document-oriented storage.\u003C/li>\n\u003Cli>Scalable and flexible schema design.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"mongoose\">\u003Cstrong>Mongoose\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Object Relational Mapping (ORM) library for MongoDB.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Simplifies data modeling and validation.\u003C/li>\n\u003Cli>Provides built-in schema and middleware support.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"other-tools\">\u003Cstrong>Other Tools\u003C/strong>\u003C/h2>\n\u003Ch3 id=\"code-formatting--linting\">\u003Cstrong>Code Formatting & Linting\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Prettier\u003C/strong>: For consistent code formatting.\u003C/li>\n\u003Cli>\u003Cstrong>ESLint\u003C/strong>: For identifying and fixing coding errors.\u003C/li>\n\u003C/ul>",{"headings":26,"imagePaths":93,"frontmatter":94},[27,31,34,38,41,44,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90],{"depth":28,"slug":29,"text":30},2,"project-technology-stack-documentation","Project Technology Stack Documentation",{"depth":28,"slug":32,"text":33},"frontend","Frontend",{"depth":35,"slug":36,"text":37},3,"astrojs","Astro.js",{"depth":35,"slug":39,"text":40},"react","React",{"depth":35,"slug":42,"text":43},"styling","Styling",{"depth":45,"slug":46,"text":47},4,"tailwind-css","Tailwind CSS",{"depth":35,"slug":49,"text":50},"component-library","Component Library",{"depth":45,"slug":52,"text":53},"shadcnui","shadcn/ui",{"depth":35,"slug":55,"text":56},"icons","Icons",{"depth":35,"slug":58,"text":59},"state-management","State Management",{"depth":45,"slug":61,"text":62},"zustand","Zustand",{"depth":35,"slug":64,"text":65},"data-validation","Data Validation",{"depth":45,"slug":67,"text":68},"zod","Zod",{"depth":28,"slug":70,"text":71},"backend","Backend",{"depth":35,"slug":73,"text":74},"nodejs","Node.js",{"depth":35,"slug":76,"text":77},"honojs-framework","Hono.js Framework",{"depth":28,"slug":79,"text":80},"database","Database",{"depth":35,"slug":82,"text":83},"mongodb","MongoDB",{"depth":35,"slug":85,"text":86},"mongoose","Mongoose",{"depth":28,"slug":88,"text":89},"other-tools","Other Tools",{"depth":35,"slug":91,"text":92},"code-formatting--linting","Code Formatting & Linting",[],{"title":14,"description":19,"publishDate":95},"24 December 2024",{"id":58,"data":97,"body":102,"filePath":103,"digest":104,"rendered":105},{"title":98,"publishDate":99,"tags":100,"draft":18,"description":101},"The new era of state management with Zustand ?",["Date","2024-12-11T18:30:00.000Z"],[17],"The simple and easy to understand all about Zustand the new and simple way to manage the state in client side. ","## Zustand Documentation\n\n## What is Zustand?\n\nZustand is a small, fast, and flexible state management library for React. It allows you to manage global state with minimal setup, using React hooks to access and modify the state directly within your components.\n\n---\n\n## How Zustand is Used in This Project\n\nIn this project, Zustand is used to manage the search state across the application. This includes handling the user's search query, selected category, price range, sorting options, and rating filters.\n\n---\n\n## Creating the Store\n\nWe create a Zustand store using the `create` function. The store manages various pieces of state related to search functionality, such as the search query, category, price range, sort options, and ratings.\n\n```ts\nimport { create } from \"zustand\";\n\ninterface SearchStore {\n  searchQuery: string;\n  selectCategory: string;\n  priceRange: string;\n  selectSortOption: string;\n  selectRating: string;\n\n  setSearchQuery: (query: string) => void;\n  setSelectCategory: (category: string) => void;\n  setPriceRange: (range: string) => void;\n  setSelectSortOption: (option: string) => void;\n  setSelectRating: (rating: string) => void;\n}\n\nconst useSearchStore = create\u003CSearchStore>((set) => ({\n  searchQuery: \"\",\n  selectCategory: \"\",\n  priceRange: \"\",\n  selectSortOption: \"\",\n  selectRating: \"\",\n\n  setSearchQuery: (query) => set({ searchQuery: query }),\n  setSelectCategory: (category) => set({ selectCategory: category }),\n  setPriceRange: (range) => set({ priceRange: range }),\n  setSelectSortOption: (option) => set({ selectSortOption: option }),\n  setSelectRating: (rating) => set({ selectRating: rating })\n}));\n\nexport default useSearchStore;\n```\n\n#### Store State and Actions\n\n- **State Variables:**\n\n  - searchQuery: The current search query input by the user.\n  - selectCategory: The category filter selected by the user.\n  - priceRange: The price range filter.\n  - selectSortOption: The sort option applied to the search results.\n  - selectRating: The rating filter applied to the results.\n\n- **Actions (Setters):**\n\n  - setSearchQuery(query): Updates the search query.\n  - setSelectCategory(category): Updates the selected category.\n  - setPriceRange(range): Updates the price range.\n  - setSelectSortOption(option): Updates the sorting option.\n  - setSelectRating(rating): Updates the selected rating.\n\n#### Accessing the Store in Components\n\nTo use Zustand state and actions in your React components, you use the useSearchStore hook.\n\n**Example: Search Input Component**\nThe SearchInput component allows users to input a search query. It uses the global searchQuery from the store and updates it with setSearchQuery:\n\n```ts\nconst SearchInput = () => {\n  const { searchQuery, setSearchQuery } = useSearchStore();\n\n  return (\n    \u003CInput\n      type=\"search\"\n      value={searchQuery}\n      onChange={(e) => setSearchQuery(e.target.value)}\n      placeholder=\"Search...\"\n      className=\"search-input\"\n    />\n  );\n};\n```","src/content/blog/state-management.md","7be39d8a62975399",{"html":106,"metadata":107},"\u003Ch2 id=\"zustand-documentation\">Zustand Documentation\u003C/h2>\n\u003Ch2 id=\"what-is-zustand\">What is Zustand?\u003C/h2>\n\u003Cp>Zustand is a small, fast, and flexible state management library for React. It allows you to manage global state with minimal setup, using React hooks to access and modify the state directly within your components.\u003C/p>\n\u003Chr>\n\u003Ch2 id=\"how-zustand-is-used-in-this-project\">How Zustand is Used in This Project\u003C/h2>\n\u003Cp>In this project, Zustand is used to manage the search state across the application. This includes handling the user’s search query, selected category, price range, sorting options, and rating filters.\u003C/p>\n\u003Chr>\n\u003Ch2 id=\"creating-the-store\">Creating the Store\u003C/h2>\n\u003Cp>We create a Zustand store using the \u003Ccode>create\u003C/code> function. The store manages various pieces of state related to search functionality, such as the search query, category, price range, sort options, and ratings.\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"ts\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { create } \u003C/span>\u003Cspan style=\"color:#F97583\">from\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> \"zustand\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">interface\u003C/span>\u003Cspan style=\"color:#B392F0\"> SearchStore\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FFAB70\">  searchQuery\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> string\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FFAB70\">  selectCategory\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> string\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FFAB70\">  priceRange\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> string\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FFAB70\">  selectSortOption\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> string\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#FFAB70\">  selectRating\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> string\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  setSearchQuery\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> (\u003C/span>\u003Cspan style=\"color:#FFAB70\">query\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> string\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#79B8FF\"> void\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  setSelectCategory\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> (\u003C/span>\u003Cspan style=\"color:#FFAB70\">category\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> string\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#79B8FF\"> void\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  setPriceRange\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> (\u003C/span>\u003Cspan style=\"color:#FFAB70\">range\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> string\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#79B8FF\"> void\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  setSelectSortOption\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> (\u003C/span>\u003Cspan style=\"color:#FFAB70\">option\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> string\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#79B8FF\"> void\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  setSelectRating\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> (\u003C/span>\u003Cspan style=\"color:#FFAB70\">rating\u003C/span>\u003Cspan style=\"color:#F97583\">:\u003C/span>\u003Cspan style=\"color:#79B8FF\"> string\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#79B8FF\"> void\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C/span>\u003Cspan style=\"color:#79B8FF\"> useSearchStore\u003C/span>\u003Cspan style=\"color:#F97583\"> =\u003C/span>\u003Cspan style=\"color:#B392F0\"> create\u003C/span>\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#B392F0\">SearchStore\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>((\u003C/span>\u003Cspan style=\"color:#FFAB70\">set\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> ({\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  searchQuery: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  selectCategory: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  priceRange: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  selectSortOption: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  selectRating: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  setSearchQuery\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: (\u003C/span>\u003Cspan style=\"color:#FFAB70\">query\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#B392F0\"> set\u003C/span>\u003Cspan style=\"color:#E1E4E8\">({ searchQuery: query }),\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  setSelectCategory\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: (\u003C/span>\u003Cspan style=\"color:#FFAB70\">category\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#B392F0\"> set\u003C/span>\u003Cspan style=\"color:#E1E4E8\">({ selectCategory: category }),\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  setPriceRange\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: (\u003C/span>\u003Cspan style=\"color:#FFAB70\">range\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#B392F0\"> set\u003C/span>\u003Cspan style=\"color:#E1E4E8\">({ priceRange: range }),\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  setSelectSortOption\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: (\u003C/span>\u003Cspan style=\"color:#FFAB70\">option\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#B392F0\"> set\u003C/span>\u003Cspan style=\"color:#E1E4E8\">({ selectSortOption: option }),\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  setSelectRating\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: (\u003C/span>\u003Cspan style=\"color:#FFAB70\">rating\u003C/span>\u003Cspan style=\"color:#E1E4E8\">) \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#B392F0\"> set\u003C/span>\u003Cspan style=\"color:#E1E4E8\">({ selectRating: rating })\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}));\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">export\u003C/span>\u003Cspan style=\"color:#F97583\"> default\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> useSearchStore;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch4 id=\"store-state-and-actions\">Store State and Actions\u003C/h4>\n\u003Cul>\n\u003Cli>\n\u003Cp>\u003Cstrong>State Variables:\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>searchQuery: The current search query input by the user.\u003C/li>\n\u003Cli>selectCategory: The category filter selected by the user.\u003C/li>\n\u003Cli>priceRange: The price range filter.\u003C/li>\n\u003Cli>selectSortOption: The sort option applied to the search results.\u003C/li>\n\u003Cli>selectRating: The rating filter applied to the results.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>Actions (Setters):\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>setSearchQuery(query): Updates the search query.\u003C/li>\n\u003Cli>setSelectCategory(category): Updates the selected category.\u003C/li>\n\u003Cli>setPriceRange(range): Updates the price range.\u003C/li>\n\u003Cli>setSelectSortOption(option): Updates the sorting option.\u003C/li>\n\u003Cli>setSelectRating(rating): Updates the selected rating.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch4 id=\"accessing-the-store-in-components\">Accessing the Store in Components\u003C/h4>\n\u003Cp>To use Zustand state and actions in your React components, you use the useSearchStore hook.\u003C/p>\n\u003Cp>\u003Cstrong>Example: Search Input Component\u003C/strong>\nThe SearchInput component allows users to input a search query. It uses the global searchQuery from the store and updates it with setSearchQuery:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"ts\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C/span>\u003Cspan style=\"color:#B392F0\"> SearchInput\u003C/span>\u003Cspan style=\"color:#F97583\"> =\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> () \u003C/span>\u003Cspan style=\"color:#F97583\">=>\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  const\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { \u003C/span>\u003Cspan style=\"color:#79B8FF\">searchQuery\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#79B8FF\">setSearchQuery\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> } \u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#B392F0\"> useSearchStore\u003C/span>\u003Cspan style=\"color:#E1E4E8\">();\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  return\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> (\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    <\u003C/span>\u003Cspan style=\"color:#FFAB70\">Input\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      type\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"search\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      value\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#E1E4E8\">{searchQuery}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      onChange\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#E1E4E8\">{(e) => \u003C/span>\u003Cspan style=\"color:#B392F0\">setSearchQuery\u003C/span>\u003Cspan style=\"color:#E1E4E8\">(e.target.value)}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      placeholder\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"Search...\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      className\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"search-input\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  );\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">};\u003C/span>\u003C/span>\u003C/code>\u003C/pre>",{"headings":108,"imagePaths":127,"frontmatter":128},[109,112,115,118,121,124],{"depth":28,"slug":110,"text":111},"zustand-documentation","Zustand Documentation",{"depth":28,"slug":113,"text":114},"what-is-zustand","What is Zustand?",{"depth":28,"slug":116,"text":117},"how-zustand-is-used-in-this-project","How Zustand is Used in This Project",{"depth":28,"slug":119,"text":120},"creating-the-store","Creating the Store",{"depth":45,"slug":122,"text":123},"store-state-and-actions","Store State and Actions",{"depth":45,"slug":125,"text":126},"accessing-the-store-in-components","Accessing the Store in Components",[],{"title":98,"description":101,"publishDate":129},"12 December 2024","routing-astro",{"id":130,"data":132,"body":137,"filePath":138,"digest":139,"rendered":140},{"title":133,"publishDate":134,"tags":135,"draft":18,"description":136},"How routing works in Astro ?",["Date","2024-12-11T18:30:00.000Z"],[17],"The full guide on routing in astro framework . The easy and simple guide to understand and implement routing ","## Adding a New Route in Astro.js\n\nAstro uses a **file-based routing system**, where the file structure in the `src/pages` directory determines the routes.\n\n## **Steps to Add a New Route**\n\n1. **Create a New File in the `src/pages` Directory**\n\n   - Go to the `src/pages` directory in your project.\n   - Create a new file for your route. For example:\n     - `about.astro` → `/about` route\n     - `blog.astro` → `/blog` route\n     - `contact.html` → `/contact` route (static HTML)\n\n2. **Add Content to the New F ile**\n\n   Add the desired HTML or Astro component syntax inside your new file. For example, in `about.astro`:\n\n   ```astro\n   ---\n   // Frontmatter (optional)\n   const pageTitle = \"About Us\";\n   ---\n\n   \u003Chtml>\n     \u003Chead>\n       \u003Ctitle>{pageTitle}\u003C/title>\n     \u003C/head>\n     \u003Cbody>\n       \u003Ch1>{pageTitle}\u003C/h1>\n       \u003Cp>Welcome to the About page of our Astro site!\u003C/p>\n     \u003C/body>\n   \u003C/html>\n   ```\n\n3. **Start the Development Server**\n\n   Run the Astro development server to see your changes:\n\n   ```bash\n   npm run dev\n   ```\n\n   Visit `http://localhost:3000/about` (or the corresponding route) in your browser.\n\n4. **Optional: Add Dynamic Routes**\n\n   If you need dynamic routes (e.g., `/blog/:slug`), create a file with square brackets in its name, such as `[slug].astro`. Example:\n\n   - File: `src/pages/blog/[slug].astro`\n\n     ```astro\n     ---\n     const { slug } = Astro.params;\n     ---\n\n     \u003Ch1>Blog Post: {slug}\u003C/h1>\n     ```\n\n   - Visit `/blog/example` to see the route in action.\n\n5. **Optional: Add Links to Your Route**\n\n   Update your site's navigation to link to the new route. For example, in your `src/layouts/Header.astro`:\n\n   ```astro\n   \u003Cnav>\n     \u003Ca href=\"/\">Home\u003C/a>\n     \u003Ca href=\"/about\">About\u003C/a>\n     \u003Ca href=\"/blog\">Blog\u003C/a>\n   \u003C/nav>\n   ```\n\n---\n\n### **Example File Structure for Routes**\n\n```\nsrc/\n├── pages/\n│   ├── index.astro       → /\n│   ├── about.astro       → /about\n│   ├── blog.astro        → /blog\n│   ├── blog/\n│   │   ├── [slug].astro  → /blog/:slug\n```","src/content/blog/routing-astro.md","51b86047071d592e",{"html":141,"metadata":142},"\u003Ch2 id=\"adding-a-new-route-in-astrojs\">Adding a New Route in Astro.js\u003C/h2>\n\u003Cp>Astro uses a \u003Cstrong>file-based routing system\u003C/strong>, where the file structure in the \u003Ccode>src/pages\u003C/code> directory determines the routes.\u003C/p>\n\u003Ch2 id=\"steps-to-add-a-new-route\">\u003Cstrong>Steps to Add a New Route\u003C/strong>\u003C/h2>\n\u003Col>\n\u003Cli>\n\u003Cp>\u003Cstrong>Create a New File in the \u003Ccode>src/pages\u003C/code> Directory\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>Go to the \u003Ccode>src/pages\u003C/code> directory in your project.\u003C/li>\n\u003Cli>Create a new file for your route. For example:\n\u003Cul>\n\u003Cli>\u003Ccode>about.astro\u003C/code> → \u003Ccode>/about\u003C/code> route\u003C/li>\n\u003Cli>\u003Ccode>blog.astro\u003C/code> → \u003Ccode>/blog\u003C/code> route\u003C/li>\n\u003Cli>\u003Ccode>contact.html\u003C/code> → \u003Ccode>/contact\u003C/code> route (static HTML)\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>Add Content to the New F ile\u003C/strong>\u003C/p>\n\u003Cp>Add the desired HTML or Astro component syntax inside your new file. For example, in \u003Ccode>about.astro\u003C/code>:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"astro\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">// Frontmatter (optional)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C/span>\u003Cspan style=\"color:#79B8FF\"> pageTitle\u003C/span>\u003Cspan style=\"color:#F97583\"> =\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> \"About Us\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">html\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  <\u003C/span>\u003Cspan style=\"color:#85E89D\">head\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C/span>\u003Cspan style=\"color:#85E89D\">title\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>{pageTitle}</title>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  </\u003C/span>\u003Cspan style=\"color:#85E89D\">head\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  <\u003C/span>\u003Cspan style=\"color:#85E89D\">body\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C/span>\u003Cspan style=\"color:#85E89D\">h1\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>{pageTitle}</h1>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C/span>\u003Cspan style=\"color:#85E89D\">p\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>Welcome to the About page of our Astro site!</\u003C/span>\u003Cspan style=\"color:#85E89D\">p\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  </\u003C/span>\u003Cspan style=\"color:#85E89D\">body\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">html\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>Start the Development Server\u003C/strong>\u003C/p>\n\u003Cp>Run the Astro development server to see your changes:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> run\u003C/span>\u003Cspan style=\"color:#9ECBFF\"> dev\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>Visit \u003Ccode>http://localhost:3000/about\u003C/code> (or the corresponding route) in your browser.\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>Optional: Add Dynamic Routes\u003C/strong>\u003C/p>\n\u003Cp>If you need dynamic routes (e.g., \u003Ccode>/blog/:slug\u003C/code>), create a file with square brackets in its name, such as \u003Ccode>[slug].astro\u003C/code>. Example:\u003C/p>\n\u003Cul>\n\u003Cli>\n\u003Cp>File: \u003Ccode>src/pages/blog/[slug].astro\u003C/code>\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"astro\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> { \u003C/span>\u003Cspan style=\"color:#79B8FF\">slug\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> } \u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> Astro.params;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">h1\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>Blog Post: {slug}</\u003C/span>\u003Cspan style=\"color:#85E89D\">h1\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003C/li>\n\u003Cli>\n\u003Cp>Visit \u003Ccode>/blog/example\u003C/code> to see the route in action.\u003C/p>\n\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>Optional: Add Links to Your Route\u003C/strong>\u003C/p>\n\u003Cp>Update your site’s navigation to link to the new route. For example, in your \u003Ccode>src/layouts/Header.astro\u003C/code>:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"astro\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">nav\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  <\u003C/span>\u003Cspan style=\"color:#85E89D\">a\u003C/span>\u003Cspan style=\"color:#B392F0\"> href\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"/\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>Home</\u003C/span>\u003Cspan style=\"color:#85E89D\">a\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  <\u003C/span>\u003Cspan style=\"color:#85E89D\">a\u003C/span>\u003Cspan style=\"color:#B392F0\"> href\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"/about\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>About</\u003C/span>\u003Cspan style=\"color:#85E89D\">a\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  <\u003C/span>\u003Cspan style=\"color:#85E89D\">a\u003C/span>\u003Cspan style=\"color:#B392F0\"> href\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"/blog\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>Blog</\u003C/span>\u003Cspan style=\"color:#85E89D\">a\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">nav\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003C/li>\n\u003C/ol>\n\u003Chr>\n\u003Ch3 id=\"example-file-structure-for-routes\">\u003Cstrong>Example File Structure for Routes\u003C/strong>\u003C/h3>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>src/\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>├── pages/\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>│   ├── index.astro       → /\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>│   ├── about.astro       → /about\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>│   ├── blog.astro        → /blog\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>│   ├── blog/\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>│   │   ├── [slug].astro  → /blog/:slug\u003C/span>\u003C/span>\u003C/code>\u003C/pre>",{"headings":143,"imagePaths":153,"frontmatter":154},[144,147,150],{"depth":28,"slug":145,"text":146},"adding-a-new-route-in-astrojs","Adding a New Route in Astro.js",{"depth":28,"slug":148,"text":149},"steps-to-add-a-new-route","Steps to Add a New Route",{"depth":35,"slug":151,"text":152},"example-file-structure-for-routes","Example File Structure for Routes",[],{"title":133,"description":136,"publishDate":129},"style-guide",{"id":155,"data":157,"body":162,"filePath":163,"digest":164,"rendered":165},{"title":158,"publishDate":159,"tags":160,"draft":18,"description":161},"The style guide the must know to start the code",["Date","2024-12-25T18:30:00.000Z"],[17],"The full guid on file structure , css naming convention , tailwind usage and , css classes naming convention . ","## Style Guide Documentation\n\nThis document outlines the style guide we follow to maintain consistency and readability in our codebase. These principles apply to both CSS and JavaScript/TypeScript components.\n\n---\n\n## **1. File Structure**\n\n- Use a clear and consistent folder structure.\n- Place CSS files for components inside the `assets/styles` folder, named according to the component (e.g., `result-products.css` for `ResultProducts` component).\n- Keep reusable styles in a `globals.css` file.\n\n---\n\n## **2. CSS Naming Convention**\n\n- Use `kebab-case` for CSS class names.\n  - Example: `card__image`, `container__card`\n- For component-specific styles, use the format:  \n  `componentName__element` (e.g., `card__image` for an image in the `Card` component).\n- Use utility classes from Tailwind CSS wherever possible for common properties (e.g., margins, padding, colors).\n\n---\n\n## **3. Tailwind CSS Usage**\n\n- **Use Tailwind utilities for common tasks** like spacing, typography, and colors:\n\n  - Example:\n\n    ```html\n    \u003Cdiv class=\"rounded-lg bg-white p-4 text-gray-800\">\u003C/div>\n    ```\n\n- **Avoid redundancy:** Don't add CSS rules for properties already provided by Tailwind classes.\n- Create custom styles only when:\n  - Tailwind utilities cannot achieve the desired layout or behavior.\n  - Styles are specific to a particular component.\n\n---\n\n## **4. Component-Specific CSS**\n\n- For each React component, create a corresponding CSS file if it requires custom styles.\n- **CSS file naming**: Use the same name as the component, in lowercase and hyphen-separated.\n  - Example:\n    - Component: `ResultProducts.tsx`\n    - CSS File: `result-products.css`\n- Limit the use of global styles to prevent style conflicts.\n\n---\n\n## **5. Naming Variables & Functions**\n\n- Use `camelCase` for variables, functions, and methods.\n  - Example: `filterItemsByRating`, `sortItems`\n- Use `PascalCase` for React components and TypeScript interfaces/types.\n  - Example: `ResultProducts`, `ProductProps`\n- Use `UPPER_SNAKE_CASE` for constants.\n  - Example: `BASE_IMAGE_PATH`\n\n---\n\n## **7. JSX Structure**\n\n- **Keep JSX clean and readable:**\n  - Use meaningful class names.\n  - Avoid inline styles unless absolutely necessary.\n- Wrap component logic (e.g., filtering, sorting) in separate functions for clarity.\n\n### **12. Example: Component and CSS Pair**\n\n#### React Component (`ResultProducts.tsx`)\n\n```tsx\n\u003Cdiv className=\"container__card\">\n  \u003CCardBase className=\"card__base\">\n    \u003Cimg className=\"card__image\" src={imageSrc} alt=\"Product Image\" />\n    \u003CCardContent>\n      \u003CCardTitle className=\"card__content\">Product Name\u003C/CardTitle>\n    \u003C/CardContent>\n  \u003C/CardBase>\n\u003C/div>\n```\n\n#### CSS File (`result-products.css`)\n\n```css\n.container__card {\n  @apply rounded-lg border bg-white p-4 shadow-md;\n}\n\n.card__base {\n  @apply flex flex-col items-center;\n}\n\n.card__image {\n  @apply h-40 w-full rounded-md object-cover;\n}\n\n.card__content {\n  @apply text-lg font-semibold text-gray-800;\n}\n```","src/content/blog/style-guide.md","0439145f24bd2cb6",{"html":166,"metadata":167},"\u003Ch2 id=\"style-guide-documentation\">Style Guide Documentation\u003C/h2>\n\u003Cp>This document outlines the style guide we follow to maintain consistency and readability in our codebase. These principles apply to both CSS and JavaScript/TypeScript components.\u003C/p>\n\u003Chr>\n\u003Ch2 id=\"1-file-structure\">\u003Cstrong>1. File Structure\u003C/strong>\u003C/h2>\n\u003Cul>\n\u003Cli>Use a clear and consistent folder structure.\u003C/li>\n\u003Cli>Place CSS files for components inside the \u003Ccode>assets/styles\u003C/code> folder, named according to the component (e.g., \u003Ccode>result-products.css\u003C/code> for \u003Ccode>ResultProducts\u003C/code> component).\u003C/li>\n\u003Cli>Keep reusable styles in a \u003Ccode>globals.css\u003C/code> file.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"2-css-naming-convention\">\u003Cstrong>2. CSS Naming Convention\u003C/strong>\u003C/h2>\n\u003Cul>\n\u003Cli>Use \u003Ccode>kebab-case\u003C/code> for CSS class names.\n\u003Cul>\n\u003Cli>Example: \u003Ccode>card__image\u003C/code>, \u003Ccode>container__card\u003C/code>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>For component-specific styles, use the format:\u003Cbr>\n\u003Ccode>componentName__element\u003C/code> (e.g., \u003Ccode>card__image\u003C/code> for an image in the \u003Ccode>Card\u003C/code> component).\u003C/li>\n\u003Cli>Use utility classes from Tailwind CSS wherever possible for common properties (e.g., margins, padding, colors).\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"3-tailwind-css-usage\">\u003Cstrong>3. Tailwind CSS Usage\u003C/strong>\u003C/h2>\n\u003Cul>\n\u003Cli>\n\u003Cp>\u003Cstrong>Use Tailwind utilities for common tasks\u003C/strong> like spacing, typography, and colors:\u003C/p>\n\u003Cul>\n\u003Cli>\n\u003Cp>Example:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">div\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"rounded-lg bg-white p-4 text-gray-800\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">div\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>Avoid redundancy:\u003C/strong> Don’t add CSS rules for properties already provided by Tailwind classes.\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>Create custom styles only when:\u003C/p>\n\u003Cul>\n\u003Cli>Tailwind utilities cannot achieve the desired layout or behavior.\u003C/li>\n\u003Cli>Styles are specific to a particular component.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"4-component-specific-css\">\u003Cstrong>4. Component-Specific CSS\u003C/strong>\u003C/h2>\n\u003Cul>\n\u003Cli>For each React component, create a corresponding CSS file if it requires custom styles.\u003C/li>\n\u003Cli>\u003Cstrong>CSS file naming\u003C/strong>: Use the same name as the component, in lowercase and hyphen-separated.\n\u003Cul>\n\u003Cli>Example:\n\u003Cul>\n\u003Cli>Component: \u003Ccode>ResultProducts.tsx\u003C/code>\u003C/li>\n\u003Cli>CSS File: \u003Ccode>result-products.css\u003C/code>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>Limit the use of global styles to prevent style conflicts.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"5-naming-variables--functions\">\u003Cstrong>5. Naming Variables & Functions\u003C/strong>\u003C/h2>\n\u003Cul>\n\u003Cli>Use \u003Ccode>camelCase\u003C/code> for variables, functions, and methods.\n\u003Cul>\n\u003Cli>Example: \u003Ccode>filterItemsByRating\u003C/code>, \u003Ccode>sortItems\u003C/code>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>Use \u003Ccode>PascalCase\u003C/code> for React components and TypeScript interfaces/types.\n\u003Cul>\n\u003Cli>Example: \u003Ccode>ResultProducts\u003C/code>, \u003Ccode>ProductProps\u003C/code>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>Use \u003Ccode>UPPER_SNAKE_CASE\u003C/code> for constants.\n\u003Cul>\n\u003Cli>Example: \u003Ccode>BASE_IMAGE_PATH\u003C/code>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"7-jsx-structure\">\u003Cstrong>7. JSX Structure\u003C/strong>\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Keep JSX clean and readable:\u003C/strong>\n\u003Cul>\n\u003Cli>Use meaningful class names.\u003C/li>\n\u003Cli>Avoid inline styles unless absolutely necessary.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>Wrap component logic (e.g., filtering, sorting) in separate functions for clarity.\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"12-example-component-and-css-pair\">\u003Cstrong>12. Example: Component and CSS Pair\u003C/strong>\u003C/h3>\n\u003Ch4 id=\"react-component-resultproductstsx\">React Component (\u003Ccode>ResultProducts.tsx\u003C/code>)\u003C/h4>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"tsx\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">div\u003C/span>\u003Cspan style=\"color:#B392F0\"> className\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"container__card\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  <\u003C/span>\u003Cspan style=\"color:#79B8FF\">CardBase\u003C/span>\u003Cspan style=\"color:#B392F0\"> className\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"card__base\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C/span>\u003Cspan style=\"color:#85E89D\">img\u003C/span>\u003Cspan style=\"color:#B392F0\"> className\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"card__image\"\u003C/span>\u003Cspan style=\"color:#B392F0\"> src\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#E1E4E8\">{imageSrc} \u003C/span>\u003Cspan style=\"color:#B392F0\">alt\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"Product Image\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C/span>\u003Cspan style=\"color:#79B8FF\">CardContent\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C/span>\u003Cspan style=\"color:#79B8FF\">CardTitle\u003C/span>\u003Cspan style=\"color:#B392F0\"> className\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"card__content\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>Product Name</\u003C/span>\u003Cspan style=\"color:#79B8FF\">CardTitle\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    </\u003C/span>\u003Cspan style=\"color:#79B8FF\">CardContent\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  </\u003C/span>\u003Cspan style=\"color:#79B8FF\">CardBase\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">div\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch4 id=\"css-file-result-productscss\">CSS File (\u003Ccode>result-products.css\u003C/code>)\u003C/h4>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">.container__card\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  @\u003C/span>\u003Cspan style=\"color:#79B8FF\">apply\u003C/span>\u003Cspan style=\"color:#79B8FF\"> rounded-lg\u003C/span>\u003Cspan style=\"color:#79B8FF\"> border\u003C/span>\u003Cspan style=\"color:#79B8FF\"> bg-white\u003C/span>\u003Cspan style=\"color:#79B8FF\"> p-\u003C/span>\u003Cspan style=\"color:#E1E4E8\">4 \u003C/span>\u003Cspan style=\"color:#79B8FF\">shadow-md\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">.card__base\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  @\u003C/span>\u003Cspan style=\"color:#79B8FF\">apply\u003C/span>\u003Cspan style=\"color:#79B8FF\"> flex\u003C/span>\u003Cspan style=\"color:#79B8FF\"> flex-col\u003C/span>\u003Cspan style=\"color:#79B8FF\"> items-center\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">.card__image\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  @\u003C/span>\u003Cspan style=\"color:#79B8FF\">apply\u003C/span>\u003Cspan style=\"color:#79B8FF\"> h-\u003C/span>\u003Cspan style=\"color:#E1E4E8\">40 \u003C/span>\u003Cspan style=\"color:#79B8FF\">w-full\u003C/span>\u003Cspan style=\"color:#79B8FF\"> rounded-md\u003C/span>\u003Cspan style=\"color:#79B8FF\"> object-cover\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">.card__content\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  @\u003C/span>\u003Cspan style=\"color:#79B8FF\">apply\u003C/span>\u003Cspan style=\"color:#79B8FF\"> text-lg\u003C/span>\u003Cspan style=\"color:#79B8FF\"> font-semibold\u003C/span>\u003Cspan style=\"color:#79B8FF\"> text-gray-\u003C/span>\u003Cspan style=\"color:#E1E4E8\">800;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>",{"headings":168,"imagePaths":199,"frontmatter":200},[169,172,175,178,181,184,187,190,193,196],{"depth":28,"slug":170,"text":171},"style-guide-documentation","Style Guide Documentation",{"depth":28,"slug":173,"text":174},"1-file-structure","1. File Structure",{"depth":28,"slug":176,"text":177},"2-css-naming-convention","2. CSS Naming Convention",{"depth":28,"slug":179,"text":180},"3-tailwind-css-usage","3. Tailwind CSS Usage",{"depth":28,"slug":182,"text":183},"4-component-specific-css","4. Component-Specific CSS",{"depth":28,"slug":185,"text":186},"5-naming-variables--functions","5. Naming Variables & Functions",{"depth":28,"slug":188,"text":189},"7-jsx-structure","7. JSX Structure",{"depth":35,"slug":191,"text":192},"12-example-component-and-css-pair","12. Example: Component and CSS Pair",{"depth":45,"slug":194,"text":195},"react-component-resultproductstsx","React Component (ResultProducts.tsx)",{"depth":45,"slug":197,"text":198},"css-file-result-productscss","CSS File (result-products.css)",[],{"title":158,"description":161,"publishDate":201},"26 December 2024","articles",["Map",204,205],"terms",{"id":204,"data":206,"body":209,"filePath":210,"digest":211,"rendered":212},{"title":207,"author":208},"Terms & Conditions","Admin","Welcome to COMPANY-NAME! These terms and conditions outline the rules and regulations for the use of COMPANY-NAME's Website, located at [COMPANY-NAME.com](https://www.COMPANY-NAME.com).\n\nBy accessing this website, we assume you accept these terms and conditions. Do not continue to use [Your Company\nName] if you do not agree to take all of the terms and conditions stated on this page.\n\nThe following terminology applies to these Terms and Conditions, Privacy Statement and Disclaimer Notice and all Agreements: \"Client\", \"You\" and \"Your\" refers to you, the person log on this website and compliant to the Company's terms and conditions.\n\"The Company\", \"Ourselves\", \"We\", \"Our\" and \"Us\", refers to our Company. \"Party\", \"Parties\", or \"Us\", refers to both the Client and ourselves. All terms refer to the offer, acceptance, and\nconsideration of payment necessary to undertake the process of our assistance to the Client in the most appropriate manner for the express purpose of meeting the Client's needs in respect of the provision of the\nCompany's stated services, in accordance with and subject to, prevailing law of Netherlands. Any use of the above terminology or other words in the singular, plural, capitalization, and/or he/she or they, are taken as\ninterchangeable and therefore as referring to same.\n\n## Cookies\n\nWe employ the use of cookies. By accessing COMPANY-NAME, you agreed to use cookies in agreement with the COMPANY-NAME's Privacy Policy.\n\nMost interactive websites use cookies to let us retrieve the user's details for each visit. Cookies are used by\nour website to enable the functionality of certain areas to make it easier for people visiting our website. Some\nof our affiliate/advertising partners may also use cookies.\n\n## License\n\nUnless otherwise stated, COMPANY-NAME and/or its licensors own the intellectual property rights for all material on COMPANY-NAME. All intellectual property rights are reserved.\nYou may access this from COMPANY-NAME for your own personal use subjected to restrictions set in these terms and conditions.\n\n### You must not\n\n- Republish material from COMPANY-NAME\n- Sell, rent, or sub-license material from COMPANY-NAME\n- Reproduce, duplicate or copy material from COMPANY-NAME\n- Redistribute content from COMPANY-NAME\n\nIf you have any questions about our Terms and Conditions, please [contact us](/contact)","src/content/article/terms.md","c9a57ebc5b9030f2",{"html":213,"metadata":214},"\u003Cp>Welcome to COMPANY-NAME! These terms and conditions outline the rules and regulations for the use of COMPANY-NAME’s Website, located at \u003Ca href=\"https://www.COMPANY-NAME.com\">COMPANY-NAME.com\u003C/a>.\u003C/p>\n\u003Cp>By accessing this website, we assume you accept these terms and conditions. Do not continue to use [Your Company\nName] if you do not agree to take all of the terms and conditions stated on this page.\u003C/p>\n\u003Cp>The following terminology applies to these Terms and Conditions, Privacy Statement and Disclaimer Notice and all Agreements: “Client”, “You” and “Your” refers to you, the person log on this website and compliant to the Company’s terms and conditions.\n“The Company”, “Ourselves”, “We”, “Our” and “Us”, refers to our Company. “Party”, “Parties”, or “Us”, refers to both the Client and ourselves. All terms refer to the offer, acceptance, and\nconsideration of payment necessary to undertake the process of our assistance to the Client in the most appropriate manner for the express purpose of meeting the Client’s needs in respect of the provision of the\nCompany’s stated services, in accordance with and subject to, prevailing law of Netherlands. Any use of the above terminology or other words in the singular, plural, capitalization, and/or he/she or they, are taken as\ninterchangeable and therefore as referring to same.\u003C/p>\n\u003Ch2 id=\"cookies\">Cookies\u003C/h2>\n\u003Cp>We employ the use of cookies. By accessing COMPANY-NAME, you agreed to use cookies in agreement with the COMPANY-NAME’s Privacy Policy.\u003C/p>\n\u003Cp>Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by\nour website to enable the functionality of certain areas to make it easier for people visiting our website. Some\nof our affiliate/advertising partners may also use cookies.\u003C/p>\n\u003Ch2 id=\"license\">License\u003C/h2>\n\u003Cp>Unless otherwise stated, COMPANY-NAME and/or its licensors own the intellectual property rights for all material on COMPANY-NAME. All intellectual property rights are reserved.\nYou may access this from COMPANY-NAME for your own personal use subjected to restrictions set in these terms and conditions.\u003C/p>\n\u003Ch3 id=\"you-must-not\">You must not\u003C/h3>\n\u003Cul>\n\u003Cli>Republish material from COMPANY-NAME\u003C/li>\n\u003Cli>Sell, rent, or sub-license material from COMPANY-NAME\u003C/li>\n\u003Cli>Reproduce, duplicate or copy material from COMPANY-NAME\u003C/li>\n\u003Cli>Redistribute content from COMPANY-NAME\u003C/li>\n\u003C/ul>\n\u003Cp>If you have any questions about our Terms and Conditions, please \u003Ca href=\"/contact\">contact us\u003C/a>\u003C/p>",{"headings":215,"imagePaths":225,"frontmatter":226},[216,219,222],{"depth":28,"slug":217,"text":218},"cookies","Cookies",{"depth":28,"slug":220,"text":221},"license","License",{"depth":35,"slug":223,"text":224},"you-must-not","You must not",[],{"title":207,"author":208}]
\ No newline at end of file
+[["Map",1,2,9,10,36,37],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.1.1","content-config-digest","cb57b37d92ecf6ac","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://parixan.xyz\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"server\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true},\"redirects\":{},\"prefetch\":true,\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":false},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"svg\":{\"mode\":\"inline\"}},\"legacy\":{\"collections\":false}}","articles",["Map",11,12],"terms",{"id":11,"data":13,"body":16,"filePath":17,"digest":18,"rendered":19},{"title":14,"author":15},"Terms & Conditions","Admin","Welcome to COMPANY-NAME! These terms and conditions outline the rules and regulations for the use of COMPANY-NAME's Website, located at [COMPANY-NAME.com](https://www.COMPANY-NAME.com).\r\n\r\nBy accessing this website, we assume you accept these terms and conditions. Do not continue to use [Your Company\r\nName] if you do not agree to take all of the terms and conditions stated on this page.\r\n\r\nThe following terminology applies to these Terms and Conditions, Privacy Statement and Disclaimer Notice and all Agreements: \"Client\", \"You\" and \"Your\" refers to you, the person log on this website and compliant to the Company's terms and conditions.\r\n\"The Company\", \"Ourselves\", \"We\", \"Our\" and \"Us\", refers to our Company. \"Party\", \"Parties\", or \"Us\", refers to both the Client and ourselves. All terms refer to the offer, acceptance, and\r\nconsideration of payment necessary to undertake the process of our assistance to the Client in the most appropriate manner for the express purpose of meeting the Client's needs in respect of the provision of the\r\nCompany's stated services, in accordance with and subject to, prevailing law of Netherlands. Any use of the above terminology or other words in the singular, plural, capitalization, and/or he/she or they, are taken as\r\ninterchangeable and therefore as referring to same.\r\n\r\n## Cookies\r\n\r\nWe employ the use of cookies. By accessing COMPANY-NAME, you agreed to use cookies in agreement with the COMPANY-NAME's Privacy Policy.\r\n\r\nMost interactive websites use cookies to let us retrieve the user's details for each visit. Cookies are used by\r\nour website to enable the functionality of certain areas to make it easier for people visiting our website. Some\r\nof our affiliate/advertising partners may also use cookies.\r\n\r\n## License\r\n\r\nUnless otherwise stated, COMPANY-NAME and/or its licensors own the intellectual property rights for all material on COMPANY-NAME. All intellectual property rights are reserved.\r\nYou may access this from COMPANY-NAME for your own personal use subjected to restrictions set in these terms and conditions.\r\n\r\n### You must not\r\n\r\n- Republish material from COMPANY-NAME\r\n- Sell, rent, or sub-license material from COMPANY-NAME\r\n- Reproduce, duplicate or copy material from COMPANY-NAME\r\n- Redistribute content from COMPANY-NAME\r\n\r\nIf you have any questions about our Terms and Conditions, please [contact us](/contact)","src/content/article/terms.md","15c64083a4c7769f",{"html":20,"metadata":21},"\u003Cp>Welcome to COMPANY-NAME! These terms and conditions outline the rules and regulations for the use of COMPANY-NAME’s Website, located at \u003Ca href=\"https://www.COMPANY-NAME.com\">COMPANY-NAME.com\u003C/a>.\u003C/p>\n\u003Cp>By accessing this website, we assume you accept these terms and conditions. Do not continue to use [Your Company\r\nName] if you do not agree to take all of the terms and conditions stated on this page.\u003C/p>\n\u003Cp>The following terminology applies to these Terms and Conditions, Privacy Statement and Disclaimer Notice and all Agreements: “Client”, “You” and “Your” refers to you, the person log on this website and compliant to the Company’s terms and conditions.\r\n“The Company”, “Ourselves”, “We”, “Our” and “Us”, refers to our Company. “Party”, “Parties”, or “Us”, refers to both the Client and ourselves. All terms refer to the offer, acceptance, and\r\nconsideration of payment necessary to undertake the process of our assistance to the Client in the most appropriate manner for the express purpose of meeting the Client’s needs in respect of the provision of the\r\nCompany’s stated services, in accordance with and subject to, prevailing law of Netherlands. Any use of the above terminology or other words in the singular, plural, capitalization, and/or he/she or they, are taken as\r\ninterchangeable and therefore as referring to same.\u003C/p>\n\u003Ch2 id=\"cookies\">Cookies\u003C/h2>\n\u003Cp>We employ the use of cookies. By accessing COMPANY-NAME, you agreed to use cookies in agreement with the COMPANY-NAME’s Privacy Policy.\u003C/p>\n\u003Cp>Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by\r\nour website to enable the functionality of certain areas to make it easier for people visiting our website. Some\r\nof our affiliate/advertising partners may also use cookies.\u003C/p>\n\u003Ch2 id=\"license\">License\u003C/h2>\n\u003Cp>Unless otherwise stated, COMPANY-NAME and/or its licensors own the intellectual property rights for all material on COMPANY-NAME. All intellectual property rights are reserved.\r\nYou may access this from COMPANY-NAME for your own personal use subjected to restrictions set in these terms and conditions.\u003C/p>\n\u003Ch3 id=\"you-must-not\">You must not\u003C/h3>\n\u003Cul>\n\u003Cli>Republish material from COMPANY-NAME\u003C/li>\n\u003Cli>Sell, rent, or sub-license material from COMPANY-NAME\u003C/li>\n\u003Cli>Reproduce, duplicate or copy material from COMPANY-NAME\u003C/li>\n\u003Cli>Redistribute content from COMPANY-NAME\u003C/li>\n\u003C/ul>\n\u003Cp>If you have any questions about our Terms and Conditions, please \u003Ca href=\"/contact\">contact us\u003C/a>\u003C/p>",{"headings":22,"imagePaths":34,"frontmatter":35},[23,27,30],{"depth":24,"slug":25,"text":26},2,"cookies","Cookies",{"depth":24,"slug":28,"text":29},"license","License",{"depth":31,"slug":32,"text":33},3,"you-must-not","You must not",[],{"title":14,"author":15},"blogs",["Map",38,39,121,122],"technology-used",{"id":38,"data":40,"body":47,"filePath":48,"digest":49,"rendered":50},{"title":41,"publishDate":42,"tags":43,"draft":45,"description":46},"The tech stack that we preferred",["Date","2024-12-23T18:30:00.000Z"],[44],"rz",false,"The tech stack that we work with and why we choose it ? ","## **Project Technology Stack Documentation**\r\n\r\n## **Frontend**\r\n\r\n### **Astro.js**\r\n\r\n- **Purpose**: Utilized as the core frontend framework for building the project.\r\n- **Features**:\r\n  - File-based routing.\r\n  - Supports server-side rendering (SSR) and static site generation (SSG).\r\n  - Integrates seamlessly with other frameworks like React.\r\n\r\n### **React**\r\n\r\n- **Purpose**: Used for creating interactive and dynamic components within the Astro.js framework.\r\n- **Features**:\r\n  - Component-based architecture.\r\n  - State management and lifecycle methods.\r\n\r\n### **Styling**\r\n\r\n#### **Tailwind CSS**\r\n\r\n- **Purpose**: A utility-first CSS framework used for styling.\r\n- **Features**:\r\n  - Rapid prototyping with predefined classes.\r\n  - Highly customizable via a configuration file.\r\n\r\n### **Component Library**\r\n\r\n#### **shadcn/ui**\r\n\r\n- **Purpose**: A pre-built React-based component library for faster UI development.\r\n- **Features**:\r\n  - Offers accessible and customizable components.\r\n  - Works seamlessly with Tailwind CSS.\r\n\r\n### **Icons**\r\n\r\n- **Purpose**: Used for visual enhancements and icons across the application.\r\n- **Libraries**:\r\n  - **Astro Icons**: Icon library designed for use in Astro.js.\r\n  - **React Icons**: A collection of popular icon libraries for React.\r\n  - **Lucide Icons**: Modern, consistent, and open-source icon library.\r\n\r\n### **State Management**\r\n\r\n#### **Zustand**\r\n\r\n- **Purpose**: Lightweight state management library for handling global state in the frontend.\r\n- **Features**:\r\n  - Minimal boilerplate.\r\n  - Simple and scalable API for managing state.\r\n\r\n### **Data Validation**\r\n\r\n#### **Zod**\r\n\r\n- **Purpose**: Schema-based data validation library.\r\n- **Features**:\r\n  - Runtime validation for form data and API responses.\r\n  - TypeScript integration for type safety.\r\n\r\n---\r\n\r\n## **Backend**\r\n\r\n### **Node.js**\r\n\r\n- **Purpose**: Backend runtime environment.\r\n- **Features**:\r\n  - Non-blocking, event-driven architecture for handling asynchronous operations.\r\n  - Large ecosystem of libraries and tools.\r\n\r\n### **Hono.js Framework**\r\n\r\n- **Purpose**: Lightweight, high-performance framework for building backend APIs.\r\n- **Features**:\r\n  - Minimalistic API design.\r\n  - Excellent for creating RESTful services.\r\n\r\n---\r\n\r\n## **Database**\r\n\r\n### **MongoDB**\r\n\r\n- **Purpose**: NoSQL database used for storing application data.\r\n- **Features**:\r\n  - Document-oriented storage.\r\n  - Scalable and flexible schema design.\r\n\r\n### **Mongoose**\r\n\r\n- **Purpose**: Object Relational Mapping (ORM) library for MongoDB.\r\n- **Features**:\r\n  - Simplifies data modeling and validation.\r\n  - Provides built-in schema and middleware support.\r\n\r\n---\r\n\r\n## **Other Tools**\r\n\r\n### **Code Formatting & Linting**\r\n\r\n- **Prettier**: For consistent code formatting.\r\n- **ESLint**: For identifying and fixing coding errors.","src/content/blog/technology-used.md","98f7cc9eeca22c01",{"html":51,"metadata":52},"\u003Ch2 id=\"project-technology-stack-documentation\">\u003Cstrong>Project Technology Stack Documentation\u003C/strong>\u003C/h2>\n\u003Ch2 id=\"frontend\">\u003Cstrong>Frontend\u003C/strong>\u003C/h2>\n\u003Ch3 id=\"astrojs\">\u003Cstrong>Astro.js\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Utilized as the core frontend framework for building the project.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>File-based routing.\u003C/li>\n\u003Cli>Supports server-side rendering (SSR) and static site generation (SSG).\u003C/li>\n\u003Cli>Integrates seamlessly with other frameworks like React.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"react\">\u003Cstrong>React\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Used for creating interactive and dynamic components within the Astro.js framework.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Component-based architecture.\u003C/li>\n\u003Cli>State management and lifecycle methods.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"styling\">\u003Cstrong>Styling\u003C/strong>\u003C/h3>\n\u003Ch4 id=\"tailwind-css\">\u003Cstrong>Tailwind CSS\u003C/strong>\u003C/h4>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: A utility-first CSS framework used for styling.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Rapid prototyping with predefined classes.\u003C/li>\n\u003Cli>Highly customizable via a configuration file.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"component-library\">\u003Cstrong>Component Library\u003C/strong>\u003C/h3>\n\u003Ch4 id=\"shadcnui\">\u003Cstrong>shadcn/ui\u003C/strong>\u003C/h4>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: A pre-built React-based component library for faster UI development.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Offers accessible and customizable components.\u003C/li>\n\u003Cli>Works seamlessly with Tailwind CSS.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"icons\">\u003Cstrong>Icons\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Used for visual enhancements and icons across the application.\u003C/li>\n\u003Cli>\u003Cstrong>Libraries\u003C/strong>:\n\u003Cul>\n\u003Cli>\u003Cstrong>Astro Icons\u003C/strong>: Icon library designed for use in Astro.js.\u003C/li>\n\u003Cli>\u003Cstrong>React Icons\u003C/strong>: A collection of popular icon libraries for React.\u003C/li>\n\u003Cli>\u003Cstrong>Lucide Icons\u003C/strong>: Modern, consistent, and open-source icon library.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"state-management\">\u003Cstrong>State Management\u003C/strong>\u003C/h3>\n\u003Ch4 id=\"zustand\">\u003Cstrong>Zustand\u003C/strong>\u003C/h4>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Lightweight state management library for handling global state in the frontend.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Minimal boilerplate.\u003C/li>\n\u003Cli>Simple and scalable API for managing state.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"data-validation\">\u003Cstrong>Data Validation\u003C/strong>\u003C/h3>\n\u003Ch4 id=\"zod\">\u003Cstrong>Zod\u003C/strong>\u003C/h4>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Schema-based data validation library.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Runtime validation for form data and API responses.\u003C/li>\n\u003Cli>TypeScript integration for type safety.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"backend\">\u003Cstrong>Backend\u003C/strong>\u003C/h2>\n\u003Ch3 id=\"nodejs\">\u003Cstrong>Node.js\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Backend runtime environment.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Non-blocking, event-driven architecture for handling asynchronous operations.\u003C/li>\n\u003Cli>Large ecosystem of libraries and tools.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"honojs-framework\">\u003Cstrong>Hono.js Framework\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Lightweight, high-performance framework for building backend APIs.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Minimalistic API design.\u003C/li>\n\u003Cli>Excellent for creating RESTful services.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"database\">\u003Cstrong>Database\u003C/strong>\u003C/h2>\n\u003Ch3 id=\"mongodb\">\u003Cstrong>MongoDB\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: NoSQL database used for storing application data.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Document-oriented storage.\u003C/li>\n\u003Cli>Scalable and flexible schema design.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"mongoose\">\u003Cstrong>Mongoose\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Purpose\u003C/strong>: Object Relational Mapping (ORM) library for MongoDB.\u003C/li>\n\u003Cli>\u003Cstrong>Features\u003C/strong>:\n\u003Cul>\n\u003Cli>Simplifies data modeling and validation.\u003C/li>\n\u003Cli>Provides built-in schema and middleware support.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"other-tools\">\u003Cstrong>Other Tools\u003C/strong>\u003C/h2>\n\u003Ch3 id=\"code-formatting--linting\">\u003Cstrong>Code Formatting & Linting\u003C/strong>\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Prettier\u003C/strong>: For consistent code formatting.\u003C/li>\n\u003Cli>\u003Cstrong>ESLint\u003C/strong>: For identifying and fixing coding errors.\u003C/li>\n\u003C/ul>",{"headings":53,"imagePaths":118,"frontmatter":119},[54,57,60,63,66,69,73,76,79,82,85,88,91,94,97,100,103,106,109,112,115],{"depth":24,"slug":55,"text":56},"project-technology-stack-documentation","Project Technology Stack Documentation",{"depth":24,"slug":58,"text":59},"frontend","Frontend",{"depth":31,"slug":61,"text":62},"astrojs","Astro.js",{"depth":31,"slug":64,"text":65},"react","React",{"depth":31,"slug":67,"text":68},"styling","Styling",{"depth":70,"slug":71,"text":72},4,"tailwind-css","Tailwind CSS",{"depth":31,"slug":74,"text":75},"component-library","Component Library",{"depth":70,"slug":77,"text":78},"shadcnui","shadcn/ui",{"depth":31,"slug":80,"text":81},"icons","Icons",{"depth":31,"slug":83,"text":84},"state-management","State Management",{"depth":70,"slug":86,"text":87},"zustand","Zustand",{"depth":31,"slug":89,"text":90},"data-validation","Data Validation",{"depth":70,"slug":92,"text":93},"zod","Zod",{"depth":24,"slug":95,"text":96},"backend","Backend",{"depth":31,"slug":98,"text":99},"nodejs","Node.js",{"depth":31,"slug":101,"text":102},"honojs-framework","Hono.js Framework",{"depth":24,"slug":104,"text":105},"database","Database",{"depth":31,"slug":107,"text":108},"mongodb","MongoDB",{"depth":31,"slug":110,"text":111},"mongoose","Mongoose",{"depth":24,"slug":113,"text":114},"other-tools","Other Tools",{"depth":31,"slug":116,"text":117},"code-formatting--linting","Code Formatting & Linting",[],{"title":41,"description":46,"publishDate":120},"24 December 2024","style-guide",{"id":121,"data":123,"body":128,"filePath":129,"digest":130,"rendered":131},{"title":124,"publishDate":125,"tags":126,"draft":45,"description":127},"The style guide the must know to start the code",["Date","2024-12-25T18:30:00.000Z"],[44],"The full guid on file structure , css naming convention , tailwind usage and , css classes naming convention . ","## Style Guide Documentation\r\n\r\nThis document outlines the style guide we follow to maintain consistency and readability in our codebase. These principles apply to both CSS and JavaScript/TypeScript components.\r\n\r\n---\r\n\r\n## **1. File Structure**\r\n\r\n- Use a clear and consistent folder structure.\r\n- Place CSS files for components inside the `assets/styles` folder, named according to the component (e.g., `result-products.css` for `ResultProducts` component).\r\n- Keep reusable styles in a `globals.css` file.\r\n\r\n---\r\n\r\n## **2. CSS Naming Convention**\r\n\r\n- Use `kebab-case` for CSS class names.\r\n  - Example: `card__image`, `container__card`\r\n- For component-specific styles, use the format:  \r\n  `componentName__element` (e.g., `card__image` for an image in the `Card` component).\r\n- Use utility classes from Tailwind CSS wherever possible for common properties (e.g., margins, padding, colors).\r\n\r\n---\r\n\r\n## **3. Tailwind CSS Usage**\r\n\r\n- **Use Tailwind utilities for common tasks** like spacing, typography, and colors:\r\n\r\n  - Example:\r\n\r\n    ```html\r\n    \u003Cdiv class=\"rounded-lg bg-white p-4 text-gray-800\">\u003C/div>\r\n    ```\r\n\r\n- **Avoid redundancy:** Don't add CSS rules for properties already provided by Tailwind classes.\r\n- Create custom styles only when:\r\n  - Tailwind utilities cannot achieve the desired layout or behavior.\r\n  - Styles are specific to a particular component.\r\n\r\n---\r\n\r\n## **4. Component-Specific CSS**\r\n\r\n- For each React component, create a corresponding CSS file if it requires custom styles.\r\n- **CSS file naming**: Use the same name as the component, in lowercase and hyphen-separated.\r\n  - Example:\r\n    - Component: `ResultProducts.tsx`\r\n    - CSS File: `result-products.css`\r\n- Limit the use of global styles to prevent style conflicts.\r\n\r\n---\r\n\r\n## **5. Naming Variables & Functions**\r\n\r\n- Use `camelCase` for variables, functions, and methods.\r\n  - Example: `filterItemsByRating`, `sortItems`\r\n- Use `PascalCase` for React components and TypeScript interfaces/types.\r\n  - Example: `ResultProducts`, `ProductProps`\r\n- Use `UPPER_SNAKE_CASE` for constants.\r\n  - Example: `BASE_IMAGE_PATH`\r\n\r\n---\r\n\r\n## **7. JSX Structure**\r\n\r\n- **Keep JSX clean and readable:**\r\n  - Use meaningful class names.\r\n  - Avoid inline styles unless absolutely necessary.\r\n- Wrap component logic (e.g., filtering, sorting) in separate functions for clarity.\r\n\r\n### **12. Example: Component and CSS Pair**\r\n\r\n#### React Component (`ResultProducts.tsx`)\r\n\r\n```tsx\r\n\u003Cdiv className=\"container__card\">\r\n  \u003CCardBase className=\"card__base\">\r\n    \u003Cimg className=\"card__image\" src={imageSrc} alt=\"Product Image\" />\r\n    \u003CCardContent>\r\n      \u003CCardTitle className=\"card__content\">Product Name\u003C/CardTitle>\r\n    \u003C/CardContent>\r\n  \u003C/CardBase>\r\n\u003C/div>\r\n```\r\n\r\n#### CSS File (`result-products.css`)\r\n\r\n```css\r\n.container__card {\r\n  @apply rounded-lg border bg-white p-4 shadow-md;\r\n}\r\n\r\n.card__base {\r\n  @apply flex flex-col items-center;\r\n}\r\n\r\n.card__image {\r\n  @apply h-40 w-full rounded-md object-cover;\r\n}\r\n\r\n.card__content {\r\n  @apply text-lg font-semibold text-gray-800;\r\n}\r\n```","src/content/blog/style-guide.md","94e22f51342f6959",{"html":132,"metadata":133},"\u003Ch2 id=\"style-guide-documentation\">Style Guide Documentation\u003C/h2>\n\u003Cp>This document outlines the style guide we follow to maintain consistency and readability in our codebase. These principles apply to both CSS and JavaScript/TypeScript components.\u003C/p>\n\u003Chr>\n\u003Ch2 id=\"1-file-structure\">\u003Cstrong>1. File Structure\u003C/strong>\u003C/h2>\n\u003Cul>\n\u003Cli>Use a clear and consistent folder structure.\u003C/li>\n\u003Cli>Place CSS files for components inside the \u003Ccode>assets/styles\u003C/code> folder, named according to the component (e.g., \u003Ccode>result-products.css\u003C/code> for \u003Ccode>ResultProducts\u003C/code> component).\u003C/li>\n\u003Cli>Keep reusable styles in a \u003Ccode>globals.css\u003C/code> file.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"2-css-naming-convention\">\u003Cstrong>2. CSS Naming Convention\u003C/strong>\u003C/h2>\n\u003Cul>\n\u003Cli>Use \u003Ccode>kebab-case\u003C/code> for CSS class names.\n\u003Cul>\n\u003Cli>Example: \u003Ccode>card__image\u003C/code>, \u003Ccode>container__card\u003C/code>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>For component-specific styles, use the format:\u003Cbr>\n\u003Ccode>componentName__element\u003C/code> (e.g., \u003Ccode>card__image\u003C/code> for an image in the \u003Ccode>Card\u003C/code> component).\u003C/li>\n\u003Cli>Use utility classes from Tailwind CSS wherever possible for common properties (e.g., margins, padding, colors).\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"3-tailwind-css-usage\">\u003Cstrong>3. Tailwind CSS Usage\u003C/strong>\u003C/h2>\n\u003Cul>\n\u003Cli>\n\u003Cp>\u003Cstrong>Use Tailwind utilities for common tasks\u003C/strong> like spacing, typography, and colors:\u003C/p>\n\u003Cul>\n\u003Cli>\n\u003Cp>Example:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">div\u003C/span>\u003Cspan style=\"color:#B392F0\"> class\u003C/span>\u003Cspan style=\"color:#E1E4E8\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"rounded-lg bg-white p-4 text-gray-800\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">></\u003C/span>\u003Cspan style=\"color:#85E89D\">div\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>Avoid redundancy:\u003C/strong> Don’t add CSS rules for properties already provided by Tailwind classes.\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>Create custom styles only when:\u003C/p>\n\u003Cul>\n\u003Cli>Tailwind utilities cannot achieve the desired layout or behavior.\u003C/li>\n\u003Cli>Styles are specific to a particular component.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"4-component-specific-css\">\u003Cstrong>4. Component-Specific CSS\u003C/strong>\u003C/h2>\n\u003Cul>\n\u003Cli>For each React component, create a corresponding CSS file if it requires custom styles.\u003C/li>\n\u003Cli>\u003Cstrong>CSS file naming\u003C/strong>: Use the same name as the component, in lowercase and hyphen-separated.\n\u003Cul>\n\u003Cli>Example:\n\u003Cul>\n\u003Cli>Component: \u003Ccode>ResultProducts.tsx\u003C/code>\u003C/li>\n\u003Cli>CSS File: \u003Ccode>result-products.css\u003C/code>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>Limit the use of global styles to prevent style conflicts.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"5-naming-variables--functions\">\u003Cstrong>5. Naming Variables & Functions\u003C/strong>\u003C/h2>\n\u003Cul>\n\u003Cli>Use \u003Ccode>camelCase\u003C/code> for variables, functions, and methods.\n\u003Cul>\n\u003Cli>Example: \u003Ccode>filterItemsByRating\u003C/code>, \u003Ccode>sortItems\u003C/code>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>Use \u003Ccode>PascalCase\u003C/code> for React components and TypeScript interfaces/types.\n\u003Cul>\n\u003Cli>Example: \u003Ccode>ResultProducts\u003C/code>, \u003Ccode>ProductProps\u003C/code>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>Use \u003Ccode>UPPER_SNAKE_CASE\u003C/code> for constants.\n\u003Cul>\n\u003Cli>Example: \u003Ccode>BASE_IMAGE_PATH\u003C/code>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2 id=\"7-jsx-structure\">\u003Cstrong>7. JSX Structure\u003C/strong>\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Keep JSX clean and readable:\u003C/strong>\n\u003Cul>\n\u003Cli>Use meaningful class names.\u003C/li>\n\u003Cli>Avoid inline styles unless absolutely necessary.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>Wrap component logic (e.g., filtering, sorting) in separate functions for clarity.\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"12-example-component-and-css-pair\">\u003Cstrong>12. Example: Component and CSS Pair\u003C/strong>\u003C/h3>\n\u003Ch4 id=\"react-component-resultproductstsx\">React Component (\u003Ccode>ResultProducts.tsx\u003C/code>)\u003C/h4>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"tsx\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"><\u003C/span>\u003Cspan style=\"color:#85E89D\">div\u003C/span>\u003Cspan style=\"color:#B392F0\"> className\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"container__card\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  <\u003C/span>\u003Cspan style=\"color:#79B8FF\">CardBase\u003C/span>\u003Cspan style=\"color:#B392F0\"> className\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"card__base\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C/span>\u003Cspan style=\"color:#85E89D\">img\u003C/span>\u003Cspan style=\"color:#B392F0\"> className\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"card__image\"\u003C/span>\u003Cspan style=\"color:#B392F0\"> src\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#E1E4E8\">{imageSrc} \u003C/span>\u003Cspan style=\"color:#B392F0\">alt\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"Product Image\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    <\u003C/span>\u003Cspan style=\"color:#79B8FF\">CardContent\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">      <\u003C/span>\u003Cspan style=\"color:#79B8FF\">CardTitle\u003C/span>\u003Cspan style=\"color:#B392F0\"> className\u003C/span>\u003Cspan style=\"color:#F97583\">=\u003C/span>\u003Cspan style=\"color:#9ECBFF\">\"card__content\"\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>Product Name</\u003C/span>\u003Cspan style=\"color:#79B8FF\">CardTitle\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    </\u003C/span>\u003Cspan style=\"color:#79B8FF\">CardContent\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  </\u003C/span>\u003Cspan style=\"color:#79B8FF\">CardBase\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\"></\u003C/span>\u003Cspan style=\"color:#85E89D\">div\u003C/span>\u003Cspan style=\"color:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch4 id=\"css-file-result-productscss\">CSS File (\u003Ccode>result-products.css\u003C/code>)\u003C/h4>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">.container__card\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  @\u003C/span>\u003Cspan style=\"color:#79B8FF\">apply\u003C/span>\u003Cspan style=\"color:#79B8FF\"> rounded-lg\u003C/span>\u003Cspan style=\"color:#79B8FF\"> border\u003C/span>\u003Cspan style=\"color:#79B8FF\"> bg-white\u003C/span>\u003Cspan style=\"color:#79B8FF\"> p-\u003C/span>\u003Cspan style=\"color:#E1E4E8\">4 \u003C/span>\u003Cspan style=\"color:#79B8FF\">shadow-md\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">.card__base\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  @\u003C/span>\u003Cspan style=\"color:#79B8FF\">apply\u003C/span>\u003Cspan style=\"color:#79B8FF\"> flex\u003C/span>\u003Cspan style=\"color:#79B8FF\"> flex-col\u003C/span>\u003Cspan style=\"color:#79B8FF\"> items-center\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">.card__image\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  @\u003C/span>\u003Cspan style=\"color:#79B8FF\">apply\u003C/span>\u003Cspan style=\"color:#79B8FF\"> h-\u003C/span>\u003Cspan style=\"color:#E1E4E8\">40 \u003C/span>\u003Cspan style=\"color:#79B8FF\">w-full\u003C/span>\u003Cspan style=\"color:#79B8FF\"> rounded-md\u003C/span>\u003Cspan style=\"color:#79B8FF\"> object-cover\u003C/span>\u003Cspan style=\"color:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">.card__content\u003C/span>\u003Cspan style=\"color:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  @\u003C/span>\u003Cspan style=\"color:#79B8FF\">apply\u003C/span>\u003Cspan style=\"color:#79B8FF\"> text-lg\u003C/span>\u003Cspan style=\"color:#79B8FF\"> font-semibold\u003C/span>\u003Cspan style=\"color:#79B8FF\"> text-gray-\u003C/span>\u003Cspan style=\"color:#E1E4E8\">800;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>",{"headings":134,"imagePaths":165,"frontmatter":166},[135,138,141,144,147,150,153,156,159,162],{"depth":24,"slug":136,"text":137},"style-guide-documentation","Style Guide Documentation",{"depth":24,"slug":139,"text":140},"1-file-structure","1. File Structure",{"depth":24,"slug":142,"text":143},"2-css-naming-convention","2. CSS Naming Convention",{"depth":24,"slug":145,"text":146},"3-tailwind-css-usage","3. Tailwind CSS Usage",{"depth":24,"slug":148,"text":149},"4-component-specific-css","4. Component-Specific CSS",{"depth":24,"slug":151,"text":152},"5-naming-variables--functions","5. Naming Variables & Functions",{"depth":24,"slug":154,"text":155},"7-jsx-structure","7. JSX Structure",{"depth":31,"slug":157,"text":158},"12-example-component-and-css-pair","12. Example: Component and CSS Pair",{"depth":70,"slug":160,"text":161},"react-component-resultproductstsx","React Component (ResultProducts.tsx)",{"depth":70,"slug":163,"text":164},"css-file-result-productscss","CSS File (result-products.css)",[],{"title":124,"description":127,"publishDate":167},"26 December 2024"]
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 724f2746..9d8f6dd5 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,6 @@ The format is based on Keep a Changelog and this project adheres to Semantic Ver
 
 Created Repo from template
 
-
 ### [Unreleased]
 
 Here we write upgrading notes for brands. It's a team effort to make them as straightforward as possible.
diff --git a/abcd.code-workspace b/abcd.code-workspace
index 0d8bf4f0..c5c31082 100644
--- a/abcd.code-workspace
+++ b/abcd.code-workspace
@@ -73,25 +73,9 @@
       "javascript": "javascriptreact"
     },
     "eslint.options": {
-      "extensions": [
-        ".js",
-        ".jsx",
-        ".md",
-        ".mdx",
-        ".ts",
-        ".tsx",
-        ".astro"
-      ]
+      "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx", ".astro"]
     },
-    "eslint.validate": [
-      "mdx",
-      "markdown",
-      "javascript",
-      "javascriptreact",
-      "typescript",
-      "typescriptreact",
-      "astro"
-    ],
+    "eslint.validate": ["mdx", "markdown", "javascript", "javascriptreact", "typescript", "typescriptreact", "astro"],
     "explorer.compactFolders": false,
     "explorer.confirmDelete": false,
     "explorer.confirmDragAndDrop": false,
@@ -119,10 +103,7 @@
     },
     "git.autofetch": true,
     "git.branchPrefix": "feature/",
-    "git.branchProtection": [
-      "develop",
-      "main"
-    ],
+    "git.branchProtection": ["develop", "main"],
     "git.branchRandomName.enable": true,
     "git.confirmSync": false,
     "git.enableCommitSigning": false,
@@ -133,9 +114,7 @@
     "js/ts.implicitProjectConfig.checkJs": true,
     "peacock.affectSideBarBorder": true,
     "peacock.color": "#abcd00",
-    "prettier.documentSelectors": [
-      "**/*.astro"
-    ],
+    "prettier.documentSelectors": ["**/*.astro"],
     "prettier.printWidth": 120,
     "prettier.quoteProps": "consistent",
     "prettier.singleQuote": false,
@@ -155,6 +134,19 @@
     "window.autoDetectColorScheme": true,
     "window.title": "${rootNameShort}${separator}${activeEditorShort}${separator}${activeFolderMedium}",
     "window.zoomLevel": 0.5,
+    "workbench.colorTheme": "Tokyo Night Storm",
+    "workbench.editor.pinnedTabSizing": "compact",
+    "workbench.editor.pinnedTabsOnSeparateRow": true,
+    "workbench.editorAssociations": {
+      "*.log": "default"
+    },
+    "zenMode.centerLayout": false,
+    "cSpell.words": [],
+    "workbench.editor.limit.excludeDirty": true,
+    "files.readonlyInclude": {
+      ".githooks/**": true,
+      ".github/**": true
+    },
     "workbench.colorCustomizations": {
       "activityBar.activeBackground": "#d5ff01",
       "activityBar.background": "#d5ff01",
@@ -173,21 +165,7 @@
       "titleBar.activeBackground": "#abcd00",
       "titleBar.activeForeground": "#15202b",
       "titleBar.inactiveBackground": "#abcd0099",
-      "titleBar.inactiveForeground": "#15202b99",
-      "tab.activeBorder": "#d5ff01"
-    },
-    "workbench.colorTheme": "Tokyo Night Storm",
-    "workbench.editor.pinnedTabSizing": "compact",
-    "workbench.editor.pinnedTabsOnSeparateRow": true,
-    "workbench.editorAssociations": {
-      "*.log": "default"
-    },
-    "zenMode.centerLayout": false,
-    "cSpell.words": [],
-    "workbench.editor.limit.excludeDirty": true,
-    "files.readonlyInclude": {
-      ".githooks/**": true,
-      ".github/**": true
+      "titleBar.inactiveForeground": "#15202b99"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/components.json b/components.json
index fd741b6a..1ef1e1db 100644
--- a/components.json
+++ b/components.json
@@ -14,4 +14,4 @@
     "components": "components",
     "utils": "utils"
   }
-}
\ No newline at end of file
+}
diff --git a/public/fonts/Boisu-Stroke.otf b/public/fonts/Boisu-Stroke.otf
new file mode 100644
index 00000000..71b9051d
Binary files /dev/null and b/public/fonts/Boisu-Stroke.otf differ
diff --git a/public/fonts/BungeeSpice-Regular.ttf b/public/fonts/BungeeSpice-Regular.ttf
new file mode 100644
index 00000000..4266a1eb
Binary files /dev/null and b/public/fonts/BungeeSpice-Regular.ttf differ
diff --git a/public/fonts/Mudra_Mohta-Regular.woff b/public/fonts/Mudra_Mohta-Regular.woff
new file mode 100644
index 00000000..df7fa911
Binary files /dev/null and b/public/fonts/Mudra_Mohta-Regular.woff differ
diff --git a/public/fonts/Mudra_Mohta-Regular.woff2 b/public/fonts/Mudra_Mohta-Regular.woff2
new file mode 100644
index 00000000..407ffd58
Binary files /dev/null and b/public/fonts/Mudra_Mohta-Regular.woff2 differ
diff --git a/public/fonts/Roboto-Bold.ttf b/public/fonts/Roboto-Bold.ttf
new file mode 100644
index 00000000..43da14d8
Binary files /dev/null and b/public/fonts/Roboto-Bold.ttf differ
diff --git a/public/fonts/atkinson-hyperlegible-regular-102-webfont.woff b/public/fonts/atkinson-hyperlegible-regular-102-webfont.woff
new file mode 100644
index 00000000..27ccc7e0
Binary files /dev/null and b/public/fonts/atkinson-hyperlegible-regular-102-webfont.woff differ
diff --git a/public/fonts/atkinson-hyperlegible-regular-102-webfont.woff2 b/public/fonts/atkinson-hyperlegible-regular-102-webfont.woff2
new file mode 100644
index 00000000..ddd76f2d
Binary files /dev/null and b/public/fonts/atkinson-hyperlegible-regular-102-webfont.woff2 differ
diff --git a/public/fonts/open-sans-v15-latin-ext_latin-700.woff b/public/fonts/open-sans-v15-latin-ext_latin-700.woff
new file mode 100644
index 00000000..30b4c3fb
Binary files /dev/null and b/public/fonts/open-sans-v15-latin-ext_latin-700.woff differ
diff --git a/public/fonts/sportrop-webfont.woff b/public/fonts/sportrop-webfont.woff
new file mode 100644
index 00000000..3c515c1c
Binary files /dev/null and b/public/fonts/sportrop-webfont.woff differ
diff --git a/public/fonts/sportrop-webfont.woff2 b/public/fonts/sportrop-webfont.woff2
new file mode 100644
index 00000000..137d254c
Binary files /dev/null and b/public/fonts/sportrop-webfont.woff2 differ
diff --git a/public/sitemap-index.html b/public/sitemap-index.html
index 03744d4c..c8d37b5c 100644
--- a/public/sitemap-index.html
+++ b/public/sitemap-index.html
@@ -3,4 +3,4 @@
   <sitemap>
     <loc>https://www.parixan.xyz/sitemap2.xml.gz</loc>
   </sitemap>
-</sitemapindex>
\ No newline at end of file
+</sitemapindex>
diff --git a/src/assets/styles/about.css b/src/assets/styles/about.css
new file mode 100644
index 00000000..6f341303
--- /dev/null
+++ b/src/assets/styles/about.css
@@ -0,0 +1,14 @@
+@import url("./common.css");
+
+.about-main {
+  display: block;
+}
+
+.container__about {
+  padding: 1rem;
+
+  > .moto {
+    color: #3a8657;
+    font-size: 3rem;
+  }
+}
diff --git a/src/assets/styles/alphabet.css b/src/assets/styles/alphabet.css
new file mode 100644
index 00000000..b5948ae3
--- /dev/null
+++ b/src/assets/styles/alphabet.css
@@ -0,0 +1,56 @@
+.container__alphabet {
+  display: grid;
+  grid-gap: 4px;
+  container-type: inline-size;
+  container-name: layout;
+  font-family: "atkinson";
+}
+
+.list {
+  display: grid;
+  grid-gap: 4px;
+  grid-template-columns: repeat(5, 1fr);
+  margin-block: 1rem;
+}
+
+.letter {
+  display: grid;
+  grid-auto-flow: row;
+  justify-items: center;
+  align-content: center;
+  color: var(--text, grey);
+  border: 2px solid var(--bc);
+  border-radius: 0.5rem;
+  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
+  padding: 0.5rem;
+  height: fit-content;
+
+  & p {
+    font-size: clamp(1.5rem, 5vw, 5rem);
+    text-align: center;
+    width: 100%;
+  }
+
+  & .code {
+    cursor: pointer;
+    font-size: small;
+  }
+
+  ::selection {
+    color: red;
+    background-color: yellow;
+    text-shadow: 5px 5px #558abb;
+  }
+}
+
+@container layout (width <=768px) {
+  .list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .letter {
+    background-color: white;
+    color: black;
+    font-size: max(1.5em, 1.23em + 2cqi);
+  }
+}
diff --git a/src/assets/styles/card.css b/src/assets/styles/card.css
index 254d778c..daf999ae 100644
--- a/src/assets/styles/card.css
+++ b/src/assets/styles/card.css
@@ -2,22 +2,23 @@
   list-style: none;
   display: flex;
   padding: 1px;
-  background-color: #23262d;
-  background-image: none;
+  background: var(--background);
   background-size: 400%;
-  border-radius: 7px;
+  border-radius: 0.75rem;
   background-position: 100%;
-  transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  transition: all 0.2s;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--border);
+  overflow: hidden;
 }
 
 .link-card > a {
   width: 100%;
   text-decoration: none;
   line-height: 1.4;
-  padding: calc(1.5rem - 1px);
+  padding: 1.5rem;
   border-radius: 8px;
-  color: white;
+  color: var(--text);
   background-color: #23262d;
   opacity: 0.8;
 }
@@ -26,16 +27,25 @@ h2 {
   margin: 0;
   font-size: 1.25rem;
   transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--primary);
 }
 
 p {
   margin-top: 0.5rem;
   margin-bottom: 0;
+  color: var(--secondary);
+  font-size: 0.875rem;
+  line-height: 1.5;
 }
 
 .link-card:is(:hover, :focus-within) {
   background-position: 0;
   background-image: var(--accent-gradient);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 15%, transparent);
+  border-color: var(--primary-light);
 }
 
 .link-card:is(:hover, :focus-within) h2 {
diff --git a/src/assets/styles/common.css b/src/assets/styles/common.css
new file mode 100644
index 00000000..579bd2ce
--- /dev/null
+++ b/src/assets/styles/common.css
@@ -0,0 +1,5 @@
+.hint {
+  padding: 1rem;
+  outline: 1px solid grey;
+  cursor: pointer;
+}
diff --git a/src/assets/styles/custom-font.css b/src/assets/styles/custom-font.css
deleted file mode 100644
index 51fd0856..00000000
--- a/src/assets/styles/custom-font.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/* src/styles/custom-font.css */
-@font-face {
-  font-family: "Mudra";
-  src: url("/assets/fonts/MudraMohta-Regular.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
diff --git a/src/assets/styles/custom-fonts.css b/src/assets/styles/custom-fonts.css
new file mode 100644
index 00000000..9695d3a4
--- /dev/null
+++ b/src/assets/styles/custom-fonts.css
@@ -0,0 +1,45 @@
+/* src/styles/custom-font.css */
+@supports font-format(woff2) {
+  @font-face {
+    font-family: "sportrop";
+    src:
+      url("/fonts/sportrop-webfont.woff2") format("woff2"),
+      url("/fonts/sportrop-webfont.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "atkinson";
+    src:
+      url("/fonts/atkinson-hyperlegible-regular-102-webfont.woff2") format("woff2"),
+      url("/fonts/atkinson-hyperlegible-regular-102-webfont.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Mudra";
+    src: url("/fonts/MudraMohta-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+  }
+}
+
+@font-face {
+  font-family: "boisuStroke";
+  src: url("/fonts/Boisu-Stroke.otf") format("otf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-Bold.ttf") format("ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
diff --git a/src/assets/styles/dialog.css b/src/assets/styles/dialog.css
new file mode 100644
index 00000000..be19990a
--- /dev/null
+++ b/src/assets/styles/dialog.css
@@ -0,0 +1,100 @@
+/* following :root block added by css color collector at 10/17/2024, 9:01:47 PM */
+:root {
+  --dialog__bg--1: rgb(0 0 0 / 0%);
+  --dialog__bg--2: rgb(0 0 0 / 25%);
+}
+
+.help-dialog {
+  padding: 1.5rem;
+  border-radius: 8px;
+  border: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  max-width: 400px;
+  width: 90%;
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.dialog-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.dialog-header button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dialog-header button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.dialog-content {
+  line-height: 1.5;
+}
+
+dialog[open] {
+  opacity: 1;
+  transform: scaleY(1);
+}
+
+/*   Closed state of the dialog   */
+dialog {
+  opacity: 0;
+  transform: scaleY(0);
+  transition:
+    opacity 0.7s ease-out,
+    transform 0.7s ease-out,
+    overlay 0.7s ease-out allow-discrete,
+    display 0.7s ease-out allow-discrete;
+  /* Equivalent to
+  transition: all 0.7s allow-discrete; */
+}
+
+/*   Before-open state  */
+/* Needs to be after the previous dialog[open] rule to take effect,
+    as the specificity is the same */
+@starting-style {
+  dialog[open] {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+}
+
+/* Transition the :backdrop when the dialog modal is promoted to the top layer */
+dialog::backdrop {
+  background-color: var(--dialog__bg--1);
+  transition:
+    display 0.7s allow-discrete,
+    overlay 0.7s allow-discrete,
+    background-color 0.7s;
+  /* Equivalent to
+  transition: all 0.7s allow-discrete; */
+}
+
+dialog[open]::backdrop {
+  background-color: var(--dialog__bg--2);
+}
+
+/* This starting-style rule cannot be nested inside the above selector
+because the nesting selector cannot represent pseudo-elements. */
+
+@starting-style {
+  dialog[open]::backdrop {
+    background-color: var(--dialog__bg--1);
+  }
+}
diff --git a/src/assets/styles/footer.css b/src/assets/styles/footer.css
index 001a7b41..c7bd7a2d 100644
--- a/src/assets/styles/footer.css
+++ b/src/assets/styles/footer.css
@@ -1,10 +1,12 @@
 .container__footer {
-  @apply h-auto w-auto;
+  @apply w-full;
   border-top: 2px solid;
+  padding: 2rem 0;
+  margin-top: 2rem;
 }
 
 .footer__nav {
-  @apply flex flex-col items-center justify-center gap-3 text-gray-700 underline underline-offset-2 dark:text-gray-500;
+  @apply flex flex-col items-center justify-center gap-3 text-gray-700 underline underline-offset-2 dark:text-gray-500 md:flex-row;
 }
 
 .footer__nav--item {
diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css
index 1c8e10a9..f9177376 100644
--- a/src/assets/styles/globals.css
+++ b/src/assets/styles/globals.css
@@ -1,22 +1,43 @@
-@import "./custom-font.css";
+@import "./custom-fonts.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   :root {
-    --font-size-min: 16;
-    --font-size-max: 20;
-    --font-ratio-min: 1.2;
-    --font-ratio-max: 1.33;
-    --font-width-min: 375;
-    --font-width-max: 1500;
+    --primary: #3b82f6;
+    --primary-light: #60a5fa;
+    --secondary: #94a3b8;
+    --background: #0f172a;
+    --text: #f1f5f9;
+    --border: #1e293b;
+
+    --header-h: 4rem;
+    --footer-h: 4rem;
+    --sidebar-w: 16rem;
+  }
+
+  [data-theme="dark"] {
+    --primary: #3b82f6;
+    --primary-light: #60a5fa;
+    --secondary: #94a3b8;
+    --background: #0f172a;
+    --text: #f1f5f9;
+    --border: #1e293b;
+  }
+
+  [data-theme="light"] {
+    --primary: #2563eb;
+    --primary-light: #3b82f6;
+    --secondary: #64748b;
+    --background: #ffffff;
+    --text: #0f172a;
+    --border: #e2e8f0;
   }
 
   html {
-    color-scheme: light dark;
+    color-scheme: dark light;
     height: 100%;
-    font-family: "Mudra";
   }
 
   [data-theme="light"] {
@@ -40,6 +61,9 @@
     min-height: 100vh;
     font-family: "Roboto", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif,
       system-ui;
+    font-size: 16px;
+    background-color: var(--background);
+    color: var(--text);
   }
 
   body::before {
@@ -62,12 +86,45 @@
     opacity: 1;
   }
 
+  .container {
+    display: grid;
+    grid-template-columns: var(--sidebar-w) 1fr;
+    grid-template-rows: var(--header-h) 1fr var(--footer-h);
+    min-height: 100vh;
+  }
+
+  header {
+    grid-area: header;
+    height: var(--header-h);
+    border: 1px solid pink;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-inline: 1rem;
+  }
+
+  a {
+    color: light-dark(#151414, white);
+  }
+
+  h1 {
+    font-size: 3rem;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    font-family: Roboto;
+  }
+
   main {
     display: grid;
     gap: 4px;
     grid-template-columns: 20rem 1fr;
     grid-auto-flow: column;
     grid-template-areas: "sidebar content";
+    padding: 2rem;
+    background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
+    font-size: 1.25rem;
+    line-height: 1.6;
 
     &.sidebar {
       grid-area: sidebar;
@@ -78,6 +135,15 @@
     }
   }
 
+  footer {
+    grid-area: footer;
+    padding-inline: 1rem;
+    margin-block: 0.5rem;
+    height: var(--footer-h);
+    display: flex;
+    align-items: center;
+  }
+
   @container thread (max-width: 768px) {
     main {
       grid-template-areas: "content";
diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css
index 8429cff0..0c0ad156 100644
--- a/src/assets/styles/header.css
+++ b/src/assets/styles/header.css
@@ -1,21 +1,61 @@
-.container__header {
-  @apply flex h-16 items-center justify-between gap-5 p-4;
-  border-bottom: 2px solid;
+@import url(./globals.css);
 
-  & .header__brand {
-    @apply flex flex-row items-center justify-between gap-2;
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  background-color: var(--background);
+  border-bottom: 1px solid var(--border);
+  height: var(--header-h);
+  padding: 0 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 
-    & .logo {
-      width: 3rem;
-      aspect-ratio: 1;
+  .header__brand {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+
+    .logo {
+      width: 2rem;
+      height: 2rem;
     }
 
-    & span {
-      @apply text-xl font-bold;
+    span {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--primary);
     }
   }
 
-  & .header__nav {
-    @apply flex items-center gap-5 text-[1rem] font-bold underline underline-offset-2;
+  .caption {
+    text-align: center;
+
+    h1 {
+      font-size: 1.25rem;
+      font-weight: 500;
+      margin: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
+
+  .action-group {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}
+
+.switch {
+  background-color: black;
+  height: 2rem;
+  width: 2rem;
+  border-radius: 50%;
+  cursor: pointer;
 }
diff --git a/src/assets/styles/letter.css b/src/assets/styles/letter.css
deleted file mode 100644
index 295133d6..00000000
--- a/src/assets/styles/letter.css
+++ /dev/null
@@ -1,82 +0,0 @@
-.controls {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: rgba(255, 255, 255, 0.95);
-  padding: 1rem;
-  z-index: 100;
-  display: flex;
-  justify-content: space-around;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-
-.control-group {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.control-group label {
-  font-weight: bold;
-}
-
-select,
-button {
-  padding: 0.5rem;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-}
-
-button {
-  cursor: pointer;
-  background: #fff;
-  transition: background-color 0.3s;
-}
-
-button:hover {
-  background: #f0f0f0;
-}
-
-.letter-container {
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-top: 60px;
-}
-
-.big-letter {
-  font-size: 56svmin;
-  font-weight: bold;
-  transition: all 0.3s;
-}
-
-.meaning-section {
-  padding: 2rem;
-  background: white;
-  margin-top: 2rem;
-}
-
-.meaning-content {
-  max-width: 800px;
-  margin: 0 auto;
-  line-height: 1.6;
-}
-
-/* Gradient backgrounds */
-.bg-gradient1 {
-  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-}
-
-.bg-gradient2 {
-  background: linear-gradient(45deg, #a8e6cf, #dcedc1);
-}
-
-.bg-pattern1 {
-  background-image: repeating-linear-gradient(45deg,
-      rgba(0, 0, 0, 0.1) 0px,
-      rgba(0, 0, 0, 0.1) 2px,
-      transparent 2px,
-      transparent 4px);
-}
\ No newline at end of file
diff --git a/src/assets/styles/menu.css b/src/assets/styles/menu.css
index 0eb75660..20473619 100644
--- a/src/assets/styles/menu.css
+++ b/src/assets/styles/menu.css
@@ -35,6 +35,13 @@
     display: block;
   }
 
+  .nav--list__item.active a {
+    background: color-mix(in srgb, var(--primary) 15%, transparent);
+    color: var(--primary);
+    font-weight: 600;
+    border-radius: 0.75rem;
+  }
+
   .layout {
     position: relative;
     width: max-content;
@@ -47,18 +54,19 @@
     inset: unset;
     display: flex;
     flex-direction: column;
-    width: var(--sidebar-width);
+    width: var(--sidebar-w);
     margin: 0;
     flex-shrink: 0;
     right: 100%;
     top: var(--header-height);
     border: 0;
-    background: transparent;
+    background: var(--background);
     height: 100%;
-    padding: 0;
+    padding: 1rem 0;
     overflow: visible;
     height: calc(100svh - var(--header-height));
     position: sticky;
+    border-right: 1px solid var(--border);
   }
 
   main {
@@ -74,15 +82,25 @@
     font-weight: 600;
     display: flex;
     flex-direction: column;
+    gap: 0.5rem;
   }
 
   [popover] a {
     display: inline-block;
     width: 100%;
-    padding-block: 0.5rem;
+    padding-block: 0.75rem;
     padding-inline: 1rem;
     text-decoration: none;
-    color: inherit;
+    color: var(--secondary);
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-radius: 0.5rem;
+    transition: all 0.2s;
+  }
+
+  [popover] a:hover {
+    background: color-mix(in srgb, var(--primary) 10%, transparent);
+    color: var(--primary);
   }
 
   [popover] {
@@ -192,7 +210,6 @@
       border-radius: 12px 12px 0 0;
       outline: 1px solid color-mix(in hsl, canvas, canvasText 25%);
       translate: 0 100%;
-      position: sticky;
     }
 
     [data-placement="bottom"] [popover] {
@@ -323,6 +340,9 @@
     display: flex;
     gap: 0 0.25rem;
     padding-inline: 0.5rem;
+    padding: 1rem;
+    border-top: 1px solid var(--border);
+    margin-top: auto;
 
     button {
       width: 44px;
@@ -331,12 +351,14 @@
       padding: 0;
       place-items: center;
       border: 0;
-      color: red;
+      color: var(--secondary);
+      border-radius: 0.5rem;
+      transition: all 0.2s;
+    }
 
-      svg {
-        opacity: calc(0.625 + var(--active, 0));
-        width: 50%;
-      }
+    button:hover {
+      color: var(--primary);
+      background: color-mix(in srgb, var(--primary) 10%, transparent);
     }
   }
 
diff --git a/src/assets/styles/panel.css b/src/assets/styles/panel.css
new file mode 100644
index 00000000..10b18fc2
--- /dev/null
+++ b/src/assets/styles/panel.css
@@ -0,0 +1,272 @@
+/* following :root block added by css color collector */
+:root {
+  --main__bg--1: black;
+  --panel__options__bg__img--2: #77247d;
+  --panel__options__bg__img--3: #9ba69a;
+  --range__option__txt--4: whitesmoke;
+  --scene__border--5: #5d3a3a;
+  --panel__cell__txt--6: white;
+  --bg--7: hsla(191, 64%, 49%, 0.8);
+  --orientation__bg--8: hsla(31, 28%, 62%, 0.42);
+  --orientation__bg--9: hsla(80, 28%, 62%, 0.8);
+  --label__bg--10: hsla(100, 78%, 63%, 0.8);
+  --rotation: 0;
+  --color-max: 255;
+  --color-min: 0;
+  --color-mid: 170;
+  --ry: 0deg;
+  --y--rotation: 40;
+  --tz: 288px;
+}
+
+.panel-main {
+  display: grid;
+  grid-template-areas: "option" "panel";
+  grid-auto-flow: row;
+  grid-template-rows: 15% 1fr;
+  grid-gap: 0.8rem;
+  min-height: max-content;
+  background-color: var(--main__bg--1);
+  height: calc(100dvh - 10rem);
+  margin: 2rem;
+  overflow: hidden;
+}
+
+.panel__options {
+  grid-area: option;
+  display: grid;
+  grid-auto-flow: column;
+  align-content: center;
+  grid-template-columns: 30% 1fr 30%;
+  align-self: baseline;
+}
+
+.range__option {
+  color: var(--range__option__txt--4);
+}
+
+.scene {
+  grid-area: panel;
+  border: 1px solid var(--scene__border--5);
+  width: 15rem;
+  height: 10rem;
+  perspective: 1000px;
+  align-self: center;
+  justify-self: center;
+}
+
+.panel {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform 1s;
+}
+
+.panel__cell {
+  position: absolute;
+  height: 10rem;
+  width: 15rem;
+  left: 0;
+  top: 0;
+  border: 2px inset var(--main__bg--1);
+  line-height: 10rem;
+  font-size: 5rem;
+  font-weight: bold;
+  color: var(--panel__cell__txt--6);
+  text-align: center;
+  opacity: 1;
+  transition:
+    transform 1s,
+    opacity 1s;
+}
+
+.panel__cell:nth-child(10n + 1) {
+  background-color: rgba(var(--color-max), 0, var(--color-min), 0.8);
+}
+
+.panel__cell:nth-child(10n + 2) {
+  background-color: rgba(var(--color-max), var(--color-mid), 0, 0.8);
+}
+
+.panel__cell:nth-child(10n + 3) {
+  background-color: rgba(var(--color-mid), var(--color-max), 0, 0.8);
+}
+
+.panel__cell:nth-child(10n + 4) {
+  background-color: rgba(0, var(--color-max), 0, 0.8);
+}
+
+.panel__cell:nth-child(10n + 5) {
+  background-color: rgba(0, var(--color-max), var(--color-mid), 0.8);
+}
+
+.panel__cell:nth-child(10n + 6) {
+  background-color: rgba(0, var(--color-mid), var(--color-max), 0.8);
+}
+
+.panel__cell:nth-child(10n + 7) {
+  background-color: rgba(0, 0, var(--color-max), 0.8);
+}
+
+.panel__cell:nth-child(10n + 8) {
+  background-color: rgba(var(--color-mid), 0, var(--color-max), 0.8);
+}
+
+.panel__cell:nth-child(10n + 9) {
+  background-color: rgba(var(--color-max), 0, var(--color-mid), 0.8);
+}
+
+.panel__cell:nth-child(10n + 0) {
+  background-color: var(--bg--7);
+}
+
+.panel__cell:nth-child(1) {
+  --ry: var(--ry, 0deg);
+}
+
+.panel__cell:nth-child(2) {
+  --ry: 40deg;
+}
+
+.panel__cell:nth-child(3) {
+  --ry: 80deg;
+}
+
+.panel__cell:nth-child(4) {
+  --ry: 120deg;
+}
+
+.panel__cell:nth-child(5) {
+  --ry: 160deg;
+}
+
+.panel__cell:nth-child(6) {
+  --ry: 200deg;
+}
+
+.panel__cell:nth-child(7) {
+  --ry: 240deg;
+}
+
+.panel__cell:nth-child(8) {
+  --ry: 280deg;
+}
+
+.panel__cell:nth-child(9) {
+  --ry: 320deg;
+}
+
+.panel__cell:nth-child(10) {
+  --ry: 360deg;
+}
+
+/* radio buttons */
+
+.orientation__option {
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: center;
+  column-gap: 10px;
+}
+
+input[type="radio"] {
+  opacity: 0;
+  position: fixed;
+  width: 0;
+}
+
+label {
+  background-color: var(--orientation__bg--8);
+  color: var(--panel__cell__txt--6);
+  border-radius: 0.5rem;
+  transition: all 0.5s;
+  cursor: pointer;
+  font-size: x-large;
+  display: inline-block;
+  transform-origin: center;
+  transform-style: preserve-3d;
+  transform-box: view-box;
+  transition-delay: 2ms;
+}
+
+.horizontal {
+  transform: rotateZ(0deg);
+  width: 10rem;
+  height: 3rem;
+  justify-self: end;
+}
+
+.vertical {
+  transform: rotateZ(0deg);
+  height: 10rem;
+  width: 3rem;
+}
+
+label:hover {
+  background-color: var(--orientation__bg--9);
+}
+
+label:has(input[type="radio"]:checked) {
+  color: var(--panel__cell__txt--6);
+  background-color: var(--label__bg--10);
+}
+
+/* range slider */
+
+input[type="range"] {
+  overflow: hidden;
+  height: 40px;
+  border-radius: 1.2rem;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #ddd;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  height: 40px;
+  -webkit-appearance: none;
+  appearance: none;
+  color: #444;
+  -webkit-transition: box-shadow 0.2s ease-in-out;
+  transition: box-shadow 0.2s ease-in-out;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  width: 40px;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 40px;
+  cursor: ew-resize;
+  background: #fff;
+  box-shadow:
+    -340px 0 0 320px #1597ff,
+    inset 0 0 0 40px #1597ff;
+  border-radius: 50%;
+  -webkit-transition: box-shadow 0.2s ease-in-out;
+  transition: box-shadow 0.2s ease-in-out;
+  position: relative;
+}
+
+input[type="range"]:active::-webkit-slider-thumb {
+  background: #fff;
+  box-shadow:
+    -340px 0 0 320px #1597ff,
+    inset 0 0 0 3px #1597ff;
+}
+
+input[type="range"]::-moz-range-progress {
+  background-color: #43e5f7;
+}
+
+input[type="range"]::-moz-range-track {
+  background-color: #9a905d;
+}
+
+input[type="range"]::-ms-fill-lower {
+  background-color: #43e5f7;
+}
+
+input[type="range"]::-ms-fill-upper {
+  background-color: #9a905d;
+}
diff --git a/src/components/Alphabet.astro b/src/components/Alphabet.astro
new file mode 100644
index 00000000..56e61f7b
--- /dev/null
+++ b/src/components/Alphabet.astro
@@ -0,0 +1,19 @@
+---
+import "@/assets/styles/alphabet.css";
+import Letter from "@/components/Letter.astro";
+import { type LetterEntity } from "@/types";
+
+type Props = {
+  title: string;
+  list: LetterEntity[];
+};
+
+const { title, list } = Astro.props;
+---
+
+<div class="container__alphabet">
+  <h1>{title}</h1>
+  <div class="list">
+    {list.map((item) => <Letter item={item} />)}
+  </div>
+</div>
diff --git a/src/components/Help.astro b/src/components/Help.astro
new file mode 100644
index 00000000..2908148b
--- /dev/null
+++ b/src/components/Help.astro
@@ -0,0 +1,33 @@
+---
+import "@/assets/styles/dialog.css";
+
+interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<div id="hint" class="hint">❓</div>
+<dialog id="info" class="help-dialog">
+  <div class="dialog-header">
+    <h2>{title}</h2>
+    <button autofocus aria-label="Close dialog">×</button>
+  </div>
+  <div class="dialog-content">
+    <p>{description}</p>
+  </div>
+</dialog>
+
+<script>
+  const hint = document.querySelector("#hint");
+  const infoDialog = document.querySelector("dialog");
+  const btn = document.querySelector("dialog > div > button");
+  hint?.addEventListener("click", () => {
+    infoDialog?.showModal();
+  });
+  btn?.addEventListener("click", () => {
+    infoDialog?.close();
+  });
+</script>
diff --git a/src/components/Letter.astro b/src/components/Letter.astro
new file mode 100644
index 00000000..a01d01ab
--- /dev/null
+++ b/src/components/Letter.astro
@@ -0,0 +1,25 @@
+---
+import type { LetterEntity } from "@/types";
+
+type Props = {
+  item: LetterEntity;
+};
+
+const {
+  item: { letter, code }
+} = Astro.props;
+---
+
+<div class="letter">
+  <p>{letter}</p>
+  <p data-id="tgt" class="code">{code}</p>
+</div>
+
+<script>
+  const tgt = document.querySelectorAll("[data-id]");
+  tgt?.forEach((elm) =>
+    elm.addEventListener("click", (e: any) => {
+      console.log("Hello, on client", e?.target?.textContent);
+    })
+  );
+</script>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index f8bbc99b..337b7bd6 100755
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -7,19 +7,36 @@ import Menu from "@/layouts/common/Menu";
 import { siteConfig } from "@/site-config";
 
 const {
-  meta: { title, description = siteConfig.description, ogImage, articleDate }
+  meta: { title, description = siteConfig.description, ogImage, articleDate },
+  headerSlots
 } = Astro.props;
-
-
 ---
 
 <html lang={siteConfig.lang}>
   <head>
     <BaseHead title={title} description={description} ogImage={ogImage} date={articleDate} />
+    <style>
+      body {
+        min-height: 100vh;
+        margin: 0;
+      }
+      .main {
+        padding: 2rem;
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 1rem;
+      }
+      .content {
+        min-height: 100vh;
+      }
+    </style>
   </head>
   <body id="body" class="body__container">
     <ThemeProvider />
-    <Header />
+    <Header title={title}>
+      <slot name="header-left" slot="left" />
+      <slot name="header-right" slot="right" />
+    </Header>
     <main id="main" class="main">
       <div class="sidebar"><Menu /></div>
       <div class="content">
diff --git a/src/layouts/Navigation.astro b/src/layouts/Navigation.astro
index d0431117..6d215b30 100644
--- a/src/layouts/Navigation.astro
+++ b/src/layouts/Navigation.astro
@@ -7,6 +7,8 @@ interface Props {
 }
 
 const { pages } = Astro.props;
+
+const currentPath = Astro.url.pathname;
 ---
 
 <nav class="nav">
@@ -15,7 +17,7 @@ const { pages } = Astro.props;
       pages
         .filter((p) => p.isActive)
         .map((p) => (
-          <li class="nav--list__item">
+          <li class={`nav--list__item ${currentPath === p.path ? "active" : ""}`}>
             <Link href={p.path} name={p.name} />
           </li>
         ))
diff --git a/src/layouts/common/Header.astro b/src/layouts/common/Header.astro
index 3c514460..0a87871f 100755
--- a/src/layouts/common/Header.astro
+++ b/src/layouts/common/Header.astro
@@ -1,15 +1,57 @@
 ---
 import { Picture } from "astro:assets";
-
 import "@/assets/styles/header.css";
 import { APP_NAME } from "@/utils/constants";
 import logoImage from "/public/assets/images/logo.png";
+
+const { title, hasBack = true } = Astro.props;
 ---
 
-<div class="container__header">
+<header class="header">
   <div class="header__brand">
     <Picture src={logoImage} formats={["png", "webp"]} alt="template logo" class="logo" />
     <span title={APP_NAME}>{APP_NAME}</span>
   </div>
-  <!--<ThemeToggle />-->
-</div>
+
+  <div class="caption">
+    <h1>{title}</h1>
+  </div>
+
+  <div class="action-group">
+    <slot name="left">
+      {
+        hasBack && (
+          <a href="/" class="back">
+            Back
+          </a>
+        )
+      }
+    </slot>
+    <slot name="right" />
+  </div>
+</header>
+<div class="header-spacer"></div>
+
+<style>
+  .back {
+    color: var(--color-text);
+    text-decoration: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    background: rgba(255, 255, 255, 0.1);
+    transition: background 0.2s ease;
+  }
+
+  .back:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  :global(.action-group button),
+  :global(.action-group a) {
+    white-space: nowrap;
+  }
+
+  .header-spacer {
+    height: var(--header-h);
+  }
+</style>
diff --git a/src/pages/about.astro b/src/pages/about.astro
new file mode 100644
index 00000000..17eab2b4
--- /dev/null
+++ b/src/pages/about.astro
@@ -0,0 +1,26 @@
+---
+import "@/assets/styles/about.css";
+import Help from "@/components/Help.astro";
+import BaseLayout from "@/layouts/Base";
+---
+
+<BaseLayout meta={{ title: "About us" }}>
+  <Fragment slot="header-right">
+    <Help
+      title="Hide & Seek Game"
+      description="Press any alphabet key from keyboard and that letter will appears and when you press again then it will disappears. See some hover and active effects while hovering over each card."
+    />
+  </Fragment>
+
+  <main class="about-main">
+    <div class="container__about">
+      <section class="moto">
+        <p>This is my initial version to make interactive games for kids</p>
+        <p>
+          Inspiration behind these games are to take kids away from smartphone and close to keyboard which will help in
+          their future building also.
+        </p>
+      </section>
+    </div>
+  </main>
+</BaseLayout>
diff --git a/src/pages/career.astro b/src/pages/career.astro
deleted file mode 100644
index f2db261b..00000000
--- a/src/pages/career.astro
+++ /dev/null
@@ -1,8 +0,0 @@
----
-import BaseLayout from "@/layouts/Base";
-import TitleLayout from "@/layouts/TitleLayout";
----
-
-<BaseLayout meta={{ title: "career" }}>
-  <TitleLayout title="Career Page" />
-</BaseLayout>
diff --git a/src/pages/dashboard.astro b/src/pages/dashboard.astro
deleted file mode 100644
index ac884032..00000000
--- a/src/pages/dashboard.astro
+++ /dev/null
@@ -1,15 +0,0 @@
----
-import BaseLayout from "@/layouts/Base";
-import TitleLayout from "@/layouts/TitleLayout";
----
-
-<BaseLayout meta={{ title: "Dashboard" }}>
-  <div class="container__dashboard">
-    <TitleLayout title="Dashboard" />
-    <article>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae error repellendus quis iusto commodi
-      alias suscipit? Aliquam pariatur doloremque voluptas numquam. Rem itaque nobis voluptate voluptatem labore
-      repudiandae debitis.
-    </article>
-  </div>
-</BaseLayout>
diff --git a/src/pages/letter.astro b/src/pages/letter.astro
deleted file mode 100644
index 0b2994a9..00000000
--- a/src/pages/letter.astro
+++ /dev/null
@@ -1,139 +0,0 @@
----
-import "@/assets/styles/letter.css";
-import BaseLayout from "@/layouts/Base";
----
-
-<BaseLayout meta={{ title: "Interactive Letter" }}>
-  <div class="controls" id="controls">
-    <div class="control-group">
-      <label>Background:</label>
-      <select id="bgSelector">
-        <option value="none">None</option>
-        <option value="gradient1">Gradient 1</option>
-        <option value="gradient2">Gradient 2</option>
-        <option value="pattern1">Pattern 1</option>
-      </select>
-      <button id="toggleBg">Toggle Background</button>
-    </div>
-
-    <div class="control-group">
-      <label>Font:</label>
-      <select id="fontSelector">
-        <option value="Arial">Arial</option>
-        <option value="Georgia">Georgia</option>
-        <option value="Times New Roman">Times New Roman</option>
-      </select>
-      <input type="color" id="colorPicker" value="#000000" />
-    </div>
-
-    <div class="control-group">
-      <label>Sound:</label>
-      <select id="soundSelector">
-        <option value="sound1">Sound 1</option>
-        <option value="sound2">Sound 2</option>
-        <option value="sound3">Sound 3</option>
-      </select>
-      <button id="toggleSound">
-        <span class="icon">🔊</span>
-      </button>
-    </div>
-  </div>
-
-  <div class="letter-container" id="letterContainer">
-    <div class="big-letter" id="bigLetter">A</div>
-  </div>
-
-  <div class="meaning-section">
-    <h2>Meaning</h2>
-    <p>The letter 'A' stands for...</p>
-    <div class="meaning-content">
-      <p>• First letter of the English alphabet</p>
-      <p>• Represents excellence in grading systems</p>
-      <p>• Phonetically represents various sounds across languages</p>
-      <p>• Historical origins trace back to ancient Phoenician alphabet</p>
-      <!-- Add more meaning content as needed -->
-    </div>
-  </div>
-</BaseLayout>
-
-<script>
-  let isSoundEnabled = true;
-  let currentAudio = new Audio("/sounds/sound1.wav");
-
-  // DOM Elements
-  const controls = document.getElementById("controls") as HTMLElement;
-  const bigLetter = document.getElementById("bigLetter") as HTMLElement;
-  const letterContainer = document.getElementById("letterContainer") as HTMLElement;
-  const bgSelector = document.getElementById("bgSelector") as HTMLInputElement;
-  const fontSelector = document.getElementById("fontSelector") as HTMLInputElement;
-  const colorPicker = document.getElementById("colorPicker") as HTMLInputElement;
-  const soundSelector = document.getElementById("soundSelector") as HTMLInputElement;
-  const toggleSound = document.getElementById("toggleSound") as HTMLButtonElement;
-  const toggleBg = document.getElementById("toggleBg") as HTMLButtonElement;
-
-  // Event Listeners
-  document.addEventListener("keydown", handleKeyPress);
-  bgSelector?.addEventListener("change", updateBackground);
-  fontSelector?.addEventListener("change", updateFont);
-  colorPicker?.addEventListener("change", updateColor);
-  soundSelector?.addEventListener("change", updateSound);
-  toggleSound?.addEventListener("click", toggleSoundState);
-  toggleBg?.addEventListener("click", toggleBackground);
-
-  // Handle key press
-  function handleKeyPress(e: KeyboardEvent) {
-    if (e.key.toLowerCase() === "a") {
-      bigLetter.style.animation = "letterPop 0.3s ease-out";
-      if (isSoundEnabled) {
-        playSound();
-      }
-      setTimeout(() => {
-        bigLetter.style.animation = "";
-      }, 300);
-    }
-  }
-
-  // Update functions
-  function updateBackground() {
-    letterContainer.className = "letter-container";
-    if (bgSelector.value !== "none") {
-      letterContainer.classList.add(`bg-${bgSelector.value}`);
-    }
-  }
-
-  function updateFont() {
-    bigLetter.style.fontFamily = fontSelector.value;
-  }
-
-  function updateColor() {
-    bigLetter.style.color = colorPicker.value;
-  }
-
-  function updateSound() {
-    currentAudio = new Audio(`/sounds/${soundSelector.value}.wav`);
-  }
-
-  function toggleSoundState() {
-    isSoundEnabled = !isSoundEnabled;
-    (toggleSound as any).querySelector(".icon").textContent = isSoundEnabled ? "🔊" : "🔇";
-  }
-
-  function toggleBackground() {
-    letterContainer.classList.toggle("no-background");
-  }
-
-  function playSound() {
-    currentAudio.currentTime = 0;
-    currentAudio.play();
-  }
-
-  // Intersection Observer for sticky header
-  const observer = new IntersectionObserver(
-    ([e]) => {
-      controls.classList.toggle("sticky", e.intersectionRatio < 1);
-    },
-    { threshold: [1] }
-  );
-
-  observer.observe(controls);
-</script>
diff --git a/src/pages/panel.astro b/src/pages/panel.astro
new file mode 100644
index 00000000..4d2a81fa
--- /dev/null
+++ b/src/pages/panel.astro
@@ -0,0 +1,143 @@
+---
+import "@/assets/styles/panel.css";
+import BaseLayout from "@/layouts/Base";
+---
+
+<style is:inline>
+  .tv {
+    container-type: inline-size;
+    container-name: main;
+    border: 0.5rem outset pink;
+    outline: 0.5rem solid khaki;
+    box-shadow: 0 0 0 2rem skyblue;
+    border-radius: 12px;
+    font: bold 1rem sans-serif;
+    margin-block: 5rem;
+    margin-inline: 5rem;
+    padding: 1rem;
+    outline-offset: 0.5rem;
+  }
+</style>
+
+<BaseLayout meta={{ title: "Panel" }}>
+  <article class="tv panel-main">
+    <section class="scene">
+      <letter-panel>
+        <div class="panel" id="panel"></div>
+      </letter-panel>
+    </section>
+  </article>
+</BaseLayout>
+<script>
+  enum ArrowKeys {
+    LEFT = 37,
+    UP = 38,
+    RIGHT = 39,
+    DOWN = 40
+  }
+  // Define the behaviour for our new type of HTML element.
+  class LetterPanel extends HTMLElement {
+    #panel;
+    #orientation = "Y";
+    #selectedIndex = 0;
+    #radius = "0px";
+    #theta = 0;
+    #angle = "0deg";
+
+    constructor() {
+      super();
+      this.#panel = this.querySelector("#panel") as HTMLElement;
+      //this.checkPanel();
+      this.#emitEvent();
+    }
+
+    connectedCallback() {
+      this.buildPanel();
+      //this.changePanel(); // TODO: uncomment to see complete letter panel on load
+      this.rotatePanel({ by: "X" });
+    }
+
+    #emitEvent() {
+      document.addEventListener("keyup", (e: KeyboardEvent) => {
+        const { charCode, code, keyCode, key } = e;
+        console.log({ charCode, code, keyCode, key });
+        this.onKeyChange(keyCode);
+      });
+    }
+
+    doTheMath() {
+      const cellWidth = this.#panel.offsetWidth;
+      const cellCount = 26; //Number(cellRange.value);
+      const halfCell = cellWidth / 2;
+      const divideBy = Math.tan(Math.PI / cellCount);
+      this.#radius = Math.round(halfCell / divideBy) + "px";
+      this.#theta = 360 / cellCount;
+      this.#angle = this.#theta * this.#selectedIndex + "deg";
+    }
+
+    buildPanel(num = 26) {
+      const fragment = document.createDocumentFragment();
+      for (let i = 0; i < num; i++) {
+        const div = document.createElement("div");
+        div.classList.add("panel__cell");
+        div.textContent = String.fromCodePoint(65 + i); // A to Z
+        fragment.appendChild(div);
+      }
+      this.#panel.innerHTML = "";
+      this.#panel.appendChild(fragment);
+    }
+
+    changePanel() {
+      //this.buildPanel(cellCount);
+      const cells = document.querySelectorAll(".panel__cell") as unknown as HTMLElement[];
+      this.doTheMath();
+      cells.forEach((cell, i) => {
+        const cellAngle = this.#theta * i;
+        const transformString = `rotate${this.#orientation}(${cellAngle}deg) translateZ(${this.#radius})`;
+        cell.style.transform = transformString;
+      });
+      this.rotatePanel({ by: this.#orientation });
+    }
+
+    rotatePanel({ by = "X" }) {
+      this.doTheMath();
+      const transformString = `translateZ(-${this.#radius}) rotate${by}(${this.#angle})`;
+      this.#panel.style.transform = transformString;
+    }
+
+    onKeyChange(code: number) {
+      switch (code) {
+        case ArrowKeys.RIGHT: {
+          this.#selectedIndex++;
+          this.#orientation = "Y";
+          break;
+        }
+        case ArrowKeys.LEFT: {
+          this.#selectedIndex--;
+          this.#orientation = "Y";
+          break;
+        }
+        case ArrowKeys.UP: {
+          this.#selectedIndex++;
+          this.#orientation = "X";
+          break;
+        }
+        case ArrowKeys.DOWN: {
+          this.#selectedIndex--;
+          this.#orientation = "X";
+          break;
+        }
+        default: {
+          //if (isAlphabet(keyCode)) {
+          this.#selectedIndex = 65 - code;
+          //} else {
+          //  this.#selectedIndex--;
+          //}
+        }
+      }
+      this.changePanel();
+    }
+  }
+  // Tell the browser to use our LetterPanel class for <letter-panel> elements.
+  customElements.define("letter-panel", LetterPanel);
+</script>
diff --git a/src/pages/sample.astro b/src/pages/sample.astro
new file mode 100644
index 00000000..da5308b8
--- /dev/null
+++ b/src/pages/sample.astro
@@ -0,0 +1,61 @@
+---
+import "@/assets/styles/page.css";
+import Help from "@/components/Help.astro";
+import BaseLayout from "@/layouts/Base";
+---
+
+<BaseLayout meta={{ title: "Sample Page" }}>
+  <Fragment slot="header-left">
+    <button>Left 1</button>
+    <button>Left 2</button>
+  </Fragment>
+  <Fragment slot="header-right">
+    <button>Right 1</button>
+    <button>Right 2</button>
+    <button>Right 3</button>
+    <Help
+      title="Sample Page"
+      description="This is a sample page to demonstrate the layout and features available in the project."
+    />
+  </Fragment>
+
+  <main class="container__page">
+    <section>
+      <h2>Getting Started</h2>
+      <p>Welcome to your new page! This is a sample layout following the project's style guidelines.</p>
+
+      <h3>Features Available</h3>
+      <ul>
+        <li>
+          <p>Header component with customizable title</p>
+        </li>
+        <li>
+          <p>Responsive layout with container classes</p>
+        </li>
+        <li>
+          <p>Built-in styling CSS</p>
+        </li>
+      </ul>
+    </section>
+
+    <dialog id="info">
+      <button autofocus>Close</button>
+      <p>This is a sample info dialog.</p>
+      <p>You can add helpful information here for users.</p>
+    </dialog>
+  </main>
+</BaseLayout>
+
+<script>
+  const hint = document.querySelector("#hint");
+  const infoDialog = document.querySelector("dialog");
+  const btn = document.querySelector("dialog > button");
+
+  hint?.addEventListener("click", () => {
+    infoDialog?.showModal();
+  });
+
+  btn?.addEventListener("click", () => {
+    infoDialog?.close();
+  });
+</script>
diff --git a/src/pages/varnmala.astro b/src/pages/varnmala.astro
new file mode 100644
index 00000000..aece28e2
--- /dev/null
+++ b/src/pages/varnmala.astro
@@ -0,0 +1,18 @@
+---
+import Alphabet from "@/components/Alphabet.astro";
+import BaseLayout from "@/layouts/Base";
+import { varnmala_english, varnmala_hindi } from "@/utils/common";
+---
+
+<BaseLayout meta={{ title: "Alphabets" }}>
+  <main class="varnmala-main">
+    <Alphabet list={varnmala_english} title="English" />
+    <Alphabet list={varnmala_hindi} title="Hindi" />
+  </main>
+</BaseLayout>
+
+<style>
+  .varnmala-main {
+    display: block;
+  }
+</style>
diff --git a/src/types/alphabet.ts b/src/types/alphabet.ts
new file mode 100644
index 00000000..3cc44d50
--- /dev/null
+++ b/src/types/alphabet.ts
@@ -0,0 +1,4 @@
+export type LetterEntity = {
+  letter: string;
+  code: string | number;
+};
diff --git a/src/types/index.ts b/src/types/index.ts
index 37298a69..aef002f2 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,3 +1,4 @@
 export type { LinkProps } from "./link";
+export type { LetterEntity } from "./alphabet";
 
 export type { BlogCardProps, BlogMeta, BlogPost } from "./blog";
diff --git a/src/utils/common.ts b/src/utils/common.ts
new file mode 100644
index 00000000..f153efdf
--- /dev/null
+++ b/src/utils/common.ts
@@ -0,0 +1,56 @@
+// Generating arrays for Hindi vowels (स्वर) and consonants (व्यंजन)
+
+// Vowels
+const hindiVowels = Array.from({ length: 16 }, (_, i) => ({ key: 2309 + i, value: String.fromCodePoint(2309 + i) }));
+const extraHindiVowelKey = [2317, 2321];
+export const hindiVowelList = hindiVowels.filter((v) => !extraHindiVowelKey.includes(v.key));
+
+// Consonants
+// क, ख, ग, घ, ङ // च, छ, ज, झ, ञ // ट, ठ, ड, ढ, ण, // त, थ, द, ध, न, // प, फ, ब, भ, म, // य र, ल, व, // श, ष, स, ह
+// 'क्ष'  = क + '् + ष
+// 'त्र'  = त  + '् + र
+// 'ज्ञ'  = ज  + '् + ञ
+const additionalConsonants = [
+  String.fromCharCode(2325, 2381, 2359),
+  String.fromCharCode(2340, 2381, 2352),
+  String.fromCharCode(2332, 2381, 2334)
+];
+
+export const hindiConsonants = Array.from({ length: 37 }, (_, i) => String.fromCodePoint(2325 + i)).concat(
+  additionalConsonants
+);
+
+const matra = {
+  aa: 2366,
+  e: 2367,
+  ee: 2368,
+  u: 2369,
+  uu: 2370,
+  ae: 2375,
+  aie: 2376,
+  au: 2379,
+  aau: 2380,
+  an: 2385,
+  ah: 2307
+};
+
+export const barahkhadi = (code: number) => {
+  console.log({ code });
+  const vowels = Object.values(matra);
+  const list = [String.fromCharCode(code)];
+  const sanyukat = vowels.map((m) => String.fromCharCode(code, m));
+  console.log(list.concat(sanyukat));
+  return list.concat(sanyukat);
+};
+
+// exclude 2345 ' 2353 / 2355 / 2356
+export const extraLetters = [2345, 2353, 2356];
+export const varnmala = Array.from(Array(37), (_, i) => ({ code: 2325 + i, letter: String.fromCharCode(2325 + i) }));
+export const varnmala_english = Array.from(Array(26), (_, i) => ({
+  code: 65 + i,
+  letter: String.fromCharCode(65 + i)
+}));
+
+export const varnmala_hindi = varnmala.filter((v) => !extraLetters.includes(v.code));
+
+export const isAlphabet = (key: number) => (65 <= key && key <= 90) || (key >= 97 && key <= 122);
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 54ee7d90..c16f127a 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -10,27 +10,21 @@ export const NavbarLinks: LinkProps[] = [
     isActive: true
   },
   {
-    name: "Dashboard",
-    title: "Dashboard",
-    path: "/dashboard",
+    name: "About",
+    title: "About",
+    path: "/about",
     isActive: true
   },
   {
-    name: "Blog",
-    title: "Blogs",
-    path: "/blog",
+    name: "Varnmala",
+    title: "Varnmala",
+    path: "/varnmala",
     isActive: true
   },
   {
-    name: "Career",
-    title: "Career",
-    path: "/career",
-    isActive: true
-  },
-  {
-    name: "Letter",
-    title: "letter",
-    path: "/letter",
+    name: "Panel",
+    title: "Panel",
+    path: "/panel",
     isActive: true
   }
 ];