Feat/design adjustment apply now

app/events/EventsContent.tsx

@@ -104,7 +104,6 @@ export default function EventsPage() {
   const sliderRef = useRef<HTMLDivElement>(null)
   const sliderSectionRef = useRef<HTMLDivElement>(null)
   const dragState = useRef({ isDragging: false, startX: 0, scrollLeft: 0 })
-  const [scrollProgress, setScrollProgress] = useState(0)
   const [hoveredEvent, setHoveredEvent] = useState<string | null>(null)
 
   useEffect(() => {
@@ -115,23 +114,6 @@ export default function EventsPage() {
   const animatedHackathons = useAnimatedNumber(4, loading, 800)
   const animatedPublicEvents = useAnimatedNumber(10, loading, 800)
 
-  useEffect(() => {
-    const slider = sliderRef.current
-    if (!slider || loading) return
-
-    const updateScroll = () => {
-      const maxScroll = slider.scrollWidth - slider.clientWidth
-      const progress = maxScroll > 0 ? (slider.scrollLeft / maxScroll) * 100 : 0
-      setScrollProgress(progress)
-    }
-
-    slider.addEventListener('scroll', updateScroll)
-    updateScroll()
-    setTimeout(updateScroll, 100)
-
-    return () => slider.removeEventListener('scroll', updateScroll)
-  }, [loading])
-
   const handleDrag = {
     start: (e: React.MouseEvent) => {
       const slider = sliderRef.current
@@ -709,7 +691,7 @@ export default function EventsPage() {
               onMouseUp={handleDrag.end}
               onMouseMove={handleDrag.move}
               onMouseLeave={handleDrag.end}
-              className="flex gap-6 overflow-x-auto scrollbar-hide scroll-smooth py-4 px-1 cursor-grab active:cursor-grabbing"
+              className="flex gap-6 overflow-x-auto scrollbar-hide py-4 px-1 select-none cursor-grab active:cursor-grabbing"
               style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
             >
               {/* Main Events Group */}
@@ -762,7 +744,7 @@ export default function EventsPage() {
               </div>
             </div>
 
-            <ScrollIndicator sliderRef={sliderRef} scrollProgress={scrollProgress} />
+            <ScrollIndicator sliderRef={sliderRef} />
 
             {/* Gradient Fade Edges */}
             <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-[#00002c] to-transparent pointer-events-none rounded-r-[1.75rem]"></div>

app/events/UpcomingEventsGrid.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useState, useEffect } from 'react'
+import UpcomingEventTile from '@/components/UpcomingEventTile'
 
 interface LumaEventWrapper {
   api_id: string
@@ -116,38 +117,14 @@ export default function UpcomingEventsGrid() {
           }
 
           return (
-            <a
+            <UpcomingEventTile
               key={eventWrapper.api_id}
               href={event.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={`group relative bg-white/5 rounded-2xl overflow-hidden transition-all duration-500 hover:scale-[1.02] shadow-lg shadow-black/20 hover:shadow-xl hover:shadow-black/40 flex flex-col ${hiddenOnMobile ? 'hidden sm:flex' : ''}`}
-            >
-              {/* Inset rounded image */}
-              <div className="p-3 pb-0">
-                <div className="relative overflow-hidden rounded-xl bg-black/20">
-                  {event.cover_url ? (
-                    <img
-                      src={event.cover_url}
-                      alt={event.name}
-                      className="w-full h-auto object-contain group-hover:scale-105 transition-transform duration-700 ease-out"
-                    />
-                  ) : (
-                    <div className="h-36 bg-gradient-to-br from-[#1a1a3e] to-[#0a0a2e] rounded-xl" />
-                  )}
-                </div>
-              </div>
-
-              {/* Text content area */}
-              <div className="px-4 pt-4 pb-5 flex-1 flex flex-col">
-                <h3 className="text-sm font-bold text-white mb-1 leading-snug line-clamp-2">
-                  {event.name}
-                </h3>
-                {formattedDate && (
-                  <p className="text-gray-400 text-xs font-semibold mb-1.5">{formattedDate}</p>
-                )}
-              </div>
-            </a>
+              title={event.name}
+              date={formattedDate}
+              imageUrl={event.cover_url}
+              hiddenClassName={hiddenOnMobile ? 'hidden sm:flex' : ''}
+            />
           )
         })}
       </div>

app/for-partners/page.tsx

@@ -161,7 +161,6 @@ export default async function ForPartnersPage() {
         {/* Hero Section */}
         <Hero
           backgroundImage="/forPartners/hero-opt.jpg"
-          hideChildrenOnMobile
           title={
             <>
               FOR

app/home/HomeClient.tsx

@@ -110,7 +110,7 @@ export default function HomeClient({ initialPartners, initialStartups }: HomeCli
           <div className="animate-scroll-slow whitespace-nowrap">
             {Array.from({ length: 12 }).map((_, i) => (
               <span key={i} className="text-white text-xs sm:text-sm tracking-wide mx-8">
-                Summer Applications are Open from 10 of April to 26 of April
+                Summer Applications are open from 10 of April to 26 of April
               </span>
             ))}
           </div>
@@ -654,4 +654,4 @@ export default function HomeClient({ initialPartners, initialStartups }: HomeCli
       `}</style>
     </>
   )
-}
+}