diff --git a/frontend/README.md b/frontend/README.md index 8dfab09..d98ff2c 100755 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,6 +1,6 @@ -# FastNext Template - Frontend +# PragmaStack - Frontend -Production-ready Next.js 15 frontend with TypeScript, authentication, admin panel, and internationalization. +Production-ready Next.js 16 frontend with TypeScript, authentication, admin panel, and internationalization. ## Features diff --git a/frontend/docs/I18N.md b/frontend/docs/I18N.md index 68f119f..2593041 100644 --- a/frontend/docs/I18N.md +++ b/frontend/docs/I18N.md @@ -1,6 +1,6 @@ # Internationalization (i18n) Guide -This document describes the internationalization implementation in the FastNext Template. +This document describes the internationalization implementation in the PragmaStack. ## Overview diff --git a/frontend/docs/branding/01-brand-values.md b/frontend/docs/branding/01-brand-values.md new file mode 100644 index 0000000..b267294 --- /dev/null +++ b/frontend/docs/branding/01-brand-values.md @@ -0,0 +1,31 @@ +# 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 new file mode 100644 index 0000000..2593b3b --- /dev/null +++ b/frontend/docs/branding/02-visual-identity.md @@ -0,0 +1,37 @@ +# Visual Identity + +## Logo & Iconography +*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. + +> [!NOTE] +> 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. + +> [!NOTE] +> 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 new file mode 100644 index 0000000..28cf132 --- /dev/null +++ b/frontend/docs/branding/README.md @@ -0,0 +1,14 @@ +# Branding Guidelines + +Welcome to the **PragmaStack** branding guidelines. This section defines who we are, how we speak, and how we look. + +## Contents + +- **[01. Brand Values & Mission](./01-brand-values.md)** - Our core principles and voice. +- **[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. + +- **Branding**: "Why we use this blue." +- **Design System**: "How to use the `bg-primary` class." diff --git a/frontend/docs/design-system/00-quick-start.md b/frontend/docs/design-system/00-quick-start.md index a804ce6..9dbd73e 100644 --- a/frontend/docs/design-system/00-quick-start.md +++ b/frontend/docs/design-system/00-quick-start.md @@ -1,6 +1,6 @@ # Quick Start Guide -Get up and running with the FastNext design system immediately. This guide covers the essential patterns you need to build 80% of interfaces. +Get up and running with the PragmaStack design system immediately. This guide covers the essential patterns you need to build 80% of interfaces. --- diff --git a/frontend/docs/design-system/01-foundations.md b/frontend/docs/design-system/01-foundations.md index a36adfd..ff74bc0 100644 --- a/frontend/docs/design-system/01-foundations.md +++ b/frontend/docs/design-system/01-foundations.md @@ -38,6 +38,11 @@ --- +--- + +> [!NOTE] +> **Branding vs. Design System**: These foundations implement the visual identity defined in the **[Branding Guidelines](../branding/README.md)**. Refer to that document for the "why" behind these choices. + ## Color System (OKLCH) ### Why OKLCH? @@ -228,6 +233,32 @@ All colors follow the **background/foreground** convention: // Delete button +--- + +### Success & Warning Colors + +**Purpose**: Success states and warning alerts + +```css +/* Light & Dark Mode */ +--success: oklch(0.6231 0.188 145) /* Green */ +--success-foreground: oklch(1 0 0) /* White text */ + +--warning: oklch(0.75 0.15 85) /* Yellow/Orange */ +--warning-foreground: oklch(0.1529 0 0) /* Dark text */ +``` + +**Usage**: + +```tsx +// Success badge +Completed + +// Warning alert +
+ Warning: This action is irreversible. +
+``` // Error alert diff --git a/frontend/docs/design-system/08-ai-guidelines.md b/frontend/docs/design-system/08-ai-guidelines.md index b0a8051..614819c 100644 --- a/frontend/docs/design-system/08-ai-guidelines.md +++ b/frontend/docs/design-system/08-ai-guidelines.md @@ -1,6 +1,6 @@ # AI Code Generation Guidelines -**For AI Assistants**: This document contains strict rules for generating code in the FastNext Template project. Follow these rules to ensure generated code matches the design system perfectly. +**For AI Assistants**: This document contains strict rules for generating code in the PragmaStack project. Follow these rules to ensure generated code matches the design system perfectly. --- diff --git a/frontend/docs/design-system/99-reference.md b/frontend/docs/design-system/99-reference.md index 9ff9413..2e2bf49 100644 --- a/frontend/docs/design-system/99-reference.md +++ b/frontend/docs/design-system/99-reference.md @@ -1,6 +1,6 @@ # Quick Reference -**Bookmark this page** for instant lookups of colors, spacing, typography, components, and common patterns. Your go-to cheat sheet for the FastNext design system. +**Bookmark this page** for instant lookups of colors, spacing, typography, components, and common patterns. Your go-to cheat sheet for the PragmaStack design system. --- diff --git a/frontend/docs/design-system/README.md b/frontend/docs/design-system/README.md index 70fabb6..49b0f3b 100644 --- a/frontend/docs/design-system/README.md +++ b/frontend/docs/design-system/README.md @@ -1,6 +1,6 @@ # Design System Documentation -**FastNext Template Design System** - A comprehensive guide to building consistent, accessible, and beautiful user interfaces. +**PragmaStack Design System** - A comprehensive guide to building consistent, accessible, and beautiful user interfaces. --- @@ -19,6 +19,11 @@ ## 📖 Documentation Structure +### Branding & Identity +- **[Branding Guidelines](../branding/README.md)** 🎨 + - Mission & Values + - Visual Identity (Logo, Colors, Typography) + ### Getting Started - **[00. Quick Start](./00-quick-start.md)** ⚡ diff --git a/frontend/e2e/homepage.spec.ts b/frontend/e2e/homepage.spec.ts index fd6dc24..5b75f9e 100644 --- a/frontend/e2e/homepage.spec.ts +++ b/frontend/e2e/homepage.spec.ts @@ -14,7 +14,7 @@ test.describe('Homepage - Desktop Navigation', () => { test('should display header with logo and navigation', async ({ page }) => { // Logo should be visible - await expect(page.getByRole('link', { name: /FastNext/i })).toBeVisible(); + await expect(page.getByRole('link', { name: /PragmaStack/i })).toBeVisible(); // Desktop navigation links should be visible (use locator to find within header) const header = page.locator('header').first(); @@ -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(); @@ -469,7 +469,7 @@ test.describe('Homepage - Footer', () => { // Scroll to footer await page.locator('footer').scrollIntoViewIfNeeded(); - await expect(page.getByText(/FastNext Template. MIT Licensed/i)).toBeVisible(); + await expect(page.getByText(/PragmaStack. MIT Licensed/i)).toBeVisible(); }); }); diff --git a/frontend/src/app/[locale]/(authenticated)/layout.tsx b/frontend/src/app/[locale]/(authenticated)/layout.tsx index fe78b8f..a84ff59 100644 --- a/frontend/src/app/[locale]/(authenticated)/layout.tsx +++ b/frontend/src/app/[locale]/(authenticated)/layout.tsx @@ -10,7 +10,7 @@ import { Footer } from '@/components/layout/Footer'; export const metadata: Metadata = { title: { - template: '%s | FastNext Template', + template: '%s | PragmaStack', default: 'Dashboard', }, }; diff --git a/frontend/src/app/[locale]/admin/layout.tsx b/frontend/src/app/[locale]/admin/layout.tsx index 8b7da82..0de3d99 100644 --- a/frontend/src/app/[locale]/admin/layout.tsx +++ b/frontend/src/app/[locale]/admin/layout.tsx @@ -12,7 +12,7 @@ import { AdminSidebar, Breadcrumbs } from '@/components/admin'; export const metadata: Metadata = { title: { - template: '%s | Admin | FastNext Template', + template: '%s | Admin | PragmaStack', default: 'Admin Dashboard', }, }; diff --git a/frontend/src/app/[locale]/demos/page.tsx b/frontend/src/app/[locale]/demos/page.tsx index e21da2e..6a17eb4 100644 --- a/frontend/src/app/[locale]/demos/page.tsx +++ b/frontend/src/app/[locale]/demos/page.tsx @@ -26,9 +26,9 @@ import { Badge } from '@/components/ui/badge'; import { Separator } from '@/components/ui/separator'; export const metadata: Metadata = { - title: 'Demo Tour | FastNext Template', + title: 'Demo Tour | PragmaStack', description: - 'Try all features with demo credentials - comprehensive guide to the FastNext template', + 'Try all features with demo credentials - comprehensive guide to the PragmaStack', }; const demoCategories = [ diff --git a/frontend/src/app/[locale]/dev/docs/page.tsx b/frontend/src/app/[locale]/dev/docs/page.tsx index b2c3b20..391fde4 100644 --- a/frontend/src/app/[locale]/dev/docs/page.tsx +++ b/frontend/src/app/[locale]/dev/docs/page.tsx @@ -120,7 +120,7 @@ export default function DocsHub() {

Design System Documentation

Comprehensive guides, best practices, and references for building consistent, - accessible, and maintainable user interfaces with the FastNext design system. + accessible, and maintainable user interfaces with the PragmaStack design system.

diff --git a/frontend/src/app/[locale]/dev/page.tsx b/frontend/src/app/[locale]/dev/page.tsx index 9afc8c9..a171cb9 100644 --- a/frontend/src/app/[locale]/dev/page.tsx +++ b/frontend/src/app/[locale]/dev/page.tsx @@ -14,7 +14,7 @@ import { Badge } from '@/components/ui/badge'; import { Separator } from '@/components/ui/separator'; export const metadata: Metadata = { - title: 'Design System Hub | FastNext Template', + title: 'Design System Hub | PragmaStack', description: 'Interactive design system demonstrations with live examples - explore components, layouts, spacing, and forms built with shadcn/ui and Tailwind CSS', }; @@ -90,7 +90,7 @@ export default function DesignSystemHub() {

Interactive demonstrations, live examples, and comprehensive documentation for the - FastNext design system. Built with shadcn/ui + Tailwind CSS 4. + PragmaStack design system. Built with shadcn/ui + Tailwind CSS 4.

diff --git a/frontend/src/app/[locale]/page.tsx b/frontend/src/app/[locale]/page.tsx index 9d0749a..c84a232 100755 --- a/frontend/src/app/[locale]/page.tsx +++ b/frontend/src/app/[locale]/page.tsx @@ -1,6 +1,6 @@ /** * Homepage / Landing Page - * Main landing page for the FastNext Template project + * Main landing page for the PragmaStack project * Showcases features, tech stack, and provides demos for developers */ @@ -67,7 +67,7 @@ export default function Home() {
- © {new Date().getFullYear()} FastNext Template. MIT Licensed. + © {new Date().getFullYear()} PragmaStack. MIT Licensed.
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 17f63b3..36bcc5e 100755 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -1,7 +1,7 @@ @import 'tailwindcss'; /** - * FastNext Template Design System + * PragmaStack Design System * Theme: Modern Minimal (from tweakcn.com) * Primary: Blue | Color Space: OKLCH * @@ -27,6 +27,10 @@ --accent-foreground: oklch(0.3791 0.1378 265.5222); --destructive: oklch(0.6368 0.2078 25.3313); --destructive-foreground: oklch(1 0 0); + --success: oklch(0.6231 0.188 145); + --success-foreground: oklch(1 0 0); + --warning: oklch(0.75 0.15 85); + --warning-foreground: oklch(0.1529 0 0); --border: oklch(0.9276 0.0058 264.5313); --input: oklch(0.9276 0.0058 264.5313); --ring: oklch(0.6231 0.188 259.8145); @@ -91,6 +95,10 @@ --accent-foreground: oklch(0.8823 0.0571 254.1284); --destructive: oklch(0.6368 0.2078 25.3313); --destructive-foreground: oklch(1 0 0); + --success: oklch(0.6231 0.188 145); + --success-foreground: oklch(1 0 0); + --warning: oklch(0.75 0.15 85); + --warning-foreground: oklch(0.1529 0 0); --border: oklch(0.3715 0 0); --input: oklch(0.3715 0 0); --ring: oklch(0.6231 0.188 259.8145); @@ -127,6 +135,10 @@ --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); + --color-success: var(--success); + --color-success-foreground: var(--success-foreground); + --color-warning: var(--warning); + --color-warning-foreground: var(--warning-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); @@ -206,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/dev/DevLayout.tsx b/frontend/src/components/dev/DevLayout.tsx index c847775..77b136a 100644 --- a/frontend/src/components/dev/DevLayout.tsx +++ b/frontend/src/components/dev/DevLayout.tsx @@ -95,7 +95,7 @@ export function DevLayout({ children }: DevLayoutProps) { {/* Left: Logo + Badge */}
-

FastNext

+

PragmaStack

Dev diff --git a/frontend/src/components/home/AnimatedTerminal.tsx b/frontend/src/components/home/AnimatedTerminal.tsx index 2d8417b..e4ed387 100644 --- a/frontend/src/components/home/AnimatedTerminal.tsx +++ b/frontend/src/components/home/AnimatedTerminal.tsx @@ -83,9 +83,9 @@ export function AnimatedTerminal() { {/* Terminal Header */}
-