Initial commit

src/components/hero/Hero.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './Hero.module.css';
+
+function Hero() {
+  return (
+    <section className={styles.hero}>
+      <img src="./pp.jpg" alt="Murtadha Nisyif" className={styles.backgroundImage} />
+      <div className={styles.content}>
+        <div className={styles.textContent}>
+          <h1 className={styles.name}>Your Name</h1>
+          <h2 className={styles.title}>Your Main Title</h2>
+          <div className={styles.positions}>
+            <p>Current Position</p>
+            <p>Another Position</p>
+            <p>Yet Another Position</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Hero;

src/components/hero/Hero.module.css

@@ -0,0 +1,88 @@
+@keyframes gradientBG {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+  
+  .hero {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    background: linear-gradient(-45deg, #0E0E0E, #1A1A1A, #2C2C2C, #0E0E0E);
+    background-size: 400% 400%;
+    animation: gradientBG 15s ease infinite;
+  }
+  
+  .backgroundImage {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0.3; /* Adjust this value to change the image transparency */
+    z-index: 1;
+  }
+  
+  .content {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+    z-index: 2;
+  }
+  
+  .textContent {
+    padding-left: 5%;
+    max-width: 60%;
+  }
+  
+  .name {
+    font-size: 4rem;
+    margin-bottom: 0.5rem;
+    color: #FFFFFF;
+  }
+  
+  .title {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: #CCCCCC;
+  }
+  
+  .positions p {
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+    color: #999999;
+  }
+  
+  @media (max-width: 768px) {
+    .content {
+      flex-direction: column;
+      text-align: center;
+    }
+  
+    .textContent {
+      padding: 0 5%;
+      max-width: 100%;
+    }
+  
+    .name {
+      font-size: 3rem;
+    }
+  
+    .title {
+      font-size: 2rem;
+    }
+  }