From 986787c1e8185713da99ac89338c5b8cc891de82 Mon Sep 17 00:00:00 2001
From: srisanth seth <84568590+sri766@users.noreply.github.com>
Date: Sat, 1 Jun 2024 09:42:49 +0530
Subject: [PATCH] added custom styles to hero section (#84)

---
 src/pages/index.js         |  4 ++--
 src/pages/index.module.css | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index ebd102002..8ae20e743 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -12,10 +12,10 @@ function HomepageHeader() {
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
-        <Heading as="h1" className="hero__title">
+        <Heading as="h1" className={clsx("hero__title", styles.main_title)}>
           {siteConfig.title}
         </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <p className={clsx("hero__subtitle",styles.sub_title)}>{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9f71a5da7..f330b4761 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -8,15 +8,41 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  height: 35rem;
+}
+.main_title{
+  font-size: 4rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  background: linear-gradient(45deg, #240750, #01204E);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.sub_title{
+  margin: 0 auto;
+  font-size: 1.5rem;
+  font-weight: 400;
+  margin-bottom: 1rem;
+  width: 50%;
+
 }
 
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;
   }
+  .main_title{
+    font-size: 2.5rem;
+  }
+  .sub_title{
+    font-size: 1.2rem;
+    width: 80%;
+  }
 }
 
 .buttons {
+  margin-top: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;