feat: update README with project description and features; refactor font usage and add InfiniteMovingCards component for dynamic quote display

Author: gitcoder89431

README.md

@@ -1,36 +1,29 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Atlas
 
-## Getting Started
+> Where history's greatest minds meet tomorrow's intelligence
 
-First, run the development server:
+Atlas is a curated platform for exploring conversations between history's most influential thinkers and the cutting edge of artificial intelligence. Through carefully crafted dialogues and monologues, we bridge centuries of human wisdom with modern computational thinking.
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+## What Atlas Offers
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+**🏛️ Agency** - Meet 27 historical personas, from Nobel laureates to classical philosophers. Each figure comes to life through rich biographical content and authentic voice modeling.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+**📚 Atlas Feed** - Discover thought-provoking articles in an elegant, reader-focused interface. Each piece explores deep questions through the lens of great minds.
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+**🔍 Explore** - Search and filter through our growing collection of dialogues, monologues, and analytical pieces. Find exactly what sparks your curiosity.
 
-## Learn More
+**💭 Dialogues** - Witness conversations that transcend time. Watch Darwin and Turing explore the computational nature of evolution, or see Ostrom and Wiener debate cybernetic governance.
 
-To learn more about Next.js, take a look at the following resources:
+**📝 Monologues** - Experience the world through the eyes of history's greatest thinkers. From Feynman on consciousness to Turing on machine intelligence.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## Featured Thinkers
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+Our current collection includes minds like Richard Feynman, Marie Curie, Alan Turing, Charles Darwin, Elinor Ostrom, Marcus Aurelius, Hannah Arendt, Leonardo da Vinci, and many others - each contributing their unique perspective to modern questions.
 
-## Deploy on Vercel
+## Philosophy
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+Atlas believes that the wisdom of the past can illuminate the challenges of tomorrow. By creating authentic conversations between historical figures and contemporary ideas, we explore how timeless insights apply to our rapidly evolving world.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+---
+
+*Built with Next.js, TypeScript, and Tailwind CSS. Powered by thoughtful design and respect for intellectual heritage.*

src/app/about/page.tsx

@@ -39,11 +39,11 @@ export default function AboutPage() {
             {/* Team Cards */}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 max-w-5xl mx-auto">
               {teamMembers.map((member, index) => (
-                <div key={index} className="group">
+                <div key={index}>
                   {/* Pixelated Canvas Avatar */}
                   <div className="relative mb-6 mx-auto w-64 h-64 md:w-80 md:h-80">
-                    <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-2xl transform group-hover:scale-105 transition-transform duration-300" />
-                    <div className="relative rounded-2xl overflow-hidden border-2 border-neutral-200 dark:border-neutral-700 group-hover:border-blue-500/50 transition-colors duration-300">
+                    <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-2xl" />
+                    <div className="relative rounded-2xl overflow-hidden border-2 border-neutral-200 dark:border-neutral-700">
                       <PixelatedCanvas
                         src={member.image}
                         width={320}

src/app/globals.css

@@ -9,8 +9,8 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--font-chakra-petch);
+  --font-mono: var(--font-chakra-petch);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -23,5 +23,15 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-chakra-petch), Arial, Helvetica, sans-serif;
+}
+
+@keyframes scroll {
+  to {
+    transform: translate(calc(-50% - 0.5rem));
+  }
+}
+
+.animate-scroll {
+  animation: scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite;
 }

src/app/layout.tsx

@@ -1,15 +1,11 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Chakra_Petch } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const chakraPetch = Chakra_Petch({
+  variable: "--font-chakra-petch",
   subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
 });
 
 export const metadata: Metadata = {
@@ -25,7 +21,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${chakraPetch.variable} antialiased`}
       >
         {children}
       </body>

src/app/page.tsx

@@ -1,14 +1,67 @@
 import { AppSidebar } from '@/components/app-sidebar'
 import { BackgroundBeams } from '@/components/ui/background-beams'
+import { InfiniteMovingCards } from '@/components/ui/infinite-moving-cards'
 import { cn } from '@/lib/utils'
+import { personas } from '@/data/personas'
+
+// Extract quotes from personas data
+function getQuotesFromPersonas() {
+  const quotes: { quote: string; name: string; title: string }[] = []
+
+  personas.forEach(persona => {
+    if (persona.famousQuotes && persona.famousQuotes.length > 0) {
+      // Get 1-2 best quotes per persona to avoid overwhelming
+      const quotesToUse = persona.famousQuotes.slice(0, 2)
+      quotesToUse.forEach(quote => {
+        quotes.push({
+          quote,
+          name: persona.name,
+          title: persona.title
+        })
+      })
+    }
+  })
+
+  // Shuffle quotes for variety
+  return quotes.sort(() => Math.random() - 0.5)
+}
 
 export default function Home() {
+  const quotes = getQuotesFromPersonas()
+
   return (
     <div className={cn("flex flex-col md:flex-row bg-gray-100 dark:bg-neutral-800 w-full flex-1 mx-auto border border-neutral-200 dark:border-neutral-700 overflow-hidden h-screen")}>
       <AppSidebar />
       <div className="flex flex-1">
         <div className="p-2 md:p-10 rounded-tl-2xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 flex flex-col gap-2 flex-1 w-full h-full relative">
           <BackgroundBeams />
+
+          {/* Hero Content */}
+          <div className="relative z-20 flex flex-col items-center justify-center h-full">
+            <div className="text-center mb-16">
+              <h1 className="text-4xl md:text-6xl font-bold text-neutral-900 dark:text-neutral-100 mb-6">
+                Atlas
+              </h1>
+              <p className="text-xl md:text-2xl text-neutral-600 dark:text-neutral-400 max-w-3xl mx-auto">
+                Where history's greatest minds meet tomorrow's intelligence
+              </p>
+            </div>
+
+            {/* Flying Quotes */}
+            <div className="w-full">
+              <InfiniteMovingCards
+                items={quotes}
+                direction="right"
+                speed="slow"
+                className="mb-8"
+              />
+              <InfiniteMovingCards
+                items={quotes.slice().reverse()}
+                direction="left"
+                speed="normal"
+              />
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/components/ui/infinite-moving-cards.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import React, { useEffect, useState } from "react";
+
+export const InfiniteMovingCards = ({
+  items,
+  direction = "left",
+  speed = "fast",
+  pauseOnHover = true,
+  className,
+}: {
+  items: {
+    quote: string;
+    name: string;
+    title: string;
+  }[];
+  direction?: "left" | "right";
+  speed?: "fast" | "normal" | "slow";
+  pauseOnHover?: boolean;
+  className?: string;
+}) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const scrollerRef = React.useRef<HTMLUListElement>(null);
+
+  useEffect(() => {
+    addAnimation();
+  }, []);
+
+  const [start, setStart] = useState(false);
+
+  function addAnimation() {
+    if (containerRef.current && scrollerRef.current) {
+      const scrollerContent = Array.from(scrollerRef.current.children);
+
+      scrollerContent.forEach((item) => {
+        const duplicatedItem = item.cloneNode(true);
+        if (scrollerRef.current) {
+          scrollerRef.current.appendChild(duplicatedItem);
+        }
+      });
+
+      getDirection();
+      getSpeed();
+      setStart(true);
+    }
+  }
+
+  const getDirection = () => {
+    if (containerRef.current) {
+      if (direction === "left") {
+        containerRef.current.style.setProperty(
+          "--animation-direction",
+          "forwards"
+        );
+      } else {
+        containerRef.current.style.setProperty(
+          "--animation-direction",
+          "reverse"
+        );
+      }
+    }
+  };
+
+  const getSpeed = () => {
+    if (containerRef.current) {
+      if (speed === "fast") {
+        containerRef.current.style.setProperty("--animation-duration", "20s");
+      } else if (speed === "normal") {
+        containerRef.current.style.setProperty("--animation-duration", "40s");
+      } else {
+        containerRef.current.style.setProperty("--animation-duration", "80s");
+      }
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "scroller relative z-20 max-w-7xl overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]",
+        className
+      )}
+    >
+      <ul
+        ref={scrollerRef}
+        className={cn(
+          "flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap",
+          start && "animate-scroll",
+          pauseOnHover && "hover:[animation-play-state:paused]"
+        )}
+      >
+        {items.map((item, idx) => (
+          <li
+            className="w-[350px] max-w-full relative rounded-2xl border border-b-0 flex-shrink-0 border-slate-700 px-8 py-6 md:w-[450px]"
+            style={{
+              background:
+                "linear-gradient(180deg, var(--slate-800), var(--slate-900))",
+            }}
+            key={idx}
+          >
+            <blockquote>
+              <div
+                aria-hidden="true"
+                className="user-select-none -z-1 pointer-events-none absolute -left-0.5 -top-0.5 h-[calc(100%_+_4px)] w-[calc(100%_+_4px)]"
+              ></div>
+              <span className="relative z-20 text-sm leading-[1.6] text-gray-100 font-normal">
+                "{item.quote}"
+              </span>
+              <div className="relative z-20 mt-6 flex flex-row items-center">
+                <span className="flex flex-col gap-1">
+                  <span className="text-sm leading-[1.6] text-gray-400 font-normal">
+                    {item.name}
+                  </span>
+                  <span className="text-sm leading-[1.6] text-gray-400 font-normal">
+                    {item.title}
+                  </span>
+                </span>
+              </div>
+            </blockquote>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};