Skip to content

Commit 0992e81

Browse files
mshalom27mshalom27
committed
transition
1 parent 9fe4010 commit 0992e81

2 files changed

Lines changed: 63 additions & 19 deletions

File tree

‎src/components/AboutSection.jsx‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,44 @@
1-
import Button from "./shared/Button";
1+
import { useState, useEffect } from "react";
22
import { siteConfig } from "../config/navbarHero";
33

44
export default function AboutSection() {
5+
const [showFirst, setShowFirst] = useState(true);
6+
7+
useEffect(() => {
8+
const interval = setInterval(() => setShowFirst((prev) => !prev), 4000);
9+
return () => clearInterval(interval);
10+
}, []);
11+
512
return (
613
<section
714
id="about"
815
className="bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16"
916
>
10-
<div className="w-full max-w-[1600px] mx-auto flex flex-col md:flex-row items-center justify-between gap-y-10 gap-x-10 xl:gap-x-12 2xl:gap-x-14">
11-
<div className="w-full max-w-[500px] px-2 md:px-0 mt-10 md:mt-0">
17+
<div className="w-full max-w-[1600px] mx-auto flex flex-col md:flex-row items-start md:items-center justify-between gap-x-10 xl:gap-x-12 2xl:gap-x-14">
18+
<div className="w-full relative flex justify-center items-center h-[400px] md:h-[500px]">
19+
<img
20+
src={siteConfig.about.image}
21+
alt="About image 1"
22+
className="block md:hidden rounded-md shadow-lg object-cover w-full h-full"
23+
/>
24+
1225
<img
1326
src={siteConfig.about.image}
14-
alt="ASME NIT Rourkela team members"
15-
className="rounded-md shadow-lg object-cover w-full h-auto"
27+
alt="About image 1 fade"
28+
className={`hidden md:block rounded-md shadow-lg object-cover w-full h-full absolute top-0 left-0 right-0 bottom-0 m-auto transition-opacity duration-1000 ${
29+
showFirst ? "opacity-100 z-10" : "opacity-0 z-0"
30+
}`}
31+
/>
32+
<img
33+
src={siteConfig.hero.image}
34+
alt="About image 2 fade"
35+
className={`hidden md:block rounded-md shadow-lg object-cover w-full h-full absolute top-0 left-0 right-0 bottom-0 m-auto transition-opacity duration-1000 ${
36+
showFirst ? "opacity-0 z-0" : "opacity-100 z-10"
37+
}`}
1638
/>
1739
</div>
1840

19-
<div className="w-full text-center md:text-left space-y-4 max-w-[700px]">
41+
<div className="w-full text-center md:text-left space-y-4 max-w-[700px]">
2042
<h1
2143
className="text-3xl sm:text-4xl md:text-[47px] lg:text-[56px] font-bold uppercase text-black leading-[120%]"
2244
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
@@ -36,7 +58,7 @@ export default function AboutSection() {
3658
href="#cards"
3759
role="button"
3860
tabIndex={0}
39-
className=" text-2xl h-12 justify-center items-center flex bg-[rgba(6,25,70,1)] text-[#ccc0c0] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
61+
className="text-2xl h-12 justify-center items-center flex bg-[rgba(6,25,70,1)] text-[#ccc0c0] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
4062
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
4163
>
4264
{siteConfig.about.button}

‎src/components/HeroSection.jsx‎

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
1+
import { useState, useEffect } from "react";
12
import Button from "./shared/Button";
23
import { siteConfig } from "../config/navbarHero";
34

45
export default function HeroSection() {
6+
const [showFirst, setShowFirst] = useState(true);
7+
8+
useEffect(() => {
9+
const interval = setInterval(() => setShowFirst((prev) => !prev), 4000);
10+
return () => clearInterval(interval);
11+
}, []);
12+
513
return (
6-
<section className="bg-white min-h-[400px] pt-[80px] sm:pt-[100px] md:pt-[120px] lg:pt-[130px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
14+
<section className="bg-white min-h-[400px] pt-[80px] sm:pt-[100px] md:pt-[120px] lg:pt-[130px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
715
<div className="max-w-[1600px] mx-auto flex flex-col md:flex-row items-center md:items-start justify-center md:justify-between md:gap-x-12">
816
<div className="w-full max-w-[700px] px-2 md:px-0 space-y-4 text-center md:text-left">
917
<p
@@ -12,21 +20,18 @@ export default function HeroSection() {
1220
>
1321
{siteConfig.hero.title}
1422
</p>
15-
1623
<h1
1724
className="text-3xl sm:text-4xl md:text-[47px] lg:text-[56px] xl:text-[64px] font-bold uppercase text-black leading-[120%]"
1825
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
1926
>
2027
{siteConfig.hero.subtitle}
2128
</h1>
22-
2329
<p
2430
className="text-base sm:text-lg text-[rgba(106,106,106,1)] leading-[150%] mt-4 max-w-2xl mx-auto md:mx-0"
2531
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
2632
>
2733
{siteConfig.hero.description}
2834
</p>
29-
3035
<div className="flex flex-col sm:flex-row sm:justify-center md:justify-start items-center mt-6 gap-4">
3136
<Button
3237
className="bg-[rgba(6,25,70,1)] text-white px-14 py-2 rounded-md transition duration-300 ease-in-out hover:bg-white hover:text-[rgba(6,25,70,1)]"
@@ -38,20 +43,38 @@ export default function HeroSection() {
3843
href="#about"
3944
role="button"
4045
tabIndex={0}
41-
className=" h-12 justify-center items-center flex bg-gradient-to-r from-blue-900 to-blue-950 text-[#e2cede] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
46+
className="h-12 justify-center items-center flex bg-gradient-to-r from-blue-900 to-blue-950 text-[#e2cede] underline-offset-4 transition duration-300 ease-in-out hover:bg-none hover:bg-white hover:text-[#061946] font-semibold py-2 px-4 rounded"
4247
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
4348
>
4449
{siteConfig.hero.secondaryLink}
4550
</a>
4651
</div>
4752
</div>
4853

49-
<div className="w-full max-w-[500px] px-2 md:px-0 mt-10 md:mt-0 ">
50-
<img
51-
src={siteConfig.hero.image}
52-
alt="ASME NIT Rourkela team members"
53-
className="rounded-md shadow-lg object-cover w-full h-auto"
54-
/>
54+
<div className="w-full max-w-[1600px] px-2 md:px-0 relative h-[400px] md:h-[500px] flex justify-center items-center">
55+
<div className="w-full max-w-[1600px] px-2 md:px-0 relative flex justify-center items-center h-[300px] sm:h-[350px] md:h-[500px]">
56+
<img
57+
src={siteConfig.hero.image}
58+
alt="Hero image 1"
59+
className="rounded-md shadow-lg object-cover w-full h-full"
60+
/>
61+
62+
<img
63+
src={siteConfig.about.image}
64+
alt="Hero image 2"
65+
className={`rounded-md shadow-lg object-cover w-full h-full absolute top-0 left-0 right-0 bottom-0 m-auto transition-opacity duration-1000 hidden md:block ${
66+
showFirst ? "opacity-0 z-0" : "opacity-100 z-10"
67+
}`}
68+
/>
69+
70+
<img
71+
src={siteConfig.hero.image}
72+
alt="Hero image 1 fade"
73+
className={`rounded-md shadow-lg object-cover w-full h-full absolute top-0 left-0 right-0 bottom-0 m-auto transition-opacity duration-1000 hidden md:block ${
74+
showFirst ? "opacity-100 z-10" : "opacity-0 z-0"
75+
}`}
76+
/>
77+
</div>
5578

5679
<img
5780
src={siteConfig.hero.image1}
@@ -65,7 +88,6 @@ export default function HeroSection() {
6588
opacity: 0.36,
6689
}}
6790
/>
68-
6991
<img
7092
src={siteConfig.hero.image2}
7193
alt="Background figure 2"

0 commit comments

Comments
 (0)