From 5559152a8492dac335f0e6620ca4ca2d9233c889 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Thu, 5 Oct 2023 18:18:04 +0330
Subject: [PATCH] feat: add gradient line decoration

---
 src/components/gradient/gradient.module.css | 16 ++++++++++++++++
 src/components/gradient/gradient.tsx        |  5 +++++
 src/components/gradient/index.ts            |  1 +
 src/pages/index.astro                       |  2 ++
 4 files changed, 24 insertions(+)
 create mode 100644 src/components/gradient/gradient.module.css
 create mode 100644 src/components/gradient/gradient.tsx
 create mode 100644 src/components/gradient/index.ts

diff --git a/src/components/gradient/gradient.module.css b/src/components/gradient/gradient.module.css
new file mode 100644
index 0000000..ec32464
--- /dev/null
+++ b/src/components/gradient/gradient.module.css
@@ -0,0 +1,16 @@
+.gradient {
+  width: 100%;
+  height: 3px;
+  background: linear-gradient(
+    83deg,
+    rgb(186 240 112) 3%,
+    rgb(121 232 101) 16%,
+    rgb(101 229 178) 28%,
+    rgb(98 111 234) 40%,
+    rgb(200 89 228) 52%,
+    rgb(245 92 157) 65%,
+    rgb(246 104 78) 77%,
+    rgb(254 155 70) 89%,
+    rgb(255 200 71) 100%
+  );
+}
diff --git a/src/components/gradient/gradient.tsx b/src/components/gradient/gradient.tsx
new file mode 100644
index 0000000..3b15de5
--- /dev/null
+++ b/src/components/gradient/gradient.tsx
@@ -0,0 +1,5 @@
+import styles from './gradient.module.css';
+
+export function Gradient() {
+  return <div className={styles.gradient} />;
+}
diff --git a/src/components/gradient/index.ts b/src/components/gradient/index.ts
new file mode 100644
index 0000000..3dc3e9c
--- /dev/null
+++ b/src/components/gradient/index.ts
@@ -0,0 +1 @@
+export { Gradient } from './gradient';
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0aaa2ac..4b6dd3f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,9 +1,11 @@
 ---
 import Layout from '@/layouts/layout.astro';
 
+import { Gradient } from '@/components/gradient';
 import { Hero } from '@/components/hero';
 ---
 
 <Layout title="Welcome to Astro.">
+  <Gradient />
   <Hero />
 </Layout>