[V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated theme to match dark navy design inspiration */ --background: oklch(0.98 0.005 240); --foreground: oklch(0.15 0.02 240); --card: oklch(0.96 0.005 240); --card-foreground: oklch(0.15 0.02 240); --popover: oklch(0.96 0.005 240); --popover-foreground: oklch(0.15 0.02 240); --primary: oklch(0.18 0.05 240); --primary-foreground: oklch(0.95 0.01 240); --secondary: oklch(0.92 0.01 240); --secondary-foreground: oklch(0.18 0.05 240); --muted: oklch(0.92 0.01 240); --muted-foreground: oklch(0.55 0.02 240); --accent: oklch(0.65 0.15 200); --accent-foreground: oklch(0.95 0.01 240); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.88 0.01 240); --input: oklch(0.88 0.01 240); --ring: oklch(0.65 0.15 200); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { /* Dark theme matching the navy design inspiration */ --background: oklch(0.12 0.03 240); --foreground: oklch(0.92 0.01 240); --card: oklch(0.15 0.03 240); --card-foreground: oklch(0.92 0.01 240); --popover: oklch(0.15 0.03 240); --popover-foreground: oklch(0.92 0.01 240); --primary: oklch(0.92 0.01 240); --primary-foreground: oklch(0.12 0.03 240); --secondary: oklch(0.22 0.03 240); --secondary-foreground: oklch(0.92 0.01 240); --muted: oklch(0.22 0.03 240); --muted-foreground: oklch(0.65 0.02 240); --accent: oklch(0.65 0.15 200); --accent-foreground: oklch(0.92 0.01 240); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.25 0.03 240); --input: oklch(0.25 0.03 240); --ring: oklch(0.65 0.15 200); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" export const metadata: Metadata = { title: "Beowulf: An Epic Journey", description: "Exploring the Anglo-Saxon epic poem Beowulf - characters, culture, and timeless themes", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" export default function BeowulfProject() { return (

{/* Navigation */} {/* Hero Section */}

An Epic Journey Through Anglo-Saxon Literature

{ "Exploring the timeless tale of Beowulf, the Geatish warrior who battles monsters and embodies the heroic ideals of Anglo-Saxon culture." }

{/* Characters Section */}

Characters

Beowulf

The protagonist, a Geatish warrior known for his incredible strength and bravery. He travels to Denmark to help King Hrothgar defeat the monster Grendel.

Hrothgar

The wise king of the Danes who built the great mead-hall Heorot. He represents the ideal of a generous and protective ruler.

Grendel

A monstrous descendant of Cain who terrorizes Heorot for twelve years, representing chaos and evil opposing civilization.

Grendel's Mother

An even more formidable opponent who seeks revenge for her son's death, dwelling in an underwater lair.

The Dragon

The final antagonist that Beowulf faces as an aged king, guarding a treasure hoard and representing the ultimate test.

Wiglaf

Beowulf's loyal kinsman who alone stands by him in the final battle, representing the next generation of heroes.

{/* Culture Section */}

Anglo-Saxon Culture

Warrior Culture

Anglo-Saxon society was built around warrior bands led by kings. Warriors were expected to be loyal to their lord and brave in battle.

Loyalty Honor Courage

Mead-Hall Tradition

The mead-hall served as the center of social life, where warriors gathered to feast, receive gifts, and hear stories.

Community Storytelling Hospitality

Religious Beliefs

The poem reflects a blend of pagan Germanic traditions and Christian influences, showing the cultural transition of the time.

Fate (Wyrd) Christianity Paganism

Social Structure

Society was hierarchical with kings at the top, followed by nobles, warriors, and common people. Loyalty bonds were crucial.

Hierarchy Kinship Reciprocity

{/* Vocabulary Section */}

Key Vocabulary

{[ { term: "Wyrd", definition: "Fate or destiny, a central concept in Anglo-Saxon belief" }, { term: "Comitatus", definition: "The warrior band loyal to a lord" }, { term: "Wergild", definition: "Blood money paid to avoid revenge" }, { term: "Scop", definition: "A poet or storyteller in Anglo-Saxon culture" }, { term: "Thane", definition: "A warrior who serves a lord" }, { term: "Mead-hall", definition: "The central building where the community gathered" }, { term: "Kenning", definition: "A metaphorical compound phrase (e.g., 'whale-road' for sea)" }, { term: "Alliteration", definition: "The repetition of initial consonant sounds" }, { term: "Caesura", definition: "A pause in the middle of a poetic line" }, ].map((item, index) => ( {item.term}

{item.definition}

))}

{/* Plot Summary */}

Plot Summary

Part I: The Battle with Grendel

Beowulf, a young Geatish warrior, hears of the monster Grendel terrorizing the Danish king Hrothgar's mead-hall, Heorot. He sails to Denmark with fourteen companions and defeats Grendel in hand-to-hand combat, tearing off the monster's arm.

Part II: The Battle with Grendel's Mother

Grendel's mother seeks revenge for her son's death, attacking Heorot and killing Hrothgar's closest advisor. Beowulf pursues her to her underwater lair and defeats her using a giant's sword found in her den.

Part III: The Battle with the Dragon

Fifty years later, Beowulf is now king of the Geats. A dragon begins terrorizing his kingdom after a thief steals from its treasure hoard. Despite his advanced age, Beowulf faces the dragon but is mortally wounded in the battle, dying as a hero.

{/* Analysis Section */}

Quotation Analysis

{"So. The Spear-Danes in days gone by and the kings who ruled them had courage and greatness."}

The opening lines establish the epic's tone and introduce the theme of legendary heroism. The alliteration in "Spear-Danes" and the emphasis on "courage and greatness" immediately signal that this is a story about extraordinary deeds and noble values.

{"Fate often saves an undoomed man when his courage is good."}

This quote reflects the Anglo-Saxon belief in wyrd (fate) while emphasizing that courage can influence one's destiny. It shows the complex relationship between divine will and human agency in the poem.

{/* Resources Section */}

Research Resources

Primary Sources

• Beowulf: A New Verse Translation by Seamus Heaney
• The Anglo-Saxon Chronicle
• Archaeological evidence from Sutton Hoo

Scholarly Works

• "Beowulf: The Monsters and the Critics" by J.R.R. Tolkien
• "The Hero with a Thousand Faces" by Joseph Campbell
• Various academic articles on Anglo-Saxon culture

{/* Reflection */}

Reflection

Studying Beowulf has provided invaluable insights into Anglo-Saxon culture and the universal themes that continue to resonate today. The poem's exploration of heroism, loyalty, and the struggle between good and evil remains relevant, while its historical context offers a window into a fascinating period of English literary development. The blend of pagan and Christian elements reflects the cultural transition of early medieval England, making it both a historical document and a timeless work of literature.

{/* Footer */}

) } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } }