Merge pull request #82 from codeXsit/codex-hero-animations

feat: add photos and animations in hero sections

Author: Miran-Firdausi

public/images/hero1.png

@@ -158,10 +158,10 @@ export default function AboutSection() {
     <>
       <section className="relative min-h-fit bg-background-dark text-white py-12 md:px-6 lg:px-12 overflow-hidden">
         <div className="absolute top-4 -left-1 w-8 h-8 bg-white rounded-full opacity-100" />
-        <div className="absolute -top-2 right-20 w-20 h-20 bg-primary-dark rounded-full opacity-100 z-10" />
+        <div className="absolute -top-2 right-4 md:right-20 w-20 h-20 bg-primary-dark rounded-full opacity-100 z-10" />
         <div className="max-w-full mx-auto relative z-20 px-4 md:px-0">
           <h1
-            className="text-secondary-dark shadow-black font-poppins font-extrabold text-4xl md:text-6xl lg:text-8xl mb-12 relative z-20"
+            className="text-secondary-dark shadow-black font-poppins font-extrabold text-4xl md:text-6xl lg:text-8xl mb-12 relative z-20 mt-12"
             style={{
               WebkitTextStroke: "2px #737373",
             }}

public/images/hero2.png

@@ -19,7 +19,7 @@ function Navbar({ links }) {
 
   return (
     <nav
-      className={`shadow-md w-full flex xs:flex-col md:flex-row ${isOpen ? "xs:h-screen" : ""} md:h-full justify-between items-center px-6 bg-secondary-dark`}
+      className={`shadow-md w-full flex xs:flex-col md:flex-row ${isOpen ? "xs:h-screen" : ""} md:h-full justify-between items-center px-6 bg-secondary-dark relative z-50`}
     >
       <div className="flex flex-row justify-between xs:w-full md:w-auto items-center">
         <Link

src/assets/images/Christmas stars.png

@@ -83,12 +83,12 @@ function TeamMember({ member, className }) {
           <img
             src={bgimages[id]}
             alt="background"
-            className="absolute bottom-1 left-1/2 rounded-md transform -translate-x-1/2 w-56 h-56 object-cover z-0 transition-transform duration-700 group-hover:scale-105"
+            className="absolute bottom-1 left-1/2 rounded-md transform -translate-x-1/2 w-40 h-40 sm:w-48 sm:h-48 md:w-56 md:h-56 lg:w-64 lg:h-64 object-cover z-0 transition-transform duration-700 group-hover:scale-105"
           />
           <img
             src={image}
             alt={name}
-            className="relative w-72 h-72 mx-auto object-cover z-10 filter grayscale transition duration-500 group-hover:filter-none group-hover:duration-500 group-hover:ease-in-out group-hover:delay-150 group-hover:scale-110"
+            className="relative w-48 h-48 sm:w-56 sm:h-56 md:w-64 md:h-64 lg:w-72 lg:h-72 mx-auto object-cover z-10 filter grayscale transition duration-500 group-hover:filter-none group-hover:duration-500 group-hover:ease-in-out group-hover:delay-150 group-hover:scale-110"
           />
         </div>
         <h2 className="text-2xl mt-6 font-poppins font-semibold text-center tracking-wide text-text-light">