diff --git a/frontend/docs/branding/01-brand-values.md b/frontend/docs/branding/01-brand-values.md
index b267294..c6b0771 100644
--- a/frontend/docs/branding/01-brand-values.md
+++ b/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.
diff --git a/frontend/docs/branding/02-visual-identity.md b/frontend/docs/branding/02-visual-identity.md
index 2593b3b..a772fe8 100644
--- a/frontend/docs/branding/02-visual-identity.md
+++ b/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.
diff --git a/frontend/docs/branding/README.md b/frontend/docs/branding/README.md
index 28cf132..b95a121 100644
--- a/frontend/docs/branding/README.md
+++ b/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."
diff --git a/frontend/docs/design-system/01-foundations.md b/frontend/docs/design-system/01-foundations.md
index ff74bc0..200d15c 100644
--- a/frontend/docs/design-system/01-foundations.md
+++ b/frontend/docs/design-system/01-foundations.md
@@ -229,7 +229,7 @@ All colors follow the **background/foreground** convention:
**Usage**:
-```tsx
+````tsx
// Delete 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,23 +259,26 @@ All colors follow the **background/foreground** convention:
Warning: This action is irreversible.
```
+
// Error alert
-
- Error
-
- Something went wrong. Please try again.
-
+
+Error
+
+Something went wrong. Please try again.
+
// Form error text
+
{errors.email?.message}
// Destructive badge
Critical
-```
+
+````
**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**:
diff --git a/frontend/docs/design-system/README.md b/frontend/docs/design-system/README.md
index 49b0f3b..5fc5fe7 100644
--- a/frontend/docs/design-system/README.md
+++ b/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)
diff --git a/frontend/e2e/homepage.spec.ts b/frontend/e2e/homepage.spec.ts
index 5b75f9e..3d0b64e 100644
--- a/frontend/e2e/homepage.spec.ts
+++ b/frontend/e2e/homepage.spec.ts
@@ -40,7 +40,7 @@ test.describe('Homepage - Desktop Navigation', () => {
// Click and wait for navigation
await designSystemLink.click();
- await page.waitForURL('/en/dev', { timeout: 10000 }).catch(() => { });
+ await page.waitForURL('/en/dev', { timeout: 10000 }).catch(() => {});
// Verify URL (might not navigate if /dev page has issues, that's ok for this test)
const currentUrl = page.url();
@@ -58,7 +58,7 @@ test.describe('Homepage - Desktop Navigation', () => {
// Click and wait for navigation
await adminLink.click();
- await page.waitForURL('/en/admin', { timeout: 10000 }).catch(() => { });
+ await page.waitForURL('/en/admin', { timeout: 10000 }).catch(() => {});
// Verify URL (might not navigate if /admin requires auth, that's ok for this test)
const currentUrl = page.url();
@@ -150,7 +150,7 @@ test.describe('Homepage - Mobile Menu Interactions', () => {
// Click and wait for navigation
await componentsLink.click();
- await page.waitForURL('/en/dev', { timeout: 10000 }).catch(() => { });
+ await page.waitForURL('/en/dev', { timeout: 10000 }).catch(() => {});
// Verify URL (might not navigate if /dev page has issues, that's ok)
const currentUrl = page.url();
@@ -168,7 +168,7 @@ test.describe('Homepage - Mobile Menu Interactions', () => {
// Click and wait for navigation
await adminLink.click();
- await page.waitForURL('/en/admin', { timeout: 10000 }).catch(() => { });
+ await page.waitForURL('/en/admin', { timeout: 10000 }).catch(() => {});
// Verify URL (might not navigate if /admin requires auth, that's ok)
const currentUrl = page.url();
@@ -259,7 +259,7 @@ test.describe('Homepage - Hero Section', () => {
// Click and try to navigate
await exploreLink.click();
- await page.waitForURL('/en/dev', { timeout: 10000 }).catch(() => { });
+ await page.waitForURL('/en/dev', { timeout: 10000 }).catch(() => {});
// Verify URL (flexible to handle auth redirects)
const currentUrl = page.url();
@@ -391,7 +391,7 @@ test.describe('Homepage - Animated Terminal', () => {
// Click and try to navigate
await terminalDemoLink.click();
- await page.waitForURL('/en/login', { timeout: 10000 }).catch(() => { });
+ await page.waitForURL('/en/login', { timeout: 10000 }).catch(() => {});
// Verify URL (flexible to handle redirects)
const currentUrl = page.url();
@@ -421,7 +421,7 @@ test.describe('Homepage - Feature Sections', () => {
// Click and try to navigate
await authLink.click();
- await page.waitForURL('/en/login', { timeout: 10000 }).catch(() => { });
+ await page.waitForURL('/en/login', { timeout: 10000 }).catch(() => {});
// Verify URL (flexible to handle redirects)
const currentUrl = page.url();
@@ -436,7 +436,7 @@ test.describe('Homepage - Feature Sections', () => {
// Click and try to navigate
await adminLink.click();
- await page.waitForURL('/en/admin', { timeout: 10000 }).catch(() => { });
+ await page.waitForURL('/en/admin', { timeout: 10000 }).catch(() => {});
// Verify URL (flexible to handle auth redirects)
const currentUrl = page.url();
diff --git a/frontend/src/app/[locale]/demos/page.tsx b/frontend/src/app/[locale]/demos/page.tsx
index 6a17eb4..5fe86be 100644
--- a/frontend/src/app/[locale]/demos/page.tsx
+++ b/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:
- 'Try all features with demo credentials - comprehensive guide to the PragmaStack',
+ description: 'Try all features with demo credentials - comprehensive guide to the PragmaStack',
};
const demoCategories = [
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 36bcc5e..3bcc5dd 100755
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -218,4 +218,4 @@ button:disabled,
a[aria-disabled='true'],
select:disabled {
cursor: not-allowed;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/home/AnimatedTerminal.tsx b/frontend/src/components/home/AnimatedTerminal.tsx
index e4ed387..0ca986a 100644
--- a/frontend/src/components/home/AnimatedTerminal.tsx
+++ b/frontend/src/components/home/AnimatedTerminal.tsx
@@ -105,14 +105,15 @@ 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'
: line.text.startsWith('$')
? 'text-primary'
: 'text-slate-300'
- }`}
+ }`}
>
{line.text || '\u00A0'}
{index === displayedLines.length - 1 && isAnimating && !line.isSuccess && (
diff --git a/frontend/src/components/home/PhilosophySection.tsx b/frontend/src/components/home/PhilosophySection.tsx
index 0ab0535..6d95066 100644
--- a/frontend/src/components/home/PhilosophySection.tsx
+++ b/frontend/src/components/home/PhilosophySection.tsx
@@ -86,10 +86,7 @@ export function PhilosophySection() {