diff --git a/components/HowItWorksData.tsx b/components/HowItWorksData.tsx
index 33c41fa7..80693be0 100644
--- a/components/HowItWorksData.tsx
+++ b/components/HowItWorksData.tsx
@@ -4,6 +4,11 @@ import { GlobalProblemSolutionsList } from "@/components/global-problem-solution
 import { GlobalProblemsList } from "@/components/global-problems-list"
 import { PollRandomGlobalProblemSolutions } from "@/components/poll-random-global-problem-solutions"
 import { PollRandomGlobalProblems } from "@/components/poll-random-global-problems"
+import ActionableTaskStrategyVisualizer from "@/components/landing-page/TaskGalaxyVisualizerWithData";
+import TaskAllocationVisualizer from "@/components/landing-page/TaskAllocationVisualizer";
+import ResearchEffortCataloger from "@/components/landing-page/ResearchEffortCataloger";
+import ImpactTrackerVisualizer from "@/components/landing-page/ImpactTrackerVisualizer";
+import IdeaSubmissionHub from "@/components/landing-page/IdeaSubmissionHub";
 
 export interface QAItem {
   question: string
@@ -67,7 +72,7 @@ const HowItWorksData: QAItem[] = [
     answer:
       "The chosen solutions are broken down into smaller, actionable tasks. " +
       "Goal decomposition agents help in this process by identifying necessary steps, potential dependencies, and required skills for each task.",
-    //visual: <TaskBreakdownDiagram />,
+    visual: <ActionableTaskStrategyVisualizer />,
   },
   {
     question: "Who carries out these tasks?",
@@ -75,7 +80,7 @@ const HowItWorksData: QAItem[] = [
       "Tasks can be completed by anyone with the right skills – this includes " +
       "both humans and AI. We use AI to match tasks with the most suitable " +
       "people or teams based on their skills, experience, and interests.",
-    //visual: <AIAgentDiagram />,
+    visual: <TaskAllocationVisualizer />,
   },
   {
     question: "How does it avoid duplicating work that's already being done?",
@@ -83,7 +88,7 @@ const HowItWorksData: QAItem[] = [
       "AI research agents to continuously scan and catalog existing efforts " +
       "related to each problem and solution. This helps us identify " +
       "opportunities for collaboration and avoid reinventing the wheel.",
-    //visual: <AIAgentDiagram />,
+    visual: <ResearchEffortCataloger />,
   },
   {
     question: "How does it track progress and measure impact?",
@@ -91,13 +96,13 @@ const HowItWorksData: QAItem[] = [
       "AI research agents also analyze data from various sources, tracking key metrics related " +
       "to each problem and solution. This allows us to measure the " +
       "real-world impact of our efforts and adjust strategies as needed.",
-    //visual: <ExampleChart />,
+    visual: <ImpactTrackerVisualizer />,
   },
   {
     question: "What if someone has a new idea or solution?",
     answer:
       "New ideas are always welcome! Anyone can submit new problems, solutions, or tasks. ",
-    //visual: <ExampleDiagram />,
+    visual: <IdeaSubmissionHub />,
   },
 ]
 
diff --git a/components/landing-page/IdeaSubmissionHub.tsx b/components/landing-page/IdeaSubmissionHub.tsx
new file mode 100644
index 00000000..5c7ae001
--- /dev/null
+++ b/components/landing-page/IdeaSubmissionHub.tsx
@@ -0,0 +1,114 @@
+"use client"
+import React, { useState } from 'react';
+import { Lightbulb, AlertCircle, Cog, List, Send } from 'lucide-react';
+
+type IdeaType = 'problem' | 'solution' | 'task' | 'other';
+
+interface Idea {
+    type: IdeaType;
+    title: string;
+    description: string;
+}
+
+const IdeaSubmissionHub: React.FC = () => {
+    const [ideaType, setIdeaType] = useState<IdeaType>('problem');
+    const [title, setTitle] = useState('');
+    const [description, setDescription] = useState('');
+    const [submitted, setSubmitted] = useState(false);
+    const [recentIdeas, setRecentIdeas] = useState<Idea[]>([]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        const newIdea: Idea = { type: ideaType, title, description };
+        setRecentIdeas(prev => [newIdea, ...prev.slice(0, 2)]);
+        setSubmitted(true);
+        setTimeout(() => {
+            setSubmitted(false);
+            setTitle('');
+            setDescription('');
+        }, 3000);
+    };
+
+    const getIcon = (type: IdeaType) => {
+        switch (type) {
+            case 'problem': return <AlertCircle size={20} />;
+            case 'solution': return <Lightbulb size={20} />;
+            case 'task': return <Cog size={20} />;
+            default: return <List size={20} />;
+        }
+    };
+
+    return (
+        <div className="p-4 rounded-lg shadow-md max-w-4xl mx-auto my-8">
+            <h2 className="text-2xl font-bold mb-4">Idea Submission Hub</h2>
+            <div className="mb-4 p-2 border rounded">
+                <h3 className="font-bold flex items-center"><Lightbulb size={16} className="mr-2" /> New Ideas Welcome!</h3>
+                <p className="text-sm">We encourage everyone to submit new problems, solutions, or tasks. Your ideas can make a difference!</p>
+            </div>
+            <form onSubmit={handleSubmit} className="mb-6">
+                <div className="mb-4">
+                    <label className="block mb-2 text-sm font-bold">Idea Type</label>
+                    <div className="flex space-x-2">
+                        {(['problem', 'solution', 'task', 'other'] as IdeaType[]).map(type => (
+                            <button
+                                key={type}
+                                type="button"
+                                onClick={() => setIdeaType(type)}
+                                className={`px-3 py-2 rounded border ${ideaType === type ? 'border-2' : 'border'}`}
+                            >
+                                {type.charAt(0).toUpperCase() + type.slice(1)}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+                <div className="mb-4">
+                    <label htmlFor="title" className="block mb-2 text-sm font-bold">Title</label>
+                    <input
+                        type="text"
+                        id="title"
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)}
+                        className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2"
+                        required
+                    />
+                </div>
+                <div className="mb-4">
+                    <label htmlFor="description" className="block mb-2 text-sm font-bold">Description</label>
+                    <textarea
+                        id="description"
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2"
+                        rows={4}
+                        required
+                    />
+                </div>
+                <button
+                    type="submit"
+                    className="px-4 py-2 font-bold rounded-full border hover:border-2 focus:outline-none focus:ring-2"
+                >
+                    Submit Idea
+                </button>
+            </form>
+            {submitted && (
+                <div className="mb-4 p-2 border rounded">
+                    <p className="text-sm font-bold">Thank you for your submission! Our team will review your idea shortly.</p>
+                </div>
+            )}
+            <div>
+                <h3 className="font-bold mb-2">Recent Submissions</h3>
+                {recentIdeas.map((idea, index) => (
+                    <div key={index} className="mb-2 p-2 border rounded">
+                        <div className="flex items-center">
+                            {getIcon(idea.type)}
+                            <span className="ml-2 font-bold">{idea.title}</span>
+                        </div>
+                        <p className="text-sm mt-1">{idea.description}</p>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default IdeaSubmissionHub;
\ No newline at end of file
diff --git a/components/landing-page/ImpactTrackerVisualizer.tsx b/components/landing-page/ImpactTrackerVisualizer.tsx
new file mode 100644
index 00000000..5d410311
--- /dev/null
+++ b/components/landing-page/ImpactTrackerVisualizer.tsx
@@ -0,0 +1,151 @@
+"use client"
+import React, { useState, useEffect } from 'react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { TrendingUp, TrendingDown, RefreshCw, AlertTriangle } from 'lucide-react';
+
+interface Metric {
+    name: string;
+    value: number;
+    trend: 'up' | 'down' | 'stable';
+    impact: 'positive' | 'negative' | 'neutral';
+}
+
+interface DataSource {
+    name: string;
+    reliability: number;
+}
+
+const ImpactTrackerVisualizer: React.FC = () => {
+    const [metrics, setMetrics] = useState<Metric[]>([]);
+    const [dataSources, setDataSources] = useState<DataSource[]>([]);
+    const [selectedMetric, setSelectedMetric] = useState<string | null>(null);
+    const [historicalData, setHistoricalData] = useState<any[]>([]);
+
+    useEffect(() => {
+        // Simulated initial data
+        const initialMetrics: Metric[] = [
+            { name: 'Drug candidates identified', value: 150, trend: 'up', impact: 'positive' },
+            { name: 'Clinical trials initiated', value: 12, trend: 'up', impact: 'positive' },
+            { name: 'Average drug development time (months)', value: 60, trend: 'down', impact: 'positive' },
+            { name: 'Research collaborations', value: 45, trend: 'up', impact: 'positive' },
+            { name: 'Publications cited', value: 230, trend: 'up', impact: 'positive' },
+        ];
+        setMetrics(initialMetrics);
+
+        const initialDataSources: DataSource[] = [
+            { name: 'Clinical trial databases', reliability: 0.95 },
+            { name: 'Scientific journals', reliability: 0.9 },
+            { name: 'Patent offices', reliability: 0.85 },
+            { name: 'Research institutions', reliability: 0.8 },
+            { name: 'Industry reports', reliability: 0.75 },
+        ];
+        setDataSources(initialDataSources);
+    }, []);
+
+    const generateHistoricalData = (metricName: string) => {
+        const data = [];
+        let value = Math.floor(Math.random() * 100);
+        for (let i = 12; i > 0; i--) {
+            value += Math.floor(Math.random() * 20) - 10;
+            data.push({
+                month: i,
+                [metricName]: Math.max(0, value),
+            });
+        }
+        setHistoricalData(data.reverse());
+    };
+
+    const handleMetricClick = (metricName: string) => {
+        setSelectedMetric(metricName);
+        generateHistoricalData(metricName);
+    };
+
+    const getTrendIcon = (trend: string) => {
+        switch (trend) {
+            case 'up':
+                return <TrendingUp size={16} className="text-green-500" />;
+            case 'down':
+                return <TrendingDown size={16} className="text-red-500" />;
+            default:
+                return <RefreshCw size={16} className="text-yellow-500" />;
+        }
+    };
+
+    const getImpactColor = (impact: string) => {
+        switch (impact) {
+            case 'positive':
+                return 'text-green-500';
+            case 'negative':
+                return 'text-red-500';
+            default:
+                return 'text-yellow-500';
+        }
+    };
+
+    return (
+        <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md max-w-4xl mx-auto my-8">
+            <h2 className="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">AI Impact Tracker</h2>
+            <div className="mb-4 p-2 bg-blue-100 dark:bg-blue-900 rounded">
+                <h3 className="font-bold flex items-center"><AlertTriangle size={16} className="mr-2" /> Real-time Impact Analysis</h3>
+                <p className="text-sm">Our AI agents continuously analyze data from various sources to track key metrics and measure the real-world impact of our efforts.</p>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                <div>
+                    <h3 className="font-bold mb-2">Key Metrics</h3>
+                    {metrics.map(metric => (
+                        <div
+                            key={metric.name}
+                            className="p-2 mb-2 bg-gray-100 dark:bg-gray-700 rounded cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                            onClick={() => handleMetricClick(metric.name)}
+                        >
+                            <div className="flex justify-between items-center">
+                                <span>{metric.name}</span>
+                                <span className="font-bold">{metric.value}</span>
+                            </div>
+                            <div className="flex justify-between items-center mt-1">
+                <span className="flex items-center">
+                  {getTrendIcon(metric.trend)}
+                    <span className="ml-1 text-sm">{metric.trend}</span>
+                </span>
+                                <span className={`text-sm ${getImpactColor(metric.impact)}`}>
+                  Impact: {metric.impact}
+                </span>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+                <div>
+                    <h3 className="font-bold mb-2">Data Sources</h3>
+                    {dataSources.map(source => (
+                        <div key={source.name} className="p-2 mb-2 bg-gray-100 dark:bg-gray-700 rounded">
+                            <div className="flex justify-between items-center">
+                                <span>{source.name}</span>
+                                <span className="text-sm">Reliability: {(source.reliability * 100).toFixed(0)}%</span>
+                            </div>
+                            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-600 mt-1">
+                                <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: `${source.reliability * 100}%` }}></div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            {selectedMetric && (
+                <div>
+                    <h3 className="font-bold mb-2">Historical Data: {selectedMetric}</h3>
+                    <ResponsiveContainer width="100%" height={300}>
+                        <BarChart data={historicalData}>
+                            <CartesianGrid strokeDasharray="3 3" />
+                            <XAxis dataKey="month" />
+                            <YAxis />
+                            <Tooltip />
+                            <Legend />
+                            <Bar dataKey={selectedMetric} fill="#8884d8" />
+                        </BarChart>
+                    </ResponsiveContainer>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default ImpactTrackerVisualizer;
\ No newline at end of file
diff --git a/components/landing-page/ResearchEffortCataloger.tsx b/components/landing-page/ResearchEffortCataloger.tsx
new file mode 100644
index 00000000..9a1ee499
--- /dev/null
+++ b/components/landing-page/ResearchEffortCataloger.tsx
@@ -0,0 +1,94 @@
+"use client"
+import React, { useState, useEffect } from 'react';
+import { Search, Link, Users, AlertCircle, CheckCircle } from 'lucide-react';
+
+interface ResearchEffort {
+    id: string;
+    title: string;
+    organization: string;
+    relevance: number;
+    status: 'ongoing' | 'completed';
+    collaborationPotential: 'high' | 'medium' | 'low';
+}
+
+const ResearchEffortCataloger: React.FC = () => {
+    const [researchEfforts, setResearchEfforts] = useState<ResearchEffort[]>([]);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [scanning, setScanning] = useState(false);
+
+    useEffect(() => {
+        // Simulated initial data
+        const initialEfforts: ResearchEffort[] = [
+            { id: 'e1', title: 'AI-driven drug candidate screening', organization: 'Pharma Co', relevance: 0.9, status: 'ongoing', collaborationPotential: 'high' },
+            { id: 'e2', title: 'Machine learning for protein folding', organization: 'BioTech Inc', relevance: 0.8, status: 'completed', collaborationPotential: 'medium' },
+            { id: 'e3', title: 'Natural language processing for medical literature analysis', organization: 'MedAI Labs', relevance: 0.7, status: 'ongoing', collaborationPotential: 'high' },
+        ];
+        setResearchEfforts(initialEfforts);
+    }, []);
+
+    const handleSearch = () => {
+        setScanning(true);
+        // Simulate AI agent scanning process
+        setTimeout(() => {
+            const newEffort: ResearchEffort = {
+                id: `e${researchEfforts.length + 1}`,
+                title: `New research on ${searchTerm}`,
+                organization: 'Recently Discovered Org',
+                relevance: Math.random() * 0.5 + 0.5, // Random relevance between 0.5 and 1
+                status: Math.random() > 0.5 ? 'ongoing' : 'completed',
+                collaborationPotential: ['low', 'medium', 'high'][Math.floor(Math.random() * 3)] as 'low' | 'medium' | 'high',
+            };
+            setResearchEfforts(prev => [...prev, newEffort]);
+            setScanning(false);
+        }, 2000);
+    };
+
+    return (
+        <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md max-w-4xl mx-auto my-8">
+            <h2 className="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">AI Research Effort Cataloger</h2>
+            <div className="mb-4 p-2 bg-blue-100 dark:bg-blue-900 rounded">
+                <h3 className="font-bold flex items-center"><Search size={16} className="mr-2" /> Continuous Research Scanning</h3>
+                <p className="text-sm">Our AI agents continuously scan and catalog existing research efforts to avoid duplication and identify collaboration opportunities.</p>
+            </div>
+            <div className="mb-4 flex">
+                <input
+                    type="text"
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    placeholder="Enter research topic..."
+                    className="flex-grow p-2 border rounded-l dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                />
+                <button
+                    onClick={handleSearch}
+                    disabled={scanning}
+                    className="p-2 bg-blue-500 text-white rounded-r hover:bg-blue-600 disabled:bg-blue-300"
+                >
+                    {scanning ? 'Scanning...' : 'Scan for Research'}
+                </button>
+            </div>
+            <div>
+                <h3 className="font-bold mb-2">Cataloged Research Efforts</h3>
+                {researchEfforts.map(effort => (
+                    <div key={effort.id} className="mb-4 p-3 bg-gray-100 dark:bg-gray-700 rounded">
+                        <div className="font-medium">{effort.title}</div>
+                        <div className="text-sm text-gray-600 dark:text-gray-400">{effort.organization}</div>
+                        <div className="mt-2 flex items-center">
+                            <Link size={16} className="mr-1" />
+                            <span className="text-sm mr-4">Relevance: {effort.relevance.toFixed(2)}</span>
+                            {effort.status === 'ongoing' ? (
+                                <AlertCircle size={16} className="mr-1 text-yellow-500" />
+                            ) : (
+                                <CheckCircle size={16} className="mr-1 text-green-500" />
+                            )}
+                            <span className="text-sm mr-4">Status: {effort.status}</span>
+                            <Users size={16} className="mr-1" />
+                            <span className="text-sm">Collaboration Potential: {effort.collaborationPotential}</span>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default ResearchEffortCataloger;
\ No newline at end of file
diff --git a/components/landing-page/TaskAllocationVisualizer.tsx b/components/landing-page/TaskAllocationVisualizer.tsx
new file mode 100644
index 00000000..f2e49d2a
--- /dev/null
+++ b/components/landing-page/TaskAllocationVisualizer.tsx
@@ -0,0 +1,114 @@
+"use client"
+import React, { useState, useEffect } from 'react';
+import { User, Bot, BrainCircuit } from 'lucide-react';
+
+interface Task {
+    id: string;
+    name: string;
+    skills: string[];
+}
+
+interface Agent {
+    id: string;
+    name: string;
+    type: 'human' | 'ai';
+    skills: string[];
+    experience: number;
+    interests: string[];
+}
+
+const TaskAllocationVisualizer: React.FC = () => {
+    const [tasks, setTasks] = useState<Task[]>([]);
+    const [agents, setAgents] = useState<Agent[]>([]);
+    const [allocations, setAllocations] = useState<Record<string, string>>({});
+    const [highlightedTask, setHighlightedTask] = useState<string | null>(null);
+
+    useEffect(() => {
+        // Simulated data
+        const sampleTasks: Task[] = [
+            { id: 't1', name: 'Design Database Schema', skills: ['Database Design', 'SQL'] },
+            { id: 't2', name: 'Develop ML Model', skills: ['Machine Learning', 'Python'] },
+            { id: 't3', name: 'Create UI Mockups', skills: ['UI/UX Design', 'Figma'] },
+            { id: 't4', name: 'Implement API', skills: ['Backend Development', 'REST API'] },
+        ];
+
+        const sampleAgents: Agent[] = [
+            { id: 'a1', name: 'Alice', type: 'human', skills: ['Database Design', 'SQL'], experience: 5, interests: ['Data Modeling'] },
+            { id: 'a2', name: 'Bob', type: 'human', skills: ['Machine Learning', 'Python'], experience: 3, interests: ['AI Research'] },
+            { id: 'a3', name: 'AI Assistant', type: 'ai', skills: ['UI/UX Design', 'Figma'], experience: 2, interests: ['Design Patterns'] },
+            { id: 'a4', name: 'Charlie', type: 'human', skills: ['Backend Development', 'REST API'], experience: 4, interests: ['System Architecture'] },
+        ];
+
+        setTasks(sampleTasks);
+        setAgents(sampleAgents);
+
+        // Simulate AI matching process
+        const matchedAllocations: Record<string, string> = {};
+        sampleTasks.forEach(task => {
+            const matchedAgent = sampleAgents.find(agent =>
+                agent.skills.some(skill => task.skills.includes(skill))
+            );
+            if (matchedAgent) {
+                matchedAllocations[task.id] = matchedAgent.id;
+            }
+        });
+        setAllocations(matchedAllocations);
+    }, []);
+
+    const handleTaskHover = (taskId: string | null) => {
+        setHighlightedTask(taskId);
+    };
+
+    return (
+        <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md max-w-4xl mx-auto my-8">
+            <h2 className="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Task Allocation Visualizer</h2>
+            <div className="mb-4 p-2 bg-blue-100 dark:bg-blue-900 rounded">
+                <h3 className="font-bold flex items-center"><BrainCircuit size={16} className="mr-2" /> AI-Powered Task Allocation</h3>
+                <p className="text-sm">Our AI system matches tasks with the most suitable people or AI agents based on their skills, experience, and interests.</p>
+            </div>
+            <div className="flex">
+                <div className="w-1/2 pr-2">
+                    <h3 className="font-bold mb-2">Tasks</h3>
+                    {tasks.map(task => (
+                        <div
+                            key={task.id}
+                            className={`p-2 mb-2 rounded ${highlightedTask === task.id ? 'bg-yellow-200 dark:bg-yellow-800' : 'bg-gray-100 dark:bg-gray-700'}`}
+                            onMouseEnter={() => handleTaskHover(task.id)}
+                            onMouseLeave={() => handleTaskHover(null)}
+                        >
+                            <div className="font-medium">{task.name}</div>
+                            <div className="text-sm text-gray-600 dark:text-gray-400">
+                                Skills: {task.skills.join(', ')}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+                <div className="w-1/2 pl-2">
+                    <h3 className="font-bold mb-2">Agents</h3>
+                    {agents.map(agent => (
+                        <div
+                            key={agent.id}
+                            className={`p-2 mb-2 rounded ${highlightedTask && allocations[highlightedTask] === agent.id ? 'bg-green-200 dark:bg-green-800' : 'bg-gray-100 dark:bg-gray-700'}`}
+                        >
+                            <div className="font-medium flex items-center">
+                                {agent.type === 'human' ? <User size={16} className="mr-1" /> : <Bot size={16} className="mr-1" />}
+                                {agent.name}
+                            </div>
+                            <div className="text-sm text-gray-600 dark:text-gray-400">
+                                Skills: {agent.skills.join(', ')}
+                            </div>
+                            <div className="text-sm text-gray-600 dark:text-gray-400">
+                                Experience: {agent.experience} years
+                            </div>
+                            <div className="text-sm text-gray-600 dark:text-gray-400">
+                                Interests: {agent.interests.join(', ')}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TaskAllocationVisualizer;
\ No newline at end of file
diff --git a/components/landing-page/TaskGalaxyVisualizerWithData.tsx b/components/landing-page/TaskGalaxyVisualizerWithData.tsx
new file mode 100644
index 00000000..91133ca5
--- /dev/null
+++ b/components/landing-page/TaskGalaxyVisualizerWithData.tsx
@@ -0,0 +1,284 @@
+"use client"
+import React, { useState } from 'react';
+import { ChevronDown, ChevronRight, Check, Clock, AlertTriangle, Plus, Users } from 'lucide-react';
+
+interface Task {
+    id: string;
+    task: string;
+    description?: string;
+    status: 'not-started' | 'in-progress' | 'completed' | 'blocked';
+    subtasks?: Task[];
+    dependencies?: string[];
+    skills?: string[];
+    decompositionNotes?: string;
+}
+
+interface TaskNodeProps {
+    task: Task;
+    level: number;
+    onStatusChange: (id: string, newStatus: Task['status']) => void;
+    onAddSubtask: (parentId: string) => void;
+    onUpdateTask: (updatedTask: Task) => void;
+}
+
+const TaskNode: React.FC<TaskNodeProps> = ({ task, level, onStatusChange, onAddSubtask, onUpdateTask }) => {
+    const [isExpanded, setIsExpanded] = useState(level < 2);
+    const [isEditing, setIsEditing] = useState(false);
+
+    const getStatusIcon = (status: Task['status']) => {
+        switch (status) {
+            case 'completed':
+                return <Check className="text-green-500 dark:text-green-400" />;
+            case 'in-progress':
+                return <Clock className="text-blue-500 dark:text-blue-400" />;
+            case 'blocked':
+                return <AlertTriangle className="text-red-500 dark:text-red-400" />;
+            default:
+                return <div className="w-4 h-4 rounded-full border border-gray-300 dark:border-gray-600"></div>;
+        }
+    };
+
+    const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        onStatusChange(task.id, e.target.value as Task['status']);
+    };
+
+    const handleEdit = () => {
+        setIsEditing(true);
+    };
+
+    const handleSave = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const updatedTask: Task = {
+            ...task,
+            task: formData.get('task') as string,
+            description: formData.get('description') as string,
+            skills: (formData.get('skills') as string).split(',').map(skill => skill.trim()),
+            dependencies: (formData.get('dependencies') as string).split(',').map(dep => dep.trim()),
+            decompositionNotes: formData.get('decompositionNotes') as string,
+        };
+        onUpdateTask(updatedTask);
+        setIsEditing(false);
+    };
+
+    return (
+        <div className="mb-4 p-2 border border-gray-200 dark:border-gray-700 rounded">
+            <div className="flex items-center">
+                <div style={{ width: `${level * 20}px` }} />
+                {task.subtasks && task.subtasks.length > 0 && (
+                    <button onClick={() => setIsExpanded(!isExpanded)} className="mr-2 focus:outline-none">
+                        {isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+                    </button>
+                )}
+                <div className="mr-2">{getStatusIcon(task.status)}</div>
+                <div className="flex-grow font-medium">{task.task}</div>
+                <select
+                    value={task.status}
+                    onChange={handleStatusChange}
+                    className="ml-2 p-1 text-sm border rounded bg-transparent dark:bg-gray-700 border-gray-300 dark:border-gray-600"
+                >
+                    <option value="not-started">Not Started</option>
+                    <option value="in-progress">In Progress</option>
+                    <option value="completed">Completed</option>
+                    <option value="blocked">Blocked</option>
+                </select>
+                <button onClick={handleEdit} className="ml-2 p-1 text-sm border rounded">Edit</button>
+                <button onClick={() => onAddSubtask(task.id)} className="ml-2 p-1 text-sm border rounded"><Plus size={16} /></button>
+            </div>
+            {isEditing ? (
+                <form onSubmit={handleSave} className="mt-2">
+                    <input name="task" defaultValue={task.task} className="w-full p-1 mb-2 border rounded" />
+                    <textarea name="description" defaultValue={task.description} className="w-full p-1 mb-2 border rounded" placeholder="Description" />
+                    <input name="skills" defaultValue={task.skills?.join(', ')} className="w-full p-1 mb-2 border rounded" placeholder="Required skills (comma-separated)" />
+                    <input name="dependencies" defaultValue={task.dependencies?.join(', ')} className="w-full p-1 mb-2 border rounded" placeholder="Dependencies (comma-separated)" />
+                    <textarea name="decompositionNotes" defaultValue={task.decompositionNotes} className="w-full p-1 mb-2 border rounded" placeholder="Decomposition notes" />
+                    <button type="submit" className="p-1 text-sm border rounded">Save</button>
+                </form>
+            ) : (
+                <>
+                    {task.description && <div className="mt-1 text-sm text-gray-600 dark:text-gray-400">{task.description}</div>}
+                    {task.skills && task.skills.length > 0 && (
+                        <div className="mt-1 text-sm">
+                            <strong>Skills:</strong> {task.skills.join(', ')}
+                        </div>
+                    )}
+                    {task.dependencies && task.dependencies.length > 0 && (
+                        <div className="mt-1 text-sm">
+                            <strong>Dependencies:</strong> {task.dependencies.join(', ')}
+                        </div>
+                    )}
+                    {task.decompositionNotes && (
+                        <div className="mt-1 text-sm">
+                            <strong>Decomposition Notes:</strong> {task.decompositionNotes}
+                        </div>
+                    )}
+                </>
+            )}
+            {isExpanded && task.subtasks && (
+                <div className="ml-6 mt-2">
+                    {task.subtasks.map((subtask) => (
+                        <TaskNode
+                            key={subtask.id}
+                            task={subtask}
+                            level={level + 1}
+                            onStatusChange={onStatusChange}
+                            onAddSubtask={onAddSubtask}
+                            onUpdateTask={onUpdateTask}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+const ActionableTaskStrategyVisualizer: React.FC = () => {
+    const [tasks, setTasks] = useState<Task>({
+        id: '1',
+        task: "Create AI Drug Discovery Platform",
+        status: 'in-progress',
+        description: "Develop a comprehensive platform for AI-driven drug discovery",
+        decompositionNotes: "Broken down by goal decomposition agents into main platform components",
+        subtasks: [
+            {
+                id: '1.1',
+                task: "Develop Platform Infrastructure",
+                status: 'in-progress',
+                skills: ["Cloud Architecture", "Database Design", "Security"],
+                decompositionNotes: "Further decomposed based on technical requirements and best practices",
+                subtasks: [
+                    {
+                        id: '1.1.1',
+                        task: "Design Data Storage",
+                        status: 'completed',
+                        description: "Create a scalable and secure data storage system",
+                        skills: ["Database Design", "Data Modeling"],
+                        dependencies: ["Technology Stack Decision"],
+                        decompositionNotes: "Broken down into specific database tasks by data architecture specialist",
+                        subtasks: [
+                            { id: '1.1.1.1', task: "Choose Technology", status: 'completed', skills: ["Database Comparison"] },
+                            { id: '1.1.1.2', task: "Design Schema", status: 'completed', skills: ["Data Modeling"] },
+                            { id: '1.1.1.3', task: "Set Up Security", status: 'completed', skills: ["Database Security"] },
+                            { id: '1.1.1.4', task: "Implement Backup", status: 'in-progress', skills: ["Disaster Recovery"] }
+                        ]
+                    },
+                    {
+                        id: '1.1.2',
+                        task: "Build Computation Infrastructure",
+                        status: 'in-progress',
+                        description: "Set up high-performance computing resources for AI model training",
+                        skills: ["Cloud Computing", "HPC"],
+                        dependencies: ["Data Storage Design"]
+                    }
+                ]
+            },
+            {
+                id: '1.2',
+                task: "Develop AI Models",
+                status: 'not-started',
+                description: "Create and train AI models for drug discovery",
+                skills: ["Machine Learning", "Bioinformatics"],
+                dependencies: ["Platform Infrastructure"],
+                decompositionNotes: "Tasks identified by AI research team and goal decomposition agents",
+                subtasks: [
+                    { id: '1.2.1', task: "Data Preprocessing", status: 'not-started', skills: ["Data Cleaning", "Feature Engineering"] },
+                    { id: '1.2.2', task: "Model Selection", status: 'not-started', skills: ["ML Algorithms"] },
+                    { id: '1.2.3', task: "Training Pipeline", status: 'not-started', skills: ["ML Ops"] },
+                    { id: '1.2.4', task: "Evaluation Metrics", status: 'not-started', skills: ["ML Evaluation"] }
+                ]
+            },
+            {
+                id: '1.3',
+                task: "Create User Interface",
+                status: 'blocked',
+                description: "Develop an intuitive user interface for the platform",
+                skills: ["UI/UX Design", "Frontend Development"],
+                dependencies: ["AI Models", "Platform Infrastructure"],
+                decompositionNotes: "Broken down into design and implementation tasks by UX team and goal decomposition agents",
+                subtasks: [
+                    { id: '1.3.1', task: "Design UX/UI", status: 'in-progress', skills: ["UI/UX Design"] },
+                    { id: '1.3.2', task: "Implement Frontend", status: 'blocked', skills: ["Frontend Development"], dependencies: ["Design UX/UI"] },
+                    { id: '1.3.3', task: "Integrate Backend", status: 'not-started', skills: ["Full-stack Development"], dependencies: ["Implement Frontend", "Platform Infrastructure"] }
+                ]
+            }
+        ]
+    });
+
+    const handleStatusChange = (id: string, newStatus: Task['status']) => {
+        const updateTaskStatus = (task: Task): Task => {
+            if (task.id === id) {
+                return { ...task, status: newStatus };
+            }
+            if (task.subtasks) {
+                return {
+                    ...task,
+                    subtasks: task.subtasks.map(updateTaskStatus)
+                };
+            }
+            return task;
+        };
+
+        setTasks(updateTaskStatus(tasks));
+    };
+
+    const handleAddSubtask = (parentId: string) => {
+        const addSubtask = (task: Task): Task => {
+            if (task.id === parentId) {
+                const newSubtask: Task = {
+                    id: `${task.id}.${(task.subtasks?.length ?? 0) + 1}`,
+                    task: "New Subtask",
+                    status: 'not-started',
+                };
+                return {
+                    ...task,
+                    subtasks: [...(task.subtasks ?? []), newSubtask]
+                };
+            }
+            if (task.subtasks) {
+                return {
+                    ...task,
+                    subtasks: task.subtasks.map(addSubtask)
+                };
+            }
+            return task;
+        };
+
+        setTasks(addSubtask(tasks));
+    };
+
+    const handleUpdateTask = (updatedTask: Task) => {
+        const updateTask = (task: Task): Task => {
+            if (task.id === updatedTask.id) {
+                return updatedTask;
+            }
+            if (task.subtasks) {
+                return {
+                    ...task,
+                    subtasks: task.subtasks.map(updateTask)
+                };
+            }
+            return task;
+        };
+
+        setTasks(updateTask(tasks));
+    };
+
+    return (
+        <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md max-w-4xl mx-auto my-8">
+            <h2 className="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">AI Drug Discovery Platform Strategy</h2>
+            <div className="mb-4 p-2 bg-blue-100 dark:bg-blue-900 rounded">
+                <h3 className="font-bold flex items-center"><Users size={16} className="mr-2" /> Goal Decomposition Agents</h3>
+                <p className="text-sm">These agents help break down chosen solutions into smaller, actionable tasks by identifying necessary steps, potential dependencies, and required skills for each task.</p>
+            </div>
+            <TaskNode
+                task={tasks}
+                level={0}
+                onStatusChange={handleStatusChange}
+                onAddSubtask={handleAddSubtask}
+                onUpdateTask={handleUpdateTask}
+            />
+        </div>
+    );
+};
+
+export default ActionableTaskStrategyVisualizer;
\ No newline at end of file
diff --git a/components/landing-page/three-orbit-controls.d.ts b/components/landing-page/three-orbit-controls.d.ts
new file mode 100644
index 00000000..911cc0e6
--- /dev/null
+++ b/components/landing-page/three-orbit-controls.d.ts
@@ -0,0 +1,40 @@
+declare module 'three/examples/jsm/controls/OrbitControls.js' {
+    import { Camera, MOUSE, TOUCH } from 'three';
+
+    export class OrbitControls {
+        constructor(object: Camera, domElement?: HTMLElement);
+
+        // Add any methods or properties you use from OrbitControls
+        update(): boolean;
+
+        // Add other properties as needed
+        enabled: boolean;
+        enableZoom: boolean;
+        zoomSpeed: number;
+        enableRotate: boolean;
+        rotateSpeed: number;
+        enablePan: boolean;
+        panSpeed: number;
+        minDistance: number;
+        maxDistance: number;
+        minPolarAngle: number;
+        maxPolarAngle: number;
+        minAzimuthAngle: number;
+        maxAzimuthAngle: number;
+        enableDamping: boolean;
+        dampingFactor: number;
+
+        // Mouse buttons
+        mouseButtons: {
+            LEFT?: MOUSE;
+            MIDDLE?: MOUSE;
+            RIGHT?: MOUSE;
+        };
+
+        // Touch fingers
+        touches: {
+            ONE?: TOUCH;
+            TWO?: TOUCH;
+        };
+    }
+}
\ No newline at end of file