Merge pull request #60 from Sky-De/newHeader

#55 header / heading styles fixed
warmachine028 · Sep 20, 2023 · 59d1c41 · 59d1c41
2 parents 34bf15d + e0731de
commit 59d1c41
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 58 deletions.
diff --git a/src/assets/icons/hamburger.svg b/src/assets/icons/hamburger.svg
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -8,7 +8,7 @@ import { useMenuUpdateContext } from "../contexts/MenuContext";
 const Navbar = () => {
   const toggleShowMenu = useMenuUpdateContext();
   return (
-    <header className="padding-x py-8 absolute z-10 w-full">
+    <header className="bg-[#1C1C1C] dark:bg-white padding-x py-6 lg:py-8 absolute z-10 w-full shadow-2xl">
       <nav className="flex justify-between items-center max-container">
         <a href="/">
           <img src={headerLogo} alt="logo" width="130" height="29" />

diff --git a/src/sections/Hero.jsx b/src/sections/Hero.jsx
@@ -1,11 +1,11 @@
 /** @format */
 
-import Button from "../components/Button"
-import { arrowRight } from "../assets/icons"
-import { shoes, statistics } from "../constants"
-import { bigShoe1 } from "../assets/images"
-import ShoeCard from "../components/ShoeCard"
-import { useState, useEffect } from "react"
+import Button from "../components/Button";
+import { arrowRight } from "../assets/icons";
+import { shoes, statistics } from "../constants";
+import { bigShoe1 } from "../assets/images";
+import ShoeCard from "../components/ShoeCard";
+import { useState, useEffect } from "react";
 
 const formatNumber = (number) => {
   if (number < 1000) {
@@ -16,21 +16,21 @@ const formatNumber = (number) => {
 };
 
 const Hero = () => {
-	const [bigShoeImg, setBigShoeImg] = useState(bigShoe1)
-	const [animatedStatistics, setAnimatedStatistics] = useState({
-	    brands: 0,
-	    shops: 0,
-	    customers: 0,
- 	});
-	  useEffect(() => {
-    	const animationDuration = 2500; 
-    	const targetStatistics = {
-	    brands: 1000,
-	    shops: 500,
-	    customers: 250000,
+  const [bigShoeImg, setBigShoeImg] = useState(bigShoe1);
+  const [animatedStatistics, setAnimatedStatistics] = useState({
+    brands: 0,
+    shops: 0,
+    customers: 0,
+  });
+  useEffect(() => {
+    const animationDuration = 2500;
+    const targetStatistics = {
+      brands: 1000,
+      shops: 500,
+      customers: 250000,
     };
-    
-    const stepDuration = animationDuration / 100; 
+
+    const stepDuration = animationDuration / 100;
 
     const updateStatistics = (currentStep) => {
       if (currentStep >= 100) {
@@ -49,42 +49,64 @@ const Hero = () => {
     };
 
     updateStatistics(0);
-
   }, []);
 
-	return (
-		<section className="xl:padding-l wide:padding-r padding-b">
-			<div id="home" className="w-full flex xl:flex-row flex-col justify-center min-h-screen gap-10 max-container">
-				<div className="relative xl:w-2/5 flex flex-col justify-center items-start w-full max-xl:padding-x pt-28">
-					<h1 className="mt-10 font-palanquin text-8xl max-sm:text-[72px] max-sm:leading-[110px] font-bold">
-						<span className="xl:bg-white xl:whitespace-nowrap relative z-10 pr-10 dark:bg-slate-gray duration-300 rounded-lg">The New Arrival</span>
-						<br />
-						<span className="text-coral-red inline-block mt-3">Nike </span> Shoes
-					</h1>
-					<p className="font-montserrat text-slate-gray text-lg leading-8 mt-6 mb-14 sm:max-w-sm">Discover stylish Nike arrivals, quality comfort, and innovation for your active life.</p>
-					<Button icon={arrowRight}>Shop now</Button>
-					<div className="flex justify-start flex-wrap items-start w-full mt-20 gap-16">
-						{statistics.map(stat => (
-							<div key={stat.label}>
-								<p className="text-4xl font-palanquin font-bold">{formatNumber(animatedStatistics[stat.label.toLowerCase()])}+</p>
-								<p className="leading-7 font-montserrat text-slate-gray">{stat.label}</p>
-							</div>
-						))}
-					</div>
-				</div>
-				<div className="relative flex flex-1 justify-center items-center xl: min-h-screen max-xl:py-40 bg-primary bg-hero bg-cover bg-center">
-					<img src={bigShoeImg} alt="shoe" width="610" height="500" className="object-contain relative z-10" />
-					<div className="flex sm:gap-6 gap-4 absolute -bottom-[5%] sm:left-[10%] max-sm:px-6">
-						{shoes.map(shoe => (
-							<div key={shoe.thumbnail}>
-								<ShoeCard img={shoe} change={shoe => setBigShoeImg(shoe)} largeImg={bigShoeImg} />
-							</div>
-						))}
-					</div>
-				</div>
-			</div>
-		</section>
-	)
-}
+  return (
+    <section className="xl:padding-l wide:padding-r padding-b">
+      <div
+        id="home"
+        className="w-full flex xl:flex-row flex-col justify-center min-h-screen gap-10 max-container"
+      >
+        <div className="relative xl:w-2/5 flex flex-col justify-center items-start w-full max-xl:padding-x pt-28">
+          <h1 className="mt-10 font-palanquin text-8xl max-sm:text-[72px] max-sm:leading-[110px] font-bold">
+            <span className=" xl:whitespace-nowrap relative z-10 pr-10 dark:xl:bg-slate-gray duration-300 rounded-lg">
+              The New Arrival
+            </span>
+            <br />
+            <span className="text-coral-red inline-block mt-3">Nike </span>{" "}
+            Shoes
+          </h1>
+          <p className="font-montserrat text-slate-gray text-lg leading-8 mt-6 mb-14 sm:max-w-sm">
+            Discover stylish Nike arrivals, quality comfort, and innovation for
+            your active life.
+          </p>
+          <Button icon={arrowRight}>Shop now</Button>
+          <div className="flex justify-start flex-wrap items-start w-full mt-20 gap-16">
+            {statistics.map((stat) => (
+              <div key={stat.label}>
+                <p className="text-4xl font-palanquin font-bold">
+                  {formatNumber(animatedStatistics[stat.label.toLowerCase()])}+
+                </p>
+                <p className="leading-7 font-montserrat text-slate-gray">
+                  {stat.label}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="relative flex flex-1 justify-center items-center xl: min-h-screen max-xl:py-40 bg-primary bg-hero bg-cover bg-center">
+          <img
+            src={bigShoeImg}
+            alt="shoe"
+            width="610"
+            height="500"
+            className="object-contain relative z-10"
+          />
+          <div className="flex sm:gap-6 gap-4 absolute -bottom-[5%] sm:left-[10%] max-sm:px-6">
+            {shoes.map((shoe) => (
+              <div key={shoe.thumbnail}>
+                <ShoeCard
+                  img={shoe}
+                  change={(shoe) => setBigShoeImg(shoe)}
+                  largeImg={bigShoeImg}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
 
-export default Hero
+export default Hero;