chore: remove unneccessary subtitle, change name routes, and styling

app/components/page.tsx

@@ -18,14 +18,8 @@ const AstraComponentPage: React.FC = async () => {
 
     return (
         <Layout>
-            <Badge ariaLabel="Components Title Badge" text="Components" />
-            <h1 className="text-2xl md:text-4xl font-medium mb-3 text-gray-900 dark:text-gray-50">Components</h1>
-            <div className="mb-8">
-                <p className="text-sm md:text-base mb-4 text-gray-700 dark:text-gray-50 leading-loose text-justify">
-                    The Components section provides an in-depth look at each user interface component in AstraUI. 
-                    Engineered for customization, accessibility, and seamless use, these components are designed to elevate your projects across web, Android, and iOS platforms.
-                    Explore the documentation for detailed insights on features, usage, and customization options.
-                </p>
+            <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-50">Web Components</h1>
+            <div className="my-12">
                 <AstraComponent initialActiveTab={initialActiveTab} />
             </div>
         </Layout>

app/foundations/page.tsx

@@ -20,15 +20,9 @@ const AstraFoundationPage: React.FC = () => {
 
     return (
         <Layout>
-            <Badge ariaLabel="Foundations Title Badge" text="Foundations"/>
-            <h1 className="text-2xl md:text-4xl font-medium mb-3 text-gray-900 dark:text-gray-50">Foundations</h1>
-            <div className="mb-8">
-                <p className="text-sm md:text-base mb-4 text-gray-700 dark:text-gray-50 leading-loose text-justify">
-                    The Foundation section outlines the fundamental principles and philosophy of the AstraUI design system. 
-                    It provides a comprehensive understanding of the core values, objectives, and guidelines that guide and inspire every component. 
-                    This ensures consistency, usability, and aesthetic coherence across all user interfaces, facilitating a seamless and engaging user experience.
-                </p>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+            <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-50">Foundations</h1>
+            <div className="my-16">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
                     {sortedFoundationList.map((item) => (
                         <Link key={item.name} href={item.path} className="block border p-4 rounded-lg transition-all duration-300 bg-zinc-50 dark:bg-zinc-950 hover:shadow-lg hover:bg-zinc-100 dark:hover:bg-zinc-800/90 dark:border-gray-700">
                             <div>

components/AstraComponent/AstraComponent.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
+
 import { Tabs, Tab } from '@/components/Tabs/Tabs';
 import AlphabeticalList from '@/components/AlphabeticalList/AlphabeticalList';
 import CategoricalList from '@/components/CategoricalList/CategoricalList';

components/CategoricalList/CategoricalList.tsx

@@ -8,7 +8,7 @@ const CategoricalList: React.FC = () => {
         <>
             {Object.entries(categorizedComponentsList).map(([category, components]) => (
                 <div key={category} className="mt-6">
-                    <h3 className="text-lg md:text-xl lg:text-2xl font-medium mb-2 text-gray-900 dark:text-gray-50 capitalize">
+                    <h3 className="text-lg md:text-xl lg:text-2xl font-medium mb-4 text-gray-900 dark:text-gray-50 capitalize">
                         {category.replace(/([A-Z])/g, ' $1')}
                     </h3>
                     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-4">

components/Layout/Layout.tsx

@@ -1,4 +1,3 @@
-// components/Layout/Layout.tsx
 'use client'
 
 import React, { useState, useEffect } from 'react';
@@ -35,9 +34,9 @@ const Layout: React.FC<LayoutProps> = ({ children, className}) => {
     return (
         <div className="flex flex-col min-h-screen">
             <Header setActiveSection={setActiveSection} toggleSidebar={toggleSidebar} isSidebarOpen={isSidebarOpen}/>
-            <div className="flex flex-1 px-5 md:px-14">
+            <div className="flex flex-1 px-5 md:px-10">
                 <Sidebar isSidebarOpen={isSidebarOpen} closeSidebar={toggleSidebar} />
-                <main className="flex-1 p-6 md:p-7 bg-gray-50 dark:bg-black">
+                <main className="flex-1 p-4 md:p-5 bg-gray-50 dark:bg-black">
                     {children}
                 </main>
             </div>

components/Sidebar/Sidebar.tsx

@@ -92,7 +92,7 @@ const Sidebar: React.FC<SidebarProps> = ({ isSidebarOpen, closeSidebar, classNam
             </div>
             <div className="w-full">
                 <div className="hidden md:block">
-                    <SearchBar className="ml-2" size="small" onSearch={handleSearch} />
+                    <SearchBar className="mx-2" size="small" onSearch={handleSearch} />
                 </div>
                 {pathname.startsWith('/about') && (
                     <>

components/Tabs/Tabs.tsx

@@ -101,7 +101,7 @@ const Tabs: React.FC<TabsProps> = ({ theme, children, className, tabClassName, a
             id={`tab-${index}`}
             tabIndex={index === activeTab ? 0 : -1}
             className={cn(
-              'py-1 px-4 rounded-lg flex items-center content-center',
+              'py-1 px-4 rounded-lg flex items-center content-center flex-1',
               index === activeTab
                 ? 'bg-white dark:bg-black text-black dark:text-white shadow-lg text-base md:text-lg font-normal'
                 : 'text-gray-700 dark:text-gray-50 hover:bg-white dark:hover:bg-zinc-950 hover:text-black dark:hover:text-white',

components/home/home.tsx

@@ -258,7 +258,7 @@ export function HomePage() {
                   </span>
                 </h1>
                 <p className="mx-auto max-w-[600px] text-gray-700 dark:text-gray-100 text-sm md:text-xl font-normal">
-                  Experience it firsthand and show us your creations
+                  Experience it firsthand and show us your creations!
                 </p>
               </div>
               <div className="flex flex-wrap gap-4 mb-12">

utils/constants/route.ts

@@ -106,7 +106,7 @@ export const categorizedComponentsList = {
         { name: 'Navigation Menu', path: '/components/navigation-menu', description: 'A navigation bar for providing links to different sections of the site.' },
         { name: 'Accordion', path: '/components/accordion', description: 'A collapsible section of content, useful for FAQs and more.' },
         { name: 'Carousel', path: '/components/carousel', description: 'Displays a series of content in a slideshow format.' },
-        { name: 'Collapse', path: '/components/collapse', description: 'Hides and shows content in a toggled manner.' },
+        { name: 'Collapsible', path: '/components/collapsible', description: 'Hides and shows content in a toggled manner.' },
         { name: 'Progress Tracker', path: '/components/progress-tracker', description: 'Visual guide showing steps and progress through a multi-step process.' },
         { name: 'Stepper', path: '/components/stepper', description: 'Step-by-step interface for guiding users through processes.' },
         { name: 'Bottom Navigation', path: '/components/bottom-navigation', description: 'Mobile-friendly navigation bar fixed at screen bottom.' },