File size: 1,607 Bytes
8b105ad |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
// Hero.js
import React from "react";
import {Hero_video} from "../../utils/index";
import styled from "styled-components";
// Styled components for the Hero section
const HeroContainer = styled.div`
position: relative;
width: 100%;
height: 30vh; /* Compact height for a professional look */
@media(max-width:480px){
height:50vh;
}
`;
const HeroVideo = styled.video`
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
`;
const Overlay = styled.div`
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
flex-direction: column;
text-align: center;
background-color: rgba(0, 0, 0, 0.6); /* Darker overlay for a more refined feel */
padding: 1.5rem;
`;
const HeroTitle = styled.h1`
font-size: 3.2rem;
font-weight: bold;
color: #3267B9;
margin-bottom: 1rem;
`;
const HeroSubtitle = styled.p`
font-size: 1.4rem;
color: white;
max-width: 70%;
margin-top: 0.5rem;
font-weight: 500;
text-align: center;
line-height: 1.6; /* Better readability */
`;
const Hero = () => {
return (
<HeroContainer>
{/* Video Background */}
<HeroVideo autoPlay loop muted>
<source
src={Hero_video}
type="video/webm"
/>
Your browser does not support the video tag.
</HeroVideo>
{/* Overlaying Text */}
<Overlay>
<HeroTitle>Job Listings</HeroTitle>
<HeroSubtitle>Find Your Next Opportunity</HeroSubtitle>
</Overlay>
</HeroContainer>
);
};
export default Hero;
|