refactor: update styling classes for consistency and improve layout responsiveness across components

Author: abdulkarim1422

fe-main/src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { Rocket, Twitter, Instagram } from "lucide-react";
+import { Rocket, Instagram } from "lucide-react";
 import { Link } from "wouter";
 import { useLanguage } from "@/lib/LanguageContext";
 import { PiTelegramLogo } from "react-icons/pi";

fe-main/src/components/Hero.tsx

@@ -34,16 +34,16 @@ export default function Hero() {
   };
 
   return (
-    <div ref={ref} className="relative h-[80vh] min-h-[600px] w-full overflow-hidden flex items-center justify-center">
+    <div ref={ref} className="relative h-[80vh] min-h-150 w-full overflow-hidden flex items-center justify-center">
       {/* Background Image with Overlay */}
       <motion.div style={{ y, opacity }} className="absolute inset-0 z-0">
         <img
           src={heroBg}
           alt="Teknofest Hero"
           className="w-full h-full object-cover scale-110"
         />
-        <div className="absolute inset-0 bg-gradient-to-r from-background/90 via-background/60 to-transparent" />
-        <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent" />
+        <div className="absolute inset-0 bg-linear-to-r from-background/90 via-background/60 to-transparent" />
+        <div className="absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent" />
       </motion.div>
 
       {/* Content */}
@@ -63,7 +63,7 @@ export default function Hero() {
           <motion.h1 variants={textVariants} className="text-5xl md:text-7xl font-bold font-display leading-tight mb-6 text-foreground">
             {t('hero.title_start')} <br />
             <motion.span 
-              className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-red-600 inline-block"
+              className="text-transparent bg-clip-text bg-linear-to-r from-primary to-red-600 inline-block"
               animate={{ backgroundPosition: ["0%", "100%", "0%"] }}
               transition={{ duration: 5, repeat: Infinity, ease: "linear" }}
               style={{ backgroundSize: "200%" }}
@@ -84,11 +84,11 @@ export default function Hero() {
                   competitionsSection.scrollIntoView({ behavior: 'smooth' });
                 } else { console.warn("Competitions section not found") }
                 }}
-                size="lg" className="bg-primary hover:bg-primary/90 text-white text-lg px-8 h-14 rounded-none skew-x-[-10deg] rtl:skew-x-[10deg] transition-transform hover:scale-105 active:scale-95 duration-200">
-              <span className="skew-x-[10deg] rtl:skew-x-[-10deg]">{t('hero.discover')}</span>
+                size="lg" className="bg-primary hover:bg-primary/90 text-white text-lg px-8 h-14 rounded-none skew-x-[-10deg] rtl:skew-x-10 transition-transform hover:scale-105 active:scale-95 duration-200">
+              <span className="skew-x-10 rtl:skew-x-[-10deg]">{t('hero.discover')}</span>
             </Button>
-            <Button size="lg" variant="outline" className="border-primary/50 text-foreground hover:bg-primary/5 text-lg px-8 h-14 rounded-none skew-x-[-10deg] rtl:skew-x-[10deg] transition-transform hover:scale-105 active:scale-95 duration-200">
-              <span className="skew-x-[10deg] rtl:skew-x-[-10deg] flex items-center gap-2">
+            <Button size="lg" variant="outline" className="border-primary/50 text-foreground hover:bg-primary/5 text-lg px-8 h-14 rounded-none skew-x-[-10deg] rtl:skew-x-10 transition-transform hover:scale-105 active:scale-95 duration-200">
+              <span className="skew-x-10 rtl:skew-x-[-10deg] flex items-center gap-2">
                 {t('hero.watch')} 
                 <ArrowRight className={`w-5 h-5 ${isRtl ? 'rotate-180' : ''}`} />
               </span>

fe-main/src/components/Navbar.tsx

@@ -38,7 +38,7 @@ export default function Navbar() {
         "fixed top-0 w-full z-50 border-b transition-all duration-300",
         isScrolled 
           ? "bg-background/95 backdrop-blur-md border-border h-16 shadow-md" 
-          : "bg-background/50 backdrop-blur-sm border-white/10 h-20 supports-[backdrop-filter]:bg-background/30"
+          : "bg-background/50 backdrop-blur-sm border-white/10 h-20 supports-backdrop-filter:bg-background/30"
       )}
       initial={{ y: -100 }}
       animate={{ y: 0 }}
@@ -49,7 +49,7 @@ export default function Navbar() {
         <Link href="/" className="flex items-center gap-2 group">
           <div className="relative w-10 h-10 flex items-center justify-center bg-primary rounded-lg overflow-hidden group-hover:scale-105 transition-transform duration-300">
             <Rocket className="text-white w-6 h-6 animate-pulse" />
-            <div className="absolute inset-0 bg-gradient-to-tr from-black/20 to-transparent" />
+            <div className="absolute inset-0 bg-linear-to-tr from-black/20 to-transparent" />
           </div>
           <span className="text-2xl font-bold font-display tracking-wider text-foreground">
             TK<span className="text-primary">Library</span>
@@ -71,7 +71,7 @@ export default function Navbar() {
               {location === link.href && (
                 <motion.div 
                   layoutId="underline" 
-                  className="absolute left-0 right-0 bottom-[-2px] h-[2px] bg-primary"
+                  className="absolute left-0 right-0 -bottom-0.5 h-0.5 bg-primary"
                 />
               )}
             </Link>

fe-main/src/pages/CompetitionDetail.tsx

@@ -3,7 +3,7 @@ import Footer from "@/components/Footer";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Trophy, Calendar, Users, Download, ArrowRight, FileText, Link2, Cpu, Database, BookOpen } from "lucide-react";
+import { Users, Download, ArrowRight, FileText, Link2, Cpu, Database, BookOpen } from "lucide-react";
 import { useRoute } from "wouter";
 import { useQuery } from "@tanstack/react-query";
 import {
@@ -62,23 +62,21 @@ export default function CompetitionDetail() {
         t("card.notSpecified"),
     );
     const yearsText = data?.years?.length ? data.years.join(", ") : t("detail.noYears");
-    const tkNumber = data?.tk_number ?? "-";
-    const t3kysNumber = data?.t3kys_number ?? "-";
     const image = data?.image_path ?? heroBg;
 
   return (
     <div className="min-h-screen bg-background flex flex-col font-sans">
       <Navbar />
 
       {/* Hero Banner */}
-      <div className="relative h-[50vh] min-h-[400px] w-full overflow-hidden flex items-end">
+    <div className="relative h-[50vh] min-h-100 w-full overflow-hidden flex items-end">
         <div className="absolute inset-0 z-0">
           <img
                         src={image}
                         alt={title}
             className="w-full h-full object-cover"
           />
-          <div className="absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" />
+          <div className="absolute inset-0 bg-linear-to-t from-background via-background/60 to-transparent" />
         </div>
 
         <div className="container mx-auto px-4 pb-12 relative z-10 flex flex-col md:flex-row justify-between items-end gap-6">
@@ -105,7 +103,7 @@ export default function CompetitionDetail() {
         </div>
       </div>
 
-      <main className="flex-grow container mx-auto px-4 py-12">
+    <main className="grow container mx-auto px-4 py-12">
                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
             {/* Main Content */}
             <div className="lg:col-span-2">
@@ -168,7 +166,7 @@ export default function CompetitionDetail() {
                                             {reportFiles?.map((file) => (
                                                 <div
                                                     key={file.id}
-                                                    className="group relative p-6 border border-border rounded-xl bg-gradient-to-br from-card to-card/50 hover:border-primary/30 hover:shadow-lg transition-all duration-300"
+                                                    className="group relative p-6 border border-border rounded-xl bg-linear-to-br from-card to-card/50 hover:border-primary/30 hover:shadow-lg transition-all duration-300"
                                                 >
                                                     <div className="flex items-start justify-between gap-4">
                                                         <div className="flex-1 min-w-0">
@@ -239,7 +237,7 @@ export default function CompetitionDetail() {
                                                 return (
                                                     <div
                                                         key={resource.id}
-                                                        className="group relative p-6 border border-border rounded-xl bg-gradient-to-br from-card to-card/50 hover:border-blue-400/30 hover:shadow-lg transition-all duration-300"
+                                                        className="group relative p-6 border border-border rounded-xl bg-linear-to-br from-card to-card/50 hover:border-blue-400/30 hover:shadow-lg transition-all duration-300"
                                                     >
                                                         <div className="flex items-start justify-between gap-4">
                                                             <div className="flex-1">

fe-main/src/pages/Competitions.tsx

@@ -91,7 +91,7 @@ export default function CompetitionsPage() {
     <div className="min-h-screen bg-background flex flex-col font-sans">
       <Navbar />
 
-      <main className="flex-grow">
+      <main className="grow">
         <Hero />
 
         <section className="container mx-auto px-4 py-16 -mt-20 relative z-20" id="mainpage_competitions_section">
@@ -210,7 +210,7 @@ export default function CompetitionsPage() {
             whileInView={{ opacity: 1, scale: 1 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5 }}
-            className="max-w-4xl mx-auto bg-gradient-to-r from-primary/10 via-primary/5 to-primary/10 rounded-3xl p-12 border border-primary/20"
+            className="max-w-4xl mx-auto bg-linear-to-r from-primary/10 via-primary/5 to-primary/10 rounded-3xl p-12 border border-primary/20"
           >
             <h2 className="text-4xl font-bold font-display mb-6">{t('cta.title')}</h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">