update contents

Author: guofoo

Plan.md

@@ -0,0 +1,176 @@
+# Visual Differentiation Plan for Upstream Labs Website
+
+## Goal
+Transform the website from standard AstroWind styling to a distinctive, gradient-rich design inspired by beijing2025 and origin2025 reference sites.
+
+---
+
+## Status: ✅ COMPLETE
+
+All 6 phases of the visual differentiation plan have been successfully implemented.
+
+---
+
+## Key Changes Overview
+
+| Area | Original State | Current State | Status |
+|------|--------------|--------------|--------|
+| Section Backgrounds | Repetitive `bg-blue-50` on 3 sections | 4 distinct multi-layered radial gradients | ✅ Complete |
+| Features Widget | Plain icon grid | Glassmorphism card grid (FeaturesCards) | ✅ Complete |
+| Stats Widget | Sparse horizontal layout | Elevated cards with gradient numbers | ✅ Complete |
+| Timeline/Steps | Basic vertical line | Gradient connector with pulsing markers | ✅ Complete |
+| Content Sections | Two identical layouts | Differentiated with unique treatments | ✅ Complete |
+
+---
+
+## Completed Work
+
+### ✅ Phase 1: Section Background System
+
+**File:** `src/assets/styles/tailwind.css`
+
+Added 4 new gradient utility classes:
+
+1. **`.section-bg-azure-glow`** - Blue top-left + aqua bottom-right ellipses (for Features, Steps)
+2. **`.section-bg-gold-accent`** - Gold top-right + blue bottom-left (for Content #1)
+3. **`.section-bg-aqua-flow`** - Aqua bottom-center + blue left (available, not currently used)
+4. **`.section-bg-tri-color`** - Three-way blue/gold/aqua gradient (for Stats)
+
+Each utility uses multi-layered `radial-gradient()` with:
+- Opacity range: 0.06-0.15 (light mode), 0.10-0.20 (dark mode)
+- `::before` pseudo-element pattern
+- `pointer-events: none` for interaction passthrough
+
+---
+
+### ✅ Phase 2: Features Widget Upgrade
+
+**New File:** `src/components/widgets/FeaturesCards.astro`
+
+Created a card-based variant of Features that uses:
+- ItemGrid2 for card layout (3 columns)
+- Glassmorphism styling: `backdrop-blur-sm`, `bg-white/90 dark:bg-ink-800/80`
+- Elevated shadows: `shadow-[0_8px_30px_rgba(43,116,255,0.08)]`
+- Hover effect: `-translate-y-1` with shadow increase
+- Large border-radius: `rounded-2xl` (16px)
+
+**Usage in index.astro:**
+Mission section now uses `<FeaturesCards>` with `section-bg-azure-glow` background.
+
+---
+
+### ✅ Phase 3: Stats Widget Enhancement
+
+**File:** `src/components/widgets/Stats.astro`
+
+Transformed from horizontal flex to card grid:
+- Individual stat cards with `rounded-[28px]` border-radius
+- Gradient numbers: `bg-gradient-to-r from-azure-500 to-aqua-500` with `bg-clip-text`
+- Icon badge: circular gradient background (`from-azure-500 to-aqua-500`)
+- Card hover effect with shadow elevation
+- Section background: `.section-bg-tri-color`
+
+---
+
+### ✅ Phase 4: Timeline Enhancement
+
+**File:** `src/components/ui/Timeline.astro`
+
+Enhanced the Steps widget connector:
+- Gradient vertical line with `.timeline-connector` class
+- Gradient connector: `linear-gradient(180deg, rgb(56 189 248), rgb(14 165 233))`
+- Marker styling: gradient background + white/dark border
+- Icons: gradient filled circles (`from-azure-500 to-aqua-500`)
+
+---
+
+### ✅ Phase 5: Content Section Differentiation
+
+**File:** `src/pages/index.astro`
+
+**Content #1 (Our Approach):**
+- Background: `.section-bg-gold-accent`
+- Decorative left border: `border-l-4 border-azure-500` on content slot
+
+**Content #2:**
+- Not implemented - decided page flow was complete without it
+- `section-bg-aqua-flow` utility remains available for future use
+
+---
+
+### ✅ Phase 6: Tailwind Config Extensions
+
+**File:** `tailwind.config.js`
+
+Added design tokens:
+```javascript
+borderRadius: {
+  '4xl': '28px',
+},
+boxShadow: {
+  'elevated': '0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06)',
+  'elevated-lg': '0 30px 60px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(0, 0, 0, 0.08)',
+},
+animation: {
+  'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+},
+```
+
+---
+
+## Current Section Background Mapping
+
+| Section | Background Class | Status |
+|---------|-----------------|--------|
+| Hero | `hero-gradient` | ✅ Active |
+| Note | none | ✅ Active (clean break) |
+| Features/Mission | `section-bg-azure-glow` | ✅ Active |
+| Content #1 (Our Approach) | `section-bg-gold-accent` | ✅ Active |
+| Steps | `section-bg-azure-glow` | ✅ Active |
+| Features2/Programs | none | ✅ Active (cards provide interest) |
+| Stats | `section-bg-tri-color` | ✅ Active |
+| CallToAction | `cta-gradient` | ✅ Active |
+
+---
+
+## Additional Work Completed
+
+### ✅ FAQ Migration to Dedicated Pages
+
+**New Files:**
+- `src/pages/faq.astro` - English FAQ page
+- `src/pages/cn/faq.astro` - Chinese FAQ page
+
+**Changes:**
+- Moved FAQs from homepage sections to dedicated pages for better UX
+- Added FAQ links to header navigation (under "About" dropdown)
+- Added FAQ links to footer (under "Company" section)
+- Removed FAQ widgets from `index.astro` and `cn/index.astro`
+- FAQ pages use Hero widget with `/images/hero-image.jpg`
+
+---
+
+## Modified Files Summary
+
+| File | Changes |
+|------|---------|
+| `src/assets/styles/tailwind.css` | ✅ Added 4 section-bg-* utilities, timeline styles |
+| `tailwind.config.js` | ✅ Added borderRadius, boxShadow, animation tokens |
+| `src/components/widgets/FeaturesCards.astro` | ✅ NEW - Card-based features variant |
+| `src/components/widgets/Stats.astro` | ✅ Redesigned with gradient cards |
+| `src/components/ui/Timeline.astro` | ✅ Added gradient connector and markers |
+| `src/pages/index.astro` | ✅ Applied backgrounds, swapped Features, removed FAQs |
+| `src/pages/cn/index.astro` | ✅ Removed FAQs section |
+| `src/pages/faq.astro` | ✅ NEW - English FAQ page |
+| `src/pages/cn/faq.astro` | ✅ NEW - Chinese FAQ page |
+| `src/navigation.ts` | ✅ Added FAQ links to header and footer |
+
+---
+
+## Next Steps (Optional)
+
+If needed, consider:
+1. Adding a second Content section with `section-bg-aqua-flow` background
+2. Creating additional language variations for FAQ pages
+3. Adding more FAQ items based on user inquiries
+4. Running `npm run check:eslint` and `npm run fix` for code quality

package.json

@@ -67,5 +67,6 @@
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.39.0",
     "unist-util-visit": "^5.0.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/assets/favicons/apple-touch-icon.png

@@ -6,5 +6,5 @@ import appleTouchIcon from '~/assets/favicons/apple-touch-icon.png';
 
 <link rel="shortcut icon" href={favIcon} />
 <link rel="icon" type="image/svg+xml" href={favIconSvg.src} />
-<link rel="mask-icon" href={favIconSvg.src} color="#8D46E7" />
+<link rel="mask-icon" href={favIconSvg.src} color="#EFBF04" />
 <link rel="apple-touch-icon" sizes="180x180" href={appleTouchIcon.src} />

src/assets/favicons/favicon.ico

@@ -1,9 +1,22 @@
 ---
-import { SITE } from 'astrowind:config';
+export interface Props {
+  class?: string;
+}
+
+const { class: className = '' } = Astro.props;
 ---
 
-<span
-  class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
->
-  🚀 {SITE?.name}
+<span class:list={['flex items-center', className]}>
+  <!-- Light mode logo -->
+  <img
+    src="/images/upstream/upstream-black-logo.svg"
+    alt="Upstream Labs"
+    class="h-8 w-auto dark:hidden"
+  />
+  <!-- Dark mode logo -->
+  <img
+    src="/images/upstream/upstream-white-logo.svg"
+    alt="Upstream Labs"
+    class="h-8 w-auto hidden dark:block"
+  />
 </span>

src/assets/favicons/favicon.svg

@@ -1,92 +1,56 @@
 ---
-import { Icon } from 'astro-icon/components';
-import { getLangFromUrl, getLocalizedPath, languages, stripLangFromPath } from '~/i18n';
+import { getLangFromUrl, stripLangFromPath, defaultLang } from '~/i18n';
 
 export interface Props {
-  showFlags?: boolean;
   class?: string;
 }
 
-const { showFlags = true, class: className = '' } = Astro.props;
+const { class: className = '' } = Astro.props;
 
 const currentLang = getLangFromUrl(Astro.url);
 const currentPath = stripLangFromPath(Astro.url.pathname);
 
-// Generate language switch URLs
-const languageLinks = Object.entries(languages).map(([code, name]) => ({
-  code,
-  name,
-  url: getLocalizedPath(currentPath, code),
-  isCurrent: code === currentLang,
-}));
+// Determine switch target: if on English, go to Chinese; if on Chinese, go to English
+const isEnglish = currentLang === defaultLang;
+const switchLink = isEnglish ? `/cn${currentPath}` : currentPath;
+const switchText = isEnglish ? 'CN' : 'EN';
 ---
 
-<div class={`language-switcher ${className}`}>
-  <div class="relative inline-block">
-    <button
-      type="button"
-      class="flex items-center gap-2 px-3 py-2 text-sm font-medium text-default hover:text-link dark:hover:text-white rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-      aria-label="Select language"
-      id="language-switcher-button"
-    >
-      <Icon name="tabler:language" class="w-5 h-5" />
-      <span>{languages[currentLang]}</span>
-      <Icon name="tabler:chevron-down" class="w-4 h-4" />
-    </button>
+<a
+  href={switchLink}
+  class:list={[
+    'lang-switch',
+    className,
+  ]}
+  aria-label={isEnglish ? 'Switch to Chinese' : 'Switch to English'}
+>
+  {switchText}
+</a>
 
-    <div
-      class="language-dropdown hidden absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
-      id="language-dropdown"
-    >
-      <div class="py-1" role="menu" aria-orientation="vertical">
-        {
-          languageLinks.map(({ code, name, url, isCurrent }) => (
-            <a
-              href={url}
-              class={`block px-4 py-2 text-sm ${
-                isCurrent
-                  ? 'bg-gray-100 dark:bg-gray-700 text-link dark:text-white font-semibold'
-                  : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
-              }`}
-              role="menuitem"
-            >
-              {showFlags && (
-                <span class="mr-2">
-                  {code === 'en' ? '🇺🇸' : code === 'cn' ? '🇨🇳' : '🌐'}
-                </span>
-              )}
-              {name}
-            </a>
-          ))
-        }
-      </div>
-    </div>
-  </div>
-</div>
-
-<script>
-  // Toggle dropdown
-  const button = document.getElementById('language-switcher-button');
-  const dropdown = document.getElementById('language-dropdown');
-
-  button?.addEventListener('click', (e) => {
-    e.stopPropagation();
-    dropdown?.classList.toggle('hidden');
-  });
+<style>
+  .lang-switch {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--aw-color-text-default);
+    text-decoration: none;
+    border-radius: 0.5rem;
+    transition: all 0.2s ease;
+  }
 
-  // Close dropdown when clicking outside
-  document.addEventListener('click', () => {
-    dropdown?.classList.add('hidden');
-  });
+  .lang-switch:hover {
+    color: var(--aw-color-primary);
+    background-color: rgba(43, 116, 255, 0.08);
+  }
 
-  // Prevent closing when clicking inside dropdown
-  dropdown?.addEventListener('click', (e) => {
-    e.stopPropagation();
-  });
-</script>
+  :global(.dark) .lang-switch {
+    color: rgba(255, 255, 255, 0.9);
+  }
 
-<style>
-  .language-dropdown {
-    min-width: 10rem;
+  :global(.dark) .lang-switch:hover {
+    color: rgb(139, 210, 255);
+    background-color: rgba(77, 142, 255, 0.15);
   }
 </style>