From 89077b8c05c6e5cb9535be802bfa5ffd2800ac86 Mon Sep 17 00:00:00 2001
From: Bhaskar Metiya <bhaskarmetiya@gmail.com>
Date: Mon, 22 Jul 2024 13:07:01 +0530
Subject: [PATCH] 4k css changes. hope it doesn't get worse

---
 src/components/Cp/Cp.jsx             |  8 +--
 src/components/Faq/Faq.jsx           | 10 ++--
 src/components/Footer/Footer.jsx     | 20 +++----
 src/components/Navbar.jsx            |  8 +--
 src/components/Schedule/Schedule.jsx | 82 ++++++++++++++--------------
 src/components/Sponsors/Sponsors.jsx | 46 ++++++++--------
 src/components/Tracks/Tracks.jsx     | 17 +++---
 src/pages/LandingPage.jsx            | 20 +++----
 tailwind.config.js                   |  4 ++
 9 files changed, 111 insertions(+), 104 deletions(-)

diff --git a/src/components/Cp/Cp.jsx b/src/components/Cp/Cp.jsx
index 7d41d90..6940a06 100644
--- a/src/components/Cp/Cp.jsx
+++ b/src/components/Cp/Cp.jsx
@@ -62,12 +62,12 @@ const SimpleSlider = ({ images, direction }) => {
         }}
       >
         {images.map((image, index) => (
-          <div key={index} className="slide my-3 sm:my-6 mx-4 sm:mx-10 w-[200px] sm:w-[30vw] md:w-[25vw] xl:w-[20vw]">
+          <div key={index} className="slide my-3 sm:my-6 mx-4 sm:mx-10 w-[200px] sm:w-[30vw] md:w-[25vw] xl:w-[20vw] 3xl:w-[20vw]">
             <img
             // adding the extra text to get it to display on github pages (only for dev) (remove before deploy)
               src={(window.location.href == "https://iiitkalyanifosc.github.io/Hackathon-website-2024/" ? "/Hackathon-website-2024" : "") + image.src}
               alt={image.alt}
-              className="slide-image"
+              className="slide-image 3xl:w-[15vw]"
               style={{
                 transform: `translateY(${bgPosition.y}px)`
               }}
@@ -82,8 +82,8 @@ const SimpleSlider = ({ images, direction }) => {
 const Cp = () => {
   return (
     <div className="sliders-wrapper mt-4">
-      <div className="w-full max-md:px-5 max-xl:px-10 xl:w-[1280px] self-center mb-0 sm:mb-8">
-        <h1 className='text-2xl md:text-4xl xl:text-5xl text-[#9E9E9E]'>
+      <div className="w-full max-md:px-5 max-xl:px-10 xl:w-[1280px] 3xl:w-[2000px] self-center mb-0 sm:mb-8">
+        <h1 className='text-2xl md:text-4xl xl:text-5xl 3xl:text-7xl text-[#9E9E9E]'>
           $ sudo apt-get i&nbsp;<span className='text-white'>commun<span className='text-red'>1</span>ty partners</span>
         </h1>
       </div>
diff --git a/src/components/Faq/Faq.jsx b/src/components/Faq/Faq.jsx
index 094760c..5d1524e 100644
--- a/src/components/Faq/Faq.jsx
+++ b/src/components/Faq/Faq.jsx
@@ -56,16 +56,16 @@ const Faq = () => {
   return (
     <section id='faq' className='max-[768px]:pt-[60px] pt-[95px]'>
       <div className="relative w-full flex items-start justify-center">
-        <div className="relative z-10 text-left mx-4 md:mx-8 lg:mx-12 xl:mx-20 w-full max-w-[1280px]">
-          <h1 className="text-[#9E9E9E] text-2xl md:text-4xl xl:text-5xl m-0">
+        <div className="relative z-10 text-left mx-4 md:mx-8 lg:mx-12 xl:mx-20 w-full max-w-[1280px] 3xl:max-w-[2000px]">
+          <h1 className="text-[#9E9E9E] text-2xl md:text-4xl xl:text-5xl 3xl:text-7xl m-0">
             $ ./<span id="heading-rules" className="text-white">FAQ</span>
           </h1>
           <div className="relative z-10 w-auto p-6 rounded-lg">
             <div className="sm:mt-4">
               <div id="accordionFaq">
                 {faqData.map((faq, index) => (
-                  <div key={index} className="mb-2 sm:mb-4">
-                    <h1 className="text-white text-xl sm:text-2xl xl:text-3xl m-0 flex">
+                  <div key={index} className="mb-2 sm:mb-4 3xl:mb-8">
+                    <h1 className="text-white text-xl sm:text-2xl xl:text-3xl 3xl:text-5xl m-0 flex">
                       <button
                         onClick={() => handleToggle(index)}
                         className={`faq-collapsible text-[#E5B567] mr-2 h-[50%] group relative flex items-center justify-center rounded-none border-0 transition hover:z-[2] focus:z-[3] focus:outline-none ${openIndex === index ? "text-[#169B81]" : ""}`}
@@ -78,7 +78,7 @@ const Faq = () => {
                     <div
                       className={`overflow-hidden transition-all duration-500 ease-in-out ${openIndex === index ? 'max-h-[1000px]' : 'max-h-0'}`}
                     >
-                      <div className="text-[#D6D6D6] text-left text-xl sm:text-2xl pl-8 sm:pl-10 2xl:pl-12 mt-2">
+                      <div className="text-[#D6D6D6] text-left text-xl sm:text-2xl 3xl:text-4xl pl-8 sm:pl-10 2xl:pl-12 mt-2">
                         {faq.answer}
                       </div>
                     </div>
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 1b53251..862b0a9 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -37,10 +37,10 @@ function Footer() {
         ></div>
                         <div className="flex flex-col lg:flex-row justify-center lg:justify-evenly items-center gap-5">
                             <div className="address footerelements text-center">
-                                <h1 className="footerheading text-2xl md:text-4xl md:mt-0 m-0 text-heading-footer">
+                                <h1 className="footerheading text-2xl md:text-4xl 3xl:text-6xl md:mt-0 m-0 text-heading-footer">
                                     ADDRESS
                                 </h1>
-                                <p className="footercontent text-xl md:text-2xl addresscontent text-[#BEBEBE] hover:text-white">
+                                <p className="footercontent text-xl md:text-2xl 3xl:text-4xl addresscontent text-[#BEBEBE] hover:text-white">
                                     <a href="https://goo.gl/maps/PPd7UW3EXEUvu7po7" target="_blank" rel="noopener noreferrer">
                                         <span className="text-style-footer">APC Ray Lecture Hall Complex <br /></span>
                                         <span className="text-style-footer">IISER Kolkata</span>
@@ -48,8 +48,8 @@ function Footer() {
                                 </p>
                             </div>
                             <div className="resources footerelements text-center">
-                                <h1 className="footerheading text-2xl md:text-4xl m-0 text-heading-footer">RESOURCES</h1>
-                                <a href="https://drive.google.com/file/d/1thr3gYMwAX-h0DmaEIGyba44lG53hRxg/view?usp=sharing" className="footercontent text-xl md:text-2xl resourcecontent  text-[#BEBEBE] hover:text-white mb-2" target="_blank" rel="noopener noreferrer text-style-footer">
+                                <h1 className="footerheading text-2xl md:text-4xl 3xl:text-6xl m-0 text-heading-footer">RESOURCES</h1>
+                                <a href="https://drive.google.com/file/d/1thr3gYMwAX-h0DmaEIGyba44lG53hRxg/view?usp=sharing" className="footercontent text-xl md:text-2xl 3xl:text-4xl resourcecontent  text-[#BEBEBE] hover:text-white mb-2" target="_blank" rel="noopener noreferrer text-style-footer">
                                     Sponsorship Brochure<br />
                                 </a>
                                 {/* <a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf" className="footercontent text-xl md:text-2xl resourcecontent cursor-pointer text-[#BEBEBE] hover:text-white" target="_blank" rel="noopener noreferrer text-style-footer">
@@ -63,22 +63,22 @@ function Footer() {
                                 </a>  */}
                             </div>
                             <div className="social text-center xl:text-left">
-                                <h1 className="footerheading footerelements text-center text-2xl md:text-4xl m-0 mb-2 text-heading-footer">
+                                <h1 className="footerheading footerelements text-center text-2xl md:text-4xl 3xl:text-6xl m-0 mb-2 text-heading-footer">
                                     STAY CONNECTED
                                 </h1>
                                 <div className="flex justify-center xl:justify-between gap-7 md:gap-10">
                                     <a href="https://www.instagram.com/status._code_1?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==" target="_blank" rel="noopener noreferrer">
-                                        <img className="sociallogos insta_logo brightness-0 invert-[1] hover:filter-none w-auto h-auto max-w-[30px]" src={instaLogo} alt="insta_logo" />
+                                        <img className="sociallogos insta_logo brightness-0 invert-[1] hover:filter-none w-auto h-auto max-w-[30px] 3xl:max-w-[60px]" src={instaLogo} alt="insta_logo" />
                                     </a>
                                     <a href="https://twitter.com/Status_Code_" target="_blank" rel="noopener noreferrer">
-                                        <img className="twitter_logo sociallogos brightness-0 invert-[1] hover:invert-[0.5] w-auto h-auto max-w-[30px]" src={twitterLogo} alt="twitter_logo" />
+                                        <img className="twitter_logo sociallogos brightness-0 invert-[1] hover:invert-[0.5] w-auto h-auto max-w-[30px] 3xl:w-[60px]" src={twitterLogo} alt="twitter_logo" />
                                     </a>
                                     <a href="https://www.linkedin.com/company/statuscode0/" target="_blank" rel="noopener noreferrer" className="relative w-[30px]">
-                                        <img className="sociallogos linkedin_logo absolute w-auto h-auto max-w-[30px] peer z-10 brightness-0 invert-[1] hover:filter-none" src={linkedinLogo} alt="linkedin_logo" />
+                                        <img className="sociallogos linkedin_logo absolute w-auto h-auto max-w-[30px] 3xl:max-w-[60px] peer z-10 brightness-0 invert-[1] hover:filter-none" src={linkedinLogo} alt="linkedin_logo" />
                                         <div className="w-[70%] h-[75%] absolute top-2 left-2 peer-hover:bg-white"></div>
                                     </a>
                                     <a href="https://discord.gg/UHwPBzy7UF" target="_blank" rel="noopener noreferrer">
-                                        <img className="sociallogos discord_logo brightness-0 invert-[1] hover:filter-none w-auto h-auto max-w-[30px]" src={discordLogo} alt="discord_logo" />
+                                        <img className="sociallogos discord_logo brightness-0 invert-[1] hover:filter-none w-auto h-auto max-w-[30px] 3xl:max-w-[60px]" src={discordLogo} alt="discord_logo" />
                                     </a>
                                 </div>
                             </div>
@@ -87,7 +87,7 @@ function Footer() {
                 </div>
                 <div className='footer-container'>
                     <img src={footer} alt="" className='img-background' />
-                    <h1 className="m-0 text-xl xl:text-2xl text-bottom-footer">© 2024 IIIT Kalyani</h1>
+                    <h1 className="m-0 text-xl xl:text-2xl 3xl:text-4xl text-bottom-footer">© 2024 IIIT Kalyani</h1>
                 </div>
             </div>
         </>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 8943e22..3130f3b 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -35,11 +35,11 @@ export default function Navbar(){
     };
     return(
         <section className="w-full relative">
-        <nav className="fixed  min-[3840px]:px-[250px] px-7 z-30 flex md:justify-between bg-gradient-to-b max-[768px]:space-x-5 from-[#040842] to-[#040842]  w-full h-[96px] min-[3840px]:h-[250px] max-[540px]:h-[60px] mt-0 bg-blue-800 font-vt323 leading-[96px] ">
+        <nav className="fixed  3xl:px-[250px] px-7 z-30 flex md:justify-between bg-gradient-to-b max-[768px]:space-x-5 from-[#040842] to-[#040842]  w-full h-[96px] 3xl:h-[250px] max-[540px]:h-[60px] mt-0 bg-blue-800 font-vt323 leading-[96px] ">
             
-            <img className="justify-start min-[3840px]:w-[300px] max-[450px]:w-[86px] max-[540px]:w-[90px] max-[640px]:w-[100px] sm:w-[107px] md:w-[88px] lg:w-[107px] xl:w-[120px] " src={sc1_logo}></img>
+            <img className="justify-start 3xl:w-[300px] max-[450px]:w-[86px] max-[540px]:w-[90px] max-[640px]:w-[100px] sm:w-[107px] md:w-[88px] lg:w-[107px] xl:w-[120px] " src={sc1_logo}></img>
             
-            <ul className=" justify-center flex min-[3840px]:text-[80px] min-[3840px]:space-x-[7rem]  xl:space-x-[4rem] lg:space-x-[3rem] sm:space-x-[1.6rem] sm:text-[22px] min-[540px]:space-x-[1.6rem] min-[540px]:text-[22px] md:text-[25px] md:space-x-5 lg:text-[1.8 rem] xl:text-[2.3rem] text-white items-center max-[768px]:hidden ">
+            <ul className=" justify-center flex 3xl:text-6xl 3xl:space-x-[7rem]  xl:space-x-[4rem] lg:space-x-[3rem] sm:space-x-[1.6rem] sm:text-[22px] min-[540px]:space-x-[1.6rem] min-[540px]:text-[22px] md:text-[25px] md:space-x-5 lg:text-[1.8 rem] xl:text-[2.3rem] text-white items-center max-[768px]:hidden ">
                 <a onClick={scrollToSchedule} ><li className="hover:text-[#c3c3c3]">SCHEDULE</li></a>
                 <a onClick={scrollToTracks}><li className="hover:text-[#c3c3c3]">TRACKS</li></a>
                 <a onClick={scrollToSponsors}><li className="hover:text-[#c3c3c3]">SPONSORS</li></a>
@@ -47,7 +47,7 @@ export default function Navbar(){
                 <a onClick={scrollToFooter}><li className="hover:text-[#c3c3c3]">CONTACT US</li></a>
 
             </ul>
-            <img className= "justify-end min-[3840px]:w-[400px] md:w-[110px] lg:w-[154px] xl:w-[175px] max-[768px]:hidden" src={iiit_logo}></img>
+            <img className= "justify-end 3xl:w-[400px] md:w-[110px] lg:w-[154px] xl:w-[175px] max-[768px]:hidden" src={iiit_logo}></img>
             <img className="min-[768px]:hidden sm:w-[50px] max-[450px]:w-[35px] max-[540px]:w-[40px] max-[640px]:w-[50px]" src={iiit_logo_mobile}></img>
             
         </nav>
diff --git a/src/components/Schedule/Schedule.jsx b/src/components/Schedule/Schedule.jsx
index 2a66151..1f79d5b 100644
--- a/src/components/Schedule/Schedule.jsx
+++ b/src/components/Schedule/Schedule.jsx
@@ -87,127 +87,127 @@ function Schedule() {
                     // backgroundSize: 'cover',
                 }}
             >
-                <div className='max-w-[1280px] md:mx-8 lg:mx-12 xl:mx-auto'>
-                    <h1 className='mx-5 xl:mx-0 py-6 text-left text-2xl md:text-4xl xl:text-5xl text-[#9E9E9E]'>$ cat <span className='text-white'>SCHEDULE</span>.txt</h1>
+                <div className='max-w-[1280px] 3xl:max-w-[2000px] md:mx-8 lg:mx-12 xl:mx-auto'>
+                    <h1 className='mx-5 xl:mx-0 py-6 text-left text-2xl md:text-4xl xl:text-5xl 3xl:text-7xl text-[#9E9E9E]'>$ cat <span className='text-white'>SCHEDULE</span>.txt</h1>
                     <div className="mx-5 xl:mx-0 timeline mx-30 flex justify-center">
-                        <button className="prev mr-10 opacity-50 hover:opacity-100 min-w-[30px]">
+                        <button className="prev mr-10 opacity-50 hover:opacity-100 min-w-[30px] 3xl:min-w-[60px]">
                             <img src={left_key} alt="" />
                         </button>
 
                         <div className="contents mx-30 px-10 flex mx-auto">
                             <div
-                                className="timeline-wrapper max-w-[990px] flex overflow-x-auto no-scrollbar" ref={timelineWrapperRef}
+                                className="timeline-wrapper max-w-[990px] 3xl:max-w-[1880px] flex overflow-x-auto no-scrollbar" ref={timelineWrapperRef}
                             >
                                 <div
-                                    className="flex flex-col justify-center items-center min-w-[330px]"
+                                    className="flex flex-col justify-center items-center min-w-[330px] 3xl:min-w-[660px] m-1"
                                 >
-                                    <h1 className="text-[#FF6D75] text-3xl md:text-4xl xl:text-4xl">
+                                    <h1 className="text-[#FF6D75] text-3xl md:text-4xl xl:text-4xl 3xl:text-6xl">
                                         May 5
                                     </h1>
-                                    <h3 className="text-[#00FFDF] text-1xl md:text-2xl xl:text-2xl">
+                                    <h3 className="text-[#00FFDF] text-1xl md:text-2xl xl:text-2xl 3xl:text-4xl">
                                         12:00 AM
                                     </h3>
-                                    <img src={bounty} alt="" />
-                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl">
+                                    <img src={bounty} alt="" className='3xl:w-full'/>
+                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl 3xl:text-5xl">
                                         Registration
                                     </h3>
-                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl">
+                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl 3xl:text-5xl">
                                         Begins
                                     </h3>
                                 </div>
 
                                 <div
-                                    className="flex flex-col justify-center items-center min-w-[330px] m-1"
+                                    className="flex flex-col justify-center items-center min-w-[330px] 3xl:min-w-[660px] m-1"
                                 >
-                                    <h1 className="text-[#FFC977] text-3xl md:text-4xl xl:text-4xl">
+                                    <h1 className="text-[#FFC977] text-3xl md:text-4xl xl:text-4xl 3xl:text-6xl">
                                         July 30
                                     </h1>
-                                    <h3 className="text-[#00FFDF] text-1xl md:text-2xl xl:text-2xl">
+                                    <h3 className="text-[#00FFDF] text-1xl md:text-2xl xl:text-2xl 3xl:text-4xl">
                                         12:00 AM
                                     </h3>
-                                    <img src={bounty} alt="" />
-                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl">
+                                    <img src={bounty} alt=""  className='3xl:w-full'/>
+                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl 3xl:text-5xl">
                                         Registration
                                     </h3>
-                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl">
+                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl 3xl:text-5xl">
                                         Closes
                                     </h3>
                                 </div>
 
                                 <div
-                                    className="flex flex-col justify-center items-center min-w-[330px] m-1"
+                                    className="flex flex-col justify-center items-center min-w-[330px] 3xl:min-w-[660px] m-1"
                                 >
-                                    <h1 className="text-[#DA77D6] text-3xl md:text-4xl xl:text-4xl">
+                                    <h1 className="text-[#DA77D6] text-3xl md:text-4xl xl:text-4xl 3xl:text-6xl">
                                         Aug 24
                                     </h1>
-                                    <h3 className="text-[#00FFDF] text-1xl md:text-2xl xl:text-2xl">
+                                    <h3 className="text-[#00FFDF] text-1xl md:text-2xl xl:text-2xl 3xl:text-4xl">
                                         11:00 AM
                                     </h3>
-                                    <img src={bounty} alt="" />
-                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl">
+                                    <img src={bounty} alt=""  className='3xl:w-full'/>
+                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl 3xl:text-5xl">
                                         Hacking
                                     </h3>
-                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl">
+                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl 3xl:text-5xl">
                                         Starts
                                     </h3>
                                 </div>
 
                                 <div
-                                    className="flex flex-col justify-center items-center min-w-[330px] m-1"
+                                    className="flex flex-col justify-center items-center min-w-[330px] 3xl:min-w-[660px] m-1"
                                 >
-                                    <h1 className="text-[#FF6D75] text-3xl md:text-4xl xl:text-4xl">
+                                    <h1 className="text-[#FF6D75] text-3xl md:text-4xl xl:text-4xl 3xl:text-6xl">
                                         Aug 24
                                     </h1>
-                                    <h3 className="text-[#00FFDF] text-1xl md:text-2xl xl:text-2xl">
+                                    <h3 className="text-[#00FFDF] text-1xl md:text-2xl xl:text-2xl 3xl:text-4xl">
                                         11:00 PM
                                     </h3>
-                                    <img src={bounty} alt="" />
-                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl">
+                                    <img src={bounty} alt=""  className='3xl:w-full'/>
+                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl 3xl:text-5xl">
                                         Mid
                                     </h3>
-                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl">
+                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl 3xl:text-5xl">
                                         Evaluation
                                     </h3>
                                 </div>
 
                                 <div
-                                    className="flex flex-col justify-center items-center min-w-[330px] m-1"
+                                    className="flex flex-col justify-center items-center min-w-[330px] 3xl:min-w-[660px] m-1"
                                 >
-                                    <h1 className="text-[#FFC977] text-3xl md:text-4xl xl:text-4xl">
+                                    <h1 className="text-[#FFC977] text-3xl md:text-4xl xl:text-4xl 3xl:text-6xl">
                                         Aug 25
                                     </h1>
-                                    <h3 className="text-[#00FFDF] text-1xl md:text-2xl xl:text-2xl">
+                                    <h3 className="text-[#00FFDF] text-1xl md:text-2xl xl:text-2xl 3xl:text-4xl">
                                         04:00 PM
                                     </h3>
-                                    <img src={bounty} alt="" />
-                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl">
+                                    <img src={bounty} alt=""  className='3xl:w-full'/>
+                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl 3xl:text-5xl">
                                         Final
                                     </h3>
-                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl">
+                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl 3xl:text-5xl">
                                         Evaluation
                                     </h3>
                                 </div>
 
                                 <div
-                                    className="flex flex-col justify-center items-center min-w-[330px] m-1"
+                                    className="flex flex-col justify-center items-center min-w-[330px] 3xl:min-w-[660px] m-1"
                                 >
-                                    <h1 className="text-[#DA77D6] text-3xl md:text-4xl xl:text-4xl">
+                                    <h1 className="text-[#DA77D6] text-3xl md:text-4xl xl:text-4xl 3xl:text-6xl">
                                         Aug 25
                                     </h1>
-                                    <h3 className="text-[#00FFDF] text-1xl md:text-2xl xl:text-2xl">
+                                    <h3 className="text-[#00FFDF] text-1xl md:text-2xl xl:text-2xl 3xl:text-4xl">
                                         05:15 PM
                                     </h3>
-                                    <img src={bounty} alt="" />
-                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl">
+                                    <img src={bounty} alt=""  className='3xl:w-full'/>
+                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl 3xl:text-5xl">
                                         Closing
                                     </h3>
-                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl">
+                                    <h3 className="text-[#FFFFFF] text-2xl md:text-3xl xl:text-3xl 3xl:text-5xl">
                                         Ceremony
                                     </h3>
                                 </div>
                             </div>
                         </div>
-                        <button className="next ml-10 opacity-50 hover:opacity-100 min-w-[30px]">
+                        <button className="next ml-10 opacity-50 hover:opacity-100 min-w-[30px] 3xl:min-w-[60px]">
                             <img src={right_key} alt="" />
                         </button>
                     </div>
diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx
index c6aa1c1..43dbf3a 100644
--- a/src/components/Sponsors/Sponsors.jsx
+++ b/src/components/Sponsors/Sponsors.jsx
@@ -57,12 +57,12 @@ const Sponsors = () => {
             backgroundPosition: `${50}% ${50 - bgPosition.y}%`,
             backgroundSize: bgSize,
         }} id='sponsors'>
-            <div className="max-w-[1280px] md:mx-8 lg:mx-12 xl:mx-auto">
-                <h1 className='mx-5 xl:mx-0 py-6 md:text-left text-2xl md:text-4xl xl:text-5xl text-[#9E9E9E]'>$ tar -xvzf <span className='text-white'>SPONSORS</span>.tar.gz</h1>
+            <div className="max-w-[1280px] 3xl:max-w-[2000px] md:mx-8 lg:mx-12 xl:mx-auto">
+                <h1 className='mx-5 xl:mx-0 py-6 md:text-left text-2xl md:text-4xl xl:text-5xl 3xl:text-7xl text-[#9E9E9E]'>$ tar -xvzf <span className='text-white'>SPONSORS</span>.tar.gz</h1>
 
                 <div className='mb-4 flex flex-col gap-1 sm:gap-1'>
                     {/* <h1 className="font-vt323 font-medium text-[12vw] leading-[12vw] sm:leading-[4rem] md:leading-[5rem] md:text-[9vw] lg:text-[7vw] xl:text-[6vw] xl:leading-[6rem] 3xl:leading-[8rem]" style={{ background: 'linear-gradient(to right, blue,blue,#dd50b3,#dd50b3)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>SPONSORS</h1> */}
-                    <p className='font-vt323 text-gray-400 w-[90vw] leading-[5vw] text-[4.5vw] sm:leading-0 sm:px-0  sm:w-[70vw] sm:text-lg sm:leading-5 md:text-[2.8vw] md:leading-6 md:w-[75vw] lg:text-xl lg:w-[56vw] lg:leading-5 xl:text-3xl xl:w-[55rem] text-center mx-auto'>Thank you to our generous sponsors for contributing to the prize pool and making this awesome event a reality!</p>
+                    <p className='font-vt323 text-gray-400 w-[90vw] leading-[5vw] text-[4.5vw] sm:leading-0 sm:px-0  sm:w-[70vw] sm:text-lg sm:leading-5 md:text-[2.8vw] md:leading-6 md:w-[75vw] lg:text-xl lg:w-[56vw] lg:leading-5 xl:text-3xl xl:w-[55rem] 3xl:text-5xl 3xl:w-[75rem] text-center mx-auto'>Thank you to our generous sponsors for contributing to the prize pool and making this awesome event a reality!</p>
                 </div>
 
                 {/* <div className='pt-1 pb-4 sm:pt-4 sm:pb-10 w-[80vw] sm:w-[75vw] mx-auto border-dashed border-cyan-500 border-b-[0.1rem] sm:border-b-[0.5rem] flex flex-col items-center justify-center gap-4'>
@@ -74,27 +74,27 @@ const Sponsors = () => {
                     </div>
                 </div> */}
 
-                {/* TITLE SPONSOR */}
+                {/* DIAMOND SPONSOR */}
                 <div className='pt-3 pb-4 md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto border-dashed border-[#5FA6FF] border-b-[0.1rem] sm:border-b-[0.5rem] flex flex-col items-center justify-center gap-5 lg:gap-6'>
                     <h1 className='font-vt323 font-medium text-[#5FA6FF] text-[9vw] leading-[5vw] sm:leading-[3.5rem] sm:text-[7vw] lg:text-[6vw] lg:leading-[3rem] xl:text-[5vw] xl:leading-[5rem] 3xl:text-[4vw]'>DIAMOND</h1>
                     <div className='flex items-center justify-center gap-5 sm:gap-20 max-sm:mb-4'>
                         {/* <Link to='https://www.avax.network/'><img src={avalancheLogo} alt="devfolio" width={1000} height={1000} className='w-[50vw] sm:w-[30vw] 3xl:w-[20rem] 3xl:h-[4rem]' /></Link> */}
-                        <Link to='https://0x.day/'><img src={oxDayLogo} alt="devfolio" width={1000} height={1000} className='w-[40vw] sm:w-[19vw] 3xl:w-[20rem] 3xl:h-[4rem]' /></Link>
+                        <Link to='https://0x.day/'><img src={oxDayLogo} alt="devfolio" width={1000} height={1000} className='w-[40vw] sm:w-[19vw] 3xl:w-[20rem]' /></Link>
                     </div>
                 </div>
 
                 {/* PLATINUM */}
-                <div className='pt-3 pb-4 md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto border-dashed border-[#9d44c0] border-b-[0.1rem] sm:border-b-[0.5rem] flex flex-col items-center justify-center gap-5 lg:gap-6'>
+                <div className='pt-3 3xl:pt-10 pb-4 md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto border-dashed border-[#9d44c0] border-b-[0.1rem] sm:border-b-[0.5rem] flex flex-col items-center justify-center gap-5 lg:gap-6'>
                     <h1 className='font-vt323 font-medium text-[#9d44c0] text-[9vw] leading-[5vw] sm:leading-[3.5rem] sm:text-[7vw] lg:text-[6vw] lg:leading-[3rem] xl:text-[5vw] xl:leading-[5rem] 3xl:text-[4vw]'>PLATINUM</h1>
                     <div className='flex flex-wrap max-sm:flex-col items-center justify-center gap-5 sm:gap-20 max-sm:mb-4'>
                         {/* <img src={VectorLogo} alt="vector" className='w-[25vw] h-[5vw] sm:w-[20vw] sm:h-[4vw]' /> */}
                         <Link to='https://devfolio.co/'><img src={devfolioLogo} alt="devfolio" width={1000} height={1000} className='w-[40vw] sm:w-[20vw] 3xl:w-[20rem] 3xl:h-[4rem]' /></Link>
-                        <Link to='https://gian.org/'><img src={gianLogo} alt="devfolio" width={1000} height={1000} className='w-[20vw] sm:w-[10vw] sm:-translate-y-2 3xl:w-[20rem] 3xl:h-[4rem]' /></Link>
+                        <Link to='https://gian.org/'><img src={gianLogo} alt="devfolio" width={1000} height={1000} className='w-[20vw] sm:w-[10vw] sm:-translate-y-2 3xl:w-[20rem]' /></Link>
                     </div>
                 </div>
 
                 {/* GOLD */}
-                <div className='pt-3 pb-4 border-dashed border-[#e29b29] border-b-[0.1rem] sm:border-b-[0.5rem] md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto flex flex-col items-center justify-center gap-5 lg:gap-6'>
+                <div className='pt-3 3xl:pt-10 pb-4 border-dashed border-[#e29b29] border-b-[0.1rem] sm:border-b-[0.5rem] md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto flex flex-col items-center justify-center gap-5 lg:gap-6'>
                     <h1 className='font-vt323 font-medium text-[#e29b29] text-[9vw] leading-[5vw] sm:leading-[3.5rem] sm:text-[7vw] lg:text-[6vw] lg:leading-[3rem] xl:text-[5vw] xl:leading-[5rem] 3xl:text-[4vw]'>GOLD</h1>
                     <div className='flex flex-wrap max-sm:flex-col items-center  justify-center gap-4 sm:gap-y-12 sm:gap-x-32 px-12 max-sm:gap-y-8 max-sm:mb-4'>
                         {/* <img src={falconLogo} alt="falcon" className='w-[28vw] h-[8vw] sm:w-[18vw] sm:h-[5vw]' />
@@ -104,51 +104,51 @@ const Sponsors = () => {
                         <img src={devfolioLogo} alt="devfolio" className='w-[27vw] h-[6vw] sm:w-[22vw] sm:h-[4vw]' />
                          */}
                         <Link to='https://polygon.technology/'><img src={polygonLogo} alt="polygon" width={1000} height={1000} className='w-[40vw]  sm:w-[20vw] 3xl:w-[20rem] ' /></Link>
-                        <Link to='https://ethindia.co/'><img src={ethIndiaLogo} alt="ethIndia" width={1000} height={1000} className='w-[40vw] sm:w-[20vw] 3xl:w-[20rem] 3xl:h-[4rem]' /></Link>
-                        <Link to='https://www.wolfram.com/'><img src={wolframLogo} alt="wolframLogo" width={1000} height={1000} className='w-[40vw] sm:w-[20vw] 3xl:w-[20rem] 3xl:h-[4rem]' /></Link>
-                        <Link to='https://beeceptor.com/'><img src={beeceptorLogo} alt="beeceptorLogo" width={1000} height={1000} className='w-[40vw] sm:w-[20vw] 3xl:w-[20rem] 3xl:h-[4rem]' /></Link>
+                        <Link to='https://ethindia.co/'><img src={ethIndiaLogo} alt="ethIndia" width={1000} height={1000} className='w-[40vw] sm:w-[20vw] 3xl:w-[20rem]' /></Link>
+                        <Link to='https://www.wolfram.com/'><img src={wolframLogo} alt="wolframLogo" width={1000} height={1000} className='w-[40vw] sm:w-[20vw] 3xl:w-[20rem]' /></Link>
+                        <Link to='https://beeceptor.com/'><img src={beeceptorLogo} alt="beeceptorLogo" width={1000} height={1000} className='w-[40vw] sm:w-[20vw] 3xl:w-[20rem]' /></Link>
                     </div>
                 </div>
 
                 {/* SILVER */}
-                <div className='pt-3 pb-4 border-dashed border-[#9e9e9e] border-b-[0.1rem] sm:border-b-[0.5rem] md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto flex flex-col items-center justify-center gap-5 lg:gap-6'>
+                <div className='pt-3 3xl:pt-10 pb-4 border-dashed border-[#9e9e9e] border-b-[0.1rem] sm:border-b-[0.5rem] md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto flex flex-col items-center justify-center gap-5 lg:gap-6'>
                     <h1 className='font-vt323 font-medium text-[#9e9e9e] text-[9vw] leading-[5vw] sm:leading-[3.5rem] sm:text-[7vw] lg:text-[6vw] lg:leading-[3rem] xl:text-[5vw] xl:leading-[5rem] 3xl:text-[4vw]'>SILVER</h1>
                     <div className='flex flex-wrap max-sm:flex-col items-center justify-center gap-6 sm:gap-16 md:px-12 2xl:px-24 max-sm:gap-y-8'>
                         {/* <img src={githubLogo} alt="github" className='w-[16vw] h-[6vw] sm:w-[12vw] sm:h-[5vw]' />
                         <img src={jinaLogo} alt="jina" className='w-[16vw] h-[7vw] sm:w-[12vw] sm:h-[5vw]' /> */}
-                        <Link to='https://rosenfeldmedia.com/'><img src={rosenfeldLogo} alt="echo3D" className='w-[35vw] sm:w-[18vw] md:w-[15vw]' /></Link>
-                        <Link to='https://www.echo3d.com/'><img src={echo3DLogo} alt="echo3D" className='w-[35vw] sm:w-[18vw] md:w-[15vw]' /></Link>
-                        <Link to='https://www.axure.com/'><img src={axureLogo} alt="echo3D" className='w-[30vw] sm:w-[18vw] md:w-[15vw]' /></Link>
-                        <Link to='https://artofproblemsolving.com/'><img src={aopsLogo} alt="echo3D" className='w-[35vw] sm:w-[18vw] md:w-[15vw]' /></Link>
-                        <Link to='https://www.interviewcake.com/'><img src={interviewCakeLogo} alt="echo3D" className='w-[40vw] sm:w-[18vw] md:w-[15vw]' /></Link>
+                        <Link to='https://rosenfeldmedia.com/'><img src={rosenfeldLogo} alt="echo3D" className='w-[35vw] sm:w-[18vw] md:w-[15vw] 3xl:w-[20rem]' /></Link>
+                        <Link to='https://www.echo3d.com/'><img src={echo3DLogo} alt="echo3D" className='w-[35vw] sm:w-[18vw] md:w-[15vw] 3xl:w-[20rem]' /></Link>
+                        <Link to='https://www.axure.com/'><img src={axureLogo} alt="echo3D" className='w-[30vw] sm:w-[18vw] md:w-[15vw] 3xl:w-[20rem]' /></Link>
+                        <Link to='https://artofproblemsolving.com/'><img src={aopsLogo} alt="echo3D" className='w-[35vw] sm:w-[18vw] md:w-[15vw] 3xl:w-[20rem]' /></Link>
+                        <Link to='https://www.interviewcake.com/'><img src={interviewCakeLogo} alt="echo3D" className='w-[40vw] sm:w-[18vw] md:w-[15vw] 3xl:w-[20rem]' /></Link>
                     </div>
                 </div>
 
                 {/* VENUE PARTNER */}
-                <div className='pt-3 pb-4 md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto border-dashed border-[#5FA6FF] border-b-[0.1rem] sm:border-b-[0.5rem] flex flex-col items-center justify-center gap-5 lg:gap-6'>
+                <div className='pt-3 3xl:pt-10 pb-4 md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto border-dashed border-[#5FA6FF] border-b-[0.1rem] sm:border-b-[0.5rem] flex flex-col items-center justify-center gap-5 lg:gap-6'>
                     <h1 className='font-vt323 font-medium text-[#5FA6FF] text-[9vw] leading-[5vw] sm:leading-[3.5rem] sm:text-[7vw] lg:text-[6vw] lg:leading-[3rem] xl:text-[5vw] xl:leading-[5rem] 3xl:text-[4vw]'>VENUE PARTNER</h1>
                     <div className='flex flex-wrap max-sm:flex-col items-center justify-center gap-6 sm:gap-16 md:px-12 2xl:px-24 max-sm:gap-y-8'>
                         {/* <img src={githubLogo} alt="github" className='w-[16vw] h-[6vw] sm:w-[12vw] sm:h-[5vw]' />
                         <img src={jinaLogo} alt="jina" className='w-[16vw] h-[7vw] sm:w-[12vw] sm:h-[5vw]' /> */}
-                        <Link to='https://risefoundationiiser.co.in/'><img src={riseLogo} alt="devfolio" width={1000} height={1000} className='w-[30vw] sm:w-[13vw] 3xl:w-[20rem] 3xl:h-[4rem]' /></Link>
+                        <Link to='https://risefoundationiiser.co.in/'><img src={riseLogo} alt="devfolio" width={1000} height={1000} className='w-[30vw] sm:w-[13vw] 3xl:w-[20rem]' /></Link>
                     </div>
                 </div>
 
                 {/* PLATFORM PARTNER */}
-                <div className='pt-3 pb-4 md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto border-dashed border-[#9D44C0] border-b-[0.1rem] sm:border-b-[0.5rem] flex flex-col items-center justify-center gap-5 lg:gap-6'>
+                <div className='pt-3 3xl:pt-10 pb-4 md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto border-dashed border-[#9D44C0] border-b-[0.1rem] sm:border-b-[0.5rem] flex flex-col items-center justify-center gap-5 lg:gap-6'>
                     <h1 className='font-vt323 font-medium text-[#9D44C0] text-[9vw] leading-[5vw] sm:leading-[3.5rem] sm:text-[7vw] lg:text-[6vw] lg:leading-[3rem] xl:text-[5vw] xl:leading-[5rem] 3xl:text-[4vw]'>PLATFORM PARTNER</h1>
                     <div className='flex items-center justify-center gap-5 sm:gap-20 max-sm:mb-4'>
                         {/* <Link to='https://www.avax.network/'><img src={avalancheLogo} alt="devfolio" width={1000} height={1000} className='w-[50vw] sm:w-[30vw] 3xl:w-[20rem] 3xl:h-[4rem]' /></Link> */}
-                        <Link to='https://0x.day/'><img src={oxDayLogo} alt="devfolio" width={1000} height={1000} className='w-[30vw] sm:w-[15vw] 3xl:w-[20rem] 3xl:h-[4rem]' /></Link>
+                        <Link to='https://0x.day/'><img src={oxDayLogo} alt="devfolio" width={1000} height={1000} className='w-[30vw] sm:w-[15vw] 3xl:w-[20rem]' /></Link>
                     </div>
                 </div>
 
                 {/* CERTIFICATE PARTNER */}
-                <div className='pt-3 pb-4 md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto flex flex-col items-center justify-center gap-5 lg:gap-6'>
+                <div className='pt-3 3xl:pt-10 pb-4 md:pt-4 sm:pb-10 w-[80vw] xl:w-[65vw] 2xl:w-full mx-auto flex flex-col items-center justify-center gap-5 lg:gap-6'>
                     <h1 className='font-vt323 font-medium text-[#e29b29] text-[9vw] leading-[5vw] sm:leading-[3.5rem] sm:text-[7vw] lg:text-[6vw] lg:leading-[3rem] xl:text-[5vw] xl:leading-[5rem] 3xl:text-[4vw]'>CERTIFICATE PARTNER</h1>
                     <div className='flex items-center justify-center gap-5 sm:gap-20 max-sm:mb-4'>
                         {/* <Link to='https://www.avax.network/'><img src={avalancheLogo} alt="devfolio" width={1000} height={1000} className='w-[50vw] sm:w-[30vw] 3xl:w-[20rem] 3xl:h-[4rem]' /></Link> */}
-                        <Link to='https://givemycertificate.com/'><img src={certificateLogo} alt="echo3D" className='w-[40vw] sm:w-[18vw] md:w-[18vw]' /></Link>
+                        <Link to='https://givemycertificate.com/'><img src={certificateLogo} alt="giveMyCertificateLogo" className='w-[40vw] sm:w-[18vw] md:w-[18vw] 3xl:w-[30rem]' /></Link>
                     </div>
                 </div>
             </div>
diff --git a/src/components/Tracks/Tracks.jsx b/src/components/Tracks/Tracks.jsx
index 4f935ce..90048fa 100644
--- a/src/components/Tracks/Tracks.jsx
+++ b/src/components/Tracks/Tracks.jsx
@@ -38,6 +38,9 @@ const Tracks = () => {
     const handleCardClick = (trackId) => {
         setSelectedTrack(trackId);
     };
+
+    // todo
+    let cardWidth = (window.innerWidth < 2560) ? 164 : 220;
     
     var slider = document.getElementById('slider');
     const moveRight = () => {
@@ -81,14 +84,14 @@ const Tracks = () => {
         }}>
             {/* <img src={stars} className=" z-0 absolute pointer-events-none w-screen opacity-50"></img> */}
             <img src={trackData[selectedTrack - 1].image} alt="" className='z-1 absolute pointer-events-none left-0 right-0 mx-auto max-w-full xl:-translate-y-48 opacity-50'/>
-            <div className='text-white max-w-[1280px] md:mx-8 lg:mx-12 xl:mx-auto z-2'>
-                <h1 className='py-6 md:text-left text-2xl md:text-4xl xl:text-5xl text-[#9E9E9E]'>$ ls -a <span className='text-white'>TRACKS</span></h1>
+            <div className='text-white max-w-[1280px] 3xl:max-w-[2000px] md:mx-8 lg:mx-12 xl:mx-auto z-2'>
+                <h1 className='py-6 md:text-left text-2xl md:text-4xl xl:text-5xl 3xl:text-7xl text-[#9E9E9E]'>$ ls -a <span className='text-white'>TRACKS</span></h1>
                 <div className='lg:flex'>   
                     <div className="track-section pl-12 xl:w-1/2 mr-5 mb-5 xl:mb-0" >
                         {selectedTrack ? (
                             <div className='track'>
-                                <h2 className='text-5xl md:text-7xl xl:text-8xl my-4 md:my-12'>{trackData[selectedTrack - 1].title}</h2>
-                                <p className='text-lg md:text-xl xl:text-2xl'>{trackData[selectedTrack - 1].description}</p>
+                                <h2 className='text-5xl md:text-7xl xl:text-8xl 3xl:text-9xl my-4 md:my-12'>{trackData[selectedTrack - 1].title}</h2>
+                                <p className='text-lg md:text-xl xl:text-2xl 3xl:text-4xl'>{trackData[selectedTrack - 1].description}</p>
                             </div>
                         ) : (
                             <p>Select a track to see more information.</p>
@@ -96,10 +99,10 @@ const Tracks = () => {
                     </div>
                     <div className="carousel flex items-center gap-5 h-fit self-end">
                         <img src={left_key} alt="" className='opacity-50 hover:opacity-100'onClick={() => {moveLeft(); if(selectedTrack > 1) handleCardClick(selectedTrack - 1)}}/>
-                        <div className='tracks-wrapper flex gap-5 lg:max-w-[480px] overflow-x-auto scroll-smooth no-scrollbar' id='slider'>
+                        <div className='tracks-wrapper flex gap-5 lg:max-w-[480px] 3xl:max-w-[1000px] overflow-x-auto scroll-smooth no-scrollbar' id='slider'>
                             {trackData.map((track) => (
-                                <div key={track.id} className="card min-w-24 sm:min-w-36 grid place-items-center relative" onClick={() => handleCardClick(track.id)}>
-                                    <img src={track.card} alt="" className='opacity-70'/>
+                                <div key={track.id} className="card min-w-24 sm:min-w-36 3xl:min-w-40 grid place-items-center relative" onClick={() => handleCardClick(track.id)}>
+                                    <img src={track.card} alt="" className='opacity-70 3xl:min-w-40'/>
                                     <h4 className='absolute text-lg md:text-2xl left-0 top-0 right-0 bottom-0 m-auto w h-fit text-center px-4'>{track.title}</h4>
                                 </div>
                             ))}
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
index d572115..25c53d1 100644
--- a/src/pages/LandingPage.jsx
+++ b/src/pages/LandingPage.jsx
@@ -64,7 +64,7 @@ function LandingPage() {
   return (
     <>
       <div
-        className=" h-full min-[3840px]:h-[4000px] w-full flex flex-col text-center bg-no-repeat  bg-bg_color m-0"
+        className=" h-full 3xl:h-[4000px] w-full flex flex-col text-center bg-no-repeat  bg-bg_color m-0"
         style={{
           backgroundImage: `url(${BgLandingPage})`,
           backgroundPosition: `${50 + bgPosition.x}% ${20 + bgPosition.y}%`,
@@ -74,20 +74,20 @@ function LandingPage() {
         {/* Hero section */}
         <section
           id="hero"
-          className=" ml-5 mr-5 max-[540px]:mt-[60px] mt-[110px]  min-[3840px]:mt-[250px] "
+          className=" ml-5 mr-5 max-[540px]:mt-[60px] mt-[110px]  3xl:mt-[250px] "
         >
           <div className="">
             <h1
-              className="text-white min-[320px]:text-5xl md:text-7xl xl:text-8xl  min-[3840px]:text-[12vh] font-vt323 max-sm:mt-10"
+              className="text-white min-[320px]:text-5xl md:text-7xl xl:text-8xl  3xl:text-[12vh] font-vt323 max-sm:mt-10"
               style={{ textShadow: "2px 2px 0 rgb(236, 83, 176, 1)" }}
             >
               STATUS CODE <span className="text-red">1</span>
             </h1>
-            <h3 className="text-purple-900 font-vt323 min-[320px]:text-[20px] md:text-3xl xl:text-[40px] min-[3840px]:m-11 2xl:p-10 2xl:text-[4vh] bg-gradient-to-r from-gradient_blue_purple-0 via-gradient_blue_purple-50 to-gradient_blue_purple-100  text-transparent bg-clip-text">
+            <h3 className="text-purple-900 font-vt323 min-[320px]:text-[20px] md:text-3xl xl:text-[40px] 3xl:m-11 2xl:p-10 2xl:text-[4vh] bg-gradient-to-r from-gradient_blue_purple-0 via-gradient_blue_purple-50 to-gradient_blue_purple-100  text-transparent bg-clip-text">
               Code With Purpose & Innovate, Collaborate, Dominate
             </h3>
           </div>
-          <div className="flex text-center justify-center mt-5 xl:mt-1 ml-5 mr-5 min-[3840px]:m-11">
+          <div className="flex text-center justify-center mt-5 xl:mt-1 ml-5 mr-5 3xl:m-11">
             <div
               className="home-mascot bg-top bg-no-repeat flex items-end flex-col justify-center md:h-[80%] bg-cover"
               style={{
@@ -99,7 +99,7 @@ function LandingPage() {
                 {/* <a href="https://statuscode-1.devfolio.co/"> */}
                 <div
                  
-                  className="bg-no-repeat bg-center  bg-cover  text-center justify-center flex flex-row min-[320px]:mt-[25%] min-[640px]:mt-[10%] min-[750px]:mt-[6%] md:mt-[27%] lg:mt-[22%] xl:mt-[20%] min-[3840px]:mt-[21%]"
+                  className="bg-no-repeat bg-center  bg-cover  text-center justify-center flex flex-row min-[320px]:mt-[25%] min-[640px]:mt-[10%] min-[750px]:mt-[6%] md:mt-[27%] lg:mt-[22%] xl:mt-[20%] 3xl:mt-[21%]"
                   style={{
                     backgroundImage: `url(${DevfolioBtn})`,
                     backgroundSize: "contain",
@@ -110,13 +110,13 @@ function LandingPage() {
                   <button  onClick={() =>
                     window.open("https://statuscode-1.devfolio.co/")
                   }
-                   className="text-purple font-vt323 text-2xl text-center justify-center  flex  mt-2 mb-2 xl:text-4xl gap-3 min-[3840px]:gap-11 min-[3840px]:text-7xl min-[3840px]:m-5     ">
-                    <img className="xl:w-[4vh] min-[3840px]:w-[5vh]" src={DevfolioLogo} />
-                    <p className="min-[3840px]:mt-5">Apply with Devfolio </p>
+                   className="text-purple font-vt323 text-2xl text-center justify-center  flex  mt-2 mb-2 xl:text-4xl gap-3 3xl:gap-11 3xl:text-7xl 3xl:m-5     ">
+                    <img className="xl:w-[4vh] 3xl:w-[5vh]" src={DevfolioLogo} />
+                    <p className="3xl:mt-5">Apply with Devfolio </p>
                   </button>
                 </div>
                 {/* </a> */}
-                <p className="max-[540px]:leading-normal md:leading-tight xl:leading-normal md:text-[22px] xl:text-[24px] 2xl:text-[3vh] min-[3840px]:pl-[17vh] min-[3840px]:pr-[17vh] min-[3840px]:p-11 2xl:p-5 font-vt323 min-[320px]:text-[18px] md:text-2xl m-3 bg-gradient-to-b text-purple bg-clip-text">
+                <p className="max-[540px]:leading-normal md:leading-tight xl:leading-normal md:text-[22px] xl:text-[24px] 2xl:text-[3vh] 3xl:pl-[17vh] 3xl:pr-[17vh] 3xl:p-11 2xl:p-5 font-vt323 min-[320px]:text-[18px] md:text-2xl m-3 bg-gradient-to-b text-purple bg-clip-text">
                   Unleash your creativity and join Status Code 1, the ultimate 36-hour hackathon
                   extravaganza! Compete across diverse categories, showcasing
                   your skills, ingenuity, and collaborative spirit alongside
diff --git a/tailwind.config.js b/tailwind.config.js
index 8de7ab6..42f7683 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,10 @@ export default {
       'vt323':["VT323", 'monospace' ],
       },  
 
+      screens: {
+        '3xl': "2560px",
+      },
+
       colors: {
         red: {
           DEFAULT: "rgba(231, 52, 39, 1)",