From fd248d9ea06c40799dd27a1771b83a61875f6aad Mon Sep 17 00:00:00 2001
From: John Schmidt <jschmidt901318@gmail.com>
Date: Tue, 10 Mar 2026 08:59:33 -0500
Subject: [PATCH] style: enhance responsive design and dark mode support in
 FAQ, Footer, and Navbar components

---
 Application/app/faq/page.tsx      |  7 ++++---
 Application/components/footer.tsx | 21 +++++++++++++++++----
 Application/components/navbar.tsx | 27 +++++++++++++++++++++++----
 3 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/Application/app/faq/page.tsx b/Application/app/faq/page.tsx
index 6a9093f..b156f32 100644
--- a/Application/app/faq/page.tsx
+++ b/Application/app/faq/page.tsx
@@ -5,7 +5,7 @@ export default function Faqs() {
   return (
     <>
 
-    <Box bg="gray.50" py="10">
+    <Box bg={{ base: "gray.50", _dark: "blackAlpha.400" }} py="10">
       <Container maxW="700px" textAlign="center">
         <Heading color='fg' size='lg' mb='10'>
           Frequently Asked Questions
@@ -16,10 +16,11 @@ export default function Faqs() {
           <Accordion.Item 
           key={faq.title} 
           value={faq.title}
-          bg='white'
+          bg={{ base: "white", _dark: "gray.800" }}
           borderRadius='xl'
           boxShadow='md'
           overflow='hidden'
+          borderWidth="1px"
           >
             <Accordion.ItemTrigger
             display='flex'
@@ -27,7 +28,7 @@ export default function Faqs() {
             px='5'
             py='4'
             cursor='pointer'
-            _hover={{bg: 'gray.100'}}
+            _hover={{bg: { base: "gray.100", _dark: "gray.700" } }}
             >
 
 
diff --git a/Application/components/footer.tsx b/Application/components/footer.tsx
index c61f450..2d45174 100644
--- a/Application/components/footer.tsx
+++ b/Application/components/footer.tsx
@@ -1,18 +1,31 @@
 import Link from 'next/link';
-import { Box, Flex, HStack } from '@chakra-ui/react';
+import { Box, Flex, Stack } from '@chakra-ui/react';
 
 const Footer = () => {
     return (
-        <Box bg="blue.900" px={8} py={4} color="white" borderBottom="1px solid" borderColor="whiteAlpha.200">
+        <Box 
+            as="footer"
+            bg="blue.900" 
+            px={8} 
+            py={{ base: 8, md: 4 }} 
+            color="white" 
+            borderTop="1px solid" 
+            borderColor="whiteAlpha.200">
+
             <Flex h={16} alignItems="center" justifyContent="center">
                 <p className="text-sm text-gray-400">&copy; 2026 Coding United Club. All rights reserved.</p>
 
-                <HStack gap={8} alignItems="center" mx="auto">
+                <Stack 
+                    direction={{ base: "column", sm: "row"}}
+                    gap={{ base: 4, md: 8}}
+                    alignItems="center" 
+                    mx="auto">
+
                     <Link href="/" className="hover:text-blue-400 transition-colors">Home</Link>
                     <Link href="/about" className="hover:text-blue-400 transition-colors">About Us</Link>
                     <Link href="/faq" className="hover:text-blue-400 transition-colors">FAQ</Link>
                     <Link href="/session" className="hover:text-blue-400 transition-colors">Recordings</Link>
-                </HStack>
+                </Stack>
             </Flex>
         </Box>
     );
diff --git a/Application/components/navbar.tsx b/Application/components/navbar.tsx
index 5cb550b..d702acc 100644
--- a/Application/components/navbar.tsx
+++ b/Application/components/navbar.tsx
@@ -5,12 +5,31 @@ import { ColorModeButton } from "@/components/ui/color-mode";
 export default function Navbar() {
 
     return (
-        <Box bg="blue.900" px={8} py={4} color="white" borderBottom="1px solid" borderColor="whiteAlpha.200">
-      <Flex h={16} alignItems="center" justifyContent="space-between">
+        <Box 
+          bg="blue.900" 
+          px={8} py={4} 
+          color="white" 
+          borderBottom="1px solid" 
+          borderColor="whiteAlpha.200"
+          >
+
+      <Flex 
+        h={16} 
+        alignItems="center" 
+        justifyContent="space-between"
+        >
+
         <Link href="/">
-          <Text fontSize="xl" fontWeight="bold" cursor="pointer" _hover={{ color: "blue.400" }}>Coding United</Text>
+          <Text 
+            fontSize="xl" 
+            fontWeight="bold" 
+            cursor="pointer" 
+            _hover={{ color: "blue.400" }}>Coding United
+          </Text>
+
         </Link>
-        <HStack gap={8}>
+        <HStack 
+          gap={8}>
             <Link href="/" className="hover:text-blue-400 transition-colors">Home</Link>
             <Link href="/about" className="hover:text-blue-400 transition-colors">About Us</Link>
             <Link href="/faq" className="hover:text-blue-400 transition-colors">FAQ</Link>