feat: gif in webinar hero section

Raghunandan16 · Mar 10, 2023 · 679e374 · 679e374
1 parent 5672a91
commit 679e374
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 19 deletions.
diff --git a/src/assets/webinar/hero.gif b/src/assets/webinar/hero.gif
diff --git a/src/components/Webinar/Hero/index.jsx b/src/components/Webinar/Hero/index.jsx
@@ -5,13 +5,13 @@ import styles from './index.module.css';
 import ArrowLink from '@/components/links/ArrowLink';
 import ButtonLink from '@/components/links/ButtonLink';
 
-import HeroImg from '@/assets/webinar/hero.png';
+import HeroImg from '@/assets/webinar/hero.gif';
 const Hero = () => {
  return (
  <header className={styles.section} id='about'>
  <div className={clsx('layout', styles.layout)}>
- <h1 className='heading'>
- TechTalks: Expert Webinar on the latest technologies
+ <h1 className='heading highlight highlight--light'>
+ Expert Webinar on the latest technologies
  </h1>
  <p className={styles.tagLine}>
  Expand your knowledge and enhance your skills with our expert-led
@@ -20,17 +20,7 @@ const Hero = () => {
  <ArrowLink className={styles.cta} as={ButtonLink} href='#upcoming'>
  Upcoming webinars
  </ArrowLink>
- <div
- className=''
- style={{
- width: '100%',
- paddingBlock: '4rem',
- paddingInline: '2rem',
- marginTop: '4rem',
- backgroundColor: 'var(--clr-primary)',
- position: 'relative',
- }}
- >
+ <div className={styles.webinarGIfContainer}>
  <img
  src={HeroImg}
  style={{
@@ -39,8 +29,6 @@ const Hero = () => {
  />
  <svg
  style={{
- widthh: '7rem',
- height: '7rem',
  position: 'absolute',
  top: '0',
  right: '0',
@@ -61,8 +49,6 @@ const Hero = () => {
 
  <svg
  style={{
- widthh: '10rem',
- height: '10rem',
  position: 'absolute',
  top: '0',
  left: '0',

diff --git a/src/components/Webinar/Hero/index.module.css b/src/components/Webinar/Hero/index.module.css
@@ -24,6 +24,29 @@
 .tagLine {
  font-size: 1.5rem;
  color: var(--clr-content);
- margin-block: 1.5rem;
+ margin-block: 2.3rem;
  line-height: 2rem;
 }
+
+.webinarGIfContainer {
+ width: 100%;
+ padding-block: 2rem;
+ margin-top: 4rem;
+ background-color: var(--clr-primary);
+ position: relative;
+}
+.webinarGIfContainer svg {
+ width: 5rem;
+ height: 5rem;
+}
+@media (min-width: 1024px) {
+ .webinarGIfContainer {
+ padding-block: 4rem;
+ padding-inline: 2rem;
+ margin-top: 6rem;
+ }
+ .webinarGIfContainer svg {
+ width: 7rem;
+ height: 7rem;
+ }
+}