Gradient on landing page

2 files changed, 11 insertions, 2 deletions

diff --git a/src/app/globals.css b/src/app/globals.css
index ddf9eee..839ec84 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -57,3 +57,11 @@
     @apply bg-background text-foreground;
   }
 }
+
+.landing-header {
+  @apply bg-gradient-to-br from-emerald-800 to-emerald-600 dark:from-emerald-300 dark:to-emerald-600 bg-clip-text;
+}
+
+.landing-header strong {
+  @apply font-bold text-transparent;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6c3ee9f..e3337ae 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -33,8 +33,9 @@ export default function HomePage() {
               </a>
             </div>
           )}
-          <h1 className="!leading-none font-bold text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
-            Share Expenses <br /> with Friends & Family
+          <h1 className="!leading-none font-bold text-3xl sm:text-5xl md:text-6xl lg:text-7xl landing-header">
+            Share <strong>Expenses</strong> <br /> with <strong>Friends</strong>{' '}
+            & <strong>Family</strong>
           </h1>
           <p className="max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8">
             No ads. No account. <br className="sm:hidden" /> Open Source.