Pr 140

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-05-24 - Accessible Icon-Only Buttons
+**Learning:** Icon-only buttons are a common source of accessibility issues. Without a text label, screen reader users have no way of knowing the button's function.
+**Action:** Always add a descriptive `aria-label` to any button that does not contain descriptive text. This provides a clear, accessible name for the button that screen readers can announce.

.Jules/streamline.md

@@ -0,0 +1,5 @@
+## 2024-07-25 - Provide Immediate Feedback for Invalid User Actions
+
+**Learning:** When a user action cannot be completed (e.g., submitting a form), the system must provide immediate, clear, and actionable feedback. Silently blocking an action, even with client-side validation, creates a confusing and frustrating user experience. Users are left wondering if the system is broken or if they did something wrong.
+
+**Action:** In any form or user input flow, always connect client-side validation logic directly to the UI. If a check fails, display a descriptive, temporary message that explains *why* the action was blocked and what the user should do next. This transforms a moment of friction into a moment of guidance, improving user confidence and flow.

app/(footer)/about/page.tsx

@@ -97,9 +97,9 @@ export default function About() {
             <h1 className="text-5xl lg:text-7xl font-black tracking-tighter leading-[0.9] text-gray-900 dark:text-white">
               About <span className="text-red-400 dark:text-red-500">FlagForge</span>
             </h1>
-            <p className="text-md text-gray-500 dark:text-gray-400 italic font-medium tracking-wide uppercase">
+            <h2 className="text-md text-gray-500 dark:text-gray-400 italic font-medium tracking-wide uppercase">
               "Where curiosity meets cybersecurity."
-            </p>
+            </h2>
             <p className="text-lg lg:text-xl font-medium text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
               FlagForge is a dynamic and engaging CTF platform dedicated to promoting{" "}
               <span className="text-red-500 dark:text-red-500 font-black">

app/(main)/authentication/layout.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Sign In & Sign Up",
+  description:
+    "Sign in to FlagForge to access CTF challenges, track progress, and compete on the leaderboard.",
+};
+
+export default function AuthenticationLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return children;
+}

app/(main)/authentication/page.tsx

@@ -3,9 +3,8 @@ import React, { useEffect, useState } from "react";
 import { signIn, useSession } from "next-auth/react";
 import { FcGoogle } from "react-icons/fc";
 import { useRouter, useSearchParams } from "next/navigation";
-import { Flame, ShieldCheck, Sparkles, Orbit, ArrowRight, AlertCircle, Home as HomeIcon, X, Loader2 } from "lucide-react";
+import { Flame, ShieldCheck, Sparkles, Orbit, ArrowRight, AlertCircle, Home as HomeIcon, X, Loader2, ExternalLink } from "lucide-react";
 import Link from "next/link";
-import Loading from "@/components/loading";
 
 const AuthPage = () => {
   const router = useRouter();
@@ -47,10 +46,6 @@ const AuthPage = () => {
     }
   }, [sessionStatus, router, errorStatus, callbackUrl]);
 
-  if (sessionStatus === "loading") {
-    return <Loading />;
-  }
-
   if (sessionStatus === "authenticated" && !errorStatus) {
     return null;
   }
@@ -141,7 +136,7 @@ const AuthPage = () => {
                     <button
                       onClick={() => setErrorStatus(null)}
                       aria-label="Dismiss error"
-                      className="absolute top-0 right-0 p-1 hover:bg-red-500/10 rounded-lg transition-colors group/btn"
+                      className="absolute top-0 right-0 p-1 hover:bg-red-500/10 rounded-lg transition-colors group/btn focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 focus-visible:ring-offset-red-500/10"
                     >
                       <X className="w-4 h-4 text-gray-400 group-hover/btn:text-red-500" />
                     </button>
@@ -222,9 +217,17 @@ const AuthPage = () => {
 
               <p className="text-[10px] leading-relaxed text-gray-400 dark:text-white-600 font-bold uppercase tracking-wider">
                 <span className="mx-2 opacity-70">By signing up, you agree to our <br></br></span>
-                <Link href="/privacy-policy" className="text-red-500/80 hover:text-red-500 hover:underline underline-offset-4 decoration-2 transition-colors">Privacy Policy</Link>
+                <Link href="/privacy-policy" className="text-red-500/80 hover:text-red-500 hover:underline underline-offset-4 decoration-2 transition-colors inline-flex items-center gap-1" target="_blank" rel="noopener noreferrer">
+                  Privacy Policy
+                  <ExternalLink className="w-3 h-3" />
+                  <span className="sr-only">(opens in new tab)</span>
+                </Link>
                 <span className="mx-2 opacity-50">&</span>
-                <Link href="/terms-of-service" className="text-red-500/80 hover:text-red-500 hover:underline underline-offset-4 decoration-2 transition-colors">Terms & Conditions</Link>
+                <Link href="/terms-of-service" className="text-red-500/80 hover:text-red-500 hover:underline underline-offset-4 decoration-2 transition-colors inline-flex items-center gap-1" target="_blank" rel="noopener noreferrer">
+                  Terms & Conditions
+                  <ExternalLink className="w-3 h-3" />
+                  <span className="sr-only">(opens in new tab)</span>
+                </Link>
               </p>
             </div>
 

app/(main)/blogs/[id]/BlogPostClient.tsx

@@ -329,8 +329,8 @@ export default function BlogPostClient({
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[
-          rehypeSanitize, // Sanitizes HTML to prevent XSS
           rehypeHighlight, // Syntax highlighting for code blocks
+          rehypeSanitize, // Sanitizes HTML to prevent XSS
         ]}
         components={{
           // Custom component styling

app/(main)/home/page.tsx

@@ -25,6 +25,7 @@ import {
 } from "lucide-react";
 import ArchivesSection from "@/components/ArchivesSection";
 import ScoreboardSection from "@/components/ScoreboardSection";
+import InstagramFeed from "@/components/InstagramFeed";
 
 interface UserStats {
   totalScore: number;
@@ -211,7 +212,7 @@ const Home = () => {
       <div className="pointer-events-none absolute -bottom-32 -left-24 h-72 w-72 rounded-full bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.18),rgba(244,63,94,0))] blur-3xl" />
 
       <div className="relative z-10">
-        <div className="relative overflow-hidden transition-colors duration-300">
+        <div className="relative overflow-x-hidden overflow-y-visible transition-colors duration-300">
           <div className="absolute inset-0 opacity-30">
             <div
               className="absolute inset-0"
@@ -453,10 +454,13 @@ const Home = () => {
                 </h2>
               </div>
               {latestRoom ? (
-                <div className="bg-white/70 dark:bg-white/[0.04] border border-white/60 dark:border-white/10 rounded-2xl p-5 hover:-translate-y-1 transition-all duration-300 cursor-pointer shadow-lg">
+                <Link
+                  href={`/problems/${latestRoom._id}`}
+                  className="group block bg-white/70 dark:bg-white/[0.04] border border-white/60 dark:border-white/10 rounded-2xl p-5 hover:-translate-y-1 transition-all duration-300 shadow-lg"
+                >
                   <div className="flex items-start justify-between mb-3">
                     <div className="flex-1">
-                      <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 hover:text-red-500 dark:hover:text-red-500 transition-colors">
+                      <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 group-hover:text-red-500 dark:group-hover:text-red-500 transition-colors">
                         {latestRoom.title}
                       </h3>
                       <p className={` text-sm text-gray-600 dark:text-gray-400 mt-1 transition-colors duration-300`}>
@@ -477,20 +481,16 @@ const Home = () => {
                       </div>
                     </div>
                   </div>
-                  <div className="flex items-center justify-between">
+                  <div className="flex items-center">
                     <span
                       className={`px-3 py-1 rounded-full text-xs font-semibold ${getCategoryColor(
                         latestRoom.category
                       )}`}
                     >
                       {latestRoom.category}
                     </span>
-                    <div className="flex items-center gap-2 text-sm text-red-500 dark:text-red-500 hover:text-red-600 dark:hover:text-red-500 transition-colors duration-300">
-                      <PlayCircle className="h-4 w-4" />
-                      <Link href="/problems"> Start Challenge </Link>
-                    </div>
                   </div>
-                </div>
+                </Link>
               ) : (
                 <div className="text-center py-6 text-gray-500 dark:text-gray-400 transition-colors duration-300">
                   <Clock className="h-8 w-8 mx-auto mb-2 opacity-50" />
@@ -610,6 +610,9 @@ const Home = () => {
 
           {/* Scoreboards Section */}
           <ScoreboardSection />
+
+          {/* Instagram Feed */}
+          <InstagramFeed />
         </div>
       </div>
     </div>