docs: add documentation for download page, 404 page, typography and button components

README.md

@@ -148,3 +148,84 @@ To create a new page, follow these steps:
     ```
 
 The new page will be accessible at `http://localhost:3000/new-page`.
+
+### Download Page
+
+The download page, located at `src/app/(main)/download/page.tsx`, provides users with download links for the Mycelium application across various operating systems. The page is composed of the following components:
+
+- **DownloadHero**: Displays the main header and a grid of download cards for each supported platform (iOS, macOS, Windows, Android, and Linux).
+- **DevHub**: Provides links to developer resources, including documentation, support channels, forums, and community groups.
+- **Faqs**: A frequently asked questions section to address common user queries.
+
+### Not Found Page
+
+The `not-found.tsx` file at `src/app/not-found.tsx` defines a custom 404 error page. This page is displayed whenever a user navigates to a non-existent route. It features a clean and simple layout with a 404 message and a button that directs the user back to the homepage.
+
+### Typography with `Texts.tsx`
+
+The `src/components/Texts.tsx` file implements a flexible and consistent typography system using a factory pattern. It exports a set of reusable text components, such as `H1`, `P`, and `SectionHeader`, each with predefined styles and color variants.
+
+This approach ensures that the visual hierarchy and design language remain consistent throughout the application. To use a text component, simply import it and use it like any other React component:
+
+```tsx
+import { H1, P } from '@/components/Texts';
+
+function MyComponent() {
+  return (
+    <div>
+      <H1 color="accent">This is a heading</H1>
+      <P color="secondary">This is a paragraph.</P>
+    </div>
+  );
+}
+```
+
+### Button Components
+
+The `src/components/Button.tsx` file provides a polymorphic button component that can be rendered as either a `<button>` or a Next.js `<Link>`. It supports two main variants (`solid` and `outline`) and multiple color schemes.
+
+This component is used throughout the application to ensure that all buttons and links have a consistent look and feel. Example usage:
+
+```tsx
+import { Button } from '@/components/Button';
+
+function MyComponent() {
+  return (
+    <div>
+      <Button variant="solid" color="cyan">Submit</Button>
+      <Button href="/about" variant="outline">Learn More</Button>
+    </div>
+  );
+}
+```
+
+### Adding Images
+
+To add images to the project while ensuring they are optimized, use the Next.js `Image` component. Follow these steps:
+
+1.  **Place Your Image**: Add your image file to the `src/images/` directory.
+
+2.  **Import the Image**: In the component where you want to display the image, import it at the top of the file:
+
+    ```tsx
+    import myImage from '@/images/my-image.png';
+    ```
+
+3.  **Use the `Image` Component**: Use the `Image` component from `next/image` to render your image. Provide the `src`, `alt`, `width`, and `height` props for proper rendering and accessibility.
+
+    ```tsx
+    import Image from 'next/image';
+    import myImage from '@/images/my-image.png';
+
+    export function MyComponent() {
+      return (
+        <Image
+          src={myImage}
+          alt="A descriptive alt text for accessibility"
+          width={500}
+          height={300}
+          priority // Optional: Add this if the image is critical for the initial page load
+        />
+      );
+    }
+    ```

src/components/About.tsx

@@ -13,7 +13,7 @@ export function About() {
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
         <CircleBackground color="#06b6d4" className="animate-spin-slower" />
       </div>
-      <Container className="relative">
+      <Container>
         <div className="mx-auto max-w-3xl text-center">
           <Eyebrow color="accent">Our Mission</Eyebrow>
           <SectionHeader color="white" className="mt-2">

src/components/CallToAction.tsx

@@ -15,7 +15,7 @@ export function CallToAction() {
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
         <CircleBackground color="#06b6d4" className="animate-spin-slower" />
       </div>
-      <Container className="relative">
+      <Container>
         <div className="mx-auto max-w-2xl text-center">
           <SectionHeader as="h2" color="white">
             Get Started Today

src/components/Features.tsx

@@ -25,7 +25,7 @@ export function Features() {
         <div className="mt-10 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
           <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
               <Pathfinding />
               <div className="p-10 pt-4">
                 <CardEyebrow color="accent">Routing</CardEyebrow>
@@ -43,7 +43,7 @@ export function Features() {
           </div>
           <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white lg:rounded-tr-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
               <MessageBus />
               <div className="p-10 pt-4">
                 <CardEyebrow color="accent">Communication</CardEyebrow>
@@ -61,7 +61,7 @@ export function Features() {
           </div>
           <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white lg:rounded-bl-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
               <ProxyDetection className="h-80" />
               <div className="p-10 pt-4">
                 <CardEyebrow color="accent">Discovery</CardEyebrow>
@@ -79,7 +79,7 @@ export function Features() {
           </div>
           <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
               <ProxyForwarding className="h-80" />
               <div className="p-10 pt-4">
                 <CardEyebrow color="accent">Connectivity</CardEyebrow>
@@ -97,7 +97,7 @@ export function Features() {
           </div>
           <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-br-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
               <ContentDistribution className="h-80" />
               <div className="p-10 pt-4">
                 <CardEyebrow color="accent">Delivery</CardEyebrow>

src/components/PrimaryFeatures.tsx

@@ -259,7 +259,7 @@ function FeaturesDesktop() {
       onChange={onChange}
       vertical
     >
-      <TabList className="relative z-10 order-last col-span-6 space-y-6">
+      <TabList className="z-10 order-last col-span-6 space-y-6">
         {features.map((feature, featureIndex) => (
           <div
             key={feature.name}
@@ -292,7 +292,7 @@ function FeaturesDesktop() {
           </div>
         ))}
       </TabList>
-      <div className="relative col-span-6">
+      <div className="col-span-6">
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
           <CircleBackground color="#13B5C8" className="animate-spin-slower" />
         </div>
@@ -370,7 +370,7 @@ function FeaturesMobile() {
           >
             <div
               className={clsx(
-                'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
+                'transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
                 activeIndex === featureIndex
                   ? 'outline-transparent' // Remove outline for active mobile slide
                   : 'outline-transparent hover:outline-cyan-500',