fix(ui): correct particle angles and tailwind typo

Fix particle angle distribution
Correct malformed Tailwind width class
Use Ref type instead of React.RefObject in Footer

Author: YNazymko12

frontend/components/home/CodeCard.tsx

@@ -21,9 +21,9 @@ export function CodeCard({ fileName, snippet, className }: CodeCardProps) {
       <div className="bg-card/90 relative max-w-[200px] min-w-[180px] overflow-hidden rounded-2xl border border-[var(--accent-primary)]/20 px-3.5 py-3 shadow-2xl backdrop-blur-xl lg:max-w-[220px] lg:min-w-[200px] lg:px-4 lg:py-3.5 xl:max-w-[240px] xl:min-w-[220px] xl:px-4 xl:py-3.5 dark:shadow-[var(--accent-primary)]/10">
         <div className="text-muted-foreground/80 mb-2 flex items-center justify-between text-[9px] lg:text-[10px] xl:text-xs">
           <div className="flex items-center gap-1">
-            <span className="h-1.5 w-1.5 rounded-full bg-red-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5 xl:w-2.5" />
-            <span className="h-1.5 w-1.5 rounded-full bg-yellow-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5 xl:w-2.5" />
-            <span className="xl:w-2. h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5" />
+            <span className="h-1.5 w-1.5 rounded-full bg-red-400/80 shadow-sm lg:h-2 lg:w-2" />
+            <span className="h-1.5 w-1.5 rounded-full bg-yellow-400/80 shadow-sm lg:h-2 lg:w-2" />
+            <span className="h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm lg:h-2 lg:w-2" />
           </div>
           <span className="text-[8.5px] font-medium lg:text-[9.5px] xl:text-[10.5px]">
             {fileName}

frontend/components/home/InteractiveCTAButton.tsx

@@ -45,7 +45,7 @@ export const InteractiveCTAButton = React.forwardRef<HTMLAnchorElement>(
 
     const particles = Array.from({ length: 12 }, (_, i) => ({
       id: i,
-      angle: (i * 360) / 8,
+      angle: (i * 360) / 12,
     }));
 
     return (

frontend/components/shared/Footer.tsx

@@ -3,6 +3,7 @@
 import { Github, Linkedin, Send } from 'lucide-react';
 import { useSelectedLayoutSegments } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import type { Ref } from 'react';
 
 import { ThemeToggle } from '@/components/theme/ThemeToggle';
 import { Link } from '@/i18n/routing';
@@ -21,7 +22,7 @@ const SOCIAL = [
 export default function Footer({
   footerRef,
 }: {
-  footerRef?: React.RefObject<HTMLElement>;
+  footerRef?: Ref<HTMLElement>;
 }) {
   const t = useTranslations('footer');
   const segments = useSelectedLayoutSegments();