Unify Flow & Focus showcase page structure to match standard format

Author: kesku

docs/showcase/flow-and-focus.mdx

@@ -1,13 +1,20 @@
 ---
 title: Flow & Focus | Personalized News for Genuine Understanding
-description: Dual-mode news app combining vertical feed discovery with AI-powered deep dives using Perplexity Sonar
-sidebar_position: 6
-keywords: [Flow & Focus, Perplexity Hackathon, news personalization, Sonar Pro, Sonar Deep Research, Next.js, React]
+description: A personalized news app combining vertical feed discovery with AI-powered deep dives using Perplexity Sonar Pro and Deep Research models
+sidebar_position: 17
+keywords: [flow and focus, perplexity sonar, news personalization, dual-mode, next.js, react, ai]
 ---
 
-# Flow & Focus | Personalized News for Genuine Understanding
+**Flow & Focus** is a personalized news application that transforms news consumption into a learning experience. It uniquely combines rapid discovery through a vertical news feed (Flow) with in-depth, interactive learning dialogues (Focus), powered by Perplexity's Sonar Pro and Sonar Deep Research models.
 
-**Flow & Focus** reclaims your curiosity by transforming news consumption into a personalized learning experience. It uniquely combines the rapid discovery of a vertical news feed (Flow) with in-depth, interactive learning dialogues (Focus), powered by Perplexity's Sonar Pro and Sonar Deep Research models.
+<iframe
+  className="w-full aspect-video rounded-xl"
+  src="https://www.youtube.com/embed/09h7zluuhQI"
+  title="YouTube video player"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowFullScreen
+></iframe>
 
 ## Features
 
@@ -19,10 +26,6 @@ keywords: [Flow & Focus, Perplexity Hackathon, news personalization, Sonar Pro,
 * **Real-time Content**: Leverages Sonar Pro for up-to-date news and Sonar Deep Research for detailed analysis
 * **Visual Enhancement**: Dynamic background images generated via Runware.ai based on content keywords
 
-## Demo
-
-[![Flow & Focus Demo](https://img.youtube.com/vi/09h7zluuhQI/0.jpg)](https://www.youtube.com/watch?v=09h7zluuhQI)
-
 
 ## Prerequisites
 
@@ -34,33 +37,49 @@ keywords: [Flow & Focus, Perplexity Hackathon, news personalization, Sonar Pro,
 ## Installation
 
 ```bash
+# Clone the repository
 git clone https://github.com/michitomo/NewsReel.git
 cd NewsReel
-npm install
 
-# Create .env.local with your API keys
-echo "PERPLEXITY_API_KEY=your_perplexity_api_key_here" > .env.local
-echo "RUNWARE_API_KEY=your_runware_api_key_here" >> .env.local
-echo "PERPLEXITY_FOCUS_MODEL=sonar-deep-research" >> .env.local
+# Install dependencies
+npm install
 
-# Start development server
-npm run dev
+# Set up environment variables
+cp .env.example .env.local
 ```
 
-## Architecture
+## Configuration
 
-* **Frontend**: Next.js 15, React 19, TypeScript, Tailwind CSS, Framer Motion
-* **State Management**: Zustand with localStorage persistence
-* **LLM Integration**: Perplexity Sonar Pro (real-time news) and Sonar Deep Research (in-depth analysis)
-* **Image Generation**: Runware SDK with keyword-based prompting
-* **API Routes**: Server-side integration with Perplexity and Runware APIs
+Create `.env.local` file:
+```ini
+PERPLEXITY_API_KEY=your_perplexity_api_key_here
+RUNWARE_API_KEY=your_runware_api_key_here
+PERPLEXITY_FOCUS_MODEL=sonar-deep-research
+```
 
 ## Usage
 
-1. **Flow Feed**: Scroll vertically through news snippets, tap key phrases for deep dives
-2. **Focus Mode**: Generate personalized digests with interactive conversation segments
-3. **Personalization**: Your viewing patterns automatically influence content selection
-4. **Navigation**: Swipe gestures for intuitive mobile-first experience
+1. **Start Development Server**:
+   ```bash
+   npm run dev
+   ```
+
+2. **Access Application**: Open http://localhost:3000 in your browser
+
+3. **Flow Feed**: Scroll vertically through news snippets and tap key phrases for deep dives
+
+4. **Focus Mode**: Generate personalized digests with interactive conversation segments
+
+5. **Personalization**: Your viewing patterns automatically influence content selection
+
+## Code Explanation
+
+* **Frontend**: Next.js 15 with React 19, TypeScript, Tailwind CSS, and Framer Motion for animations
+* **State Management**: Zustand with localStorage persistence for user preferences
+* **AI Integration**: Perplexity Sonar Pro for real-time news and Sonar Deep Research for in-depth analysis
+* **Image Generation**: Runware SDK integration for dynamic background images based on content keywords
+* **API Routes**: Server-side integration handling Perplexity and Runware API calls
+* **Mobile-First Design**: Swipe gestures and responsive layout for intuitive mobile experience
 
 ## Links