File size: 1,666 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 |
// 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; // Set a compact height
`;
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.5); // Dark overlay for better text visibility
`;
const HeroTitle = styled.h1`
font-size: 3.5rem;
font-weight: bold;
background-clip: text;
-webkit-background-clip: text;
color: #3267B9; // Blue color for the title
margin-bottom: 1rem;
`;
const HeroSubtitle = styled.p`
font-size: 1.5rem;
color: white;
max-width: 80%;
margin-top: 0.5rem;
font-weight: 500;
font-style: italic; // Added a slight italic style to make it feel more personable
`;
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>About Us</HeroTitle> {/* Hero Title: "About Us" */}
<HeroSubtitle>Genomics Simplified</HeroSubtitle> {/* Catchy Subtitle */}
</Overlay>
</HeroContainer>
);
};
export default Hero; |