[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated theme for Noton Bio Lab - bright but calm colors with light green and blue accents */ --background: oklch(0.99 0.004 120); --foreground: oklch(0.25 0.02 240); --card: oklch(1 0 0); --card-foreground: oklch(0.25 0.02 240); --popover: oklch(1 0 0); --popover-foreground: oklch(0.25 0.02 240); --primary: oklch(0.55 0.15 160); --primary-foreground: oklch(0.99 0.004 120); --secondary: oklch(0.6 0.12 220); --secondary-foreground: oklch(0.99 0.004 120); --muted: oklch(0.96 0.01 140); --muted-foreground: oklch(0.5 0.02 240); --accent: oklch(0.92 0.03 180); --accent-foreground: oklch(0.3 0.02 240); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.99 0.004 120); --border: oklch(0.9 0.02 160); --input: oklch(0.94 0.02 160); --ring: oklch(0.55 0.15 160); --chart-1: oklch(0.55 0.15 160); --chart-2: oklch(0.6 0.12 220); --chart-3: oklch(0.65 0.1 280); --chart-4: oklch(0.7 0.15 140); --chart-5: oklch(0.75 0.12 200); --radius: 1rem; --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 { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --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: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --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" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Noton Bio Lab - オンライン生物実験室", description: "バイオテクノロジーとプログラミングを学べる未来型の実験室。子どもたちが科学を楽しく学べるオンライン体験。", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/about.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Sparkles, Brain, Code } from "lucide-react" export function About() { const features = [ { icon: Sparkles, text: "生物に興味を持つきっかけをつくる", }, { icon: Brain, text: "自分で考える力・論理的思考力を育てる", }, { icon: Code, text: "IT・プログラミングスキルを身につける", }, ] return (

Noton Bio Labとは？

Noton Bio Labとは、学校の"受け身の授業"ではなく、自分で手を動かし、考え、試すことを大切にするオンライン実験室です。

{features.map((feature, index) => { const Icon = feature.icon return (

{feature.text}

) })}

) } [V0_FILE]typescriptreact:file="components/skills.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Dna, Brain, Monitor, Rocket } from "lucide-react" export function Skills() { const skills = [ { icon: Dna, title: "生物への好奇心", description: "「目に見えない世界」をAIで見て、生命の仕組みを理解します。", emoji: "🧬", }, { icon: Brain, title: "考える力・論理的思考", description: "「設計図 → 形 → はたらき」という科学の考え方を体験。", emoji: "🧠", }, { icon: Monitor, title: "IT・プログラミングスキル", description: "Google ColabやPythonを使い、最新の研究環境に触れます。", emoji: "💻", }, { icon: Rocket, title: "主体性と創造力", description: "自分で操作し、自分だけの結果を作り出します。", emoji: "🚀", }, ] return (

このラボで身につく力

科学を楽しみながら、未来を生きる力を育みます

{skills.map((skill, index) => { const Icon = skill.icon return (

{skill.emoji}

{skill.title}

{skill.description}

) })}

) } [V0_FILE]typescriptreact:file="components/flow.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Clock, Play, Sparkles } from "lucide-react" export function Flow() { const steps = [ { icon: Clock, title: "準備（20分）", items: ["Googleアカウントログイン", "Google Colabの使い方", "プログラミングってなに？"], }, { icon: Play, title: "AI実験（20分）", items: ["実験メニューを1つ選択", "タンパク質予測", "待ち時間でDNA・RNA・タンパク質解説"], }, { icon: Sparkles, title: "3D体験・まとめ（20分）", items: ["立体構造を自由に動かす", "「形が変わると働きが変わる」を理解"], }, ] return (

当日の流れ（50〜60分）

初めてでも安心！楽しく学べるステップバイステップ

{steps.map((step, index) => { const Icon = step.icon return (

{index < steps.length - 1 && (

)}

{index + 1}

{step.title}

• {item}

) })}

) } [V0_FILE]typescriptreact:file="components/learning-goals.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Microscope, Brain, Monitor, Globe } from "lucide-react" export function LearningGoals() { const goals = [ { icon: Microscope, emoji: "🔬", title: "未来の研究者体験", description: "最新のAI技術を使って、本物の科学者のように実験します", }, { icon: Brain, emoji: "🧠", title: "論理的に考える力", description: "観察→仮説→検証のプロセスを通じて、考える力を養います", }, { icon: Monitor, emoji: "💻", title: "実践的ITスキル", description: "プログラミングとAIツールの使い方を実践的に学びます", }, { icon: Globe, emoji: "🌍", title: "科学を「自分ごと」にする力", description: "身近な疑問から科学的思考へ、世界を見る目が変わります", }, ] return (

得られる学び

子どもたちと保護者の皆さまへ

{goals.map((goal, index) => { const Icon = goal.icon return (

{goal.emoji}

{goal.title}

{goal.description}

) })}

) } [V0_FILE]typescriptreact:file="components/cta.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" export function CTA() { return (

遊びながら、未来の科学者になる第一歩を

お子さまの好奇心を科学の力に変える、特別な体験が待っています

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" export function Footer() { return ( ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "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", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "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": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/workshop.tsx" isEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ExternalLink, Cpu } from "lucide-react" import Image from "next/image" export function Workshop() { return (

AIで生命の設計図をのぞいてみよう！

〜AlphaFold3で体験する『分子の形』の不思議〜

AlphaFold3とは？

AlphaFold3 は、AIがタンパク質の形を予測する最新技術です。

実際の研究現場でも使われている、世界最先端のツールを体験できます。

実験の様子

オンラインで本格的な分子生物学の実験を自宅から体験できます。

実際に手を動かしながら、プログラミングの初歩やタンパク質の構造や働きについて学びましょう。

対象者

中学1生から高校3年生

所要時間

約60分想定、時間があまればゲームやウェブサービスを開発方法を教えるよ

) } [V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Microscope } from "lucide-react" import Image from "next/image" export function Hero() { return (

オンラインバーチャル生物実験室へようこそ

Noton Bio Labは、バイオテクノロジーとプログラミングを学べる未来のオンライン実験室です

{/* 修正箇所: asChildを追加し、内部にaタグを配置 */}

) } [V0_FILE]jpg:file="public/alphafold3-protein-structure-prediction-ai-visuali.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/alphafold3-protein-structure-prediction-ai-visuali-Ox3eWyqCzuS7zsAY9xGHPWkoB58smi.jpg" isMerged="true" [V0_FILE]jpg:file="public/kids-doing-science-experiment-in-modern-lab--micro.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/kids-doing-science-experiment-in-modern-lab--micro-MbknNIS0Us4Pm90GfMYUP4n7aJS33U.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-science-lab-with-dna-helix--microscope--abs.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-science-lab-with-dna-helix--microscope--abs-ke4UcilgAGB0W8UZ39CEmScILMFZjb.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/experiment-menu.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { User, Egg, Pill } from "lucide-react" import Image from "next/image" export function ExperimentMenu() { const experiments = [ { icon: User, number: "①", title: "自分の名前タンパク質実験", description: "自分の名前から世界に一つだけのタンパク質を作る", learning: "アミノ酸の並びが形を決める", image: "/protein-structure-name.jpg", }, { icon: Egg, number: "②", title: "卵はなぜ固まるの？- Coming soon", description: "生卵のタンパク質をAIで観察", learning: "日常と分子レベルのつながり", image: "/egg-protein-experiment.jpg", }, { icon: Pill, number: "③", title: "くすりの魔法（鍵と鍵穴）- Coming soon", description: "ウイルスと薬の関係をAIで体験", learning: "医療と創薬の仕組み", image: "/medicine-virus-mechanism.jpg", }, ] return (

実験メニュー

興味のある実験を選んで、科学の世界を探検しよう

{experiments.map((experiment, index) => { const Icon = experiment.icon return (

{experiment.number}

{experiment.title}

{experiment.description}

学び：

{experiment.learning}

) })}

) } [V0_FILE]jpg:file="public/protein-structure-name.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/protein-structure-name-7n64OnG6xaUWU527KGpoF7ulHBQaLU.jpg" isMerged="true" [V0_FILE]jpg:file="public/egg-protein-experiment.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/egg-protein-experiment-4q0ZLhF9GsfNmkr5ggIwaJd28xzfbr.jpg" isMerged="true" [V0_FILE]jpg:file="public/medicine-virus-mechanism.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/medicine-virus-mechanism-mpLzS8SRA8vOk36dB3tyOVsqtrjr7X.jpg" isMerged="true" [V0_FILE]jpg:file="public/instructor-hikaru.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-xxZVIl02qiGzpEhcwnXvDFqewQovnu.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/instructor.tsx" isMerged="true" "use client" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { BookOpen, Heart, Sparkles, GraduationCap, Gamepad2, Music, Cpu } from "lucide-react" export function Instructor() { const favoriteSubjects = ["数学", "生物", "社会", "英語"] const favorites = ["アイスクリーム", "ツナ", "チーズ", "サーモン", "宇宙"] const hobbies = [ { name: "ゲーム開発", icon: Gamepad2 }, { name: "AI開発", icon: Cpu }, { name: "音楽", icon: Music }, ] return (

Instructor

講師紹介

皆さんの学びをサポートする講師をご紹介します

{/* Profile Image */}

{/* Profile Content */}

Hikaru Yamazaki

Data Scientist

{/* Introduction */}

こんにちは。講師を務めさせていただくHikaruです。普段はAIの研究開発を行っています。今回は皆さんにプログラミングとバイオテクノロジーについて講義を行います。プログラミングや生物学が全く分からないそんなあなたでも基礎から学べるオンラインコースです。

{/* Details Grid */}

{/* Favorite Subjects */}

学生時代に好きだった科目

{favoriteSubjects.map((subject) => ( {subject} ))}

{/* University Studies */}

大学時代に学んだこと

遺伝子工学と統計学

{/* Favorites */}

好きな物

{favorites.map((item) => ( {item} ))}

{/* Hobbies */}

趣味

{hobbies.map((hobby) => (

{hobby.name}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Hero } from "@/components/hero" import { About } from "@/components/about" import { Skills } from "@/components/skills" import { Workshop } from "@/components/workshop" import { ExperimentMenu } from "@/components/experiment-menu" import { Flow } from "@/components/flow" import { LearningGoals } from "@/components/learning-goals" import { Instructor } from "@/components/instructor" import { CTA } from "@/components/cta" import { Footer } from "@/components/footer" export default function Page() { return (

) }