Theme Changes

Author: AttAditya

src/components/Hero/index.jsx

@@ -42,6 +42,8 @@ export function Hero() {
 
   return (<>
     <div className="hero">
+      <span className="hero-background" />
+
       <div className="content">
         <div className="brand">
           <div className="brand-logo">
@@ -53,6 +55,7 @@ export function Hero() {
           It's about Logic not Syntax
         </div>
       </div>
+
       <div className="actions">
         {
           actions.map((action, index) => <HeroCard

src/components/Hero/style.css

@@ -7,6 +7,33 @@
   height: 100vh;
 }
 
+.hero-background {
+  position: absolute;
+  padding: 1rem;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  aspect-ratio: 1;
+  z-index: -1;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom right,
+    var(--color-primary),
+    var(--color-secondary),
+    var(--color-tertiary)
+  );
+}
+
+.hero-background::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 1rem;
+  background: var(--color-background);
+}
+
 .content {
   display: flex;
   flex-direction: column;

src/styles/variables.css

@@ -1,6 +1,7 @@
 :root {
-  --color-primary: #FF7E47;
-  --color-secondary: #A15EFF;
+  --color-primary: #A15EFF;
+  --color-secondary: #D65EBA;
+  --color-tertiary: #FF7E47;
 
   --color-black: #000000;
   --color-white: #FFFFFF;
@@ -10,6 +11,6 @@
   --color-success: #4CAF50;
   --color-warning: #FF9800;
 
-  --color-background: #2A2A30;
+  --color-background: #111111;
 }