From b5077ac8af4d2ded84b347737f235ddc419d736b Mon Sep 17 00:00:00 2001
From: harmeetsingh11 <itsharmeetsingh1@gmail.com>
Date: Wed, 14 Feb 2024 21:32:43 +0530
Subject: [PATCH] style: enhance hero section background Added a subtle
 gradient amber background to replace the plain white background in the hero
 section. closes #22

---
 src/Components/components/Hero.jsx | 176 ++++++++++++++++++++---------
 1 file changed, 124 insertions(+), 52 deletions(-)

diff --git a/src/Components/components/Hero.jsx b/src/Components/components/Hero.jsx
index 28c1e52..a39ac60 100644
--- a/src/Components/components/Hero.jsx
+++ b/src/Components/components/Hero.jsx
@@ -1,73 +1,144 @@
-import React , {useRef , useEffect} from 'react'
-import { gsap } from 'gsap'
-import { ScrollTrigger } from 'gsap/all'
+import React, { useRef, useEffect } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/all';
 gsap.registerPlugin(ScrollTrigger);
-import bg1 from "../images/bg1.png";
-import bg2 from "../images/bg2.png";
-import bg5 from "../images/bg5.png";
+import bg1 from '../images/bg1.png';
+import bg2 from '../images/bg2.png';
+import bg5 from '../images/bg5.png';
 
 export default function Hero() {
-  const heading = React.createRef(); 
-  const content1 = React.createRef(); 
-  const content2 = React.createRef(); 
-  const content3 = React.createRef(); 
-  const content4 = React.createRef(); 
-  const content5 = React.createRef(); 
-  const content6 = React.createRef(); 
+  const heading = React.createRef();
+  const content1 = React.createRef();
+  const content2 = React.createRef();
+  const content3 = React.createRef();
+  const content4 = React.createRef();
+  const content5 = React.createRef();
+  const content6 = React.createRef();
 
   useEffect(() => {
-
-      const el = heading.current;
-      gsap.fromTo(el , {delay:2, autoAlpha: 0} , {duration:3 , autoAlpha:1, ease:'none' , scrollTrigger:{
-        trigger: el,
-      }})
-      const el2 = content1.current;
-      gsap.fromTo(el2 , {delay:2, opacity:0, translateX:"-10px"} , {delay:1, opacity:1,translateX:"1px", duration: 2, scrollTrigger:{
-        trigger: el2,
-      }})
-      const el3 = content2.current;
-      gsap.fromTo(el3 , {delay:2, opacity:0, translateX:"-10px"} , {delay:1, opacity:1,translateX:"1px", duration: 2, scrollTrigger:{
-        trigger: el3
-      }})
-      const el4 = content3.current;
-      gsap.fromTo(el4 , {delay:2, opacity:0, translateX:"-10px"} , {delay:1, opacity:1,translateX:"1px", duration: 2, scrollTrigger:{
-        trigger: el4,
-      }})
-      const el5 = content4.current;
-      gsap.fromTo(el5 , {delay:2, opacity:0, translateY:"10px"} , {delay:2, opacity:1,translateY:"1px", duration: 2, scrollTrigger:{
-        trigger: el5,
-      }})
-      const el6 = content5.current;
-      gsap.fromTo(el6 , {delay:2, opacity:0, translateY:"10px"} , {delay:2, opacity:1,translateY:"1px", duration: 2, scrollTrigger:{
-        trigger: el6,
-      }})
-      const el7 = content6.current;
-      gsap.fromTo(el7 , {delay:2, opacity:0, translateY:"10px"} , {delay:2, opacity:1,translateY:"1px", duration: 2, scrollTrigger:{
-        trigger: el7,
-      }})
-    }, [ ] )
+    const el = heading.current;
+    gsap.fromTo(
+      el,
+      { delay: 2, autoAlpha: 0 },
+      {
+        duration: 3,
+        autoAlpha: 1,
+        ease: 'none',
+        scrollTrigger: {
+          trigger: el,
+        },
+      }
+    );
+    const el2 = content1.current;
+    gsap.fromTo(
+      el2,
+      { delay: 2, opacity: 0, translateX: '-10px' },
+      {
+        delay: 1,
+        opacity: 1,
+        translateX: '1px',
+        duration: 2,
+        scrollTrigger: {
+          trigger: el2,
+        },
+      }
+    );
+    const el3 = content2.current;
+    gsap.fromTo(
+      el3,
+      { delay: 2, opacity: 0, translateX: '-10px' },
+      {
+        delay: 1,
+        opacity: 1,
+        translateX: '1px',
+        duration: 2,
+        scrollTrigger: {
+          trigger: el3,
+        },
+      }
+    );
+    const el4 = content3.current;
+    gsap.fromTo(
+      el4,
+      { delay: 2, opacity: 0, translateX: '-10px' },
+      {
+        delay: 1,
+        opacity: 1,
+        translateX: '1px',
+        duration: 2,
+        scrollTrigger: {
+          trigger: el4,
+        },
+      }
+    );
+    const el5 = content4.current;
+    gsap.fromTo(
+      el5,
+      { delay: 2, opacity: 0, translateY: '10px' },
+      {
+        delay: 2,
+        opacity: 1,
+        translateY: '1px',
+        duration: 2,
+        scrollTrigger: {
+          trigger: el5,
+        },
+      }
+    );
+    const el6 = content5.current;
+    gsap.fromTo(
+      el6,
+      { delay: 2, opacity: 0, translateY: '10px' },
+      {
+        delay: 2,
+        opacity: 1,
+        translateY: '1px',
+        duration: 2,
+        scrollTrigger: {
+          trigger: el6,
+        },
+      }
+    );
+    const el7 = content6.current;
+    gsap.fromTo(
+      el7,
+      { delay: 2, opacity: 0, translateY: '10px' },
+      {
+        delay: 2,
+        opacity: 1,
+        translateY: '1px',
+        duration: 2,
+        scrollTrigger: {
+          trigger: el7,
+        },
+      }
+    );
+  }, []);
 
   return (
     <div
-      className="flex flex-col lg:flex-row justify-center items-center  md:mt-0 bg-[#fff7ed] "
+      className="flex flex-col lg:flex-row justify-center items-center  md:mt-0 bg-gradient-to-r from-amber-300 via-[#fff7ed] to-[#fff7ed]"
       id="Home"
     >
       <div className="w-full lg:w-1/2  pl-10 pr-10 order-2 lg:order-1  flex flex-col text-[#1e1b4b]  ">
-        <h1 className="text-5xl font-bold lg:text-9xl md:text-7xl lg:mb-10 text-center sm:text-left " ref={heading}>
-          {" "}
-          ignyte{" "}
+        <h1
+          className="text-5xl font-bold lg:text-9xl md:text-7xl lg:mb-10 text-center sm:text-left "
+          ref={heading}
+        >
+          {' '}
+          ignyte{' '}
         </h1>
         <p className="text-xm text-black my-5" ref={content1}>
           Contribute to our website and make your first pull request ⏭
         </p>
         <p className="text-xm  sm:leading-7  text-black " ref={content2}>
-          {" "}
-          We're a tight-knit community of{" "}
+          {' '}
+          We're a tight-knit community of{' '}
           <span className="sm:bg-[#f97316] sm:text-white  sm:p-1 sm:rounded-lg sm:mx-2 ">
             developers
           </span>
           , coders, and designers who are here to learn and teach with the power
-          of{" "}
+          of{' '}
           <span className="sm:bg-[#10b981] sm:text-white sm:p-1 sm:rounded-lg sm:mx-2">
             open-source
           </span>
@@ -77,7 +148,8 @@ export default function Hero() {
 
         <a
           href="https://discord.gg/43gn4PsUhx"
-          className="bg-[#dc2626] text-white w-[120px] ease-in duration-[0.3s] hover:bg-[#10b981] font-medium my-6 mx-auto md:mx-4 py-3 text-center rounded-lg" ref={content3}
+          className="bg-[#dc2626] text-white w-[120px] ease-in duration-[0.3s] hover:bg-[#10b981] font-medium my-6 mx-auto md:mx-4 py-3 text-center rounded-lg"
+          ref={content3}
         >
           Get started
         </a>
@@ -93,7 +165,7 @@ export default function Hero() {
         <div className="bg-[#fff7ed] h-54 w-full hidden lg:block"></div>
 
         <div className=" bg-[#fff7ed] h-54 w-full hidden lg:block ">
-          <img className="  h-full w-full" src={bg2} ref={content6}></img>{" "}
+          <img className="  h-full w-full" src={bg2} ref={content6}></img>{' '}
         </div>
       </div>
     </div>