Merge pull request #37 from bryan308/add-resource

add: Chrome Extensions, Isocons, and new cateogories for UI components

Author: cedricangulo

content/resources/chrome-extensions.mdx

@@ -0,0 +1,114 @@
+---
+title: Chrome Extensions
+description: Enhance your browsing experience with these top Chrome extensions.
+---
+
+## Bookmark Management
+<Cards>
+  <CustomCard 
+    title="Bookmarkify"
+    icon="/resources/chrome-extensions/bookmarkify.png"
+    description="Experience a Bookmark Manager like never before. No more juggling 10 tabs, find all your design inspiration in one place. All with Bookmarkify."
+    href="https://www.bookmarkify.io/"
+  />
+  <CustomCard 
+    title="Bookmark Manager"
+    icon="/resources/chrome-extensions/bookmark-manager.png"
+    description="Discover Marqly, your go-to bookmark manager. Organize, access, and manage effortlessly. Save, customize, and manage bookmarks and texts online."
+    href="https://www.marqly.com/"
+  />
+  <CustomCard 
+    title="packpack"
+    icon="/resources/chrome-extensions/packpack.png"
+    description="PackPack is an AI-driven bookmark management tool tailored for saving content from online resources like news and social media. It utilizes AI to clean and save content.Transform the way you manage bookmarks and handle your collections more intelligently."
+    href="https://packpack.ai/"
+  />
+</Cards>
+
+## Design and Development
+<Cards>
+  <CustomCard 
+    title="CSS Pro"
+    icon="/resources/chrome-extensions/csspro.png"
+    description="Try your design ideas in seconds with a universal visual CSS editor that generates code for you. Say hello to speed, joy, and stunning designs in just a few clicks with CSS Pro's browser extension."
+    href="https://csspro.com/"
+  />
+  <CustomCard 
+    title="Fonts Ninja"
+    icon="/resources/chrome-extensions/fonts-ninja.png"
+    description="Fonts Ninja helps designers discover awesome fonts and create stunning designs. Explore thousands of fonts and download them for free or buy premium ones."
+    href="https://fonts.ninja/"
+  />
+  <CustomCard 
+    title="SVG Gobbler"
+    icon="/resources/chrome-extensions/svg-gobbler.png"
+    description="SVG Gobbler is a browser extension for finding, optimizing, organizing, editing, and exporting SVGs like never before."
+    href="https://svggobbler.com/"
+  />
+</Cards>
+
+## Productivity
+<Cards>
+  <CustomCard 
+    title="OneTab"
+    icon="/resources/chrome-extensions/onetab.png"
+    description="OneTab is a browser extension available for Google Chrome, Firefox, Edge, and Safari that helps reduce memory usage by converting multiple tabs into a list, allowing for up to 95% memory reduction."
+    href="https://www.one-tab.com/"
+  />
+  <CustomCard 
+    title="MaxFocus"
+    icon="/resources/chrome-extensions/maxfoc.png"
+    description="Preview links before you click on any website. Read articles without distractions."
+    href="https://maxfoc.us/"
+  />
+  <CustomCard 
+    title="mymind"
+    icon="/resources/chrome-extensions/mymind.png"
+    description="A private place to save your most precious notes, images, quotes and highlights. Enhanced with AI to help you remember without wasting time on categorizing & organizing."
+    href="https://mymind.com/"
+  />
+</Cards>
+
+## Video and Screen Capture
+<Cards>
+  <CustomCard 
+    title="Screenity"
+    icon="/resources/chrome-extensions/screenity.png"
+    description="Screenity is a screen recorder for Chrome with no limits. Capture, draw, edit videos and more - all with no sign in needed, completely private and open source."
+    href="https://screenity.io/en/"
+  />
+  <CustomCard 
+    title="Screenshot Tool"
+    icon="/resources/chrome-extensions/screenshot-tool.png"
+    description="Innovative screenshot tool lets users screen capture and edit screenshot. Full page screen capture."
+    href="https://chromewebstore.google.com/detail/screenshot-tool-screen-ca/edlifbnjlicfpckhgjhflgkeeibhhcii"
+  />
+  <CustomCard 
+    title="Ostendo"
+    icon="/resources/chrome-extensions/ostendo.png"
+    description="Capture & Share beautiful Tiles of YouTube Thumbnails & Comments! Customize the shape, content, and theme!"
+    href="https://chromewebstore.google.com/detail/ostendo-%E2%80%93-capture-beautif/bdfkognhpfgcoafcncpdgpjlbhoigpil"
+  />
+</Cards>
+
+## YouTube and Video Management
+<Cards>
+  <CustomCard 
+    title="NexLev"
+    icon="/resources/chrome-extensions/nextlev.png"
+    description="Find profitable niches in YouTube within seconds with NexLev, the most powerful AI-based niche finder."
+    href="https://www.nexlev.io/"
+  />
+  <CustomCard 
+    title="PocketTube"
+    icon="/resources/chrome-extensions/pockettube.png"
+    description="The better way to group and organize your Youtube subscriptions. Mark as watched. Youtube Deck and more."
+    href="https://pockettube.io/"
+  />
+  <CustomCard 
+    title="Video Downloader"
+    icon="/resources/chrome-extensions/video-downloader.png"
+    description="Video downloader for Chrome is a simple tool that allows users to easily download videos from websites with just a few clicks."
+    href="https://pockettube.io/"
+  />
+</Cards>

content/resources/icons.mdx

@@ -58,6 +58,12 @@ description: Explore a variety of icons for your projects.
     href="https://iconsvg.xyz/"
     icon="/resources/icons/iconsvg.png"
   />
+  <CustomCard 
+    title="Isocons"
+    description="Carefully crafted isometric icons."
+    href="https://www.isocons.app/"
+    icon="/resources/icons/isocons.png"
+  />
   <CustomCard 
     title="Line Icons"
     description="Explore 8400+ Free & Premium Professionally Designed SVG Icons: Enhance your projects with our vast collection of SVG UI Icons from 40+ categories. Download in various formats - SVG, Web Font, Figma, React, PNG & More."

content/resources/ui-components.mdx

@@ -3,6 +3,7 @@ title: UI Components
 description: A collection of customizable Tailwind CSS components for building responsive UIs quickly.
 ---
 
+## Tailwind CSS Components
 <Cards>
   <CustomCard
     isNew
@@ -11,29 +12,6 @@ description: A collection of customizable Tailwind CSS components for building r
     description="Beautiful Tailwind CSS and Framer Motion Components, built with Next.js and TypeScript."
     href="https://ui.aceternity.com/"
   />
-  <CustomCard
-    title="Chakra UI"
-    icon="/resources/ui-components/chakraui.png"
-    description="Simple, Modular & Accessible UI Components for your React Applications."
-    href="https://www.chakra-ui.com/"
-  />
-  <CustomCard
-    title="CodePen"
-    icon={<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/><line x1="12" x2="12" y1="22" y2="15.5"/><polyline points="22 8.5 12 15.5 2 8.5"/><polyline points="2 15.5 12 8.5 22 15.5"/><line x1="12" x2="12" y1="2" y2="8.5"/></svg>}
-    description="CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration."
-    href="https://codepen.io/"
-  />
-  <CustomCard
-    title="Copy & Paste CSS"
-    icon="/resources/ui-components/copy-paste-css.png"
-    description="Find inspiration with a curated list of simple CSS Buttons design examples for your next project. Just Copy and Past the CSS of every button element!"
-    href="https://copy-paste-css.com/"
-  />
-  <CustomCard
-    title="cssbuttons.app"
-    description="Collection of over 60+ handpicked and custom made CSS buttons for your website."
-    href="https://cssbuttons.app/"
-  />
   <CustomCard
     title="daisyUI"
     icon="/resources/ui-components/daisyui.png"
@@ -58,24 +36,6 @@ description: A collection of customizable Tailwind CSS components for building r
     description="fmUI is a comprehensive collection of free Tailwind CSS components and templates for your projects. With diverse components and sample pages, you can develop websites, web apps, and more. Explore our selection to enhance your development process with ease and flexibility."
     href="https://fwedwicc.github.io/fmUI/home"
   />
-  <CustomCard
-    title="Mantine"
-    icon="/resources/ui-components/mantineui.svg"
-    description="120+ prebuilt components with Mantine"
-    href="https://ui.mantine.dev/"
-  />
-  <CustomCard
-    title="MynaUI"
-    icon="/resources/ui-components/mynaui.png"
-    description="MynaUI is a comprehensive design system and UI kit that lets you customize and extend designs."
-    href="https://mynaui.com/"
-  />
-  <CustomCard
-    title="NextUI"
-    icon="/resources/ui-components/nextui.png"
-    description="Make beautiful websites regardless of your design experience."
-    href="https://mynaui.com/"
-  />
   <CustomCard
     title="Origin UI"
     icon={<svg className="stroke-zinc-800 dark:stroke-zinc-100" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="16" r="12" fill="none" strokeWidth="8"></circle></svg>}
@@ -118,22 +78,71 @@ description: A collection of customizable Tailwind CSS components for building r
     description="Highly customizable components for crafting modern, personalized websites and applications."
     href="https://ui.tailus.io/"
   />
-  <CustomCard
-    title="The Component Gallery"
-    icon="/resources/ui-components/component-gallery.png"
-    description="The Component Gallery is a collection of components from the best Design Systems."
-    href="https://component.gallery/"
-  />
   <CustomCard
     title="tailwindui"
     icon="/resources/ui-components/tailwindui.png"
     description="Beautiful UI components and templates by the creators of Tailwind CSS."
     href="https://tailwindui.com/"
   />
+</Cards>
+
+## General UI Components
+<Cards>
+  <CustomCard
+    title="Chakra UI"
+    icon="/resources/ui-components/chakraui.png"
+    description="Simple, Modular & Accessible UI Components for your React Applications."
+    href="https://www.chakra-ui.com/"
+  />
+  <CustomCard
+    title="Mantine"
+    icon="/resources/ui-components/mantineui.svg"
+    description="120+ prebuilt components with Mantine"
+    href="https://ui.mantine.dev/"
+  />
+  <CustomCard
+    title="MynaUI"
+    icon="/resources/ui-components/mynaui.png"
+    description="MynaUI is a comprehensive design system and UI kit that lets you customize and extend designs."
+    href="https://mynaui.com/"
+  />
+  <CustomCard
+    title="NextUI"
+    icon="/resources/ui-components/nextui.png"
+    description="Make beautiful websites regardless of your design experience."
+    href="https://mynaui.com/"
+  />
+  <CustomCard
+    title="The Component Gallery"
+    icon="/resources/ui-components/component-gallery.png"
+    description="The Component Gallery is a collection of components from the best Design Systems."
+    href="https://component.gallery/"
+  />
   <CustomCard
     title="Uiverse"
     icon="/resources/ui-components/uiverse.png"
     description="Community-made library of free and customizable UI elements made with CSS or Tailwind. It's all free to copy and use in your projects. Uiverse can save you many hours spent on building & customizing UI components for your next project."
     href="https://uiverse.io/"
   />
 </Cards>
+
+## CSS Tools
+<Cards>
+  <CustomCard
+    title="CodePen"
+    icon={<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/><line x1="12" x2="12" y1="22" y2="15.5"/><polyline points="22 8.5 12 15.5 2 8.5"/><polyline points="2 15.5 12 8.5 22 15.5"/><line x1="12" x2="12" y1="2" y2="8.5"/></svg>}
+    description="CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration."
+    href="https://codepen.io/"
+  />
+  <CustomCard
+    title="Copy & Paste CSS"
+    icon="/resources/ui-components/copy-paste-css.png"
+    description="Find inspiration with a curated list of simple CSS Buttons design examples for your next project. Just Copy and Past the CSS of every button element!"
+    href="https://copy-paste-css.com/"
+  />
+  <CustomCard
+    title="cssbuttons.app"
+    description="Collection of over 60+ handpicked and custom made CSS buttons for your website."
+    href="https://cssbuttons.app/"
+  />
+</Cards>