# Project export: DestinyLens

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: Decode your destiny. Discover your place.
- Devpost: https://devpost.com/software/destinylens
- GitHub: https://github.com/qimingliu1021/destiny-lens
- Video: https://www.youtube.com/embed/mGaMBJWjmkE?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Team: 2 GitHub contributor(s) — Qiming Liu (4 commits), Aakash M (2 commits)

## Devpost submission (written by the team)

### Inspiration

In life, there are moments when we try our absolute best—yet the outcome feels beyond our control. But when we stay true to what we deeply want, life often opens a path. DestinyLens was inspired by this belief: that knowing yourself is the first step to finding direction. "As someone who faced both identity struggles and academic setbacks, I know what it feels like to stand at a crossroads with no clear direction. When I first realized I was different from others in terms of my sexuality, I began longing for a life where I could simply be myself—love freely, and build a life with someone I care about. That dream became a quiet source of strength, pushing me to go abroad and live more authentically. But it wasn’t easy. I didn’t get into my dream university the first time I took the Gaokao, China’s fiercely competitive college entrance exam. Watching others move forward while I stayed behind was heartbreaking. Still, I refused to give up. I studied harder, took the exam again a year later, and finally got into the school I had dreamed of. That same spirit carried me into grad school—I didn’t have the best scores or the most impressive resume, but I gave everything I had, and was accepted to NYU. Through those moments, I came to believe something deeply: you can’t always control the outcome, but if your intention is steady and your desire is true, the path will reveal itself. And in those uncertain moments, it’s incredibly powerful to have something that reflects your inner truth back to you." That’s when we turned to one of the world’s oldest and most profound systems of self-guidance: the Yijing (易经), or Book of Changes. Originating over 3,000 years ago, the Yijing is not just a tool of fortune-telling, it’s a philosophical framework rooted in Taoist and Confucian thought, centered on the dynamic flow of life, change, and harmony with nature (fire, water, wood, gold, earth). Through six symbolic coin (or dice) throws, the Yijing generates a hexagram, which reflects the user's current state and offers insight into patterns of transformation. It has been used for centuries by emperors, scholars, and seekers to make decisions not just based on logic, but on deeper alignment with timing, identity, and destiny. We asked ourselves: What if this ancient compass could be reimagined for the modern world—especially for young people standing at one of the most transformative thresholds of life? By fusing the symbolic wisdom of the Yijing with contemporary tools—personality profiling, urban data analysis, and intuitive design—we created a digital experience that helps users gain clarity about who they are, and insight into where they belong. We draw from city indices like cost of living, job opportunity, and cultural vibrancy, but we don’t stop there. Our goal is not to just suggest a city; it is to reflect a path that feels aligned with one’s inner character and current moment in life. In doing so, we aim to honor the richness of Chinese philosophical heritage and demonstrate how timeless wisdom can still guide us through today’s most pressing personal decisions. For the students who feel lost, floating, or stuck, we offer a moment of reflection, a ritual of discovery, and a gentle nudge toward their next chapter.

### What it does

Through an interactive experience, the user receives one of the 64 hexagrams from the Yijing (Book of Changes). By combining this with insights gathered from the user’s facial expressions and voice analysis, DestinyLens interprets the hexagram using a curated Yijing knowledge base to provide a personalized fortune-telling experience. Based on the user’s information, it recommends a U.S. city that best aligns with their current life stage and inner character. Drawing from a comprehensive city database, DestinyLens then generates a short video featuring curated images and insights about the recommended city—offering both inspiration and direction.

### How we built it

Coin-Based Oracle Implemented the traditional six-throw coin Yijing algorithm, representing yin and yang. City Match Database Aggregated open data on ~100 U.S. cities with their relevant data (longitude, latitude, population, career prospects, crime rates, education); Leveraged the direction produced by the coin based oracle and the oracle's fate for the user to determine their fortune. Frontend & Visualization Built a React interface with clear coin-roll animation, and incorporated the explanation of the ancient hexagram and the modern data metrics; Generated a video that displays relevant images of the city recommended.

### Challenges we ran into

Translated the rich symbolism of the Yijing into code; Ensured that city recommendations were neither random nor strictly deterministic—honoring the oracle’s guidance; Generated videos from the insights provided by the oracle through image fetching and dynamic video generation based on those images. Rendered the coin animation, and data-heavy city matches according to the hexagram text

### Accomplishments we're proud of

Reinterpreted an ancient Chinese philosophical system (Yijing) into a modern, interactive digital tool;

### What we learned

Crafting a respectful “digital oracle” taught us to honor the spirit of the Yijing while thoughtfully translating its symbolic and philosophical depth into an algorithmic form. This process deepened our appreciation for the challenge of bridging ancient cultural wisdom with modern technology as a meaningful guide. In exploring the relationship between personality and place, we learned how personal identity such as need for stability vs. craving for change can influence which environment someone thrives in. By analyzing datasets on U.S. cities, we uncovered unexpected insights. Some cities pulse with creative energy, others offer contemplative calm. Understanding this dynamic helped us see city selection not just as a logistical choice, but as a deeply personal decision. DestinyLens taught us that technology can do more than inform; it can reflect, resonate, and guide.

### What's next

Facial features and voice analysis of the user to analyze the user’s personality

## README (from the GitHub repository)

<a href="https://demo-nextjs-with-supabase.vercel.app/">
  <img alt="Next.js and Supabase Starter Kit - the fastest way to build apps with Next.js and Supabase" src="https://demo-nextjs-with-supabase.vercel.app/opengraph-image.png">
  <h1 align="center">Next.js and Supabase Starter Kit</h1>
</a>

<p align="center">
 The fastest way to build apps with Next.js and Supabase
</p>

<p align="center">
  <a href="#features"><strong>Features</strong></a> ·
  <a href="#demo"><strong>Demo</strong></a> ·
  <a href="#deploy-to-vercel"><strong>Deploy to Vercel</strong></a> ·
  <a href="#clone-and-run-locally"><strong>Clone and run locally</strong></a> ·
  <a href="#feedback-and-issues"><strong>Feedback and issues</strong></a>
  <a href="#more-supabase-examples"><strong>More Examples</strong></a>
</p>
<br/>

## Features

- Works across the entire [Next.js](https://nextjs.org) stack
  - App Router
  - Pages Router
  - Middleware
  - Client
  - Server
  - It just works!
- supabase-ssr. A package to configure Supabase Auth to use cookies
- Password-based authentication block installed via the [Supabase UI Library](https://supabase.com/ui/docs/nextjs/password-based-auth)
- Styling with [Tailwind CSS](https://tailwindcss.com)
- Components with [shadcn/ui](https://ui.shadcn.com/)
- Optional deployment with [Supabase Vercel Integration and Vercel deploy](#deploy-your-own)
  - Environment variables automatically assigned to Vercel project

## Demo

You can view a fully working demo at [demo-nextjs-with-supabase.vercel.app](https://demo-nextjs-with-supabase.vercel.app/).

## Deploy to Vercel

Vercel deployment will guide you through creating a Supabase account and project.

After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&project-name=nextjs-with-supabase&repository-name=nextjs-with-supabase&demo-title=nextjs-with-supabase&demo-description=This+starter+configures+Supabase+Auth+to+use+cookies%2C+making+the+user%27s+session+available+throughout+the+entire+Next.js+app+-+Client+Components%2C+Server+Components%2C+Route+Handlers%2C+Server+Actions+and+Middleware.&demo-url=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2F&external-id=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&demo-image=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2Fopengraph-image.png)

The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally.

If you wish to just develop locally and not deploy to Vercel, [follow the steps below](#clone-and-run-locally).

## Clone and run locally

1. You'll first need a Supabase project which can be made [via the Supabase dashboard](https://database.new)

2. Create a Next.js app using the Supabase Starter template npx command

   ```bash
   npx create-next-app --example with-supabase with-supabase-app
   ```

   ```bash
   yarn create next-app --example with-supabase with-supabase-app
   ```

   ```bash
   pnpm create next-app --example with-supabase with-supabase-app
   ```

3. Use `cd` to change into the app's directory

   ```bash
   cd with-supabase-app
   ```

4. Rename `.env.example` to `.env.local` and update the following:

   ```
   NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
   NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
   ```

   Both `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` can be found in [your Supabase project's API settings](https://supabase.com/dashboard/project/_?showConnect=true)

5. You can now run the Next.js local development server:

   ```bash
   npm run dev
   ```

   The starter kit should now be running on [localhost:3000](http://localhost:3000/).

6. This template comes with the default shadcn/ui style initialized. If you instead want other ui.shadcn styles, delete `components.json` and [re-install shadcn/ui](https://ui.shadcn.com/docs/installation/next)

> Check out [the docs for Local Development](https://supabase.com/docs/guides/getting-started/local-development) to also run Supabase locally.

## Feedback and issues

Please file feedback and issues over on the [Supabase GitHub org](https://github.com/supabase/supabase/issues/new/choose).

## More Supabase examples

- [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments)
- [Cookie-based Auth and the Next.js 13 App Router (free course)](https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF)
- [Supabase Auth and the Next.js App Router](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs)


## Detected evidence (automated analysis)

Indexed codebase: 36 recognized source files, 145 KB.
- Anthropic (technology) — detected in the code
- CSS (language) — detected in the code
- Next.js (technology) — detected in the code
- OpenAI (technology) — detected in the code
- React (technology) — detected in the code
- Supabase (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- TypeScript (language) — detected in the code
- FastAPI (technology) — claimed on Devpost, not found in the code
- JavaScript (language) — claimed on Devpost, not found in the code
- Python (language) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (48 of 48)

```
.gitignore
app/about/page.tsx
app/api/a-poet/route.ts
app/api/fortune-city/route.ts
app/api/fortune-life/route.ts
app/api/hexagram-data/route.ts
app/api/image-fetching/route.ts
app/api/video-generation/route.ts
app/blog/page.tsx
app/city-analysis/page.tsx
app/coin-tossing/layout.tsx
app/coin-tossing/page.tsx
app/faq/page.tsx
app/globals.css
app/hexagram-analysis/page.tsx
app/layout.tsx
app/page.tsx
app/remotion/Composition.tsx
app/remotion/index.ts
app/remotion/Root.tsx
app/remotion/Slideshow.tsx
app/support/page.tsx
app/video-of-desti/page.tsx
components.json
components/footer.tsx
components/hero.tsx
components/navbar.tsx
components/RemotionPlayer.tsx
components/ui/button.tsx
components/ui/RemotionPlayer.tsx
data-analysis/.ipynb_checkpoints/data_analysis-checkpoint.ipynb
data-analysis/data_analysis.ipynb
data-analysis/main_cities.csv
data-analysis/us_main_cities.csv
eslint.config.mjs
lib/supabase.ts
lib/utils.ts
middleware.ts
next.config.ts
next.config.ts 17-20-41-882.ts
package.json
postcss.config.mjs
public/yijing_fixed.csv
public/yijing_original.csv
README.md
remotion.config.ts
tailwind.config.ts
tsconfig.json
```

### Dependencies

- package.json: @anthropic-ai/sdk@^0.54.0, @eslint/eslintrc@^3, @google/genai@^1.6.0, @radix-ui/react-checkbox@^1.3.1, @radix-ui/react-dropdown-menu@^2.1.14, @radix-ui/react-label@^2.1.6, @radix-ui/react-slot@^1.2.2, @remotion/cli@^4.0.318, @remotion/eslint-plugin@^4.0.318, @remotion/player@^4.0.318, @remotion/renderer@4.0.318, @supabase/ssr@^0.6.1, @supabase/supabase-js@^2.50.0, @types/node@^20, @types/react@^19, @types/react-dom@^19, anthropic@^0.0.0, autoprefixer@^10.4.20, axios@^1.10.0, class-variance-authority@^0.7.1, clsx@^2.1.1, csv-parse@^5.6.0, csv-parser@^3.2.0, dotenv@^16.5.0, eslint@^9, eslint-config-next@15.3.1, ffmpeg-static@^5.2.0, fluent-ffmpeg@^2.1.3, framer-motion@^12.18.1, lucide-react@^0.511.0, next@latest, next-themes@^0.4.6, node-fetch@^2.7.0, openai@^5.6.0, postcss@^8, react@^19.0.0, react-dom@^19.0.0, remotion@^4.0.318, supabase@^2.26.9, tailwind-merge@^3.3.0, tailwindcss@^3.4.1, tailwindcss-animate@^1.0.7, ts-node@^10.9.2, typescript@^5.8.3, videoshow@^0.1.12

### Recent commits (newest first)

- Add city recommendation system with Supabase integration
- modifying about page
- deploy for once
- for stoarge and record
- deploy fix. small issues like variables, so deleted them
- fix some problem of deployment
- fixproblems on frontend. the line gone. add logic in page navigation
- modify a bit UI
- add some more UI/UX
- to have newest push to verify if deploy changes to this project
- try deplotment - clear CLERK cache content
- try to deploy
- working of fortune, maps, video and image fetching
- life analysis, city explore and video is on
- Merge branch 'main' into video-generation
- ready for combination
- prompt fix
- revamp
- video works waiting for backend integration
- Initial commit

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

### package.json

```
{
  "name": "destiny-lens",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "remotion:preview": "remotion preview app/api/video-generation/images/remotion/index.ts",
    "remotion:render": "remotion render app/api/video-generation/images/remotion/index.ts Slideshow out.mp4",
    "remotion": "remotion studio remotion/index.ts",
    "postinstall": "rm -rf .next && rm -rf node_modules/.cache"
  },
  "dependencies": {
    "@google/genai": "^1.6.0",
    "@anthropic-ai/sdk": "^0.54.0",
    "@radix-ui/react-checkbox": "^1.3.1",
    "@radix-ui/react-dropdown-menu": "^2.1.14",
    "@radix-ui/react-label": "^2.1.6",
    "@radix-ui/react-slot": "^1.2.2",
    "@remotion/cli": "^4.0.318",
    "@remotion/eslint-plugin": "^4.0.318",
    "@remotion/player": "^4.0.318",
    "@remotion/renderer": "4.0.318",
    "@supabase/ssr": "^0.6.1",
    "@supabase/supabase-js": "^2.50.0",
    "anthropic": "^0.0.0",
    "axios": "^1.10.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "csv-parse": "^5.6.0",
    "csv-parser": "^3.2.0",
    "dotenv": "^16.5.0",
    "ffmpeg-static": "^5.2.0",
    "fluent-ffmpeg": "^2.1.3",
    "framer-motion": "^12.18.1",
    "lucide-react": "^0.511.0",
    "next": "latest",
    "next-themes": "^0.4.6",
    "node-fetch": "^2.7.0",
    "openai": "^5.6.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "remotion": "^4.0.318",
    "supabase": "^2.26.9",
    "tailwind-merge": "^3.3.0",
    "videoshow": "^0.1.12"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "autoprefixer": "^10.4.20",
    "eslint": "^9",
    "eslint-config-next": "15.3.1",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "tailwindcss-animate": "^1.0.7",
    "ts-node": "^10.9.2",
    "typescript": "^5.8.3"
  }
}

```

### app/layout.tsx

```typescript
import type { Metadata } from "next";
import { Geist } from "next/font/google";
import { ThemeProvider } from "next-themes";
import Navbar from "../components/navbar";
import Footer from "../components/footer";
import "./globals.css";

const defaultUrl = process.env.VERCEL_URL
  ? `https://${process.env.VERCEL_URL}`
  : "http://localhost:3000";

export const metadata: Metadata = {
  metadataBase: new URL(defaultUrl),
  title: "Destiny Lens - Ancient Wisdom Meets Modern AI",
  description:
    "Discover your destined city through I Ching divination and AI technology",
};

const geistSans = Geist({
  variable: "--font-geist-sans",
  display: "swap",
  subsets: ["latin"],
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${geistSans.className} antialiased`}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <Navbar />
          <main className="pt-16">{children}</main>
          <Footer />
        </ThemeProvider>
      </body>
    </html>
  );
}

```

### app/page.tsx

```typescript
"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";

export default function LandingPage() {
  const router = useRouter();
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(true);

    // Create floating bagua symbols
    const createBaguaParticle = () => {
      const symbols = ["☰", "☷", "☳", "☴", "☵", "☶", "☱", "☲"];
      const particle = document.createElement("div");
      particle.className = "bagua-particle";
      particle.textContent = symbols[(Math.random() * symbols.length) | 0];
      particle.style.left = Math.random() * 100 + "%";
      particle.style.animationDuration = Math.random() * 15 + 10 + "s";
      particle.style.animationDelay = Math.random() * 5 + "s";
      particle.style.fontSize = Math.random() * 20 + 20 + "px";
      particle.style.opacity = `${Math.random() * 0.3 + 0.1}`;

      const particlesContainer = document.querySelector(".bagua-particles");
      if (particlesContainer) {
        particlesContainer.appendChild(particle);

        setTimeout(() => {
          particle.remove();
        }, 20000);
      }
    };

    const interval = setInterval(createBaguaParticle, 3000);
    return () => clearInterval(interval);
  }, []);

  const handleEnterDestiny = () => {
    router.push("/coin-tossing");
  };

  return (
    <div className="min-h-screen relative overflow-hidden bg-gradient-to-br from-slate-900 via-amber-900 to-red-900">
      {/* Floating Bagua Particles */}
      <div className="bagua-particles absolute inset-0 z-0 pointer-events-none"></div>

      {/* Background Elements */}
      <div className="absolute inset-0 z-0 pointer-events-none">
        <div className="absolute top-1/3 left-0 w-64 h-64 bg-gradient-to-r from-amber-500/20 to-transparent rounded-full blur-3xl"></div>
        <div className="absolute bottom-1/3 right-0 w-64 h-64 bg-gradient-to-l from-red-500/20 to-transparent rounded-full blur-3xl"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-to-r from-amber-500/10 via-red-500/10 to-amber-500/10 rounded-full blur-3xl"></div>
      </div>

      <div className="relative z-10">
        {/* Opening Poetic Title + Call to Action */}
        <div
          className={`min-h-screen flex flex-col items-center justify-center px-6 text-center transition-all duration-1000 ${
            isVisible ? "fade-in-up" : "opacity-0"
          }`}
        >
          <div className="max-w-5xl mx-auto">
            <h1 className="text-6xl md:text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-300 via-yellow-200 to-amber-400 mb-8 shimmer-text">
              Destiny Lens
            </h1>

            <div className="text-3xl md:text-4xl font-serif text-amber-200 mb-6">
              Classic of Mountains and Seas
            </div>

            <blockquote className="text-2xl md:text-3xl font-serif text-amber-100 italic leading-relaxed mb-6 ancient-runes">
              &ldquo;In this vast world, there are countless wonders.
              <br />
              Between mountains and seas, dragons and tigers lie hidden.&rdquo;
            </blockquote>

            <p className="text-xl text-amber-200 mb-8 leading-relaxed">
              Cast the coins of fate and embark on your journey to belonging
            </p>

            <div className="text-center">
              <p className="text-lg text-amber-300 max-w-3xl mx-auto leading-relaxed mb-8">
                Perhaps you&rsquo;re still wandering: Where to go? Where to
                stay?
                <br />
                Instead of endless contemplation, let destiny provide the
                answer.
              </p>
              <p className="text-base text-amber-200 max-w-4xl mx-auto leading-relaxed">
                We combine the wisdom of I Ching with modern city data to divine
                your current state of mind and future path.
                <br />
                Through ancient coins, your voice, and your face, we generate
                your personal destiny poem and city of belonging.
              </p>
            </div>
          </div>
        </div>

        {/* Enter Button */}
        <div className="py-20 px-6 text-center">
          <div className="max-w-2xl mx-auto">
            <Button
              onClick={handleEnterDestiny}
              className="text-2xl px-16 py-8 bg-gradient-to-r from-red-600 via-amber-600 to-red-600 hover:from-red-700 hover:via-amber-700 hover:to-red-700 text-white border-2 border-amber-400 rounded-2xl shadow-2xl transform transition-all duration-300 hover:scale-105 mystical-glow font-serif"
            >
              <span className="mr-4">🔮</span>
              Begin Your Destiny Journey
              <span className="ml-4">🧭</span>
            </Button>

            <p className="text-amber-300 text-lg mt-6 opacity-80">
              Between mountains and seas, dragons and tigers lie hidden. You too
              shall find your place of belonging.
            </p>

            <div className="mt-8 text-amber-400/60 text-sm">
              <p>
                🔐 Want to save your destiny journey? Register an account after
                completing your divination
              </p>
            </div>
          </div>
        </div>

        {/* 2. Feature Description */}
        <div className="px-6 -mt-16">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-4xl font-serif text-amber-300 text-center mb-16">
              The Journey of Destiny
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {[
                {
                  step: "01",
                  icon: "🪙",
                  title: "Cast Ancient Coins",
                  desc: "Six bronze coins fall to form hexagrams\nGenerate your 
[truncated — 5829 more characters]
```

### app/remotion/index.ts

```typescript
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";

registerRoot(RemotionRoot);

```

### app/coin-tossing/layout.tsx

```typescript
import Link from "next/link";

export default function CoinTossingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <main className="min-h-screen flex flex-col items-center bg-background text-foreground">
      <nav className="w-full border-b border-border bg-muted">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center gap-6 text-sm font-semibold">
            <Link href="/" className="hover:underline">
              Destiny Lens
            </Link>
          </div>
        </div>
      </nav>

      <div className="flex-1 w-full max-w-5xl px-4 py-10">{children}</div>

      <footer className="w-full border-t border-border bg-muted text-xs text-muted-foreground py-6">
        <div className="max-w-5xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-center sm:text-left">
            Powered by Ancient Wisdom & Modern AI
          </p>
        </div>
      </footer>
    </main>
  );
}

```

### app/blog/page.tsx

```typescript
import { ArrowLeft } from "lucide-react";
import Link from "next/link";

export default function BlogPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-amber-900/20 to-red-900/30">
      <div className="max-w-4xl mx-auto px-6 py-20">
        <div className="text-center mb-16">
          <h1 className="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-red-400 mb-6">
            Blog & Insights
          </h1>
          <p className="text-xl text-amber-200/80 max-w-2xl mx-auto leading-relaxed">
            Exploring destiny, wisdom, and the journey of self-discovery
          </p>
        </div>

        <div className="space-y-8">
          <div className="bg-gradient-to-r from-slate-800/50 to-amber-900/30 rounded-2xl p-8 md:p-12 border border-amber-500/20 backdrop-blur-sm">
            <div className="text-center text-amber-100/90 text-lg leading-relaxed">
              <p className="mb-6">
                Welcome to our blog - a space where ancient wisdom meets modern
                insights.
              </p>
              <p className="text-amber-200/80">
                Blog posts coming soon... Stay tuned for articles about I Ching
                wisdom, destiny guidance, and personal transformation stories.
              </p>
            </div>
          </div>

          <div className="text-center pt-8">
            <Link
              href="/"
              className="inline-flex items-center gap-2 text-amber-300 hover:text-amber-200 transition-colors duration-300"
            >
              <ArrowLeft className="w-4 h-4" />
              Back to Home
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}

```

### app/support/page.tsx

```typescript
/* eslint-disable react/no-unescaped-entities */
"use client";

import React from "react";
import { ArrowLeft, Mail, MessageCircle } from "lucide-react";
import Link from "next/link";

export default function SupportPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-amber-900/20 to-red-900/30">
      <div className="max-w-4xl mx-auto px-6 py-20">
        <div className="text-center mb-16">
          <h1 className="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-red-400 mb-6">
            Support & Contact
          </h1>
          <p className="text-xl text-amber-200/80 max-w-2xl mx-auto leading-relaxed">
            Need help with your destiny journey? We're here to guide you.
          </p>
        </div>

        <div className="space-y-8">
          <div className="bg-gradient-to-r from-slate-800/50 to-amber-900/30 rounded-2xl p-8 md:p-12 border border-amber-500/20 backdrop-blur-sm">
            <div className="flex items-center mb-6">
              <MessageCircle className="w-6 h-6 text-amber-400 mr-3" />
              <h2 className="text-2xl font-bold text-amber-300">
                Get in Touch
              </h2>
            </div>
            <div className="space-y-4 text-amber-100/90 text-lg leading-relaxed">
              <p>
                For questions about your I Ching readings, city recommendations,
                or technical support, please reach out to us:
              </p>
              <div className="flex items-center gap-3 mt-6">
                <Mail className="w-5 h-5 text-red-400" />
                <a
                  href="mailto:support@destinylens.com"
                  className="text-amber-200 hover:text-amber-100 transition-colors"
                >
                  support@destinylens.com
                </a>
              </div>
            </div>
          </div>

          <div className="text-center pt-8">
            <Link
              href="/"
              className="inline-flex items-center gap-2 text-amber-300 hover:text-amber-200 transition-colors duration-300"
            >
              <ArrowLeft className="w-4 h-4" />
              Back to Home
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}

```

### app/about/page.tsx

```typescript
/* eslint-disable react/no-unescaped-entities */
import { ArrowLeft } from "lucide-react";
import Link from "next/link";

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-amber-900/20 to-red-900/30">
      {/* Hero Section */}
      <div className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-amber-500/10 to-red-500/10 blur-3xl"></div>
        <div className="relative max-w-4xl mx-auto px-6 py-20">
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-red-400 mb-6">
              Mirror of Destiny
            </h1>
            <p className="text-xl text-amber-200/80 max-w-2xl mx-auto leading-relaxed">
              A reflection of my destiny, and my way of reclaiming myself
            </p>
          </div>
        </div>
      </div>

      {/* Story Section */}
      <div className="max-w-4xl mx-auto px-6 pb-20">
        <div className="bg-gradient-to-r from-slate-800/50 to-amber-900/30 rounded-2xl p-8 md:p-12 border border-amber-500/20 backdrop-blur-sm">
          {/* <div className="space-y-6 text-amber-100/90 text-lg leading-relaxed">
            <p>
              This project — I Ching × Destiny × City Guidance — is a gift I'm
              giving to myself. It represents my journey of breaking free from
              limiting beliefs and embracing my true self.
            </p>

            <p>
              In recent times, I've grown distant from my birth family. I've
              blocked my mother twice, because she tried — with "good
              intentions" — to persuade me into accepting choices that
              diminished my self-worth. What she didn't understand is that such
              advice feels like throwing mud on a finely crafted piece of
              jewelry, burying it in darkness forever.
            </p>

            <p>
              I also cut ties with my stepfather, Guo Xinwen, and blocked my
              father. Since August 2023, he's been sending me 3,000 RMB per
              month — his way of trying to "make up" for the past. But I still
              can't forgive his absence during my childhood. Money cannot
              replace love that was never given.
            </p>

            <p>
              These were not impulsive decisions. They were my way of breaking
              away from the mindset of poverty, from narrow family values, and
              from an identity shaped by self-denial. I'm pursuing a broader
              path in life — one that truly belongs to the person I want to
              become.
            </p>

            <p>
              I've always loved classical Chinese culture, texts, and wisdom.
              Since I was young, I've dreamed of becoming a woman of
              extraordinary charm — strong yet graceful, alluring yet powerful.
              A woman who inspires others to protect, to explore, to follow;
              someone who radiates a unique brilliance and leads others with her
              light.
            </p>

            <p>
              But where I grew up, every form of my expression was denied. They
              tried to mold me into the opposite of who I am. They feared my
              brilliance, and so they covered it with rules like "You should be
              more low-key," or "You can't act like that," throwing dust upon
              me.
            </p>

            <p className="text-amber-200 font-medium italic text-xl">
              But I know I'm not made for dirt — I belong in a jewel box, among
              treasures.
            </p>

            <p>
              Those who tried to dim my light will eventually see that all the
              suppression, hurt, and rejection didn't destroy me. Instead, they
              made my essence tougher, my shine deeper.
            </p>

            <p>
              Since childhood, I longed to leave — to go to America. Not because
              its economy is stronger, but because in every American film I
              watched, the female lead could love boldly and be loved bravely.
              And those male leads — mature, gentle, courageous, and unwavering
              — are the kind of presence my heart has always yearned for.
            </p>

            <p>
              Perhaps this longing was never just a "dream to go abroad." It was
              a calling from the depths of my soul — for freedom, authenticity,
              and love. Other places — Canada, Australia, the UK, Europe — they
              never appealed to me the way America did. My vision has always
              been clear: I wanted to go somewhere that encourages me to be
              myself, to express my truth, and to live out my unique value.
            </p>

            <p>
              In terms of destiny, my BaZi (Eight Characters) chart contains an
              excess of "Yin" energy — like a golden hairpin rich with talent,
              buried beneath sand and mud. But I'm no longer waiting for someone
              to uncover me. I will rise on my own, walk out of the mud by
              myself.
            </p>

            <p>
              That is the origin of Mirror of Destiny — a tool that uses I Ching
              hexagrams and geographic resonance to help people find their most
              fitting city, their direction, their source of energy.
            </p>

            <p className="text-amber-200 font-medium text-xl">
              I dedicate this to those like me — those who have wandered in
              confusion, longed for growth, and yearned to break free from fate.
            </p>

            <p className="text-amber-300 font-medium text-xl text-center pt-6">
              It is a reflection of my destiny, and my way of reclaiming myself.
            </p>
          </div> *
[truncated — 398 more characters]
```

### app/video-of-desti/page.tsx

```typescript
"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { ArrowLeft, RotateCcw, Play, Download } from "lucide-react";
import RemotionPlayer from "@/components/RemotionPlayer";

interface HexagramData {
  hexFont: string;
  english: string;
  pinyin: string;
  number: string;
}

export default function VideoOfDestiPage() {
  const [hexagramData, setHexagramData] = useState<HexagramData | null>(null);
  const [imageUrls, setImageUrls] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const storedHexagramData = localStorage.getItem("hexagramData");
    const storedImageUrls = localStorage.getItem("imageUrls");

    if (storedHexagramData) {
      setHexagramData(JSON.parse(storedHexagramData));
    }
    if (storedImageUrls) {
      setImageUrls(JSON.parse(storedImageUrls));
    }
  }, []);

  const generateNewVideo = async () => {
    setLoading(true);

    // Generate new hexagram
    const newHexagram = Array.from({ length: 6 }, () =>
      Math.random() < 0.5 ? "yin" : "yang"
    );
    const binary = newHexagram.map((l) => (l === "yang" ? "1" : "0")).join("");

    try {
      const [hexagramResponse, imageResponse] = await Promise.all([
        fetch("/api/hexagram-data", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ binary }),
        }),
        fetch("/api/image-fetching", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ binary }),
        }),
      ]);

      if (hexagramResponse.ok && imageResponse.ok) {
        const hexagramCsvData = await hexagramResponse.json();
        const imageData = await imageResponse.json();

        setHexagramData(hexagramCsvData);
        setImageUrls(imageData.imageUrls || []);

        // Store in localStorage for other pages
        localStorage.setItem("currentHexagram", JSON.stringify(newHexagram));
        localStorage.setItem("hexagramData", JSON.stringify(hexagramCsvData));
        localStorage.setItem(
          "imageUrls",
          JSON.stringify(imageData.imageUrls || [])
        );
      }
    } catch (error) {
      console.error("Error:", error);
    } finally {
      setLoading(false);
    }
  };

  const downloadVideo = async () => {
    try {
      const response = await fetch("/api/video-generation", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ imageUrls }),
      });

      if (response.ok) {
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = "destiny-video.mp4";
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
      }
    } catch (error) {
      console.error("Error downloading video:", error);
    }
  };

  return (
    <div className="flex-1 w-full flex flex-col items-center gap-8 p-8">
      {/* Navigation */}
      <div className="w-full max-w-4xl flex justify-between items-center">
        <Link
          href="/city-analysis"
          className="flex items-center gap-2 px-4 py-2 bg-blue-100 hover:bg-blue-200 rounded-lg transition-colors"
        >
          <ArrowLeft size={16} />
          City Analysis
        </Link>

        <h1 className="text-2xl font-bold text-center">
          🎬 Your Destiny Journey
        </h1>

        <Link
          href="/coin-tossing"
          className="flex items-center gap-2 px-4 py-2 bg-purple-100 hover:bg-purple-200 rounded-lg transition-colors"
        >
          Back to Start
        </Link>
      </div>

      {/* Hexagram Display */}
      {hexagramData && (
        <div className="text-center p-6 bg-gradient-to-r from-green-100 to-emerald-100 rounded-lg">
          <div
            className="mb-4 font-serif leading-none"
            style={{ fontSize: "120px" }}
          >
            {hexagramData.hexFont}
          </div>

          <h2 className="text-2xl font-semibold text-green-700">
            {hexagramData.english}
          </h2>

          <p className="text-lg text-green-600 mt-2">
            {hexagramData.pinyin} • Hexagram {hexagramData.number}
          </p>
        </div>
      )}

      {/* Generate New Video Button */}
      <button
        onClick={generateNewVideo}
        className="flex items-center gap-2 bg-gradient-to-r from-green-600 via-emerald-600 to-teal-500 text-white px-6 py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 font-semibold"
        disabled={loading}
      >
        <RotateCcw size={18} />
        {loading ? "Creating New Journey..." : "Create New Video Journey"}
      </button>

      {/* Video Player Section */}
      {imageUrls.length > 0 && (
        <div className="w-full max-w-4xl space-y-6 bg-white rounded-lg border p-8 shadow-lg">
          <div className="text-center mb-6">
            <h2 className="text-2xl font-semibold text-green-700 mb-4 flex items-center justify-center gap-3">
              <Play size={28} />
              Your Personalized Destiny Video
            </h2>
            <div className="w-24 h-1 bg-gradient-to-r from-green-400 to-emerald-400 mx-auto rounded-full"></div>
          </div>

          <div className="bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-lg">
            <p className="text-center text-gray-700 mb-6 leading-relaxed">
              Watch as your destiny unfolds through the wisdom of the Yijing.
              This personalized video journey was created based on your hexagram
              reading, blending ancient wisdom with modern storytelling.
            </p>

            <div className="w-full flex justify-center">
              <RemotionPlayer imageUrls={imageUrls} />
            </div>
          </div>

          {/* Video Control
[truncated — 3409 more characters]
```

### app/faq/page.tsx

```typescript
/* eslint-disable react/no-unescaped-entities */
"use client";

import Link from "next/link";
import { ArrowLeft, HelpCircle, Sparkles } from "lucide-react";

export default function FAQPage() {
  return (
    <div className="flex-1 w-full flex flex-col items-center gap-8 p-8 min-h-screen">
      {/* Navigation */}
      <div className="w-full max-w-4xl flex justify-between items-center">
        <Link
          href="/"
          className="flex items-center gap-2 px-4 py-2 bg-purple-100 hover:bg-purple-200 rounded-lg transition-colors"
        >
          <ArrowLeft size={16} />
          Back to Home
        </Link>

        <h1 className="text-3xl font-bold text-center bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
          ❓ Frequently Asked Questions
        </h1>

        <Link
          href="/coin-tossing"
          className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-indigo-100 to-purple-100 hover:from-indigo-200 hover:to-purple-200 rounded-lg transition-colors"
        >
          Start Reading
          <Sparkles size={16} />
        </Link>
      </div>

      {/* FAQ Content */}
      <div className="w-full max-w-4xl space-y-8">
        {/* Question 1 */}
        <div className="bg-white rounded-lg border p-8 shadow-lg hover:shadow-xl transition-all duration-300">
          <div className="flex items-start gap-4">
            <div className="bg-gradient-to-r from-purple-100 to-pink-100 p-3 rounded-full">
              <HelpCircle className="text-purple-600" size={24} />
            </div>
            <div className="flex-1">
              <h3 className="text-xl font-semibold text-purple-700 mb-4">
                Q1: How do you analyze my current state?
              </h3>
              <p className="text-gray-700 leading-relaxed">
                We use the traditional coin divination method from the I Ching
                to generate one of 64 hexagrams with a probability of 1/4096.
                Our AI precisely analyzes the meaning of your unique hexagram,
                comparing it to your recent emotions, life circumstances,
                interpersonal relationships, and current fortune patterns to
                provide deep insights into your present moment.
              </p>
            </div>
          </div>
        </div>

        {/* Question 2 */}
        <div className="bg-white rounded-lg border p-8 shadow-lg hover:shadow-xl transition-all duration-300">
          <div className="flex items-start gap-4">
            <div className="bg-gradient-to-r from-blue-100 to-teal-100 p-3 rounded-full">
              <HelpCircle className="text-blue-600" size={24} />
            </div>
            <div className="flex-1">
              <h3 className="text-xl font-semibold text-blue-700 mb-4">
                Q2: How do you determine my destiny city?
              </h3>
              <p className="text-gray-700 leading-relaxed">
                We map the "Later Heaven Eight Trigrams directions" from the I
                Ching to the cultural atmosphere, climate characteristics, and
                social rhythm of various American cities. For example: if your
                hexagram reveals "Kan (water) energy with challenges above but
                continuous flow," we might recommend cities like Seattle or
                Boston—northern places that may seem cold but offer deep healing
                and growth potential that aligns with your energy patterns.
              </p>
            </div>
          </div>
        </div>

        {/* Question 3 */}
        <div className="bg-white rounded-lg border p-8 shadow-lg hover:shadow-xl transition-all duration-300">
          <div className="flex items-start gap-4">
            <div className="bg-gradient-to-r from-green-100 to-emerald-100 p-3 rounded-full">
              <HelpCircle className="text-green-600" size={24} />
            </div>
            <div className="flex-1">
              <h3 className="text-xl font-semibold text-green-700 mb-4">
                Q3: How do I know if the analysis is accurate?
              </h3>
              <p className="text-gray-700 leading-relaxed">
                We don't claim to provide absolute answers, but rather help you
                discover the wisdom that already exists within you. When you
                read the analysis, if you experience that moment of
                recognition—that feeling of "yes, that resonates, I understand
                now"—that's your inner knowing confirming the truth. The I Ching
                works by reflecting your subconscious understanding back to your
                conscious mind.
              </p>
            </div>
          </div>
        </div>

        {/* Question 4 */}
        <div className="bg-white rounded-lg border p-8 shadow-lg hover:shadow-xl transition-all duration-300">
          <div className="flex items-start gap-4">
            <div className="bg-gradient-to-r from-amber-100 to-orange-100 p-3 rounded-full">
              <HelpCircle className="text-amber-600" size={24} />
            </div>
            <div className="flex-1">
              <h3 className="text-xl font-semibold text-amber-700 mb-4">
                Q4: What exactly do I get from this service?
              </h3>
              <p className="text-gray-700 leading-relaxed mb-4">
                Your complete Destiny Lens experience includes:
              </p>
              <ul className="space-y-3 text-gray-700">
                <li className="flex items-start">
                  <span className="text-purple-400 mr-3 mt-1">🔮</span>
                  <span>
                    <strong>Comprehensive Life Analysis:</strong> Deep insights
                    into your personality, current phase, and life path based on
                    your unique hexagram
                  </span>
                </li>
                <li className="flex items-start">
                  <span class
[truncated — 5483 more characters]
```

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