# Project export: GirlTalk AI

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: UC Berkeley AI Hackathon 2025
- Tagline: Your safe space to find guidance, inspiration, and a personalized podcast to help you navigate life's challenges. You're heard, you're understood and your voice matters.🌟💕✨
- Devpost: https://devpost.com/software/girltalk-ai
- GitHub: https://github.com/cicadaenjoyer/Girl-Talk-AI
- Team: 5 GitHub contributor(s) — cicadaenjoyer (19 commits), Akriti Batra (16 commits), Tom Strzyz (14 commits), Luis (8 commits), gpt-engineer-app[bot] (6 commits)

## Devpost submission (written by the team)

### Inspiration

Our project was inspired by a real-life problem faced by one of our team members. Growing up as an only child with a strict mom, they felt like they didn't have a female role model to go to for advice. So they turned to online advice videos and podcasts from other women to provide that level of support. But sometimes, generalized videos don't cut it and you want advice that pertains to your specific situation. Enter GirlTalk AI.

### What it does

GirlTalk AI allows you to write your concerns into our chatbox and receive a personalized podcast clip from our big sister host, Aisha. Our site also gives you some helpful resources from the web for anyone looking for mental health resources or helplines. You can also go back and listen to old podcast clips you've generated through our browse podcasts feature.

### How we built it

Frontend: Lovable AI + React + TypeScript, styled with Tailwind CSS and shadcn/ui components. Podcast Generation: AI-powered script creation using the Hyperbolic API, with keyword-based matching for relevant topics. Data Storage: Podcast metadata and user info are stored using Firestore (Firebase). For this hackathon version, we use a constant user ID. UI: Multi-page Website with dedicated sections for Home (podcast summary and playback), Support (resource links), Browse (past episodes), and About (background info).

### Challenges we ran into

Designing age-appropriate, empathetic AI responses. Managing data storage without user authentication. Connecting the TTS with our LLM.

### Accomplishments we're proud of

Created a safe space for women around the world to express themselves and get the support they need. Built a fully functional and visually appealing website with personalized podcast generation. Integrated AI-generated scripts with real-time playback and resource curation. Had fun while doing it :)

### What we learned

How to use multiple APIs in one project. How to integrate a database. The importance of thoughtful prompt engineering for sensitive topics. How to balance technical complexity with user safety and privacy. Effective use of modern frontend tools and cloud data storage.

### What's next

Even more realistic TTS. Longer podcast episodes (up to an hour). Video component of Aisha "recording" the podcast episode for you.

## README (from the GitHub repository)

# 💕 Girl Talk AI

> An AI-powered supportive platform that creates personalized podcast episodes and resources to help women navigate life's challenges with confidence and community.

![GitHub](https://img.shields.io/badge/GitHub-Repository-181717?style=flat&logo=github)
![TypeScript](https://img.shields.io/badge/TypeScript-5.5+-3178C6?style=flat&logo=typescript)
![React](https://img.shields.io/badge/React-18.3+-61DAFB?style=flat&logo=react)
![Vite](https://img.shields.io/badge/Vite-5.4+-646CFF?style=flat&logo=vite)
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.4+-06B6D4?style=flat&logo=tailwindcss)

Girl Talk AI is your safe space to find guidance, inspiration, and the perfect podcast to help you navigate life's challenges. When users share what's on their mind, our platform generates personalized podcast episodes and curates helpful resources tailored to their specific needs. You're stronger than you know! 🌟💪✨

## 🚀 Quick Start

### Prerequisites

-   Node.js 18+ (recommended: install with [nvm](https://github.com/nvm-sh/nvm#installing-and-updating))
-   npm or bun package manager

### Installation

1. Clone the repository:

```bash
git clone <YOUR_GIT_URL>
cd Girl-Talk-AI
```

2. Install dependencies:

```bash
npm install
# or
bun install
```

3. Start the development server:

```bash
npm run dev
# or
bun dev
```

4. Open your browser and navigate to `http://localhost:5173`

## 🛠️ How we built it

### Tech Stack

-   **Frontend Framework**: React 18.3+ with TypeScript
-   **Build Tool**: Vite 5.4+ for fast development and optimized builds
-   **Styling**: Tailwind CSS 3.4+ with custom gradients and animations
-   **UI Components**: shadcn/ui with Radix UI primitives
-   **Routing**: React Router DOM for navigation
-   **State Management**: React hooks with local state management
-   **Icons**: Lucide React for beautiful, consistent icons
-   **Notifications**: Sonner for toast notifications

### Architecture

The application consists of:

-   A React SPA with TypeScript for type safety
-   Component-based architecture with reusable UI components
-   Dynamic podcast recommendation system based on user input
-   Responsive design with beautiful gradients and animations
-   Resource matching algorithm that provides contextual support links
-   Multi-page navigation with dedicated sections for different needs

### Key Components

#### Pages

-   **Index (`/`)**: Main landing page with chat interface and podcast recommendations
-   **Get Support (`/get-support`)**: Dedicated support page with personalized episode generation
-   **Browse Podcasts (`/browse-podcasts`)**: Catalog of available podcast episodes
-   **About Us (`/about-us`)**: Team information and platform values

#### Core Components

-   **ChatBox**: Interactive input interface for users to share their thoughts
-   **PodcastRecommendation**: Displays personalized podcast episodes with play functionality
-   **HelpfulResources**: Context-aware resource suggestions (crisis lines, articles, communities)
-   **Navigation**: Beautiful animated navigation with gradient effects

#### Features

-   **Smart Matching**: Keyword-based algorithm matches user messages to relevant podcast content
-   **Resource Curation**: Automatic generation of helpful resources based on user needs
-   **Beautiful UI**: Gradient backgrounds, floating animations, and emoji-rich design
-   **Responsive Design**: Works seamlessly on desktop, tablet, and mobile devices

### User Experience Flow

1. **Welcome**: Users land on an inspiring homepage with motivational messaging
2. **Share**: Users input their thoughts, feelings, or challenges through the chat interface
3. **Match**: The system analyzes keywords and matches appropriate podcast content
4. **Discover**: Users receive personalized podcast recommendations and helpful resources
5. **Connect**: Access to crisis lines, support communities, and educational materials

## 🌟 Key Features

### Personalized Podcast Generation

-   AI-powered matching system that analyzes user input
-   Curated episodes covering topics like:
    -   Building self-confidence and self-worth
    -   Navigating friendship drama and relationships
    -   Managing academic pressure and stress
    -   Body positivity and self-acceptance
    -   Standing up to bullying and finding your voice

### Contextual Resource Matching

-   **Crisis Support**: 24/7 text lines and hotlines for immediate help
-   **Educational Articles**: Guides on confidence, relationships, and wellness
-   **Community Forums**: Safe spaces to connect with others facing similar challenges
-   **Practical Tools**: Study skills, stress management, and coping strategies

### Beautiful, Inclusive Design

-   Warm gradient backgrounds with floating animations
-   Emoji-rich interface that feels friendly and approachable
-   Accessibility-focused UI components from shadcn/ui
-   Mobile-responsive design for support anywhere, anytime

## 🏗️ Project Structure

```
src/
├── components/          # Reusable UI components
│   ├── ui/             # shadcn/ui component library
│   ├── ChatBox.tsx     # Main chat interface
│   ├── Navigation.tsx   # App navigation
│   └── ...
├── pages/              # Route-based page components
│   ├── Index.tsx       # Homepage
│   ├── GetSupport.tsx  # Support page
│   └── ...
├── api/                # Data and API logic
│   └── podcasts.ts     # Podcast matching algorithm
├── data/               # Static data files
├── hooks/              # Custom React hooks
└── lib/                # Utility functions
```

## 🎨 Design Philosophy

Girl Talk AI embraces a design philosophy centered on:

-   **Warmth & Safety**: Soft gradients, rounded corners, and comforting colors
-   **Empowerment**: Bold typography and confident messaging
-   **Playfulness**: Animated elements and emoji integration
-   **Accessibility**: High contrast ratios and semantic HTML
-   **Inclusivity**: Language and imagery that welcomes all women

## 🌍 Social Impact & Track Alignment

### Social Impact Track Values

Girl Talk AI directly addresses critical social challenges facing women and girls today:

#### **Mental Health Crisis**

-   **Problem**: 1 in 5 women experience mental health challenges, with limited accessible resources
-   **Solution**: Immediate, personalized support through AI-powered podcast recommendations and crisis resource connections
-   **Impact**: Reduces barriers to mental health support by providing 24/7 accessible, stigma-free assistance

#### **Digital Equity & Accessibility**

-   **Problem**: Mental health resources are often expensive, location-dependent, or require appointments
-   **Solution**: Free, web-based platform accessible from any device with internet connection
-   **Impact**: Democratizes access to supportive content and professional resources regardless of economic status

#### **Community Building & Peer Support**

-   **Problem**: Many women feel isolated in their struggles, lacking safe spaces for support
-   **Solution**: Curated community resources and peer support networks integrated into the platform
-   **Impact**: Connects users to like-minded communities and reduces feelings of isolation

#### **Education & Empowerment**

-   **Problem**: Lack of accessible, age-appropriate content addressing women's specific challenges
-   **Solution**: Personalized educational content covering topics from self-confidence to academic pressure
-   **Impact**: Empowers users with knowledge and coping strategies for long-term resilience

### Measurable Social Outcomes

-   **Accessibility**: 100% client-side processing ensures privacy and reduces technical barriers
-   **Inclusivity**: Multi-topic support covers diverse challenges (confidence, relationships, academic stress, bullying)
-   **Safety**: Prominent crisis resource integration provides immediate professional help when needed
-   **Scalability**: Web-based platform can reach unlimited users without additional infrastructu

[README truncated for size]

## Detected evidence (automated analysis)

Indexed codebase: 82 recognized source files, 272 KB.
- CSS (language) — detected in the code
- Express (technology) — detected in the code
- Firebase (technology) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- Python (language) — detected in the code
- React (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- TypeScript (language) — detected in the code

## Codebase structure (from repository index)

### Files (90 of 90)

```
.gitignore
bun.lockb
components.json
eslint.config.js
index.html
package.json
postcss.config.js
public/robots.txt
README.md
src/api/firebase.ts
src/api/podcasts.ts
src/api/TTS.ts
src/App.css
src/App.tsx
src/components/ChatBox.tsx
src/components/HelpfulResources.tsx
src/components/Navigation.tsx
src/components/PodcastRecommendation.tsx
src/components/ui/accordion.tsx
src/components/ui/alert-dialog.tsx
src/components/ui/alert.tsx
src/components/ui/aspect-ratio.tsx
src/components/ui/avatar.tsx
src/components/ui/badge.tsx
src/components/ui/breadcrumb.tsx
src/components/ui/button.tsx
src/components/ui/calendar.tsx
src/components/ui/card.tsx
src/components/ui/carousel.tsx
src/components/ui/chart.tsx
src/components/ui/checkbox.tsx
src/components/ui/collapsible.tsx
src/components/ui/command.tsx
src/components/ui/context-menu.tsx
src/components/ui/dialog.tsx
src/components/ui/drawer.tsx
src/components/ui/dropdown-menu.tsx
src/components/ui/form.tsx
src/components/ui/hover-card.tsx
src/components/ui/input-otp.tsx
src/components/ui/input.tsx
src/components/ui/label.tsx
src/components/ui/menubar.tsx
src/components/ui/navigation-menu.tsx
src/components/ui/pagination.tsx
src/components/ui/popover.tsx
src/components/ui/progress.tsx
src/components/ui/radio-group.tsx
src/components/ui/resizable.tsx
src/components/ui/scroll-area.tsx
src/components/ui/select.tsx
src/components/ui/separator.tsx
src/components/ui/sheet.tsx
src/components/ui/sidebar.tsx
src/components/ui/skeleton.tsx
src/components/ui/slider.tsx
src/components/ui/sonner.tsx
src/components/ui/switch.tsx
src/components/ui/table.tsx
src/components/ui/tabs.tsx
src/components/ui/textarea.tsx
src/components/ui/toast.tsx
src/components/ui/toaster.tsx
src/components/ui/toggle-group.tsx
src/components/ui/toggle.tsx
src/components/ui/tooltip.tsx
src/components/ui/use-toast.ts
src/context/UserContext.tsx
src/data/podcasts.ts
src/hooks/use-mobile.tsx
src/hooks/use-toast.ts
src/index.css
src/lib/utils.ts
src/main.tsx
src/pages/AboutUs.tsx
src/pages/BrowsePodcasts.tsx
src/pages/GetSupport.tsx
src/pages/Index.tsx
src/pages/NotFound.tsx
src/vite-env.d.ts
tailwind.config.ts
tes.py
test-hyperbolic.js
test-podcast.js
test.py
test.tsx
tsconfig.app.json
tsconfig.json
tsconfig.node.json
vite.config.ts
```

### Dependencies

- package.json: @eslint/js@^9.9.0, @hookform/resolvers@^3.9.0, @radix-ui/react-accordion@^1.2.0, @radix-ui/react-alert-dialog@^1.1.1, @radix-ui/react-aspect-ratio@^1.1.0, @radix-ui/react-avatar@^1.1.0, @radix-ui/react-checkbox@^1.1.1, @radix-ui/react-collapsible@^1.1.0, @radix-ui/react-context-menu@^2.2.1, @radix-ui/react-dialog@^1.1.2, @radix-ui/react-dropdown-menu@^2.1.1, @radix-ui/react-hover-card@^1.1.1, @radix-ui/react-label@^2.1.0, @radix-ui/react-menubar@^1.1.1, @radix-ui/react-navigation-menu@^1.2.0, @radix-ui/react-popover@^1.1.1, @radix-ui/react-progress@^1.1.0, @radix-ui/react-radio-group@^1.2.0, @radix-ui/react-scroll-area@^1.1.0, @radix-ui/react-select@^2.1.1, @radix-ui/react-separator@^1.1.0, @radix-ui/react-slider@^1.2.0, @radix-ui/react-slot@^1.1.0, @radix-ui/react-switch@^1.1.0, @radix-ui/react-tabs@^1.1.0, @radix-ui/react-toast@^1.2.1, @radix-ui/react-toggle@^1.1.0, @radix-ui/react-toggle-group@^1.1.0, @radix-ui/react-tooltip@^1.1.4, @tailwindcss/typography@^0.5.15, @tanstack/react-query@^5.56.2, @types/node@^22.5.5, @types/react@^18.3.3, @types/react-dom@^18.3.0, @vitejs/plugin-react-swc@^3.5.0, autoprefixer@^10.4.20, axios@^1.10.0, class-variance-authority@^0.7.1, clsx@^2.1.1, cmdk@^1.0.0, concurrently@^9.2.0, cors@^2.8.5, date-fns@^3.6.0, dotenv@^16.5.0, embla-carousel-react@^8.3.0, eslint@^9.9.0, eslint-plugin-react-hooks@^5.1.0-rc.0, eslint-plugin-react-refresh@^0.4.9, express@^5.1.0, firebase@^11.9.1, globals@^15.9.0, input-otp@^1.2.4, lovable-tagger@^1.1.7, lucide-react@^0.462.0, next-themes@^0.3.0, postcss@^8.4.47, react@^18.3.1, react-day-picker@^8.10.1, react-dom@^18.3.1, react-hook-form@^7.53.0, react-resizable-panels@^2.1.3, react-router-dom@^6.26.2, recharts@^2.12.7, sonner@^1.5.0, tailwind-merge@^2.5.2, tailwindcss@^3.4.11, tailwindcss-animate@^1.0.7, typescript@^5.5.3, typescript-eslint@^8.0.1, vaul@^0.9.3, vite@^5.4.1, zod@^3.23.8

### Recent commits (newest first)

- Merge pull request #13 from cicadaenjoyer/abe
- obfuscate api key
- Import podcast element
- Storing podcast into database
- Removing env file from production
- Merge branch 'main' of https://github.com/cicadaenjoyer/Girl-Talk-AI into abe
- merge with tom-rescue
- Merge branch 'main' of https://github.com/cicadaenjoyer/Girl-Talk-AI
- Sending user info for data storage
- Integrating firebase for data storage
- Removing BigQuery
- Revert "Merge branch 'tom-rescue'"
- Merge branch 'tom-rescue'
- ariana and scroll
- kind of rescued
- Revert "added scrolling to podcast description"
- added murf ai back
- added scrolling to podcast description
- Merge pull request #10 from cicadaenjoyer/luis
- Merge branch 'main' into luis

## Key source files (fetched from GitHub, selected and truncated for size)

### package.json

```
{
  "name": "vite_react_shadcn_ts",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.0",
    "@radix-ui/react-accordion": "^1.2.0",
    "@radix-ui/react-alert-dialog": "^1.1.1",
    "@radix-ui/react-aspect-ratio": "^1.1.0",
    "@radix-ui/react-avatar": "^1.1.0",
    "@radix-ui/react-checkbox": "^1.1.1",
    "@radix-ui/react-collapsible": "^1.1.0",
    "@radix-ui/react-context-menu": "^2.2.1",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-hover-card": "^1.1.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-menubar": "^1.1.1",
    "@radix-ui/react-navigation-menu": "^1.2.0",
    "@radix-ui/react-popover": "^1.1.1",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-radio-group": "^1.2.0",
    "@radix-ui/react-scroll-area": "^1.1.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slider": "^1.2.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.0",
    "@radix-ui/react-toast": "^1.2.1",
    "@radix-ui/react-toggle": "^1.1.0",
    "@radix-ui/react-toggle-group": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.4",
    "@tanstack/react-query": "^5.56.2",
    "axios": "^1.10.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
    "concurrently": "^9.2.0",
    "cors": "^2.8.5",
    "date-fns": "^3.6.0",
    "dotenv": "^16.5.0",
    "embla-carousel-react": "^8.3.0",
    "express": "^5.1.0",
    "firebase": "^11.9.1",
    "input-otp": "^1.2.4",
    "lucide-react": "^0.462.0",
    "next-themes": "^0.3.0",
    "react": "^18.3.1",
    "react-day-picker": "^8.10.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.53.0",
    "react-resizable-panels": "^2.1.3",
    "react-router-dom": "^6.26.2",
    "recharts": "^2.12.7",
    "sonner": "^1.5.0",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.3",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@tailwindcss/typography": "^0.5.15",
    "@types/node": "^22.5.5",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.9.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "lovable-tagger": "^1.1.7",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.11",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1"
  }
}

```

### src/main.tsx

```typescript
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById("root")!).render(<App />);

```

### src/App.tsx

```typescript

import { Toaster } from "@/components/ui/toaster";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Index from "./pages/Index";
import GetSupport from "./pages/GetSupport";
import BrowsePodcasts from "./pages/BrowsePodcasts";
import AboutUs from "./pages/AboutUs";
import NotFound from "./pages/NotFound.tsx";
import { UserProvider } from "./context/UserContext";

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <UserProvider>
      <TooltipProvider>
        <Toaster />
        <Sonner />
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Index />} />
            <Route path="/get-support" element={<GetSupport />} />
            <Route path="/browse-podcasts" element={<BrowsePodcasts />} />
            <Route path="/about-us" element={<AboutUs />} />
            {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
            <Route path="*" element={<NotFound />} />
          </Routes>
        </BrowserRouter>
      </TooltipProvider>
    </UserProvider>
  </QueryClientProvider>
);

export default App;

```

### src/pages/Index.tsx

```typescript
import React, { useState } from "react";
import Navigation from "@/components/Navigation";
import ChatBox from "@/components/ChatBox";
import PodcastRecommendation from "@/components/PodcastRecommendation";
import HelpfulResources from "@/components/HelpfulResources";
import { generatePodcast, type Podcast } from "@/api/podcasts";
import { useUser } from "@/context/UserContext";
import { useToast } from "@/hooks/use-toast";
import { storePodcast } from "@/api/firebase";
const Index = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [recommendedPodcast, setRecommendedPodcast] = useState<Podcast | null>(
    null
  );
  const [userMessage, setUserMessage] = useState("");
  const user = useUser();
  const { toast } = useToast();

  const handleChatSubmit = async (message: string) => {
    setIsLoading(true);
    setUserMessage(message);

    try {
      const matchedPodcast = await generatePodcast(message);
      setRecommendedPodcast(matchedPodcast);
      storePodcast(matchedPodcast, String(user.db_id));
      toast({
        title: "Custom episode generated! 💕",
        description:
          "We've created a personalized podcast episode and helpful resources just for you!",
      });
    } catch (err) {
      // handle error
    } finally {
      setIsLoading(false);
    }
  };
  const handleListenClick = () => {
    toast({
      title: "Playing your custom episode! 🎧",
      description:
        "This would start playing your personalized podcast episode.",
    });
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-100 via-purple-50 via-blue-50 to-indigo-100 relative overflow-hidden">
      {/* Floating background decorations */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-20 left-10 w-32 h-32 bg-gradient-to-br from-pink-200 to-purple-200 rounded-full opacity-20 animate-pulse"></div>
        <div className="absolute top-40 right-20 w-24 h-24 bg-gradient-to-br from-blue-200 to-pink-200 rounded-full opacity-25 animate-bounce"></div>
        <div className="absolute bottom-32 left-1/4 w-20 h-20 bg-gradient-to-br from-purple-200 to-blue-200 rounded-full opacity-15 animate-pulse"></div>
        <div className="absolute top-1/3 right-1/3 w-16 h-16 bg-gradient-to-br from-pink-200 to-blue-200 rounded-full opacity-20 animate-bounce"></div>
        <div className="absolute bottom-20 right-10 w-28 h-28 bg-gradient-to-br from-purple-200 to-pink-200 rounded-full opacity-10 animate-pulse"></div>

        {/* Floating icons */}
        <div className="absolute top-1/4 left-1/6 text-pink-300/30 text-4xl animate-pulse">
          💖
        </div>
        <div className="absolute top-1/2 right-1/5 text-purple-300/30 text-3xl animate-bounce">
          ✨
        </div>
        <div className="absolute bottom-1/4 left-1/3 text-blue-300/30 text-5xl animate-pulse">
          🌸
        </div>
        <div className="absolute top-3/4 right-1/4 text-pink-300/30 text-3xl animate-bounce">
          💫
        </div>
      </div>

      <Navigation />

      <main className="container mx-auto px-4 py-12 relative z-10">
        {/* Hero Section */}
        <div className="text-center mb-16 relative">
          <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8 w-24 h-24 bg-gradient-to-br from-pink-200 to-purple-200 rounded-full opacity-40 animate-pulse"></div>

          <div className="flex justify-center items-center space-x-4 mb-6">
            <div className="w-16 h-16 bg-gradient-to-br from-pink-400 to-purple-500 rounded-3xl flex items-center justify-center shadow-xl transform rotate-6">
              <span className="text-3xl">💪</span>
            </div>
            <div className="w-20 h-20 bg-gradient-to-br from-purple-400 to-blue-500 rounded-3xl flex items-center justify-center shadow-xl transform -rotate-3">
              <span className="text-4xl">✨</span>
            </div>
            <div className="w-14 h-14 bg-gradient-to-br from-blue-400 to-pink-400 rounded-2xl flex items-center justify-center shadow-lg transform rotate-12">
              <span className="text-2xl">👑</span>
            </div>
          </div>

          <h1 className="text-6xl font-bold bg-gradient-to-r from-pink-500 via-purple-600 to-blue-600 bg-clip-text text-transparent mb-6 leading-tight">
            Girl Talk AI
          </h1>
          <div className="bg-white/60 backdrop-blur-lg rounded-3xl p-8 max-w-4xl mx-auto shadow-xl border border-white/50">
            <p className="text-2xl text-purple-700 leading-relaxed font-medium">
              Your safe space to find guidance, inspiration, and a personalized
              podcast to help you navigate life's challenges. You're heard,
              you're understood and your voice matters.
              <span className="inline-block ml-2 text-3xl">🌟💕✨</span>
            </p>
          </div>
        </div>

        {/* Chat Interface */}
        <div className="mb-12">
          <ChatBox onSubmit={handleChatSubmit} isLoading={isLoading} />
        </div>

        {/* Podcast Recommendation and Resources */}
        {recommendedPodcast && !isLoading && (
          <div className="space-y-8 mb-12">
            <PodcastRecommendation
              podcast={recommendedPodcast}
              userMessage={userMessage}
              onListenClick={handleListenClick}
            />

            <HelpfulResources userMessage={userMessage} />
          </div>
        )}

        {/* Inspirational Quote Section */}
        {!recommendedPodcast && !isLoading && (
          <div className="mt-20 relative">
            <div className="absolute -top-8 left-1/2 transform -translate-x-1/2 w-16 h-16 bg-gradient-to-br from-yellow-200 to-orange-200 rounded-full opacity-50 animate-pulse"></div>

            <div className="bg-white/70 backdrop-blur-lg rounded-3xl p-10 max-w-3xl mx-auto shadow-2xl border border-white/60 relative overflow-hidden"
[truncated — 2177 more characters]
```

### postcss.config.js

```javascript
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

```

### index.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Girl Talk AI</title>
    <meta name="author" content="Lovable" />

    <meta property="og:title" content="girl-talk-podcast-pal" />
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

```

### vite.config.ts

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";
import { componentTagger } from "lovable-tagger";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  server: {
    host: "::",
    port: 8080,
    proxy: {
      "/api": "http://localhost:3001",
    },
  },
  plugins: [react(), mode === "development" && componentTagger()].filter(
    Boolean
  ),
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
}));

```

### test.tsx

```typescript
import axios from "axios";

const data = {
  text: "There is much to be said",
  voiceId: "en-US-terrell",
};

axios
  .post("https://api.murf.ai/v1/speech/generate", data, {
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
      "api-key": process.env.MURF_API_KEY,
    },
  })
  .then((response) => {
    console.log(response.data.audioFile);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

export interface PodcastWithAudio extends Podcast {
  audioUrl?: string;
}

```

### eslint.config.js

```javascript
import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";

export default tseslint.config(
  { ignores: ["dist"] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ["**/*.{ts,tsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],
      "@typescript-eslint/no-unused-vars": "off",
    },
  }
);

```

### test-podcast.js

```javascript
// Test file to verify podcast functionality works
console.log('Testing Girl Talk AI Podcast functionality...');

// Test the speech synthesis functionality
if ('speechSynthesis' in window) {
    console.log('✅ Speech synthesis is supported');
    console.log('Available voices:', speechSynthesis.getVoices().length);
} else {
    console.log('❌ Speech synthesis is not supported in this browser');
}

// Test the podcast generation
import { generatePodcast, playSpeechSynthesis } from './src/api/podcasts.js';

// Test generating a podcast
generatePodcast("I'm feeling really insecure about my body")
    .then(podcast => {
        console.log('✅ Podcast generated successfully:', podcast.title);
        console.log(
            'Generated script length:',
            podcast.generatedScript?.length
        );
        console.log('Audio URL:', podcast.audioUrl);
    })
    .catch(error => {
        console.error('❌ Error generating podcast:', error);
    });

console.log('Test completed!');

```

[72 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]