Landing clean

AppUi/.gitignore

@@ -12,6 +12,11 @@ dist
 dist-ssr
 *.local
 
+# Package lock files (auto-generated)
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

AppUi/src/components/common/Buttons/ButtonComponent.jsx

@@ -27,12 +27,32 @@ const buttonVariants = cva(
           "bg-game-disabled text-muted-foreground cursor-not-allowed opacity-60",
         link: 
           "text-primary underline-offset-4 hover:underline hover:text-primary/80",
+        // New glassmorphism variants
+        glass:
+          "backdrop-blur-md bg-white/5 border border-white/10 text-foreground hover:bg-white/10 hover:border-white/20 hover:scale-105 active:scale-95",
+        "glass-social":
+          "backdrop-blur-lg bg-white/5 border border-white/10 text-lg hover:bg-white/10 hover:border-white/20 hover:scale-110 active:scale-95 rounded-lg",
+        "glass-nav":
+          "text-foreground/80 hover:text-primary rounded-xl hover:bg-white/10 hover:backdrop-blur-lg hover:shadow-lg",
+        "glass-outline":
+          "bg-white/5 backdrop-blur-md border-2 border-primary/30 text-primary hover:bg-primary/10 hover:border-primary/60 hover:scale-105 active:scale-95",
+        "glass-accent":
+          "bg-white/5 backdrop-blur-md border-accent/30 text-accent hover:bg-accent/10 hover:border-accent/60 hover:scale-105 active:scale-95",
+        "glass-card":
+          "backdrop-blur-lg bg-white/5 border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-all duration-300 hover:shadow-xl hover:-translate-y-2",
+        "glass-badge":
+          "inline-flex items-center px-4 py-2 bg-white/5 backdrop-blur-md border border-white/10 rounded-full text-sm font-medium",
+        "glass-stat":
+          "backdrop-blur-lg bg-white/5 border border-white/10 rounded-2xl p-6 min-w-[120px] hover:bg-white/10 hover:border-white/20 transition-all duration-300",
       },
       size: {
         default: "h-12 px-6 py-3 text-sm",
         sm: "h-9 rounded-md px-4 text-xs",
         lg: "h-14 rounded-xl px-8 text-base",
         icon: "h-12 w-12",
+        "social-icon": "w-10 h-10 p-0",
+        "nav": "px-4 py-2 text-base font-bold h-auto",
+        "footer-link": "p-0 h-auto font-normal justify-start text-left",
       },
     },
     defaultVariants: {
@@ -103,9 +123,17 @@ Button.propTypes = {
     "outline",
     "ghost",
     "disabled",
-    "link"
+    "link",
+    "glass",
+    "glass-social",
+    "glass-nav",
+    "glass-outline",
+    "glass-accent",
+    "glass-card",
+    "glass-badge",
+    "glass-stat"
   ]),
-  size: PropTypes.oneOf(["default", "sm", "lg", "icon"]),
+  size: PropTypes.oneOf(["default", "sm", "lg", "icon", "social-icon", "nav", "footer-link"]),
   asChild: PropTypes.bool,
   isLoading: PropTypes.bool,
   disabled: PropTypes.bool,

AppUi/src/components/common/Cards/GlassCard.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { cn } from '../../../utils/utils';
+
+// Glassmorphism card variants for non-interactive elements
+const glassCardVariants = {
+  // Basic glassmorphism card
+  default: "backdrop-blur-md bg-white/5 border border-white/10 rounded-2xl p-6 transition-all duration-300",
+
+  // Feature card with hover effects
+  feature: "group relative backdrop-blur-lg bg-white/5 border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-all duration-300 hover:shadow-xl hover:-translate-y-2",
+
+  // Stats/metric card
+  stat: "backdrop-blur-lg bg-white/5 border border-white/10 rounded-2xl p-6 min-w-[120px] hover:bg-white/10 hover:border-white/20 transition-all duration-300 text-center",
+
+  // Badge/pill style
+  badge: "inline-flex items-center px-4 py-2 bg-white/5 backdrop-blur-md border border-white/10 rounded-full text-sm font-medium",
+
+  // Large content card
+  content: "backdrop-blur-lg bg-white/5 border border-white/10 rounded-3xl p-8 hover:bg-white/10 hover:border-white/20 transition-all duration-300",
+
+  // Small card for lists/items
+  item: "p-3 bg-white/10 backdrop-blur-sm rounded-lg border border-white/20 hover:bg-white/15 transition-all duration-300",
+
+  // Icon container
+  icon: "w-16 h-16 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300",
+};
+
+const GlassCard = ({ 
+  variant = 'default', 
+  className = '', 
+  children, 
+  as: Component = 'div',
+  ...props 
+}) => {
+  const baseClasses = glassCardVariants[variant] || glassCardVariants.default;
+
+  return (
+    <Component 
+      className={cn(baseClasses, className)} 
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+};
+
+GlassCard.propTypes = {
+  variant: PropTypes.oneOf([
+    'default',
+    'feature', 
+    'stat',
+    'badge',
+    'content',
+    'item',
+    'icon'
+  ]),
+  className: PropTypes.string,
+  children: PropTypes.node,
+  as: PropTypes.elementType,
+};
+
+export default GlassCard;

AppUi/src/components/landing/AboutSection.jsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { Trophy, Users, Clock, Star, Shield, Zap } from 'lucide-react';
+import { SECTION_IDS } from '../../utils/constants/landingSections';
+
+const AboutSection = () => {
+  const stats = [
+    { icon: <Trophy className="w-8 h-8" />, number: "10K+", label: "Tournaments Created" },
+    { icon: <Users className="w-8 h-8" />, number: "50K+", label: "Active Players" },
+    { icon: <Clock className="w-8 h-8" />, number: "24/7", label: "Platform Uptime" },
+    { icon: <Star className="w-8 h-8" />, number: "4.9", label: "User Rating" }
+  ];
+
+  const values = [
+    {
+      icon: <Shield className="w-12 h-12" />,
+      title: "Fair Play",
+      description: "We ensure every tournament is conducted with complete transparency and fairness, using advanced algorithms to prevent cheating and maintain competitive integrity."
+    },
+    {
+      icon: <Zap className="w-12 h-12" />,
+      title: "Lightning Fast",
+      description: "Experience real-time updates, instant bracket generation, and lightning-fast match results that keep the excitement flowing without any delays."
+    },
+    {
+      icon: <Users className="w-12 h-12" />,
+      title: "Community First",
+      description: "Built by gamers, for gamers. Our platform fosters a vibrant community where players can connect, compete, and celebrate their victories together."
+    }
+  ];
+
+  return (
+    <section id={SECTION_IDS.ABOUT} className="relative py-24 px-4 overflow-hidden">
+      {/* Background elements */}
+      <div className="absolute inset-0 bg-gradient-to-b from-background via-background/95 to-background">
+        {/* Animated gradient orbs */}
+        <div className="absolute top-40 left-10 w-80 h-80 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-full blur-3xl animate-pulse"></div>
+        <div className="absolute bottom-20 right-10 w-96 h-96 bg-gradient-to-r from-accent/10 to-primary/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
+
+        {/* Grid pattern */}
+        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.01)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.01)_1px,transparent_1px)] bg-[size:80px_80px]"></div>
+      </div>
+
+      <div className="relative z-10 max-w-7xl mx-auto">
+        {/* Section Header */}
+        <div className="text-center mb-20">
+          <div className="inline-flex items-center gap-2 px-4 py-2 mb-6 bg-white/5 backdrop-blur-md border border-white/10 rounded-full">
+            <Trophy className="w-5 h-5 text-primary" />
+            <span className="text-sm font-medium text-muted-foreground">About KnockOutZone</span>
+          </div>
+
+          <h2 className="text-4xl md:text-6xl font-black mb-6 bg-gradient-to-r from-white via-blue-200 to-purple-300 bg-clip-text text-transparent drop-shadow-lg">
+            Revolutionizing 
+            <br />
+            Tournament Gaming
+          </h2>
+
+          <p className="text-lg md:text-xl text-white/90 max-w-3xl mx-auto leading-relaxed">
+            KnockOutZone is more than just a tournament platform – it's the future of competitive gaming. 
+            We've reimagined how tournaments should work, combining cutting-edge technology with 
+            passionate community-driven design.
+          </p>
+        </div>
+
+        {/* Stats Section */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-20">
+          {stats.map((stat, index) => (
+            <div 
+              key={index}
+              className="group p-6 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl hover:bg-white/10 hover:border-white/20 transition-all duration-300 hover:scale-105 text-center"
+            >
+              <div className="flex items-center justify-center w-16 h-16 mb-4 mx-auto bg-gradient-to-r from-primary/20 to-secondary/20 rounded-xl group-hover:from-primary/30 group-hover:to-secondary/30 transition-all duration-300">
+                <div className="text-primary group-hover:text-secondary transition-colors duration-300">
+                  {stat.icon}
+                </div>
+              </div>
+              <div className="text-3xl md:text-4xl font-black text-foreground mb-2 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                {stat.number}
+              </div>
+              <p className="text-sm text-muted-foreground font-medium">{stat.label}</p>
+            </div>
+          ))}
+        </div>
+
+        {/* Story Section */}
+        <div className="grid md:grid-cols-2 gap-12 items-center mb-20">
+          <div>
+            <h3 className="text-3xl md:text-4xl font-bold mb-6 bg-gradient-to-r from-white to-blue-200 bg-clip-text text-transparent drop-shadow-lg">
+              Born from Passion, Built for Champions
+            </h3>
+            <div className="space-y-4 text-foreground/80 leading-relaxed">
+              <p>
+                Founded by a team of passionate gamers and tournament organizers, KnockOutZone emerged 
+                from a simple frustration: existing tournament platforms were clunky, unfair, and 
+                didn't capture the true spirit of competitive gaming.
+              </p>
+              <p>
+                We spent countless hours analyzing what makes tournaments exciting – the thrill of 
+                competition, the satisfaction of fair play, and the joy of community. Then we built 
+                a platform that amplifies these elements while eliminating the common pain points.
+              </p>
+              <p>
+                Today, KnockOutZone powers thousands of tournaments worldwide, from casual community 
+                events to major esports championships, always staying true to our core mission: 
+                making competitive gaming accessible, fair, and incredibly fun.
+              </p>
+            </div>
+          </div>
+
+          <div className="relative">
+            {/* Glassmorphism image placeholder */}
+            <div className="aspect-square bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-3xl p-8 backdrop-blur-md border border-white/20 relative overflow-hidden">
+              <div className="absolute inset-0 bg-[linear-gradient(45deg,rgba(255,255,255,0.05)_25%,transparent_25%,transparent_75%,rgba(255,255,255,0.05)_75%)] bg-[size:20px_20px]"></div>
+              <div className="relative z-10 h-full flex items-center justify-center">
+                <div className="text-center">
+                  <Trophy className="w-20 h-20 text-primary mx-auto mb-4" />
+                  <p className="text-lg font-semibold text-foreground/80">Champion's Vision</p>
+                  <p className="text-sm text-muted-foreground mt-2">Where every player is a champion</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Values Section */}
+        <div className="text-center mb-12">
+          <h3 className="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-white to-blue-200 bg-clip-text text-transparent drop-shadow-lg">
+            Our Core Values
+          </h3>
+          <p className="text-lg text-foreground/80 max-w-2xl mx-auto">
+            These principles guide everything we do, from feature development to community interaction.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-8">
+          {values.map((value, index) => (
+            <div 
+              key={index}
+              className="group p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl hover:bg-white/10 hover:border-white/20 transition-all duration-300 hover:scale-105 text-center"
+            >
+              <div className="flex items-center justify-center w-20 h-20 mb-6 mx-auto bg-gradient-to-r from-primary/20 to-secondary/20 rounded-2xl group-hover:from-primary/30 group-hover:to-secondary/30 transition-all duration-300">
+                <div className="text-primary group-hover:text-secondary transition-colors duration-300">
+                  {value.icon}
+                </div>
+              </div>
+
+              <h4 className="text-xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors duration-300">
+                {value.title}
+              </h4>
+
+              <p className="text-muted-foreground leading-relaxed">
+                {value.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AboutSection;