Improve code consistency and documentation readability

- Standardized Markdown formatting across documentation files.
- Fixed inconsistent usage of inline code blocks and improved syntax clarity.
- Updated tests and JSX for cleaner formatting and better readability.
- Adjusted E2E test navigation handlers for multiline code consistency.
- Simplified TypeScript configuration and organized JSON structure for better maintainability.

frontend/docs/branding/01-brand-values.md

@@ -1,31 +1,39 @@
 # Brand Values & Mission
 
 ## Mission Statement
+
 To empower developers to build beautiful, high-performance web applications with **pragmatic speed** and confidence. We provide a solid, opinionated foundation that solves real-world problems without over-engineering, ensuring you ship faster and scale better.
 
 ## Core Values
 
 ### 1. Pragmatic Speed ⚡
+
 We value efficiency in both development and runtime performance. Our tools are designed to get you from idea to production as fast as possible, focusing on shipping value rather than just raw metrics.
 
 ### 2. Quality 💎
+
 We don't cut corners. We believe in semantic HTML, accessible interfaces, and robust type safety. "It works" is not enough; it must be "it works beautifully."
 
 ### 3. Pragmatic Clarity 🔍
+
 We prefer explicit over implicit. Our code and documentation prioritize readability and practical utility over clever abstractions. We avoid "magic" to ensure easy debugging and extension.
 
 ### 4. Aesthetics 🎨
+
 We believe that good design is not an afterthought. It is integral to the user experience. We strive for a modern, clean, and professional look that inspires trust.
 
 ### 5. Security & Robustness 🛡️
+
 We build for the real world. Our solutions are secure by default and robust enough to handle production workloads. We prioritize data protection and system stability above all else.
 
 ## Brand Voice
+
 - **Professional but approachable**: We are experts, but we are also helpful colleagues.
 - **Concise and direct**: We value your time. We get straight to the point.
 - **Encouraging**: We believe you can build great things.
 
 ## Target Audience
+
 - Full-stack developers who want a robust starting point.
 - Frontend engineers who care about design systems and accessibility.
 - Startups and solopreneurs looking to launch quickly.

frontend/docs/branding/02-visual-identity.md

@@ -1,18 +1,22 @@
 # Visual Identity
 
 ## Logo & Iconography
-*Pending logo design.*
+
+_Pending logo design._
 
 For now, we use the **Lucide React** icon set for all iconography. Icons should be used sparingly and meaningfully to enhance understanding, not just for decoration.
 
 ## Color Palette
+
 Our color palette is derived from the **Modern Minimal** theme using the **OKLCH** color space for perceptual uniformity.
 
 ### Primary Colors
+
 - **Primary Blue**: `oklch(0.6231 0.188 259.8145)` - Used for main actions, branding elements, and active states.
 - **Background**: `oklch(1 0 0)` (Light) / `oklch(0.2046 0 0)` (Dark) - Clean, neutral backgrounds.
 
 ### Usage Guidelines
+
 - **Dominant**: Neutral backgrounds and text (Foreground, Card, Muted).
 - **Accent**: Primary Blue for calls to action.
 - **Functional**: Destructive Red for errors, Success Green (custom) for success states.
@@ -21,9 +25,11 @@ Our color palette is derived from the **Modern Minimal** theme using the **OKLCH
 > For the full technical specification of color tokens, refer to the [Design System Foundations](../design-system/01-foundations.md#color-system-oklch).
 
 ## Typography
+
 We use **Geist Sans** for headings and body text, and **Geist Mono** for code.
 
 ### Type Hierarchy
+
 - **Headings**: Bold, tight tracking.
 - **Body**: Regular weight, comfortable reading line height.
 - **Code**: Monospaced, slightly smaller than body text.
@@ -32,6 +38,7 @@ We use **Geist Sans** for headings and body text, and **Geist Mono** for code.
 > For the full typography scale and usage, refer to the [Design System Foundations](../design-system/01-foundations.md#typography).
 
 ## Imagery & Graphics
+
 - **Style**: Clean, modern, minimal.
 - **Screenshots**: Use consistent padding and shadows (refer to `shadow-lg` or `shadow-xl`).
 - **Illustrations**: Avoid generic stock photos. Use abstract geometric shapes or high-quality interface representations.

frontend/docs/branding/README.md

@@ -8,7 +8,8 @@ Welcome to the **PragmaStack** branding guidelines. This section defines who we
 - **[02. Visual Identity](./02-visual-identity.md)** - Logo, colors, and typography usage.
 
 ## Relationship with Design System
-While these branding guidelines define the *soul* and *identity* of the project, the **[Design System](../design-system/README.md)** provides the *technical implementation* and *components* to build it.
+
+While these branding guidelines define the _soul_ and _identity_ of the project, the **[Design System](../design-system/README.md)** provides the _technical implementation_ and _components_ to build it.
 
 - **Branding**: "Why we use this blue."
 - **Design System**: "How to use the `bg-primary` class."

frontend/docs/design-system/01-foundations.md

@@ -229,7 +229,7 @@ All colors follow the **background/foreground** convention:
 
 **Usage**:
 
-```tsx
+````tsx
 // Delete button
 <Button variant="destructive">Delete Account</Button>
 
@@ -246,7 +246,7 @@ All colors follow the **background/foreground** convention:
 
 --warning: oklch(0.75 0.15 85) /* Yellow/Orange */
 --warning-foreground: oklch(0.1529 0 0) /* Dark text */
-```
+````
 
 **Usage**:
 
@@ -259,6 +259,7 @@ All colors follow the **background/foreground** convention:
   Warning: This action is irreversible.
 </div>
 ```
+
 // Error alert
 <Alert variant="destructive">
 <AlertCircle className="h-4 w-4" />
@@ -269,13 +270,15 @@ All colors follow the **background/foreground** convention:
 </Alert>
 
 // Form error text
+
 <p className="text-sm text-destructive">
   {errors.email?.message}
 </p>
 
 // Destructive badge
 <Badge variant="destructive">Critical</Badge>
-```
+
+````
 
 **When to use**:
 
@@ -297,7 +300,7 @@ All colors follow the **background/foreground** convention:
   /* Dark Mode */ --card: oklch(0.2686 0 0) /* Dark gray */ --card-foreground: oklch(0.9823 0 0)
   /* Light text */ --popover: oklch(0.2686 0 0) /* Dark gray */
   --popover-foreground: oklch(0.9823 0 0) /* Light text */;
-```
+````
 
 **Usage**:
 

frontend/docs/design-system/README.md

@@ -20,6 +20,7 @@
 ## 📖 Documentation Structure
 
 ### Branding & Identity
+
 - **[Branding Guidelines](../branding/README.md)** 🎨
   - Mission & Values
   - Visual Identity (Logo, Colors, Typography)

frontend/src/app/[locale]/demos/page.tsx

@@ -27,8 +27,7 @@ import { Separator } from '@/components/ui/separator';
 
 export const metadata: Metadata = {
   title: 'Demo Tour | PragmaStack',
-  description:
+  description: 'Try all features with demo credentials - comprehensive guide to the PragmaStack',
-    'Try all features with demo credentials - comprehensive guide to the PragmaStack',
 };
 
 const demoCategories = [

frontend/src/components/home/AnimatedTerminal.tsx

@@ -105,7 +105,8 @@ export function AnimatedTerminal() {
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   transition={{ duration: 0.2 }}
-                  className={`${line.isSuccess
+                  className={`${
+                    line.isSuccess
                       ? 'text-success'
                       : line.text.startsWith('#')
                         ? 'text-slate-500'

frontend/src/components/home/PhilosophySection.tsx

@@ -86,10 +86,7 @@ export function PhilosophySection() {
             <ul className="space-y-3">
               {willFind.map((item) => (
                 <li key={item} className="flex items-start gap-3">
-                  <Check
+                  <Check className="h-5 w-5 text-success flex-shrink-0 mt-0.5" aria-hidden="true" />
-                    className="h-5 w-5 text-success flex-shrink-0 mt-0.5"
-                    aria-hidden="true"
-                  />
                   <span className="text-muted-foreground">{item}</span>
                 </li>
               ))}

frontend/tests/app/page.test.tsx

@@ -10,7 +10,7 @@ import Home from '@/app/[locale]/page';
 jest.mock('next/image', () => ({
   __esModule: true,
   default: (props: any) => {
-    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+    // eslint-disable-next-line @next/next/no-img-element
     return <img {...props} />;
   },
 }));

frontend/tests/lib/auth/storage.test.ts

@@ -240,9 +240,9 @@ describe('Storage Module', () => {
       const descriptor = Object.getOwnPropertyDescriptor(global, 'localStorage');
       Object.defineProperty(global, 'localStorage', { value: undefined, configurable: true });
 
-      await expect(
+      await expect(saveTokens({ accessToken: 'a', refreshToken: 'r' })).rejects.toThrow(
-        saveTokens({ accessToken: 'a', refreshToken: 'r' })
+        'localStorage not available - cannot save tokens'
-      ).rejects.toThrow('localStorage not available - cannot save tokens');
+      );
 
       if (descriptor) Object.defineProperty(global, 'localStorage', descriptor);
     });

frontend/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": [
+    "lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -17,18 +13,14 @@
     "isolatedModules": true,
     "jsx": "react-jsx",
     "incremental": true,
-    "types": [
+    "types": ["@testing-library/jest-dom"],
-      "@testing-library/jest-dom"
-    ],
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@/*": [
+      "@/*": ["./src/*"]
-        "./src/*"
-      ]
     }
   },
   "include": [
@@ -38,7 +30,5 @@
     ".next/types/**/*.ts",
     ".next/dev/types/**/*.ts"
   ],
-  "exclude": [
+  "exclude": ["node_modules"]
-    "node_modules"
-  ]
 }