Merge pull request #60 from BRACKETS-by-TRIAD/feat/technologies-media…

…-intro

✨ feat(introduction): create technologies intro images

components/image/index.tsx

@@ -1,7 +1,13 @@
-export default function Image({ src, alt, ...props }) {
+export default function Image({ src, alt, width, height, short, ...props }) {
   return (
-    <div className="shadow-sm shadow-slate-100 rounded-xl overflow-hidden border border-slate-200">
-      <img alt={alt} src={src} />
+    <div
+      className={`${
+        !short
+          ? 'shadow-sm shadow-slate-100 rounded-xl overflow-hidden border border-slate-200'
+          : 'opacity-70'
+      }`}
+    >
+      <img alt={alt} src={src} width={width} height={height} />
     </div>
   );
 }

pages/index.mdx

@@ -1,10 +1,10 @@
-import Image from "components/image";
-import { Card, Cards } from "components/card";
+import Image from 'components/image';
+import { Card, Cards } from 'components/card';
 import {
   CommandLineIcon,
   SparklesIcon,
   PuzzlePieceIcon,
-} from "@heroicons/react/24/outline";
+} from '@heroicons/react/24/outline';
 
 # Craftable PRO
 
@@ -17,19 +17,21 @@ If you have any questions, feel free to contact us on [Github](https://github.co
 Dive into the documention using the following cards, or choose the topic of your choice from the sidebar.
 
 <Cards>
-  <Card
-    icon={<CommandLineIcon />}
-    title="Getting Started"
-    href="/getting-started"
-  />
+  <Card icon={<CommandLineIcon />} title="Getting Started" href="/getting-started" />
   <Card icon={<SparklesIcon />} title="Frontend Assets" href="/frontend" />
-  <Card
-    icon={<PuzzlePieceIcon />}
-    title="Basic Features"
-    href="/basic-features"
-  />
+  <Card icon={<PuzzlePieceIcon />} title="Basic Features" href="/basic-features" />
 </Cards>
 
+<br />
+<br />
+<div className="flex items-center justify-evenly gap-x-4">
+  <Image alt="typescript" src="/images/vuejs.svg" width={80} height={80} short />
+  <Image alt="typescript" src="/images/laravel.svg" width={75} height={75} short />
+  <Image alt="typescript" src="/images/typescript.svg" width={70} height={70} short />
+  <Image alt="typescript" src="/images/inertia.svg" width={85} height={85} short />
+  <Image alt="typescript" src="/images/tailwindcss.svg" width={80} height={80} short />
+</div>
+
 ## Demo
 
 If you want to get the hands-on experience, you can play around in our [demo](https://demo.craftable.pro/).