improvements to landing page and why spronsor page

Author: Astraxx04

src/_includes/footer.njk

@@ -1,6 +1,6 @@
 {% from "components/button.njk" import button %}
 <footer class="bg-pycon-blue flex text-white mb-0 bottom-0 w-full relative">
-    <div class="relative px-[6%] mt-24 pb-8 md:pt-20 md:pb-12 w-full md:w-auto">
+    <div class="relative px-[6%] mt-24 md:mt-10 pb-8 md:pt-20 md:pb-12 w-full md:w-auto">
         <div class="text-center md:text-left">
             {{ button(text="Become a Volunteer", url="https://docs.google.com/forms/d/e/1FAIpQLSdX2LEom11BbWDiLUiQp1rmeNX9l7J8bfszGidsRDoExy0D5A/viewform", lime_bg=true, env = env) }}
         </div>
@@ -50,7 +50,7 @@
         </div>
     </div>
     <div class="absolute inset-0 flex pb-4 justify-center md:justify-end items-end pointer-events-none">
-        <img src="{{ env.baseUrl }}img/logo.png" alt="PYCON 2025" class="w-[150px] md:w-[350px] lg:w-[480px] pb-72 lg:pb-28 xl:pb-32 md:mr-12 xl:mr-12 transition-transform duration-100" style="animation: floating-logo 2s ease-in-out infinite;"/>
+        <img src="{{ env.baseUrl }}img/logo.png" alt="PYCON 2025" class="w-[150px] md:w-[350px] lg:w-[480px] pb-72 lg:pb-28 xl:pb-24 md:mr-12 xl:mr-12 animate-bounce-slow"/>
     </div>
 </footer>
 

src/_includes/landing/communities.njk

@@ -5,10 +5,12 @@
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-10">
             <div>
                 <h2 class="black-han-sans-regular text-center lg:text-left font-normal text-4xl lg:text-5xl pb-4">Participating Communities</h2>
-                <p class="text-white text-base mb-6">
+                <p class="text-white text-justify text-base mb-6">
                     Join PyCon India's Community Partner Program and support the vibrant Python community in India. Become a partner and contribute to the growth of Python enthusiasts.
                 </p>
+                <div class="flex my-4 flex-wrap gap-4 scale-75 md:scale-100 justify-start items-start origin-left">
                 {{ button(text="Become a Volunteer", url="https://docs.google.com/forms/d/e/1FAIpQLSdX2LEom11BbWDiLUiQp1rmeNX9l7J8bfszGidsRDoExy0D5A/viewform", lime_bg=true, env = env) }}
+                </div>
             </div>
             <div class="hidden md:flex justify-end -mt-32">
                 <div class="w-96 h-96 bg-contain bg-center bg-no-repeat transition-all duration-300 animate-bounce-slow" style="background-image: url('{{ env.baseUrl }}img/assets/bulb-illustration.svg');"></div>
@@ -34,7 +36,7 @@
     </div>
 </section>
 <!-- TODO: Remove padding once twitter wall is added -->
-<section class="bg-lavender px-[6%] pb-56">
+<section class="bg-lavender px-[6%] pb-72">
     <div class="mx-auto">
         <div class="flex flex-wrap w-full">
             {% for i in range(6, 12) %}

src/_includes/landing/hero.njk

@@ -6,19 +6,20 @@
 <div class="bg-pycon-blue w-full py-16 px-[6%] -mt-1 flex flex-col md:flex-row gap-2 justify-between">
     <div class="w-full">
         <div class="flex justify-between w-full items-center text-[#FFFFFF]">
-            <h1 class="black-han-sans-regular text-center lg:text-left font-normal text-4xl lg:text-5xl pb-4">
+            <h1 class="black-han-sans-regular text-left font-normal text-4xl lg:text-5xl pb-4">
                 PYCON <br/>
-                <span class="black-han-sans-regular text-center lg:text-left font-normal text-4xl lg:text-5xl pb-4">INDIA 2025</span>
+                <span class="black-han-sans-regular text-left font-normal text-4xl lg:text-5xl pb-4">INDIA 2025</span>
             </h1>
         </div>
-        <p class="text-white text-md sm:text-lg max-w-xl leading-relaxed">
+        <p class="text-white text-justify text-md sm:text-lg">
             PyCon India 2025 is the premier conference for Python enthusiasts and professionals, offering an unparalleled
             opportunity to dive deep into the world of Python and explore its limitless potential. Stay tuned for updates!
         </p>
-        <div class="flex flex-wrap gap-4">
-            {{ button(text="Get Tickets", url=env.baseUrl + "tickets", lime_bg=true)}}
-            {{ button(text="View Schedule", url=env.baseUrl + "program/schedule", lime_bg=true)}}
+        <div class="flex my-4 flex-wrap gap-4 scale-75 md:scale-100 justify-start items-start origin-left">
+            {{ button(text="Get Tickets", url=env.baseUrl ~ "tickets", lime_bg=true) }}
+            {{ button(text="View Schedule", url=env.baseUrl ~ "program/schedule", lime_bg=true) }}
         </div>
+
     </div>
     <div class="grid w-full grid-cols-1 gap-x-1 gap-y-2 lg:grid-cols-12 lg:auto-rows-auto">
         <div class="pb-2 lg:row-start-1 lg:col-start-2 lg:col-end-12 xl:col-start-3 xl:col-end-11">

src/_includes/landing/sponsors.njk

@@ -6,11 +6,11 @@
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-10">
             <div>
                 <h2 class="black-han-sans-regular text-center lg:text-left font-normal text-4xl lg:text-5xl pb-4">Event Sponsors</h2>
-                <p class="text-white text-base mb-6">
+                <p class="text-white text-justify text-base md:mb-6">
                     PyCon India is completely driven by volunteers. Sponsoring the event helps to sustain and grow the conference as well as
                     the Community. Sponsor help in making the conference affordable, and maintaining the inventory for the conference.
                 </p>
-                <div class="flex flex-wrap gap-4">
+                <div class="flex my-4 flex-wrap gap-4 scale-75 md:scale-100 justify-start items-start origin-left">
                     {{ button(text="Download Prospectus", url="PyConIndia2025SponsorshipBrochure.pdf", lime_bg=true, env = env) }}
                     {{ button(text="Get in Touch", url="https://forms.gle/PsvKNJcjBctJe7VbA", lime_bg=true, env = env) }}
                 </div>

src/sponsors/index.njk

@@ -64,7 +64,7 @@ layout: base.njk
             ] %}
 
             <!-- Mobile window -->
-            <div class="block md:hidden overflow-x-auto">
+            <div class="block md:hidden lg:hidden">
                 {% call window(width=300, height=930, depth=20, frontBg="lavender", leftBg="lime", topBg="lime") %}
                 <span class="font-semibold text-black text-sm">What you can expect when you sponsor PyCon India:</span>
                 <ul class="list-none space-y-3 mt-3 text-sm">
@@ -80,9 +80,27 @@ layout: base.njk
                 </ul>
                 {% endcall %}
             </div>
+
+            <!-- Tablet window -->
+            <div class="hidden md:block lg:hidden">
+                {% call window(width=600, height=550, depth=20, frontBg="lavender", leftBg="lime", topBg="lime") %}
+                <span class="font-semibold text-black text-sm">What you can expect when you sponsor PyCon India:</span>
+                <ul class="list-none space-y-3 mt-3 text-sm">
+                    {% for benefit in sponsorBenefits %}
+                    <li class="flex items-start">
+                        <div class="w-3 h-3 bg-pycon-lime rounded-full mr-3 mt-1 flex-shrink-0 border-2 border-green-600"></div>
+                        <div>
+                            <span class="font-semibold text-gray-800">{{ benefit.title }}</span>
+                            <span class="text-gray-600"> - {{ benefit.description | safe }}</span>
+                        </div>
+                    </li>
+                    {% endfor %}
+                </ul>
+                {% endcall %}
+            </div>
 
             <!-- Desktop window -->
-            <div class="hidden md:block">
+            <div class="hidden lg:block">
                 {% call window(width=800, height=550, depth=25, frontBg="lavender", leftBg="lime", topBg="lime") %}
                 <span class="font-semibold text-black">What you can expect when you sponsor PyCon India:</span>
                 <ul class="list-none space-y-4 mt-4">