import React, { useState } from 'react';
import { Check, Clock, FileText, Flag, Lightbulb, Video, ChevronDown } from 'lucide-react';
const AIEthicsWebsite = () => {
const [activeTab, setActiveTab] = useState('overview');
// Custom Accordion implementation
const Accordion = ({ children, className }) => {
return (
<div className={`w-full ${className}`}>
{children}
</div>
);
};
const AccordionItem = ({ children, value }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="border-b border-gray-200">
{React.Children.map(children, child => {
if (child.type === AccordionTrigger) {
return React.cloneElement(child, { isOpen, onClick: () => setIsOpen(!isOpen) });
}
if (child.type === AccordionContent) {
return React.cloneElement(child, { isOpen });
}
return child;
})}
</div>
);
};
const AccordionTrigger = ({ children, className, isOpen, onClick }) => {
return (
<div
className={`flex justify-between items-center p-4 cursor-pointer ${className}`}
onClick={onClick}
>
<h3 className="font-medium">{children}</h3>
<ChevronDown
size={16}
className={`transition-transform duration-200 ${isOpen ? 'transform rotate-180' : ''}`}
/>
</div>
);
};
const AccordionContent = ({ children, isOpen }) => {
if (!isOpen) return null;
return (
<div className="p-4 pt-0 pb-4 text-sm">
{children}
</div>
);
};
// Custom Tabs implementation
const Tabs = ({ children, value, onValueChange, className }) => {
return (
<div className={className}>
{React.Children.map(children, child => {
if (child.type === TabsList) {
return React.cloneElement(child, { activeTab: value, setActiveTab: onValueChange });
}
if (child.type === TabsContent) {
return React.cloneElement(child, { active: value === child.props.value });
}
return child;
})}
</div>
);
};
const TabsList = ({ children, activeTab, setActiveTab, className }) => {
return (
<div className={className}>
{React.Children.map(children, child => {
if (child.type === TabsTrigger) {
return React.cloneElement(child, {
active: activeTab === child.props.value,
onClick: () => setActiveTab(child.props.value)
});
}
return child;
})}
</div>
);
};
const TabsTrigger = ({ children, value, active, className, onClick }) => {
return (
<button
className={`${className} ${active ? 'bg-purple-100 text-purple-700' : 'bg-white text-gray-700'}`}
onClick={onClick}
>
{children}
</button>
);
};
const TabsContent = ({ children, value, active }) => {
if (!active) return null;
return <div>{children}</div>;
};
// Custom Card implementation
const Card = ({ children, className }) => {
return (
<div className={`bg-white rounded-lg border border-gray-200 overflow-hidden ${className || ''}`}>
{children}
</div>
);
};
const CardHeader = ({ children, className }) => {
return (
<div className={`p-6 ${className || ''}`}>
{children}
</div>
);
};
const CardTitle = ({ children, className }) => {
return (
<h2 className={`text-xl font-semibold ${className || ''}`}>
{children}
</h2>
);
};
const CardDescription = ({ children }) => {
return (
<p className="text-gray-500 mt-1">
{children}
</p>
);
};
const CardContent = ({ children, className }) => {
return (
<div className={`p-6 ${className || ''}`}>
{children}
</div>
);
};
const CardFooter = ({ children, className }) => {
return (
<div className={`p-6 pt-0 ${className || ''}`}>
{children}
</div>
);
};
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<header className="bg-purple-700 text-white p-6">
<div className="max-w-6xl mx-auto">
<h1 className="text-3xl font-bold">AI Ethics Digital Campaign</h1>
<p className="mt-2 text-purple-100">Year 7 Digital Technologies - Student Assessment</p>
</div>
</header>
{/* Main Navigation */}
<Tabs value={activeTab} onValueChange={setActiveTab} className="max-w-6xl mx-auto p-4">
<TabsList className="w-full flex justify-between bg-white border border-gray-200 p-1 rounded-lg">
<TabsTrigger value="overview" className="flex-1 py-3 rounded-md">Overview</TabsTrigger>
<TabsTrigger value="research" className="flex-1 py-3 rounded-md">Research</TabsTrigger>
<TabsTrigger value="design" className="flex-1 py-3 rounded-md">Design</TabsTrigger>
<TabsTrigger value="create" className="flex-1 py-3 rounded-md">Create</TabsTrigger>
<TabsTrigger value="resources" className="flex-1 py-3 rounded-md">Resources</TabsTrigger>
</TabsList>
{/* Overview Tab */}
<TabsContent value="overview" className="mt-6">
<div className="grid md:grid-cols-2 gap-6">
<Card>
<CardHeader className="bg-purple-50">
<CardTitle className="flex items-center gap-2">
<FileText size={20} />
Task Overview
</CardTitle>
</CardHeader>
<CardContent className="pt-6">
<p className="mb-4">The AI Ethics Digital Campaign is a 2-3 week unit where you will investigate real-world ethical issues related to artificial intelligence and create a digital campaign that explains these ethical challenges while suggesting responsible technology use.</p>
<h3 className="font-semibold text-lg mt-4 mb-2">Project Steps:</h3>
<ul className="space-y-2">
<li className="flex gap-2 items-start">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<Check size={16} className="text-purple-700" />
</div>
<span><strong>Research:</strong> Investigate an AI ethics issue of your choice</span>
</li>
<li className="flex gap-2 items-start">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<Check size={16} className="text-purple-700" />
</div>
<span><strong>Design:</strong> Plan your digital campaign with a storyboard</span>
</li>
<li className="flex gap-2 items-start">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<Check size={16} className="text-purple-700" />
</div>
<span><strong>Create:</strong> Build your campaign using digital tools like Canva or Adobe Express</span>
</li>
</ul>
<h3 className="font-semibold text-lg mt-6 mb-2">Learning Objectives:</h3>
<ul className="space-y-1">
<li>Investigate real-world ethical issues related to artificial intelligence</li>
<li>Design and create a digital campaign that explains AI ethical challenges</li>
<li>Develop proficiency with digital media tools</li>
<li>Demonstrate understanding of how social and ethical considerations impact digital systems</li>
<li>Apply critical thinking and ethical reasoning to technology-related problems</li>
<li>Show agency in learning through responsible research and design choices</li>
</ul>
</CardContent>
<CardFooter className="bg-gray-50 text-sm text-gray-600">
<Clock size={16} className="mr-2" /> Assessment Weighting: Summative 20%
</CardFooter>
</Card>
<Card>
<CardHeader className="bg-purple-50">
<CardTitle className="flex items-center gap-2">
<Lightbulb size={20} />
Topic Ideas
</CardTitle>
</CardHeader>
<CardContent className="pt-6">
<p className="mb-4">Choose one of these AI ethics topics or propose your own:</p>
<div className="space-y-4">
<div className="border border-gray-200 rounded-lg p-4">
<h3 className="font-semibold text-purple-700">Bias in Facial Recognition Technology</h3>
<p className="text-sm mt-1">Explore how AI facial recognition systems can have biases against certain groups of people.</p>
</div>
<div className="border border-gray-200 rounded-lg p-4">
<h3 className="font-semibold text-purple-700">Data Privacy on Social Media Platforms</h3>
<p className="text-sm mt-1">Investigate how AI uses our personal data and the privacy concerns this raises.</p>
</div>
<div className="border border-gray-200 rounded-lg p-4">
<h3 className="font-semibold text-purple-700">The Role of AI in Automated Decision-Making</h3>
<p className="text-sm mt-1">Examine how AI is used to make important decisions and the ethical considerations involved.</p>
</div>
<div className="border border-gray-200 rounded-lg p-4">
<h3 className="font-semibold text-purple-700">Misinformation and AI-Generated Content</h3>
<p className="text-sm mt-1">Consider the implications of AI creating content that may be indistinguishable from human-created content.</p>
</div>
<div className="border border-gray-200 rounded-lg p-4">
<h3 className="font-semibold text-purple-700">Environmental Impact of Large AI Systems</h3>
<p className="text-sm mt-1">Research the energy usage and environmental footprint of training and running large AI models.</p>
</div>
</div>
</CardContent>
</Card>
<Card className="md:col-span-2">
<CardHeader className="bg-purple-50">
<CardTitle className="flex items-center gap-2">
<Flag size={20} />
Assessment Focus
</CardTitle>
</CardHeader>
<CardContent className="pt-6">
<div className="grid md:grid-cols-2 gap-6">
<div>
<h3 className="font-semibold text-lg mb-3">Core Assessment Criteria:</h3>
<ul className="space-y-3">
<li className="flex gap-2">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<Check size={16} className="text-purple-700" />
</div>
<div>
<strong>Ethics & AI Impact</strong>
<p className="text-sm text-gray-600">Analysing how social, ethical, and sustainability considerations impact AI systems</p>
</div>
</li>
<li className="flex gap-2">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<Check size={16} className="text-purple-700" />
</div>
<div>
<strong>Using Digital Tools</strong>
<p className="text-sm text-gray-600">Selecting and using digital tools efficiently to create and communicate content</p>
</div>
</li>
</ul>
</div>
<div>
<h3 className="font-semibold text-lg mb-3">Optional Assessment Criteria (choose 2):</h3>
<ul className="space-y-3">
<li className="flex gap-2">
<div className="bg-gray-100 p-1 rounded-full mt-1">
<Check size={16} className="text-gray-500" />
</div>
<div>
<strong>Data Transmission & Security</strong>
<p className="text-sm text-gray-600">Explaining how data is transmitted and secured in networks</p>
</div>
</li>
<li className="flex gap-2">
<div className="bg-gray-100 p-1 rounded-full mt-1">
<Check size={16} className="text-gray-500" />
</div>
<div>
<strong>Data Validation</strong>
<p className="text-sm text-gray-600">Acquiring, storing, and validating data from a range of sources</p>
</div>
</li>
<li className="flex gap-2">
<div className="bg-gray-100 p-1 rounded-full mt-1">
<Check size={16} className="text-gray-500" />
</div>
<div>
<strong>Defining & Decomposing Problems</strong>
<p className="text-sm text-gray-600">Breaking down an AI issue into clear components</p>
</div>
</li>
<li className="flex gap-2">
<div className="bg-gray-100 p-1 rounded-full mt-1">
<Check size={16} className="text-gray-500" />
</div>
<div>
<strong>Developing Digital Solutions</strong>
<p className="text-sm text-gray-600">Creating an engaging, user-friendly digital campaign</p>
</div>
</li>
<li className="flex gap-2">
<div className="bg-gray-100 p-1 rounded-full mt-1">
<Check size={16} className="text-gray-500" />
</div>
<div>
<strong>Digital Footprints & Ethical Responsibilities</strong>
<p className="text-sm text-gray-600">Investigating ethical responsibilities in online environments</p>
</div>
</li>
</ul>
</div>
<div className="md:col-span-2 mt-2">
<h3 className="font-semibold text-lg mb-3">Required Capabilities:</h3>
<div className="flex gap-4">
<div className="bg-purple-50 rounded-lg p-3 flex-1">
<h4 className="font-semibold text-purple-700">Agency in Learning</h4>
<p className="text-sm mt-1">Taking responsibility for your learning choices and decisions</p>
</div>
<div className="bg-purple-50 rounded-lg p-3 flex-1">
<h4 className="font-semibold text-purple-700">Acting Ethically</h4>
<p className="text-sm mt-1">Making ethical choices in research and content creation</p>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</TabsContent>
{/* Research Tab */}
<TabsContent value="research" className="mt-6">
<Card>
<CardHeader className="bg-purple-50">
<CardTitle>Research Your AI Ethics Topic</CardTitle>
<CardDescription>Investigating real-world AI ethics issues</CardDescription>
</CardHeader>
<CardContent className="pt-6">
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold mb-2">Key Focus:</h3>
<ul className="list-disc pl-6 space-y-1">
<li>Understand key ethical challenges in AI technology</li>
<li>Learn to evaluate sources for reliability and bias</li>
<li>Identify real-world examples of AI ethics issues</li>
<li>Develop critical thinking about technology impacts</li>
</ul>
</div>
<div className="bg-yellow-50 border-l-4 border-yellow-500 p-4">
<h3 className="font-semibold flex items-center"><Clock className="mr-2" size={18} /> Task: Research Summary</h3>
<p className="mt-2">Create a research summary that includes:</p>
<ul className="list-disc pl-6 mt-2 space-y-1">
<li>Your chosen AI ethics topic and why it matters</li>
<li>3+ real-world examples or case studies</li>
<li>Key ethical concerns and stakeholders affected</li>
<li>Potential solutions or approaches to address the issues</li>
<li>List of sources with brief evaluation of their reliability</li>
</ul>
</div>
<Accordion className="w-full">
<AccordionItem value="researchguide">
<AccordionTrigger className="text-purple-700">Research Guide</AccordionTrigger>
<AccordionContent>
<div className="space-y-4">
<div>
<h4 className="font-semibold">Step 1: Choose your topic</h4>
<p className="text-sm">Select one area of AI ethics that interests you from the suggested topics or propose your own.</p>
</div>
<div>
<h4 className="font-semibold">Step 2: Find reliable sources</h4>
<p className="text-sm">Use at least 3 different sources. Consider news articles, educational websites, and videos from reputable organizations.</p>
</div>
<div>
<h4 className="font-semibold">Step 3: Evaluate your sources</h4>
<ul className="list-disc pl-6 text-sm space-y-1">
<li>Who created this information? Are they experts?</li>
<li>When was it published? Is it current?</li>
<li>Why was this created? Is there potential bias?</li>
<li>Is evidence provided for claims made?</li>
</ul>
</div>
<div>
<h4 className="font-semibold">Step 4: Organize your findings</h4>
<p className="text-sm">Create a structured document with clear sections for each part of your research. Include proper citations for all sources.</p>
</div>
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem value="assessmenttips">
<AccordionTrigger className="text-purple-700">Assessment Tips</AccordionTrigger>
<AccordionContent>
<div className="space-y-4">
<p>Your research will be assessed on:</p>
<ul className="list-disc pl-6 space-y-2">
<li>
<strong>Ethics & AI Impact (Required - AC9TDI8K02)</strong>
<p className="text-sm">Show deep understanding of ethical issues and their real-world consequences. An "A" standard demonstrates deep insight into AI ethics, clearly explains consequences and trade-offs, and proposes well-reasoned solutions.</p>
</li>
<li>
<strong>Data Validation (Optional - AC9TDI8P01)</strong>
<p className="text-sm">Demonstrate critical evaluation of sources, acknowledging potential biases. An "A" standard uses high-quality, diverse sources, evaluates reliability, and acknowledges potential bias.</p>
</li>
<li>
<strong>Data Security (Optional - AC9TDI8K01)</strong>
<p className="text-sm">If relevant to your topic, explain security considerations in AI systems. An "A" standard clearly explains data flow & security risks in AI systems, with strong real-world examples.</p>
</li>
</ul>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
</CardContent>
</Card>
</TabsContent>
{/* Design Tab */}
<TabsContent value="design" className="mt-6">
<Card>
<CardHeader className="bg-purple-50">
<CardTitle>Design Your Digital Campaign</CardTitle>
<CardDescription>Planning and storyboarding your project</CardDescription>
</CardHeader>
<CardContent className="pt-6">
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold mb-2">Key Focus:</h3>
<ul className="list-disc pl-6 space-y-1">
<li>Break down complex ethical issues into clear messages</li>
<li>Learn principles of effective visual communication</li>
<li>Plan digital content that engages your audience</li>
<li>Select appropriate digital tools for your campaign</li>
</ul>
</div>
<div className="bg-yellow-50 border-l-4 border-yellow-500 p-4">
<h3 className="font-semibold flex items-center"><Clock className="mr-2" size={18} /> Task: Campaign Plan</h3>
<p className="mt-2">Create a detailed plan for your digital campaign that includes:</p>
<ul className="list-disc pl-6 mt-2 space-y-1">
<li>Target audience and key messages</li>
<li>Digital format selection (poster, video, infographic, etc.)</li>
<li>Visual sketches or storyboard of your campaign</li>
<li>List of digital tools you'll use and why</li>
<li>Timeline for completing your project</li>
</ul>
</div>
<Accordion className="w-full">
<AccordionItem value="designguide">
<AccordionTrigger className="text-purple-700">Design Guide</AccordionTrigger>
<AccordionContent>
<div className="space-y-4">
<div>
<h4 className="font-semibold">Step 1: Identify your audience</h4>
<p className="text-sm">Who needs to understand this AI ethics issue? Consider age, background knowledge, and interests.</p>
</div>
<div>
<h4 className="font-semibold">Step 2: Choose your format</h4>
<div className="grid grid-cols-3 gap-2 text-sm mt-2">
<div className="border p-2 rounded">
<strong>Digital Poster</strong>
<p className="text-xs">Best for: Simple, visual messages</p>
</div>
<div className="border p-2 rounded">
<strong>Short Video (2-3 min)</strong>
<p className="text-xs">Best for: Explaining complex issues</p>
</div>
<div className="border p-2 rounded">
<strong>Interactive Infographic</strong>
<p className="text-xs">Best for: Data and statistics</p>
</div>
</div>
</div>
<div>
<h4 className="font-semibold">Step 3: Create a storyboard</h4>
<p className="text-sm">Sketch out your ideas. For videos, draw key scenes. For posters/infographics, outline the layout and content sections.</p>
</div>
<div>
<h4 className="font-semibold">Step 4: Plan your tools</h4>
<ul className="list-disc pl-6 text-sm">
<li>Canva - Easy drag-and-drop design</li>
<li>Adobe Express - Advanced graphics and video</li>
</ul>
</div>
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem value="designtips">
<AccordionTrigger className="text-purple-700">Design Tips</AccordionTrigger>
<AccordionContent>
<div className="space-y-3">
<div>
<h4 className="font-semibold">Visual Hierarchy</h4>
<p className="text-sm">Guide your audience's attention using size, color, and placement. Most important information should stand out.</p>
</div>
<div>
<h4 className="font-semibold">Color Psychology</h4>
<p className="text-sm">Colors create emotional responses. Choose colors that match your message (e.g., blue for trust, red for urgency).</p>
</div>
<div>
<h4 className="font-semibold">Typography</h4>
<p className="text-sm">Use 2-3 font styles maximum. Ensure text is readable. Headings should be larger than body text.</p>
</div>
<div>
<h4 className="font-semibold">White Space</h4>
<p className="text-sm">Don't overcrowd your design. Empty space helps viewers focus on important elements.</p>
</div>
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem value="assessmenttips2">
<AccordionTrigger className="text-purple-700">Assessment Tips</AccordionTrigger>
<AccordionContent>
<div className="space-y-4">
<p>Your campaign plan will be assessed on:</p>
<ul className="list-disc pl-6 space-y-2">
<li>
<strong>Defining & Decomposing Problems (Optional - AC9TDI8P04)</strong>
<p className="text-sm">Show how you've broken down the complex AI ethics issue into clear components for your audience. An "A" standard clearly defines the issue, breaks it into key elements, and explores solutions in depth.</p>
</li>
<li>
<strong>Developing Digital Solutions (Optional - AC9TDI8P06)</strong>
<p className="text-sm">Demonstrate thoughtful planning for an engaging, user-friendly digital campaign. An "A" standard creates a highly engaging, well-structured, and visually appealing campaign using strong multimedia design principles.</p>
</li>
</ul>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
</CardContent>
</Card>
</TabsContent>
{/* Create Tab */}
<TabsContent value="create" className="mt-6">
<Card>
<CardHeader className="bg-purple-50">
<CardTitle>Create Your Digital Campaign</CardTitle>
<CardDescription>Building your final product</CardDescription>
</CardHeader>
<CardContent className="pt-6">
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold mb-2">Key Focus:</h3>
<ul className="list-disc pl-6 space-y-1">
<li>Develop skills with digital media tools</li>
<li>Apply design principles to communicate effectively</li>
<li>Create engaging content about ethical issues</li>
<li>Demonstrate ethical thinking in your final product</li>
</ul>
</div>
<div className="bg-yellow-50 border-l-4 border-yellow-500 p-4">
<h3 className="font-semibold flex items-center"><Clock className="mr-2" size={18} /> Task: Final Digital Campaign</h3>
<p className="mt-2">Create your digital campaign that includes:</p>
<ul className="list-disc pl-6 mt-2 space-y-1">
<li>The completed digital campaign (poster, video, or infographic)</li>
<li>Clear explanation of ethical challenges related to your AI topic</li>
<li>Suggestions for responsible technology use</li>
<li>Visual elements that engage your audience</li>
<li>Proper citation of all research sources</li>
</ul>
</div>
<Accordion className="w-full">
<AccordionItem value="toolguides">
<AccordionTrigger className="text-purple-700">Digital Tool Guides</AccordionTrigger>
<AccordionContent>
<div className="space-y-4">
<div className="border rounded p-3">
<h4 className="font-semibold">Canva</h4>
<p className="text-sm mb-2">Easy-to-use design tool with templates for posters and infographics.</p>
<div className="flex items-center gap-2">
<Video size={16} className="text-purple-700" />
<a href="https://www.youtube.com/watch?v=zJSgUx5K6V0" target="_blank" rel="noopener noreferrer" className="text-sm text-purple-700 underline">Watch Tutorial</a>
</div>
</div>
<div className="border rounded p-3">
<h4 className="font-semibold">Adobe Express</h4>
<p className="text-sm mb-2">Advanced design tool with video editing capabilities.</p>
<div className="flex items-center gap-2">
<Video size={16} className="text-purple-700" />
<a href="https://www.youtube.com/watch?v=ZD7b8OzB_04" target="_blank" rel="noopener noreferrer" className="text-sm text-purple-700 underline">Watch Tutorial</a>
</div>
</div>
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem value="assessmenttips3">
<AccordionTrigger className="text-purple-700">Assessment Tips</AccordionTrigger>
<AccordionContent>
<div className="space-y-4">
<p>Your final campaign will be assessed on:</p>
<ul className="list-disc pl-6 space-y-2">
<li>
<strong>Using Digital Tools (Required - AC9TDI8P11)</strong>
<p className="text-sm">Demonstrate efficient and effective use of digital tools to create professional content. An "A" standard uses advanced features of Canva/Adobe Express and creates a highly professional campaign with strong design and messaging.</p>
</li>
<li>
<strong>Ethics & AI Impact (Required - AC9TDI8K02)</strong>
<p className="text-sm">Show deep understanding of ethical issues and promote responsible solutions. An "A" standard demonstrates deep insight into AI ethics, clearly explains consequences and trade-offs, and proposes well-reasoned solutions.</p>
</li>
<li>
<strong>Digital Footprints & Ethical Responsibilities (Optional - AC9TDI8P14)</strong>
<p className="text-sm">Address ethical responsibilities in digital environments. An "A" standard clearly explains digital footprint risks and includes strong recommendations for responsible use.</p>
</li>
</ul>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
</CardContent>
</Card>
</TabsContent>
{/* Resources Tab */}
<TabsContent value="resources" className="mt-6">
<Card>
<CardHeader className="bg-purple-50">
<CardTitle>Resources & Support</CardTitle>
<CardDescription>Helpful materials for your project</CardDescription>
</CardHeader>
<CardContent className="pt-6">
<div className="grid md:grid-cols-2 gap-6">
<div className="space-y-4">
<h3 className="text-lg font-semibold">Research Resources</h3>
<div className="border rounded p-4">
<h4 className="font-semibold text-purple-700">AI Ethics Articles</h4>
<p className="text-sm mt-1 mb-2">Age-appropriate articles about AI ethics issues.</p>
<ul className="text-sm space-y-2">
<li className="flex items-start gap-2">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<FileText size={12} className="text-purple-700" />
</div>
<a href="http://industry.gov.au/science-technology-and-innovation/technology/artificial-intelligence" target="_blank" rel="noopener noreferrer" className="text-purple-700 underline">Dept of Science, Industry & Resources</a>
</li>
<li className="flex items-start gap-2">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<FileText size={12} className="text-purple-700" />
</div>
<a href="https://www.abc.net.au/education/students-and-their-teachers-must-understand-the-basics-of-ai/104872924" target="_blank" rel="noopener noreferrer" className="text-purple-700 underline">ABC Education</a>
</li>
<li className="flex items-start gap-2">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<FileText size={12} className="text-purple-700" />
</div>
<a href="https://www.csiro.au/en/education/About-CSIRO-Education/Stories-and-Announcements/Day-of-AI-Australia/Responsible-AI" target="_blank" rel="noopener noreferrer" className="text-purple-700 underline">CSIRO: Responsible AI</a>
</li>
</ul>
</div>
<div className="border rounded p-4">
<h4 className="font-semibold text-purple-700">Video Resources</h4>
<p className="text-sm mt-1 mb-2">Short videos explaining AI ethics concepts.</p>
<ul className="text-sm space-y-2">
<li className="flex items-start gap-2">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<Video size={12} className="text-purple-700" />
</div>
<a href="https://www.youtube.com/watch?v=RmRz9yQ-W00" target="_blank" rel="noopener noreferrer" className="text-purple-700 underline">What is AI Bias? (4 min)</a>
</li>
<li className="flex items-start gap-2">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<Video size={12} className="text-purple-700" />
</div>
<a href="https://www.youtube.com/watch?v=5ilNhIiUXZE" target="_blank" rel="noopener noreferrer" className="text-purple-700 underline">Data Privacy Explained (5 min)</a>
</li>
<li className="flex items-start gap-2">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<Video size={12} className="text-purple-700" />
</div>
<a href="https://www.youtube.com/watch?v=NKVjGvhCK9U" target="_blank" rel="noopener noreferrer" className="text-purple-700 underline">How AI Makes Decisions (3 min)</a>
</li>
</ul>
</div>
<div className="border rounded p-4">
<h4 className="font-semibold text-purple-700">Assessment Rubric</h4>
<p className="text-sm mt-1 mb-2">Download the full assessment rubric and criteria.</p>
<div className="mt-3">
<a href="#" target="_blank" rel="noopener noreferrer" className="text-sm bg-purple-700 text-white px-4 py-2 rounded inline-block">Download Rubric</a>
</div>
</div>
</div>
<div className="space-y-4">
<h3 className="text-lg font-semibold">Design Resources</h3>
<div className="border rounded p-4">
<h4 className="font-semibold text-purple-700">Design Tutorials</h4>
<p className="text-sm mt-1 mb-2">Learn how to use digital design tools.</p>
<ul className="text-sm space-y-2">
<li className="flex items-start gap-2">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<Video size={12} className="text-purple-700" />
</div>
<a href="https://www.youtube.com/watch?v=un50Bs4Bz-s" target="_blank" rel="noopener noreferrer" className="text-purple-700 underline">Canva Basics (10 min)</a>
</li>
<li className="flex items-start gap-2">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<Video size={12} className="text-purple-700" />
</div>
<a href="https://www.youtube.com/watch?v=ZD7b8OzB_04" target="_blank" rel="noopener noreferrer" className="text-purple-700 underline">Adobe Express for Beginners (12 min)</a>
</li>
<li className="flex items-start gap-2">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<Video size={12} className="text-purple-700" />
</div>
<a href="https://www.youtube.com/watch?v=ineO1tIyPfM" target="_blank" rel="noopener noreferrer" className="text-purple-700 underline">Creating Infographics (8 min)</a>
</li>
</ul>
</div>
<div className="border rounded p-4">
<h4 className="font-semibold text-purple-700">Templates & Examples</h4>
<p className="text-sm mt-1 mb-2">Starting points for your digital campaign.</p>
<ul className="text-sm space-y-2">
<li className="flex items-start gap-2">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<FileText size={12} className="text-purple-700" />
</div>
<a href="https://www.canva.com/posters/templates/" target="_blank" rel="noopener noreferrer" className="text-purple-700 underline">Poster Templates</a>
</li>
<li className="flex items-start gap-2">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<FileText size={12} className="text-purple-700" />
</div>
<a href="https://www.canva.com/graphs/infographics/" target="_blank" rel="noopener noreferrer" className="text-purple-700 underline">Infographic Templates</a>
</li>
<li className="flex items-start gap-2">
<div className="bg-purple-100 p-1 rounded-full mt-1">
<FileText size={12} className="text-purple-700" />
</div>
<a href="#" target="_blank" rel="noopener noreferrer" className="text-purple-700 underline">Example Student Projects</a>
</li>
</ul>
</div>
<div className="border rounded p-4 bg-purple-50">
<h4 className="font-semibold text-purple-700">Need Help?</h4>
<p className="text-sm mt-1">Ask a question or schedule time with your teacher.</p>
<div className="mt-3">
<a href="#" target="_blank" rel="noopener noreferrer" className="text-sm bg-purple-700 text-white px-4 py-2 rounded inline-block">Ask for Help</a>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</div>
);
};
export default AIEthicsWebsite;