feat: CEOTalks

pages/iyref/ceotalks/About.tsx

@@ -0,0 +1,16 @@
+import Image from 'next/image'
+import Birds from '@src/assets/Images/IYREF/CEOTalks/About/Birds.png'
+
+const About = (): JSX.Element => {
+  return (
+    <div className='font-montserrat relative h-min-[600px] flex flex-col justify-center items-center overflow-x-hidden pt-[100px] pb-[50px] px-[10vw] sm:px-[15vw]'>
+      <div className='w-[10vw] sm:w-[5vw] z-[-10] absolute top-8 align-middle'>
+        <Image src={Birds} alt="birds" className=''/>
+      </div>
+      <h3 className="text-center text-[16px] xl:text-[24px] text-green11">CEOTalk is the final event of the Integrated Youth Renewable Energy Festival (IYREF) 2024 following the announcement of the competitions’ winners. Here, you’re welcome to listen to experts in renewable energy, enrich your knowledge, and understand the current developments in the world of renewable energy. As young people, we have the responsibility to preserve and expand our resources towards a better future, and that’s with the help of renewable energy.</h3>
+      <div className="mt-[50px] h-[5px] w-[175px] xl:w-[295px] rounded-full bg-gradient-to-r from-green11 to-green8"></div>
+    </div>
+  )
+}
+
+export default About

pages/iyref/ceotalks/Footer.tsx

@@ -0,0 +1,19 @@
+import Image from 'next/image'
+import FooterImage from '@src/assets/Images/Navigation/Footer/FooterIllustration.svg'
+
+const Footer = (): JSX.Element => {
+  return (
+    <footer className='flex flex-col overflow-x-hidden'>
+      <div className='flex flex-col w-[101%]'>
+        <Image
+          src={FooterImage}
+          alt="Footer Illustration"
+          className="mb-[25px]"
+          draggable={false}
+        />
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

pages/iyref/ceotalks/Hero.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Image from 'next/image'
+import Header from '@src/assets/Images/IYREF/CEOTalks/Hero/Header.png'
+
+const Hero = (): JSX.Element => {
+  return (
+    <div className='h-screen flex flex-col justify-center items-center overflow-x-hidden'>
+      <div className='relative w-full h-full'>
+        <Image
+          src={Header}
+          alt='Background'
+          layout='fill'
+          objectFit='cover'
+          placeholder='blur'
+        />
+        <div className='w-full h-full opacity-30 bg-[#000000]'></div>
+        <div className='absolute inset-0 justify-center items-center flex flex-col'>
+          <div className='font-montserrat text-center text-white'>
+            <h1 className='xl:text-[48px] md:text-[38px] text-[28px] font-bold leading-[40px] md:leading-[60px] animate__animated animate__fadeInUp'>
+                CEOTalks
+            </h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Hero

pages/iyref/ceotalks/Session.tsx

@@ -0,0 +1,106 @@
+import Image from 'next/image'
+import Earth1 from '@src/assets/Images/IYREF/CEOTalks/Session/Earth1.png'
+import Earth2 from '@src/assets/Images/IYREF/CEOTalks/Session/Earth2.png'
+import Birds from '@src/assets/Images/IYREF/CEOTalks/About/Birds.png'
+import Tanaman1 from '@src/assets/Images/IYREF/CEOTalks/Session/Tanaman1.png'
+import Tanaman2 from '@src/assets/Images/IYREF/CEOTalks/Session/Tanaman2.png'
+import Speaker1 from '@src/assets/Images/IYREF/CEOTalks/Session/Speaker1.png'
+import Speaker2 from '@src/assets/Images/IYREF/CEOTalks/Session/Speaker2.png'
+import FooterImage from '@src/assets/Images/Navigation/Footer/FooterIllustration.svg'
+import PottedPlant from '@src/assets/Images/IYREF/CEOTalks/Session/Potted_plant.png'
+import SpeakerCard from '@src/components/Card/SpeakerCard'
+
+interface SpeakerCardProps {
+  session: string
+  picture: any
+  name: string
+}
+
+const Session = (): JSX.Element => {
+  const speakers: SpeakerCardProps[] = [
+    {
+      session: 'Session 1',
+      picture: Speaker1,
+      name: 'Arsjad Rasjid (President Director PT Indika Energy)'
+    },
+    {
+      session: 'Session 1',
+      picture: Speaker2,
+      name: 'Verania Andria (Senior Advisor for Sustainable Energy Strategic Programme & Policies United Nations)'
+    }
+  ]
+
+  return (
+    <>
+        <div className='h-min-[2200px] h-full font-montserrat px-10 w-[100%] flex flex-col items-center relative overflow-x-hidden'>
+            <div className="flex flex-col lg:flex-row w-full items-center justify-around">
+                <div className="flex flex-col items-center">
+                    <div className='w-[275px] z-[-10] my-10'>
+                        <Image src={Earth1} alt="Earth 1" className=''/>
+                    </div>
+                </div>
+                <div className="text-center lg:text-left h-[400px] lg:h-[350px] w-[380px] lg:w-[650px] xl:w-[700px] flex flex-col justify-between">
+                    <h2 className='text-[32px] lg:text-[40px]'><span className='text-transparent font-bold bg-clip-text bg-gradient-to-r from-green5 to-green8'>SESSION 1</span></h2>
+                    <h3 className='text-[20px] lg:text-[24px]'><span className='text-transparent bg-clip-text bg-gradient-to-r from-green5 to-green8'>Entering The New Meta in Economy: Renewable Energy and Its Future Potentials.</span></h3>
+                    <p className='text-[16px] lg:text-[18px] text-green11'>Forget fossil fuels, the new economic gold rush is green! Join us as we explore the electrifying rise of renewable energy, its game-changing potential to power the future, and how it&apos;s reshaping the financial landscape from sun-kissed farms to bustling city grids. Dive into a dynamic discussion with one of the champions of the green revolution. It&apos;s time to unplug from the old and recharge with the future!</p>
+                </div>
+            </div>
+            <div className='w-full flex flex-col items-center my-10'>
+                <div className='w-[10vw] sm:w-[5vw] z-[-10]'>
+                    <Image src={Birds} alt="birds" className=''/>
+                </div>
+            </div>
+            <div className="flex flex-col lg:flex-row-reverse w-full items-center justify-around">
+                <div className="flex flex-col items-center">
+                    <div className='w-[275px] z-[-10] my-10 lg:my-0 lg:mt-10 lg:mb-60'>
+                        <Image src={Earth2} alt="Earth 2" className=''/>
+                    </div>
+                </div>
+                <div className="text-center lg:text-left h-[850px] lg:h-[600px] w-[380px] lg:w-[650px] xl:w-[700px] flex flex-col justify-between">
+                    <h2 className='text-[32px] lg:text-[40px]'><span className='text-transparent font-bold bg-clip-text bg-gradient-to-r from-green5 to-green8'>SESSION 2</span></h2>
+                    <h3 className='text-[20px] lg:text-[24px]'><span className='text-transparent bg-clip-text bg-gradient-to-r from-green5 to-green8'>The Real Problem with Renewable Energy in Indonesia</span></h3>
+                    <p className='text-[16px] lg:text-[18px] text-green11'>
+                        Indonesia boasts vast renewable energy potential, thanks to its strategic location and abundant natural resources. Consider the equatorial position, showering the nation in sunlight year-round — a golden opportunity for harnessing solar power. The coastal regions, kissed by consistent sea breezes, offer an ideal landscape for wind energy projects. Additionally, the rich tapestry of agricultural residues, palm oil byproducts, and other organic materials can fuel biomass energy production.
+                        <br />
+                        <br />
+                        Surprisingly, despite these promising prospects, renewables contribute less than 20% to the country&apos;s electricity generation. This begs a crucial question: Why aren&apos;t we fully tapping into our abundant renewable resources to meet energy demands and simultaneously cut down on carbon emissions?
+                        <br />
+                        <br />
+                        Join us as we delve into the heart of this renewable energy dilemma, exploring innovative solutions that can propel Indonesia into a sustainable energy future. Be part of the conversation shaping the path for the next generation. Let&apos;s unlock the true potential of renewable energy in Indonesia.
+                    </p>
+                </div>
+            </div>
+            <br />
+            <div className="w-full gap-5 flex flex-col lg:flex-row items-center justify-around m-20">
+                {speakers.map((speaker, index) => (
+                    <SpeakerCard
+                    key={index}
+                    session={speaker.session}
+                    picture={speaker.picture}
+                    name={speaker.name}
+                    />
+                ))}
+            </div>
+            <div className='hidden lg:block z-[-11] w-[400px] absolute top-[100px] left-[-50px]'>
+                <Image src={Tanaman1} alt="Tanaman 1" className=''/>
+            </div>
+            <div className='hidden lg:block z-[-11] w-[400px] absolute top-[950px] right-[-100px]'>
+                <Image src={Tanaman2} alt="Tanaman 2" className=''/>
+            </div>
+            <div className='w-[310px] lg:w-[710px] absolute z-[-11] align-middle bottom-[90px]'>
+                <Image src={PottedPlant} alt="Potted Plant" className='mb-0'/>
+            </div>
+            <div className='flex flex-col w-[100vw]'>
+                <Image
+                src={FooterImage}
+                alt="Footer Illustration"
+                className="mb-[25px]"
+                draggable={false}
+                />
+            </div>
+        </div>
+    </>
+  )
+}
+
+export default Session

pages/iyref/ceotalks/index.tsx

@@ -0,0 +1,18 @@
+import SEO from '@src/components/SEO/SEO'
+import Navbar from '@src/components/Navigation/Navbar'
+import Hero from '@src/contexts/IYREF/CEOTalks/Hero'
+import About from '@src/contexts/IYREF/CEOTalks/About'
+import Session from '@src/contexts/IYREF/CEOTalks/Session'
+
+const CEOTalksPage = (): JSX.Element => {
+  return (
+    <SEO title="IYREF ITB | CEOTalks">
+      <Navbar />
+      <Hero />
+      <About />
+      <Session />
+    </SEO>
+  )
+}
+
+export default CEOTalksPage

src/components/Card/SpeakerCard.tsx

@@ -0,0 +1,25 @@
+import Image from 'next/image'
+import React from 'react'
+
+interface SpeakerCardProps {
+  session: string
+  picture: any
+  name: string
+}
+
+const SpeakerCard = ({ session, picture, name }: SpeakerCardProps): JSX.Element => {
+  return (
+    <div className='w-[375px] h-[625px] lg:w-[475px] lg:h-[735px] flex flex-col text-center items-center justify-evenly border-[1px] border-green12 rounded-xl bg-white'>
+        <div className='flex flex-col justify-between'>
+            <h3 className='text-[16px] lg:text-[20px]'><span className='text-transparent bg-clip-text bg-gradient-to-r from-green5 to-green8'>{session}</span></h3>
+            <h2 className='text-[24px] lg:text-[36px]'><span className='text-transparent font-bold bg-clip-text bg-gradient-to-r from-green5 to-green8'>SPEAKER</span></h2>
+        </div>
+        <div className='w-[325px] h-[350px] lg:w-[425px] lg:h-[450px]'>
+            <Image src={picture} alt={name} className=''/>
+        </div>
+        <p className='w-[325px] text-[20px]'><span className='text-transparent font-bold bg-clip-text bg-gradient-to-r from-green5 to-green8'>{name}</span></p>
+    </div>
+  )
+}
+
+export default SpeakerCard

src/contexts/IYREF/CEOTalks/About.tsx

@@ -0,0 +1,16 @@
+import Image from 'next/image'
+import Birds from '@src/assets/Images/IYREF/CEOTalks/About/Birds.png'
+
+const About = (): JSX.Element => {
+  return (
+    <div className='font-montserrat relative h-min-[600px] flex flex-col justify-center items-center overflow-x-hidden pt-[100px] pb-[50px] px-[10vw] sm:px-[15vw]'>
+      <div className='w-[10vw] sm:w-[5vw] z-[-10] absolute top-8 align-middle'>
+        <Image src={Birds} alt="birds" className=''/>
+      </div>
+      <h3 className="text-center text-[16px] xl:text-[24px] text-green11">CEOTalk is the final event of the Integrated Youth Renewable Energy Festival (IYREF) 2024 following the announcement of the competitions’ winners. Here, you’re welcome to listen to experts in renewable energy, enrich your knowledge, and understand the current developments in the world of renewable energy. As young people, we have the responsibility to preserve and expand our resources towards a better future, and that’s with the help of renewable energy.</h3>
+      <div className="mt-[50px] h-[5px] w-[175px] xl:w-[295px] rounded-full bg-gradient-to-r from-green11 to-green8"></div>
+    </div>
+  )
+}
+
+export default About

src/contexts/IYREF/CEOTalks/Footer.tsx

@@ -0,0 +1,19 @@
+import Image from 'next/image'
+import FooterImage from '@src/assets/Images/Navigation/Footer/FooterIllustration.svg'
+
+const Footer = (): JSX.Element => {
+  return (
+    <footer className='flex flex-col overflow-x-hidden'>
+      <div className='flex flex-col w-[101%]'>
+        <Image
+          src={FooterImage}
+          alt="Footer Illustration"
+          className="mb-[25px]"
+          draggable={false}
+        />
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

src/contexts/IYREF/CEOTalks/Hero.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Image from 'next/image'
+import Header from '@src/assets/Images/IYREF/CEOTalks/Hero/Header.png'
+
+const Hero = (): JSX.Element => {
+  return (
+    <div className='h-screen flex flex-col justify-center items-center overflow-x-hidden'>
+      <div className='relative w-full h-full'>
+        <Image
+          src={Header}
+          alt='Background'
+          layout='fill'
+          objectFit='cover'
+          placeholder='blur'
+        />
+        <div className='w-full h-full opacity-30 bg-[#000000]'></div>
+        <div className='absolute inset-0 justify-center items-center flex flex-col'>
+          <div className='font-montserrat text-center text-white'>
+            <h1 className='xl:text-[48px] md:text-[38px] text-[28px] font-bold leading-[40px] md:leading-[60px] animate__animated animate__fadeInUp'>
+                CEOTalks
+            </h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Hero