➕ADD: +1 Snippet, resources page

Author: manuarora700

components/Footer.js

@@ -57,6 +57,11 @@ export default function Footer() {
               Tweets
             </a>
           </Link>
+          <Link href="/resources">
+            <a className="text-gray-500 hover:text-gray-600 transition">
+              Resources
+            </a>
+          </Link>
         </div>
       </div>
     </footer>

components/ResourcesCard.js

@@ -0,0 +1,46 @@
+import Link from "next/link";
+// import Image from "next/image";
+
+export default function FunctionCard({
+  title,
+  description,
+  link,
+  websiteLink,
+  ...rest
+}) {
+  return (
+    <Link href={link}>
+      <a
+        className="border border-grey-200 dark:border-gray-900 rounded p-4 w-full"
+        {...rest}
+        target="__blank"
+      >
+        <div className="flex items-center text-gray-900 dark:text-gray-100">
+          <span className="mt-1 text-gray-400 dark:text-gray-400 inline-block">
+            {websiteLink}
+          </span>
+
+          <svg
+            className="h-4 w-4 ml-1 mt-1.5"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            />
+          </svg>
+        </div>
+
+        <h3 className="text-lg font-bold text-left mt-2 text-gray-900 dark:text-gray-100">
+          {title}
+        </h3>
+        <p className="mt-1 text-gray-700 dark:text-gray-400">{description}</p>
+      </a>
+    </Link>
+  );
+}

data/snippets/gradient-text.mdx

@@ -0,0 +1,20 @@
+---
+title: "Text Gradient"
+description: "Add gradient to text"
+logo: "css.png"
+---
+
+```css
+.gradient-text {
+  background-color: #f3ec78;
+  background-image: linear-gradient(45deg, #f3ec78, #af4261);
+  background-size: 100%;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-text-fill-color: transparent;
+}
+```
+
+To get more gradients quickly, goto [uigradients.com](https://uigradients.com/#DarkSkies) and select from a list of gradients.
+Copy paste in the `.gradient-text` field.

pages/resources.js

@@ -0,0 +1,54 @@
+import Container from "@/components/Container";
+import ResourcesCard from "@/components/ResourcesCard";
+
+export default function Snippets({ snippets }) {
+  // TODO: Make sections for each type, ex: Javascript, HTML CSS etc
+  return (
+    <Container
+      title="Resources – Manu Arora"
+      description="Helpful websites that I've been using for years that have helped me in developing
+      applications and much more"
+    >
+      <div className="flex flex-col justify-center items-start max-w-2xl mx-auto mb-16">
+        <h1 className="font-bold text-3xl md:text-5xl tracking-tight mb-4 text-black dark:text-white">
+          Resources
+        </h1>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">
+          Helpful{" "}
+          <span className="bg-gray-100 border rounded-md px-1 py-0.5 tracking-tight dark:text-gray-300 dark:bg-gray-700">
+            websites
+          </span>{" "}
+          that I've been using for years that have helped me in developing
+          applications and much more. 🔥
+        </p>
+        <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 my-2 w-full mt-4">
+          <ResourcesCard
+            title="UI Gradients"
+            link="https://uigradients.com"
+            websiteLink="uigradients.com"
+            description="Get different gradient range"
+          />
+          <ResourcesCard
+            title="Free Themes & Templates"
+            link="https://www.creative-tim.com/templates/free"
+            websiteLink="creative-tim.com"
+            description="Get free themes, templates & UI Kits"
+          />
+          <ResourcesCard
+            title="Minimal Icons Pack"
+            link="https://www.heroicons.com"
+            websiteLink="heroicons.com"
+            description="Get free icons"
+          />
+          <ResourcesCard
+            title="Waves & SVG blobs"
+            link="https://getwaves.io/"
+            websiteLink="getwaves.io"
+            description="Generate waves for your website."
+          />
+          {/* https://getwaves.io/ */}
+        </div>
+      </div>
+    </Container>
+  );
+}