diff --git a/apps/web-client/src/app/page.tsx b/apps/web-client/src/app/page.tsx index 8112e79c..68382ad4 100644 --- a/apps/web-client/src/app/page.tsx +++ b/apps/web-client/src/app/page.tsx @@ -4,10 +4,11 @@ import { useAuthStore } from '@/stores/auth-store'; import { useEffect, useState } from 'react'; import { useTranslation } from '@/shared/hooks/use-translation'; import { BrandLogo } from '@/features/shared/components/brand'; -import { Button } from '@/ui'; // NEW: Using new Button from feature-based structure with glassmorphism +import { Button } from '@/ui'; import { Footer } from '@/shared/components/layout/footer'; import { NavigationHeader } from '@/shared/components/layout/header'; -import { Zap, Building, Code } from 'lucide-react'; +import { AnnouncementBanner } from '@/shared/components/layout/announcement-banner'; +import { Search, ArrowRight, Code, Zap, Globe } from 'lucide-react'; /** * EN: Home page component - main application entry point with brand elements @@ -62,121 +63,158 @@ export default function Home() { <> - {/* EN: Dynamic Background - Pastel Mesh Gradient / VI: Nền động - Mesh Gradient Pastel */} -
- {/* EN: Primary Pastel Blue / VI: Xanh Pastel chính */} -
- {/* EN: Soft Purple / VI: Tím mềm */} -
- {/* EN: Bright Cyan / VI: Xanh lơ sáng */} -
-
+ {/* Announcement Banner */} + -
- {/* EN: Floating particles for depth / VI: Các hạt lơ lửng tạo chiều sâu */} -
-
+ {/* Hero Section */} +
+
+ {/* Hero Content */} +
+
+

+ AI for all humanity +

-
- {/* EN: Hero Section / VI: Phần Hero */} -
-
- -
- -

- {t('home.title')} -

- -

- {t('home.description')} -

- -
- {!isAuthenticated ? ( - <> - - - - ) : ( - - )} -
-
- - {/* EN: Feature Highlights / VI: Điểm nổi bật tính năng */} - {!isAuthenticated && ( -
- {[ - { title: 'Fast Development', icon: Zap, desc: 'Build and deploy in minutes' }, - { title: 'Enterprise Ready', icon: Building, desc: 'Production-grade platform' }, - { title: 'Developer First', icon: Code, desc: 'Built for modern teams' }, - ].map((feature, index) => ( -
-
- -
-

- {feature.title} -

-

- {feature.desc} -

-
- ))} -
- )} - - {/* EN: Status Section / VI: Khu vực trạng thái */} -
- {isAuthenticated && user && ( -
+ {/* Search Input */} +
-
-
- {user.email?.[0].toUpperCase()} -
-
-
-

- {t('home.welcome', { email: user.email })} -

-
- - {user.role} +
+
+ +
- )} +
+ + {/* Products Section */} +
+
+
+ [ + Products + ] +
+

AI for all humanity

+
+ +
+ {/* Grok Card */} +
+
+
+

Grok

+
+ +
+
+

+ Grok is your cosmic guide, now accessible on grok.com, iOS, and Android. Explore the universe with AI. +

+
+ +
+
+
+ + {/* API Card */} +
+
+
+

API

+
+ +
+
+

+ Supercharge your applications with Grok's enhanced speed, precision, and multilingual capabilities. +

+
+ +
+
+
+ + {/* Developer Docs Card */} +
+
+
+

Developer Docs

+
+ +
+
+

+ Learn how to quickly install Grok at the heart of your applications and explore guides covering common use cases. +

+
+ +
+
+
+
+
+ + {/* Authenticated User Section */} + {isAuthenticated && user && ( +
+
+
+
+ {user.email?.[0].toUpperCase()} +
+

Welcome back

+

{user.email}

+ +
+
+
+ )}
diff --git a/apps/web-client/src/features/shared/components/layout/announcement-banner.tsx b/apps/web-client/src/features/shared/components/layout/announcement-banner.tsx new file mode 100644 index 00000000..4b1cc187 --- /dev/null +++ b/apps/web-client/src/features/shared/components/layout/announcement-banner.tsx @@ -0,0 +1,94 @@ +'use client'; + +import React from 'react'; +import { X } from 'lucide-react'; +import { Button } from '@/features/shared/components/ui/button'; + +/** + * EN: Announcement Banner props + * VI: Props cho Announcement Banner + */ +export interface AnnouncementBannerProps { + /** Announcement title / Tiêu đề thông báo */ + title: string; + /** Announcement description / Mô tả thông báo */ + description: string; + /** Link text / Text link */ + linkText: string; + /** Link URL / URL link */ + linkUrl: string; + /** Show close button / Hiển thị button đóng */ + showClose?: boolean; + /** On close callback / Callback khi đóng */ + onClose?: () => void; + /** Additional CSS classes / CSS classes bổ sung */ + className?: string; +} + +/** + * EN: Announcement Banner - Clean banner for news/announcements (x.ai style) + * VI: Announcement Banner - Banner sạch sẽ cho tin tức/thông báo (phong cách x.ai) + * + * @example + * ```tsx + * + * ``` + */ +export function AnnouncementBanner({ + title, + description, + linkText, + linkUrl, + showClose = false, + onClose, + className, +}: AnnouncementBannerProps) { + return ( +
+
+
+
+
+ + News + +
+
+
+

+ {title} +

+ + {description} + +
+
+ +
+ + {linkText} + + {showClose && onClose && ( + + )} +
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/web-client/src/features/shared/components/layout/header/navigation-header.tsx b/apps/web-client/src/features/shared/components/layout/header/navigation-header.tsx index fa635e0a..6e340fad 100644 --- a/apps/web-client/src/features/shared/components/layout/header/navigation-header.tsx +++ b/apps/web-client/src/features/shared/components/layout/header/navigation-header.tsx @@ -24,76 +24,82 @@ export interface NavigationHeaderProps { } /** - * EN: Navigation Header - Responsive header with brand logo, theme toggle, and language switcher - * VI: Navigation Header - Header responsive với logo, theme toggle và language switcher - * + * EN: Navigation Header - Clean x.ai style navigation + * VI: Navigation Header - Navigation theo phong cách x.ai sạch sẽ + * * Features: - * - Sticky header with glassmorphism - * - Responsive design (mobile menu) - * - Brand logo integration - * - Theme toggle - * - Language switcher + * - Clean minimal design + * - Navigation menu items * - CTA button - * + * - Responsive design + * * @example * ```tsx - * router.push('/auth/login')} - * /> + * * ``` */ -export function NavigationHeader({ - showCTA = true, - ctaText = 'Get Started', - onCTAClick, - className, -}: NavigationHeaderProps) { +export function NavigationHeader({ className }: { className?: string }) { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + const navItems = [ + { name: 'Grok', href: '/chat' }, + { name: 'API', href: '/api' }, + { name: 'Company', href: '/company' }, + { name: 'Careers', href: '/careers' }, + { name: 'News', href: '/news' }, + ]; + return (
-
+
{/* EN: Main header content / VI: Nội dung header chính */} -
+
{/* EN: Logo / VI: Logo */} {/* EN: Desktop Navigation / VI: Navigation desktop */} - + {/* EN: CTA Button / VI: Button CTA */} +
+ +
+ {/* EN: Mobile Menu Button / VI: Button menu mobile */}
@@ -101,27 +107,33 @@ export function NavigationHeader({ {/* EN: Mobile Menu / VI: Menu mobile */} {mobileMenuOpen && (
-
- - -
- {showCTA && ( - - )} + +
)}
diff --git a/apps/web-client/src/styles/theme.css b/apps/web-client/src/styles/theme.css index 66b100e0..6b122890 100644 --- a/apps/web-client/src/styles/theme.css +++ b/apps/web-client/src/styles/theme.css @@ -78,56 +78,56 @@ /* Focus state - White */ /* ============================================ - EN: Brand Colors (Primary Identity) - VI: Màu thương hiệu (Nhận diện chính) + EN: Minimal Brand Colors (x.ai Inspired) + VI: Màu thương hiệu tối giản (x.ai Inspired) ============================================ */ - /* Primary Brand Color - Main brand identity (Blue - Tech & Trust) */ - --brand-primary: #3B82F6; - --brand-primary-light: #60A5FA; - --brand-primary-dark: #2563EB; - --brand-primary-contrast: #FFFFFF; + /* Primary Brand Color - Clean white accent */ + --brand-primary: #FFFFFF; + --brand-primary-light: #F8F8F8; + --brand-primary-dark: #E5E5E5; + --brand-primary-contrast: #000000; - /* Secondary Brand Color - Supporting color (Purple - Innovation) */ - --brand-secondary: #8B5CF6; - --brand-secondary-light: #A78BFA; - --brand-secondary-dark: #7C3AED; + /* Secondary Brand Color - Subtle gray */ + --brand-secondary: #888888; + --brand-secondary-light: #AAAAAA; + --brand-secondary-dark: #666666; - /* Accent Color - Call-to-action (Cyan - Energy) */ - --brand-accent: #06B6D4; - --brand-accent-light: #22D3EE; - --brand-accent-dark: #0891B2; + /* Accent Color - Minimal gray accent */ + --brand-accent: #CCCCCC; + --brand-accent-light: #DDDDDD; + --brand-accent-dark: #BBBBBB; - /* Brand Gradients - For backgrounds and special elements */ - --brand-gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); - --brand-gradient-accent: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary) 100%); - --brand-gradient-vertical: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); + /* Brand Gradients - Minimal monochromatic */ + --brand-gradient-primary: linear-gradient(135deg, #FFFFFF 0%, #CCCCCC 100%); + --brand-gradient-accent: linear-gradient(135deg, #FFFFFF 0%, #AAAAAA 100%); + --brand-gradient-vertical: linear-gradient(180deg, #FFFFFF 0%, #CCCCCC 100%); /* ============================================ - EN: Glassmorphism Effects (Subtle x.ai Style) - VI: Hiệu ứng Glassmorphism (Phong cách x.ai tinh tế) + EN: Minimal Effects (x.ai Clean Style) + VI: Hiệu ứng tối giản (Phong cách x.ai sạch sẽ) ============================================ */ - /* Glass Backgrounds - Very subtle for professional look */ - --glass-bg-subtle: rgba(255, 255, 255, 0.02); - /* Ultra subtle - For minimal glass effect */ - --glass-bg-default: rgba(255, 255, 255, 0.04); - /* Default glass background */ - --glass-bg-medium: rgba(255, 255, 255, 0.06); - /* Medium glass effect */ - --glass-bg-hover: rgba(255, 255, 255, 0.08); + /* Glass Backgrounds - Ultra minimal for clean look */ + --glass-bg-subtle: rgba(255, 255, 255, 0.01); + /* Ultra subtle - For minimal effect */ + --glass-bg-default: rgba(255, 255, 255, 0.02); + /* Default minimal background */ + --glass-bg-medium: rgba(255, 255, 255, 0.03); + /* Medium minimal effect */ + --glass-bg-hover: rgba(255, 255, 255, 0.04); /* Hover state */ - --glass-bg-active: rgba(255, 255, 255, 0.10); + --glass-bg-active: rgba(255, 255, 255, 0.05); /* Active/pressed state */ - /* Glass Borders - Thin and subtle */ - --glass-border-subtle: rgba(255, 255, 255, 0.05); + /* Glass Borders - Very thin and subtle */ + --glass-border-subtle: rgba(255, 255, 255, 0.03); /* Very subtle border */ - --glass-border-default: rgba(255, 255, 255, 0.08); + --glass-border-default: rgba(255, 255, 255, 0.05); /* Default border */ - --glass-border-hover: rgba(255, 255, 255, 0.12); + --glass-border-hover: rgba(255, 255, 255, 0.07); /* Hover border */ - --glass-border-focus: rgba(255, 255, 255, 0.20); + --glass-border-focus: rgba(255, 255, 255, 0.10); /* Focus state - more visible */ /* Backdrop Blur Levels - Subtle to strong */ @@ -196,15 +196,15 @@ /* Heading Font - For section headings (24-36px) */ --font-heading: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - /* Type Scale / Kích thước chữ */ - --text-6xl: 3.75rem; - /* 60px - Hero titles */ - --text-5xl: 3rem; - /* 48px - Page titles */ + /* Type Scale - Clean minimal approach */ + --text-6xl: 3.5rem; + /* 56px - Hero titles */ + --text-5xl: 2.75rem; + /* 44px - Page titles */ --text-4xl: 2.25rem; /* 36px - Section headers */ - --text-3xl: 1.875rem; - /* 30px - Card headers */ + --text-3xl: 1.75rem; + /* 28px - Card headers */ --text-2xl: 1.5rem; /* 24px - Large body */ --text-xl: 1.25rem; @@ -226,7 +226,7 @@ --leading-relaxed: 1.625; --leading-loose: 2; - /* Font Weights / Độ đậm chữ */ + /* Font Weights - Clean and minimal */ --font-thin: 100; --font-extralight: 200; --font-light: 300; @@ -237,7 +237,9 @@ /* Emphasized */ --font-semibold: 600; /* Headings */ - --font-bold: 700; + --font-bold: 600; + /* Clean bold - less heavy */ + --font-extrabold: 700; /* Strong emphasis */ /* ============================================