Skip to content

herosec images #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sidd233 merged 3 commits into from
Sep 5, 2025
Merged

herosec images #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9fe4010
herosec images
mshalom27 Aug 31, 2025
0992e81
transition
mshalom27 Sep 4, 2025
7f1f448
spacing
mshalom27 Sep 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 29 additions & 7 deletions src/components/AboutSection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,44 @@
import Button from "./shared/Button";
import { useState, useEffect } from "react";
import { siteConfig } from "../config/navbarHero";

export default function AboutSection() {
const [showFirst, setShowFirst] = useState(true);

useEffect(() => {
const interval = setInterval(() => setShowFirst((prev) => !prev), 4000);
return () => clearInterval(interval);
}, []);

return (
<section
id="about"
className="bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16"
>
<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">
<div className="w-full max-w-[500px] px-2 md:px-0 mt-10 md:mt-0">
<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">
<div className="w-full px-4 relative flex justify-center items-center h-[300px] sm:h-[350px] md:h-[500px]">
<img
src={siteConfig.about.image}
alt="About image 1"
className="block md:hidden mb-10 rounded-md shadow-lg object-cover w-full h-full"
/>

<img
src={siteConfig.about.image}
alt="ASME NIT Rourkela team members"
className="rounded-md shadow-lg object-cover w-full h-auto"
alt="About image 1 fade"
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 ${
showFirst ? "opacity-100 z-10" : "opacity-0 z-0"
}`}
/>
<img
src={siteConfig.hero.image}
alt="About image 2 fade"
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 ${
showFirst ? "opacity-0 z-0" : "opacity-100 z-10"
}`}
/>
</div>

<div className="w-full text-center md:text-left space-y-4 max-w-[700px]">
<div className="w-full text-center md:text-left space-y-4 max-w-[700px]">
<h1
className="text-3xl sm:text-4xl md:text-[47px] lg:text-[56px] font-bold uppercase text-black leading-[120%]"
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
Expand All @@ -36,7 +58,7 @@ export default function AboutSection() {
href="#cards"
role="button"
tabIndex={0}
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"
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"
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
>
{siteConfig.about.button}
Expand Down
50 changes: 36 additions & 14 deletions src/components/HeroSection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
import { useState, useEffect } from "react";
import Button from "./shared/Button";
import { siteConfig } from "../config/navbarHero";

export default function HeroSection() {
const [showFirst, setShowFirst] = useState(true);

useEffect(() => {
const interval = setInterval(() => setShowFirst((prev) => !prev), 4000);
return () => clearInterval(interval);
}, []);

return (
<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">
<section className="bg-white min-h-[400px] pt-[40px] sm:pt-[30px] md:pt-[80px] lg:pt-[130px] px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-8">
<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">
<div className="w-full max-w-[700px] px-2 md:px-0 space-y-4 text-center md:text-left">
<p
Expand All @@ -12,21 +20,18 @@ export default function HeroSection() {
>
{siteConfig.hero.title}
</p>

<h1
className="text-3xl sm:text-4xl md:text-[47px] lg:text-[56px] xl:text-[64px] font-bold uppercase text-black leading-[120%]"
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
>
{siteConfig.hero.subtitle}
</h1>

<p
className="text-base sm:text-lg text-[rgba(106,106,106,1)] leading-[150%] mt-4 max-w-2xl mx-auto md:mx-0"
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
>
{siteConfig.hero.description}
</p>

<div className="flex flex-col sm:flex-row sm:justify-center md:justify-start items-center mt-6 gap-4">
<Button
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)]"
Expand All @@ -38,20 +43,38 @@ export default function HeroSection() {
href="#about"
role="button"
tabIndex={0}
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"
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"
style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
>
{siteConfig.hero.secondaryLink}
</a>
</div>
</div>

<div className="w-full max-w-[500px] px-2 md:px-0 mt-10 md:mt-0 ">
<img
src={siteConfig.hero.image}
alt="ASME NIT Rourkela team members"
className="rounded-md shadow-lg object-cover w-full h-auto"
/>
<div className="w-full max-w-[1600px] px-2 md:px-0 relative h-[350px] md:h-[500px] flex justify-center items-center">
<div className="w-full max-w-[1600px] mt-0 px-2 md:px-0 relative flex justify-center items-center h-[300px] sm:h-[350px] md:h-[500px]">
<img
src={siteConfig.hero.image}
alt="Hero image 1"
className="rounded-md shadow-lg object-cover w-full h-full"
/>

<img
src={siteConfig.about.image}
alt="Hero image 2"
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 ${
showFirst ? "opacity-0 z-0" : "opacity-100 z-10"
}`}
/>

<img
src={siteConfig.hero.image}
alt="Hero image 1 fade"
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 ${
showFirst ? "opacity-100 z-10" : "opacity-0 z-0"
}`}
/>
</div>

<img
src={siteConfig.hero.image1}
Expand All @@ -61,15 +84,14 @@ export default function HeroSection() {
width: "705px",
height: "705px",
top: "-234px",
left: "-151px",
left: "-800px",
opacity: 0.36,
}}
/>

<img
src={siteConfig.hero.image2}
alt="Background figure 2"
className="absolute hidden min-[980px]:block"
className="absolute hidden min-[1800px]:block"
style={{
width: "478px",
height: "478px",
Expand Down
4 changes: 2 additions & 2 deletions src/config/navbarHero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const siteConfig = {
primaryButton: "Join Us",
secondaryLink: "Learn More",
image:
"https://res.cloudinary.com/dwjcki9ey/image/upload/v1752132771/image_1_w5ijjl.png",
"https://res.cloudinary.com/djqgs2pet/image/upload/v1756018619/IMG_20250822_234850_bxluqx.jpg",
image1:
"https://res.cloudinary.com/dwjcki9ey/image/upload/v1752159681/Ellipse_1_sxc0u7.png",
image2:
Expand All @@ -32,7 +32,7 @@ export const siteConfig = {
"ASME NIT Rourkela is dedicated to fostering engineering innovation among students. We serve as a pivotal connecting link between academia and industry, tackling technical obstacles with enthusiasm through our various initiatives and events. ASME NIT Rourkela is committed to fostering engineering innovation and practical application among students. All of us are free to make a positive impact through our various technical and non-events.",
button: "Learn More",
image:
"https://res.cloudinary.com/dwjcki9ey/image/upload/v1752132823/image_lxdaqf.png",
"https://res.cloudinary.com/djqgs2pet/image/upload/v1756018623/IMG-20250819-WA0130_pogbzm.jpg",
},

missions: [
Expand Down
Loading