Home page headar

src/components/headarHome/Headar.js

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import './HeadarD.css';
+
+/*This code written by Reema Kusa*/
+const Slider = () => {
+  const [active, setActive] = useState(0);
+  const sliderItems = [
+    {
+      id: 1,
+      title: 'Gifts for everyone',
+      content: 'We provide you with gifts that suit all ages, genders, occasions, and interests',
+    },
+    {
+      id: 2,
+      title: 'The best prices',
+      content: 'Get the most unique gifts at the best prices and highest quality',
+    },
+    {
+      id: 3,
+      title: 'Shop from where Uare',
+      content: 'Shop in the easiest, fastest, and most enjoyable way possible, with the possibility of delivery',
+    },
+  ];
+
+  const nextSlide = () => {
+    setActive((prev) => (prev === sliderItems.length - 1 ? 0 : prev + 1));
+  };
+
+  const prevSlide = () => {
+    setActive((prev) => (prev === 0 ? sliderItems.length - 1 : prev - 1));
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      nextSlide();
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+
+    <main >
+      <div className='headerr'>
+      <header></header>
+      </div>
+      <section className="slider">
+        <div className="list">
+          {sliderItems.map((item, index) => (
+            <div key={item.id} className={`item ${index === active ? 'active' : ''}`}>
+              <div className="image"></div>
+              <div className="content">
+                <h2>{item.title}</h2>
+                <p>{item.content}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="arrows">
+          <button id="prev" onClick={prevSlide}>
+            <svg
+              className="w-6 h-6 text-gray-800"
+              aria-hidden="true"
+              width="80"
+              height="80"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M5 12h14M5 12l4-4m-4 4 4 4"
+              />
+            </svg>
+          </button>
+          <button id="next" onClick={nextSlide}>
+            <svg
+              className="w-6 h-6 text-gray-800 dark:text-white"
+              aria-hidden="true"
+              width="80"
+              height="80"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M19 12H5m14 0-4 4m4-4-4-4"
+              />
+            </svg>
+          </button>
+        </div>
+      </section>
+    </main>
+
+  );
+};
+
+export default Slider;

src/components/headarHome/HeadarD.css

@@ -0,0 +1,278 @@
+/*This code written by Reema Kusa*/
+
+@import url('https://fonts.cdnfonts.com/css/bebas-neue');
+@import url('https://fonts.cdnfonts.com/css/poppins');
+
+/*body {
+  margin: 0;
+  font-size: 15px;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+}*/
+
+svg {
+  color: #ffffff;
+}
+
+:root {
+  --width-default: min(1200px, 90vw);
+  --diameter: 1432px;
+  --image-blur: 30px;
+  --item-opacity: 0;
+  --item-active-opacity: 1;
+  --rotation-default: -60deg;
+  --rotation-active: 0deg;
+  --translate-x-default: -50%;
+  --translate-y-default: -50%;
+  --translate-y-hidden: 100%;
+  --translate-x-hidden: -500%;
+  --translate-y-title: -100%;
+}
+
+.headerr {
+  width: var(--width-default);
+  height: 70px;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+}
+
+.w-6 {
+  color: #f28482;
+}
+
+.slider {
+  background-color: #f7dfdf;
+  color: #ffffff;
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  margin-top: -70px;
+}
+
+.slider .list {
+  display: flex;
+}
+
+.slider .list .item {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 1.1s;
+  pointer-events: none;
+  opacity: var(--item-opacity);
+}
+
+.slider .list .item.active {
+  pointer-events: auto;
+  opacity: var(--item-active-opacity);
+}
+
+.slider .list .item .content {
+  position: absolute;
+  top: 18%;
+  left: 50%;
+  transform: translateX(var(--translate-x-default));
+  width: max-content;
+  max-width: 100%;
+  text-align: center;
+  display: grid;
+  grid-template-columns: repeat(2, 400px);
+  text-align: left;
+  gap: 80px;
+  font-size: 1.2em;
+  text-transform: uppercase;
+  font-family: 'Poppins', sans-serif;
+  text-shadow: 0 0 80px #999595db;
+}
+
+.slider .list .item .content h2 {
+  font-size: 13em;
+  font-family: 'Bebas Neue', sans-serif;
+  line-height: 0.9em;
+  transform: translateY(var(--translate-y-title));
+  transition: transform 1.2s;
+  grid-row: 1 / 3;
+}
+
+.slider .list .item .content p:last-child {
+  display: flex;
+  justify-content: start;
+  align-items: end;
+  padding-bottom: 25px;
+  font-size: 30px;
+}
+
+.slider .list .item .image {
+  flex-shrink: 0;
+  width: var(--diameter);
+  height: var(--diameter);
+  background-size: cover;
+  background-position: center;
+  border-radius: 50%;
+  position: relative;
+  transition: 1s;
+  transform: rotate(var(--rotation-default));
+  filter: blur(var(--image-blur));
+}
+
+.slider .list .item .image::before,
+.slider .list .item .image::after {
+  position: absolute;
+  content: '';
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(var(--translate-x-default), var(--translate-y-default)) rotate(-120deg);
+  transition: 1s;
+}
+
+.slider .list .item .image::before {
+  width: 70%;
+  height: 70%;
+}
+
+.slider .list .item .image::after {
+  width: 30%;
+  height: 30%;
+  transform: translate(var(--translate-x-default), var(--translate-y-default)) rotate(-170deg);
+}
+
+.slider .list .item.active .image::before,
+.slider .list .item.active .image::after {
+
+    position: absolute;
+    width: 95%;
+    height: 95%;
+    content: '';
+    border-radius: 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-500%, -50%)  rotate(-120deg);
+    background-image: 
+    linear-gradient(to right, rgba(238, 229, 151, 0.332), rgba(242, 149, 149, 0.304)),
+    var(--url);
+    background-size: var(--diameter) var(--diameter);
+    background-position: center;
+    transition: 1.2s;
+}
+
+.slider .list .item.active .image {
+  filter: blur(0px);
+  transform: rotate(var(--rotation-active));
+}
+
+.slider .list .item.active ~ .item {
+  opacity: var(--item-opacity);
+}
+
+.slider .list .item.active ~ .item .image {
+  transform: rotate(60deg);
+}
+
+.slider .list .item.active ~ .item .image::before,
+.slider .list .item.active ~ .item .image::after {
+  transform: translate(var(--translate-x-default), var(--translate-y-default)) rotate(120deg);
+}
+
+.slider .list .item.active ~ .item .content h2 {
+  transform: translateY(var(--translate-y-hidden));
+}
+
+.slider .list .item.active .content h2 {
+  transform: translateY(var(--rotation-active));
+}
+
+.arrows {
+  position: absolute;
+  left: 50%;
+  transform: translateX(var(--translate-x-default));
+  bottom: 30px;
+  width: var(--width-default);
+  display: flex;
+  justify-content: space-between;
+}
+
+.arrows button {
+  all: unset;
+  cursor: pointer;
+}
+
+.arrows button.d-none {
+  opacity: var(--item-opacity);
+  pointer-events: none;
+}
+
+.slider .list::after {
+  position: absolute;
+  content: '';
+  bottom: 0;
+  width: min(1000px, 100vw);
+  height: 70%;
+  left: 50%;
+  transform: translateX(var(--translate-x-default));
+  background-size: cover;
+  background-position: top;
+  pointer-events: none;
+  animation: showModel 1s ease-in-out 1 forwards;
+}
+
+@keyframes showModel {
+  from {
+    transform: translateX(var(--translate-x-default)) scale(1.3) translateY(88px);
+  }
+}
+
+.list .item:nth-child(1) .image {
+  --url: url('../headarHome/headarImg/headarImg1.png');
+}
+
+.list .item:nth-child(2) .image {
+  --url: url('../headarHome/headarImg/headarImg2.png');
+}
+
+.list .item:nth-child(3) .image {
+  --url: url('../headarHome/headarImg/headarImg3.png');
+}
+
+.list .item .image {
+  background-image: var(--url);
+}
+
+@media all and (max-width: 1024px) {
+  .slider .list .item .content {
+    grid-template-columns: repeat(2, 300px);
+  }
+
+  .slider .list .item .content h2 {
+    font-size: 8em;
+  }
+}
+
+@media all and (max-width: 767px) {
+  .slider .list .item .content {
+    grid-template-columns: 80%;
+    justify-content: center;
+    gap: 20px;
+    top: 70px;
+  }
+
+  .slider .list .item .content h2 {
+    font-size: 4em;
+  }
+
+  .slider .list .item .content p {
+    font-size: small;
+  }
+}