Merge pull request #26 from bryan308:add-resource

Update UI components and styles for consistency

app/global.css

@@ -62,7 +62,7 @@
 		@apply border-border;
 	}
 	body {
-		@apply bg-background text-foreground;
+		@apply bg-fd-background text-foreground;
 	}
 }
 

components/shared/home/resources-marquee.tsx

@@ -113,8 +113,8 @@ export function MarqueeDemo() {
 					/>
 				))}
 			</Marquee>
-			<div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-background"></div>
-			<div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-background"></div>
+			<div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-fd-background"></div>
+			<div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-fd-background"></div>
 		</div>
 	)
 }

content/resources/stock-photos.mdx

@@ -36,7 +36,7 @@ description: High-Quality Stock Photos for enriching your projects and presentat
   />
   <CustomCard
     title="Lummi"
-    href="https://focastock.com/"
+    href="https://lummi.ai/"
     description="Discover our selection of the best Midjourney --sref codes, created by the most talented digital artists. From editorial, to cinematographic, illustrations, and more."
     icon="/resources/stock-photos/lummi.png"
   />

content/resources/css-components.mdx → content/resources/ui-components.mdx

@@ -1,78 +1,101 @@
 ---
-title: CSS Components
+title: UI Components
 description: A collection of customizable Tailwind CSS components for building responsive UIs quickly.
 ---
 
-### Tailwindcss
-
 <Cards>
   <CustomCard
-    icon="/resources/css-components/chakraui.png"
+    icon="/resources/ui-components/chakraui.png"
     title="Chakra UI"
     description="Simple, Modular & Accessible UI Components for your React Applications."
     href="https://www.chakra-ui.com/"
   />
   <CustomCard
-    icon="/resources/css-components/daisyui.png"
+    icon="/resources/ui-components/daisyui.png"
     title="daisyUI"
     description="Best Tailwind Components Library - Free UI components for Tailwind CSS."
     href="https://daisyui.com/"
   />
   <CustomCard
-    icon="/resources/css-components/flyon.png"
+    icon="/resources/ui-components/flyon.png"
     title="FlyonUI"
     description="FlyonUI is the easiest, free and open-source Tailwind CSS components library with semantic classes."
     href="https://flyonui.com/"
   />
   <CustomCard
-    icon="/resources/css-components/flowbite.svg"
+    icon="/resources/ui-components/flowbite.svg"
     title="Flowbite"
     description="Learn more about the Flowbite brand and the trademark usage agreement to know what you can and cannot do with the Flowbite brand."
     href="https://flowbite.com/"
   />
   <CustomCard
-    icon="/resources/css-components/fmUI.png"
+    icon="/resources/ui-components/fmUI.png"
     title="fmUI"
     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
-    icon="/resources/css-components/mynaui.png"
+    icon="/resources/ui-components/mynaui.png"
     title="MynaUI"
     description="MynaUI is a comprehensive design system and UI kit that lets you customize and extend designs."
     href="https://mynaui.com/"
   />
+  <CustomCard
+    icon="/resources/ui-components/nextui.png"
+    title="NextUI"
+    description="Make beautiful websites regardless of your design experience."
+    href="https://mynaui.com/"
+  />
   <CustomCard
     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>}
     title="Origin UI"
     description="Beautiful UI components built with Tailwind CSS and Next.js."
     href="https://originui.com/"
   />
   <CustomCard
-    icon="/resources/css-components/preline.png"
+    icon="/resources/ui-components/preline.png"
     title="Preline UI"
     description="Preline UI is an open-source Tailwind CSS components library for any needs. Comes with UI examples & blocks, templates, plugins, Figma design system and more."
     href="https://preline.co/index.html"
   />
+  <CustomCard
+    icon="/resources/ui-components/prismui.png"
+    title="Prism UI"
+    description="Build better apps faster with Prism UI."
+    href="https://www.prismui.tech/"
+  />
   <CustomCard
     icon={<svg className="stroke-zinc-950 dark:stroke-zinc-50" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>shadcn/ui</title><path d="M22.219 11.784 11.784 22.219c-.407.407-.407 1.068 0 1.476.407.407 1.068.407 1.476 0L23.695 13.26c.407-.408.407-1.069 0-1.476-.408-.407-1.069-.407-1.476 0ZM20.132.305.305 20.132c-.407.407-.407 1.068 0 1.476.408.407 1.069.407 1.476 0L21.608 1.781c.407-.407.407-1.068 0-1.476-.408-.407-1.069-.407-1.476 0Z"/></svg>}
     title="shadcn/ui"
     description="Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source."
     href="https://ui.shadcn.com/"
   />
   <CustomCard
-    icon="/resources/css-components/tailblocks.png"
+    icon="/resources/ui-components/tailblocks.png"
     title="Tailblocks"
     description="Ready-to-use Tailwind CSS blocks"
     href="https://tailblocks.cc/"
   />
-</Cards>
-
-### Native CSS
-
-<Cards>
   <CustomCard
-    icon="/resources/css-components/copy-paste-css.png"
+    icon="/resources/ui-components/tailus.svg"
+    title="Tailus UI"
+    description="Highly customizable components for crafting modern, personalized websites and applications."
+    href="https://ui.tailus.io/"
+  />
+  <CustomCard
+    icon="/resources/ui-components/component-gallery.png"
+    title="The Component Gallery"
+    description="The Component Gallery is a collection of components from the best Design Systems."
+    href="https://component.gallery/"
+  />
+  <CustomCard
+    icon="/resources/ui-components/component-gallery.png"
+    title="tailwindui"
+    description="The Component Gallery is a collection of components from the best Design Systems."
+    href="https://component.gallery/"
+  />
+  <CustomCard
+    icon="/resources/ui-components/copy-paste-css.png"
     title="Copy & Paste CSS"
     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/"
@@ -89,7 +112,7 @@ description: A collection of customizable Tailwind CSS components for building r
     href="https://codepen.io/"
   />
   <CustomCard
-    icon="/resources/css-components/uiverse.png"
+    icon="/resources/ui-components/uiverse.png"
     title="Uiverse"
     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://codepen.io/"