From d494aacd80d4dcef4daf673f5bb768f6726b86d0 Mon Sep 17 00:00:00 2001
From: pompydev <pompydev@proton.me>
Date: Fri, 21 Mar 2025 12:35:44 +0900
Subject: [PATCH] feat(list): add header shadow

---
 apps/list/components/Header.vue | 34 +++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/apps/list/components/Header.vue b/apps/list/components/Header.vue
index 346a593..e55bbe0 100644
--- a/apps/list/components/Header.vue
+++ b/apps/list/components/Header.vue
@@ -5,22 +5,24 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div class="slant mb-12 bg-light-card-bg dark:bg-dark-card-bg">
-        <ThemeController class="h-12" />
+    <div class="slant-shadow">
+        <div class="slant mb-12 bg-light-card-bg dark:bg-dark-card-bg">
+            <ThemeController class="h-12" />
 
-        <h1
-            class="mb-12 text-center text-4xl leading-[3rem] text-slate-800 dark:text-slate-200"
-        >
-            <span class="font-semibold">pomp</span>'s<br />
-            biased & opinionated
-            <br />
-            list of
-            <span
-                class="highlight px-1 font-extrabold text-light-text-default dark:text-dark-text-default"
+            <h1
+                class="mb-12 text-center text-4xl leading-[3rem] text-slate-800 dark:text-slate-200"
             >
-                {{ props.highlight }}
-            </span>
-        </h1>
+                <span class="font-semibold">pomp</span>'s<br />
+                biased & opinionated
+                <br />
+                list of
+                <span
+                    class="highlight px-1 font-extrabold text-light-text-default dark:text-dark-text-default"
+                >
+                    {{ props.highlight }}
+                </span>
+            </h1>
+        </div>
     </div>
 </template>
 
@@ -34,4 +36,8 @@ const props = defineProps<{
     padding-bottom: 8rem /* 128px (pb-32) */;
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 128px));
 }
+
+.slant-shadow {
+    filter: drop-shadow(0px 0px 20px #ccc);
+}
 </style>