feat: modernize website design with enhanced UI/UX

- Enhanced Hero section with better gradients, spacing, and visual hierarchy
- Improved TrackCard-2 with modern card design, hover effects, and glassmorphism
- Updated Tracks component with refined filters, better spacing, and enhanced animations
- Modernized Appbar with glassmorphism effects and gradient hover states
- Enhanced Footer and FooterCTA with improved styling, gradients, and interactive elements
- Added custom CSS utilities for consistent gradient and glass effects throughout the app
- Improved overall color palette with blue-to-purple gradients for a cohesive modern look

Co-Authored-By: harkirat <harkirat96@gmail.com>

Author: devin-ai-integration[bot]

apps/web/app/globals.css

@@ -91,6 +91,18 @@
   .flex-between {
     @apply flex items-center justify-between;
   }
+
+  .gradient-text {
+    @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
+  }
+
+  .card-gradient {
+    @apply bg-gradient-to-br from-white via-blue-50/30 to-purple-50/30 dark:from-neutral-900 dark:via-blue-950/20 dark:to-purple-950/20;
+  }
+
+  .glass-effect {
+    @apply bg-white/80 dark:bg-neutral-900/80 backdrop-blur-2xl border border-primary/10;
+  }
 }
 
 * {

apps/web/components/Appbar.tsx

@@ -17,28 +17,32 @@ export const Appbar = () => {
         initial={{ y: -20, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, ease: "easeInOut", type: "spring", damping: 10 }}
-        className="flex w-full justify-between mx-auto bg-secondary/15 shadow-lg shadow-neutral-600/5 backdrop-blur-lg border border-primary/10 p-6 rounded-2xl"
+        className="flex w-full justify-between mx-auto bg-white/80 dark:bg-neutral-900/80 shadow-xl shadow-blue-500/5 dark:shadow-blue-500/10 backdrop-blur-2xl border border-primary/10 hover:border-blue-500/20 transition-all duration-300 p-5 md:p-6 rounded-3xl"
       >
-        <Link href={"/"} className="flex items-center gap-2 cursor-pointer">
-          <Image
-            src={"https://appx-wsb-gcp.akamai.net.in/subject/2023-01-17-0.17044360120951185.jpg"}
-            alt="Logo"
-            width={300}
-            height={200}
-            className="rounded-full size-10"
-          />
-          <span className="text-lg md:text-2xl font-bold tracking-tight text-foreground hidden md:block">
+        <Link href={"/"} className="flex items-center gap-3 cursor-pointer group">
+          <div className="relative">
+            <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full blur-md opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
+            <Image
+              src={"https://appx-wsb-gcp.akamai.net.in/subject/2023-01-17-0.17044360120951185.jpg"}
+              alt="Logo"
+              width={300}
+              height={200}
+              className="rounded-full size-11 relative z-10 ring-2 ring-primary/10 group-hover:ring-blue-500/30 transition-all duration-300"
+            />
+          </div>
+          <span className="text-xl md:text-2xl font-bold tracking-tight bg-gradient-to-r from-foreground to-foreground/80 bg-clip-text hidden md:block group-hover:from-blue-600 group-hover:to-purple-600 transition-all duration-300">
             100xProjects
           </span>
         </Link>
-        <div className="flex items-center gap-8">
+        <div className="flex items-center gap-4 md:gap-6">
           <ModeToggle />
           {!user ? (
             <Button
               size={"lg"}
               onClick={async () => {
                 await signIn();
               }}
+              className="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 shadow-lg hover:shadow-xl transition-all duration-300"
             >
               Login
             </Button>

apps/web/components/Hero.tsx

@@ -40,7 +40,8 @@ export default function Hero({ tracks }: { tracks: TrackPros[] }) {
   };
 
   return (
-    <div className="flex flex-col gap-4 h-[50vh] md:h-[75vh] size-screen mx-auto justify-center">
+    <div className="flex flex-col gap-4 h-[60vh] md:h-[85vh] size-screen mx-auto justify-center relative overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-50/50 via-transparent to-purple-50/50 dark:from-blue-950/20 dark:via-transparent dark:to-purple-950/20" />
       <div className="relative w-full">
         <motion.svg
           xmlns="http://www.w3.org/2000/svg"
@@ -152,19 +153,19 @@ export default function Hero({ tracks }: { tracks: TrackPros[] }) {
         initial={{ y: -20, opacity: 0 }}
         className="max-w-7xl mx-auto px-4 flex flex-col gap-4 items-center justify-center"
       >
-        <div className="flex flex-col items-center justify-center">
-          <span className="tracking-tighter text-2xl md:text-3xl text-center font-medium text-primary/80 ">
+        <div className="flex flex-col items-center justify-center gap-2">
+          <span className="tracking-tight text-xl md:text-2xl text-center font-semibold text-primary/60 uppercase text-sm md:text-base">
             Welcome to
           </span>
-          <h1 className="tracking-tighter text-6xl md:text-7xl xl:text-8xl text-center font-bold my-2">
-            <span className="font-bold bg-gradient-to-b from-blue-400 to-blue-700 bg-clip-text text-transparent">
+          <h1 className="tracking-tighter text-6xl md:text-7xl xl:text-9xl text-center font-bold my-4 leading-none">
+            <span className="font-bold bg-gradient-to-br from-blue-500 via-blue-600 to-purple-600 bg-clip-text text-transparent drop-shadow-sm">
               100x
             </span>{" "}
-            Projects.
+            <span className="text-foreground">Projects</span>
           </h1>
         </div>
-        <p className="text-primary/80 max-w-lg text-center tracking-tight md:text-lg font-light">
-          A platform where you'll find the right content to help you improve your skills and grow your knowledge.
+        <p className="text-primary/70 max-w-2xl text-center tracking-tight text-lg md:text-xl font-normal px-4">
+          A curated platform to master coding through structured tracks and hands-on projects. Level up your skills, one challenge at a time.
         </p>
         <ContentSearch tracks={tracks} />
       </motion.div>

apps/web/components/TrackCard-2.tsx

@@ -67,27 +67,30 @@ export function TrackCard2({ track }: { track: TrackCardProps }) {
         initial="hidden"
         animate={controls}
         variants={variants}
-        className="bg-primary/5 flex cursor-pointer flex-row items-start justify-between gap-4 rounded-xl p-4 backdrop-blur-xl transition-all duration-300 hover:-translate-y-1 md:items-center"
+        className="group relative bg-gradient-to-br from-white via-blue-50/30 to-purple-50/30 dark:from-neutral-900 dark:via-blue-950/20 dark:to-purple-950/20 border border-primary/10 hover:border-blue-500/30 dark:hover:border-blue-400/30 flex cursor-pointer flex-row items-start justify-between gap-4 rounded-2xl p-5 backdrop-blur-xl transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-blue-500/10 dark:hover:shadow-blue-500/20 md:items-center overflow-hidden"
         onClick={handleTrackClick}
       >
-        <img src={track.image} alt={track.title} className="size-20 aspect-square object-cover rounded-xl" />
-        <div className="flex flex-col md:flex-row gap-4 w-full md:items-center justify-between">
-          <div className="flex flex-col gap-2">
-            <h3 className="text-xl md:text-2xl tracking-tighter font-semibold lg:line-clamp-1">{track.title}</h3>
-            {track.categories.map((item) => (
-              <p
-                key={item.category.id}
-                className="bg-secondary/25 border border-primary/10 rounded-lg px-3 py-2 text-sm w-fit cursor-default"
-              >
-                {item.category.category}
-              </p>
-            ))}
+        <div className="absolute inset-0 bg-gradient-to-r from-blue-500/0 via-blue-500/5 to-purple-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+        <img src={track.image} alt={track.title} className="size-24 aspect-square object-cover rounded-2xl shadow-md group-hover:shadow-xl group-hover:scale-105 transition-all duration-500 ring-2 ring-primary/5 group-hover:ring-blue-500/20 relative z-10" />
+        <div className="flex flex-col md:flex-row gap-4 w-full md:items-center justify-between relative z-10">
+          <div className="flex flex-col gap-3">
+            <h3 className="text-xl md:text-2xl tracking-tight font-bold lg:line-clamp-1 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">{track.title}</h3>
+            <div className="flex flex-wrap gap-2">
+              {track.categories.map((item) => (
+                <span
+                  key={item.category.id}
+                  className="bg-gradient-to-r from-blue-500/10 to-purple-500/10 border border-blue-500/20 dark:border-blue-400/20 rounded-full px-4 py-1.5 text-xs font-medium cursor-default hover:from-blue-500/20 hover:to-purple-500/20 transition-all duration-300"
+                >
+                  {item.category.category}
+                </span>
+              ))}
+            </div>
           </div>
-          <div className="flex flex-row md:flex-col gap-2 w-full md:w-[30%] md:items-end items-center">
-            <p className="text-primary/80 md:text-lg tracking-tight text-blue-500 font-semibold">
+          <div className="flex flex-row md:flex-col gap-3 w-full md:w-[30%] md:items-end items-center">
+            <p className="text-primary/90 md:text-lg tracking-tight bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 bg-clip-text text-transparent font-bold">
               {track.problems.length} Chapters
             </p>
-            <p className="flex tracking-tight gap-2 text-primary/60 text-sm md:text-base">
+            <p className="flex tracking-tight gap-2 text-primary/60 text-sm md:text-base font-medium">
               {formatDistanceToNow(new Date(track.createdAt), { addSuffix: true })}
             </p>
           </div>

apps/web/components/Tracks.tsx

@@ -119,34 +119,33 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
       initial={{ y: -20, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ duration: 0.5, ease: "easeInOut", type: "spring", damping: 10, delay: 0.5 }}
-      className="flex max-w-5xl flex-col gap-4 w-full mx-auto p-4"
+      className="flex max-w-6xl flex-col gap-8 w-full mx-auto p-4 md:p-6"
       id="tracks"
     >
       <div className="flex w-full gap-4 justify-between items-center flex-col md:flex-row">
-        <div className="flex items-center gap-2 p-2 rounded-lg bg-primary/5 mx-auto md:mx-0 justify-center">
+        <div className="flex items-center gap-3 p-2 rounded-2xl bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-950/30 dark:to-purple-950/30 border border-primary/10 mx-auto md:mx-0 justify-center shadow-sm">
           <Button
             size={"lg"}
             variant={"ghost"}
             onClick={() => handleCohortSelection(2)}
-            className={isCohort2Selected ? "bg-blue-600 text-white hover:bg-blue-600" : ""}
+            className={isCohort2Selected ? "bg-gradient-to-r from-blue-600 to-blue-700 text-white hover:from-blue-700 hover:to-blue-800 shadow-lg" : "hover:bg-white/50 dark:hover:bg-white/10"}
           >
             Cohort 2.0
           </Button>
-          <Separator className="w-0.5 h-4 bg-primary/25" />
+          <Separator className="w-0.5 h-6 bg-primary/20" />
           <Button
             size={"lg"}
             variant={"ghost"}
             onClick={() => handleCohortSelection(3)}
-            className={isCohort3Selected ? "bg-blue-600 text-white hover:bg-blue-600" : ""}
+            className={isCohort3Selected ? "bg-gradient-to-r from-blue-600 to-blue-700 text-white hover:from-blue-700 hover:to-blue-800 shadow-lg" : "hover:bg-white/50 dark:hover:bg-white/10"}
           >
             Cohort 3.0
           </Button>
         </div>
-        <div className="flex gap-2 p-2.5 bg-primary/5 rounded-lg w-full md:w-fit">
-          {/* Filter by Categories */}
-          <div className="flex gap-2 items-center ">
+        <div className="flex gap-3 p-3 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-950/30 dark:to-purple-950/30 border border-primary/10 rounded-2xl w-full md:w-fit shadow-sm">
+          <div className="flex gap-2 items-center">
             <Select onValueChange={(e) => setSelectedCategory(e === "All" ? "" : e)}>
-              <SelectTrigger className="w-[250px]">
+              <SelectTrigger className="w-[250px] bg-white/80 dark:bg-neutral-900/80 border-primary/20 hover:border-blue-500/30 transition-colors">
                 <SelectValue placeholder={selectedCategory || "All"} />
               </SelectTrigger>
               <SelectContent>
@@ -160,9 +159,8 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
             </Select>
           </div>
 
-          {/* Sort */}
           <Select onValueChange={(e) => setSortBy(e)}>
-            <SelectTrigger className="w-[250px]">
+            <SelectTrigger className="w-[250px] bg-white/80 dark:bg-neutral-900/80 border-primary/20 hover:border-blue-500/30 transition-colors">
               <SelectValue placeholder="Sort by" />
             </SelectTrigger>
             <SelectContent>
@@ -177,25 +175,29 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
         </div>
       </div>
 
-      {/* Tracks with Animation */}
-      <motion.ul className="flex flex-col gap-4 w-full" variants={trackAnimation} initial="hidden" animate="show">
+      <motion.ul className="flex flex-col gap-6 w-full" variants={trackAnimation} initial="hidden" animate="show">
         {loading ? (
           Array.from({ length: tracksPerPage }).map((_, idx) => (
             <div
               key={idx}
-              className="flex items-center space-x-4 w-full h-24 bg-neutral-100 dark:bg-neutral-900 p-4 rounded-xl"
+              className="flex items-center space-x-4 w-full h-28 bg-gradient-to-br from-neutral-100 to-neutral-50 dark:from-neutral-900 dark:to-neutral-800 p-6 rounded-2xl border border-primary/5 animate-pulse"
             >
-              <Skeleton className="h-12 w-12 rounded-2xl" />
-              <div className="space-y-2">
-                <Skeleton className="h-4 w-[250px]" />
+              <Skeleton className="h-16 w-16 rounded-2xl" />
+              <div className="space-y-3 flex-1">
+                <Skeleton className="h-5 w-[300px]" />
                 <Skeleton className="h-4 w-[200px]" />
               </div>
             </div>
           ))
         ) : visibleTracks.length === 0 ? (
-          <p className="text-center font-medium tracking-tighter text-lg max-w-screen-sm px-4 mx-auto">
-            ☹️ Sorry - currently there are no tracks available.
-          </p>
+          <div className="text-center py-16">
+            <p className="text-2xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-2">
+              No tracks found
+            </p>
+            <p className="text-primary/60">
+              Try adjusting your filters or check back later for new content.
+            </p>
+          </div>
         ) : (
           filteredTracks.map((t) => (
             <motion.li key={t.id} className="w-full" variants={{ hidden: { opacity: 0 }, show: { opacity: 1 } }}>
@@ -205,12 +207,11 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
         )}
       </motion.ul>
 
-      {/* Skeleton */}
-      {filteredTracks.length < tracksPerPage && (
-        <div className="flex items-center space-x-4 w-full h-24 bg-neutral-100 dark:bg-neutral-900 p-4 rounded-xl">
-          <Skeleton className="h-12 w-12 rounded-2xl" />
-          <div className="space-y-2">
-            <Skeleton className="h-4 w-[250px]" />
+      {filteredTracks.length < tracksPerPage && filteredTracks.length > 0 && (
+        <div className="flex items-center space-x-4 w-full h-28 bg-gradient-to-br from-neutral-100 to-neutral-50 dark:from-neutral-900 dark:to-neutral-800 p-6 rounded-2xl border border-primary/5 animate-pulse">
+          <Skeleton className="h-16 w-16 rounded-2xl" />
+          <div className="space-y-3 flex-1">
+            <Skeleton className="h-5 w-[300px]" />
             <Skeleton className="h-4 w-[200px]" />
           </div>
         </div>

apps/web/screens/footer-cta.tsx

@@ -17,28 +17,34 @@ const FooterCTA = () => {
   };
   return (
     <div className="wrapper group">
-      <div className="relative flex flex-col md:flex-col h-[75vh] md:h-[45vh] w-full rounded-3xl bg-gradient-to-b from-blue-400 to-blue-700 p-8 overflow-hidden">
-        <div className="flex flex-col gap-4 justify-end">
-          <div className="flex flex-col gap-2 md:w-[70%]">
-            <h3 className="text-3xl font-medium text-white md:text-4xl tracking-tighter">
+      <div className="relative flex flex-col md:flex-col h-[75vh] md:h-[50vh] w-full rounded-3xl bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 p-10 md:p-12 overflow-hidden shadow-2xl">
+        <div className="absolute inset-0 bg-gradient-to-tr from-blue-500/20 via-transparent to-purple-500/20" />
+        <div className="absolute top-0 right-0 w-96 h-96 bg-blue-400/20 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-96 h-96 bg-purple-400/20 rounded-full blur-3xl" />
+        
+        <div className="flex flex-col gap-6 justify-end relative z-10">
+          <div className="flex flex-col gap-4 md:w-[70%]">
+            <h3 className="text-4xl font-bold text-white md:text-5xl tracking-tight leading-tight">
               Every developer deserves to be a great engineer, a{" "}
-              <span className="font-bold tracking-tighter">100xEngineer!</span>
+              <span className="font-extrabold tracking-tight bg-gradient-to-r from-yellow-200 to-yellow-400 bg-clip-text text-transparent">
+                100xEngineer!
+              </span>
             </h3>
 
-            <p className="text-lg md:text-xl text-white/80">
-              Give yourself the power you deserve with a 100xdevs today!
+            <p className="text-xl md:text-2xl text-white/90 font-medium">
+              Give yourself the power you deserve with 100xdevs today!
             </p>
           </div>
-          <div className="flex gap-2 flex-col md:flex-row">
+          <div className="flex gap-4 flex-col md:flex-row">
             <Link href={"https://play.google.com/store/apps/details?id=com.hundredx.devs"} target="_blank">
-              <Button size={"lg"} variant={"default"} className="w-fit flex items-center gap-2">
-                <Download className="size-4" />
+              <Button size={"lg"} variant={"default"} className="w-fit flex items-center gap-2 bg-white text-blue-700 hover:bg-white/90 shadow-xl hover:shadow-2xl hover:scale-105 transition-all duration-300 font-semibold">
+                <Download className="size-5" />
                 Download Our App!
               </Button>
             </Link>
             <Link href={"https://harkirat.classx.co.in/new-courses"} target="_blank">
-              <Button size={"lg"} variant={"secondary"} className="w-fit flex items-center gap-2">
-                <Sparkles className="size-4" />
+              <Button size={"lg"} variant={"secondary"} className="w-fit flex items-center gap-2 bg-yellow-400 text-blue-900 hover:bg-yellow-300 shadow-xl hover:shadow-2xl hover:scale-105 transition-all duration-300 font-semibold">
+                <Sparkles className="size-5" />
                 Join Now!
               </Button>
             </Link>
@@ -49,7 +55,7 @@ const FooterCTA = () => {
             <Image
               src={Mockup}
               alt="Mockup"
-              className="absolute md:right-6 w-[80%] md:w-[30%] group-hover:-translate-y-4 group-hover:rotate-6 rotate-3 transition-all duration-300"
+              className="absolute md:right-6 w-[80%] md:w-[30%] group-hover:-translate-y-6 group-hover:rotate-6 rotate-3 transition-all duration-500 drop-shadow-2xl"
             />
           </motion.div>
         </Link>