fix: add lesson 3
This commit is contained in:
Tim Rijkse
@@ -0,0 +1,85 @@
|
||||
import { Zap, Shield, Rocket } from "lucide-react"
|
||||
|
||||
interface Feature {
|
||||
icon: React.ReactNode;
|
||||
titel: string;
|
||||
beschrijving: string;
|
||||
}
|
||||
|
||||
const features: Feature[] = [
|
||||
{
|
||||
icon: <Zap size={32} />,
|
||||
titel: "Supersnel",
|
||||
beschrijving: "Bouw componenten in seconden met AI-powered code generation."
|
||||
},
|
||||
{
|
||||
icon: <Shield size={32} />,
|
||||
titel: "Betrouwbaar",
|
||||
beschrijving: "TypeScript en ESLint zorgen voor foutloze, veilige code."
|
||||
},
|
||||
{
|
||||
icon: <Rocket size={32} />,
|
||||
titel: "Deploy Direct",
|
||||
beschrijving: "Push naar GitHub en je site is live op Vercel binnen minuten."
|
||||
}
|
||||
];
|
||||
|
||||
export default function FeatureCards() {
|
||||
return (
|
||||
<section style={{
|
||||
padding: '60px 20px',
|
||||
backgroundColor: '#f9fafb',
|
||||
}}>
|
||||
<div style={{
|
||||
maxWidth: '1000px',
|
||||
margin: '0 auto'
|
||||
}}>
|
||||
<h2 style={{
|
||||
fontSize: '32px',
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'center',
|
||||
marginBottom: '40px',
|
||||
color: '#1a1a1a'
|
||||
}}>Waarom Dit Project?</h2>
|
||||
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
gap: '24px'
|
||||
}}>
|
||||
{features.map((feature, index) => (
|
||||
<div key={index} style={{
|
||||
backgroundColor: 'white',
|
||||
padding: '32px',
|
||||
borderRadius: '16px',
|
||||
border: '1px solid #e5e7eb',
|
||||
textAlign: 'center',
|
||||
boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'inline-flex',
|
||||
padding: '12px',
|
||||
backgroundColor: '#ede9fe',
|
||||
borderRadius: '12px',
|
||||
marginBottom: '16px',
|
||||
color: '#7c3aed'
|
||||
}}>
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h3 style={{
|
||||
fontSize: '20px',
|
||||
fontWeight: '600',
|
||||
marginBottom: '8px',
|
||||
color: '#1a1a1a'
|
||||
}}>{feature.titel}</h3>
|
||||
<p style={{
|
||||
color: '#6b7280',
|
||||
lineHeight: '1.6'
|
||||
}}>{feature.beschrijving}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import Link from "next/link"
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer style={{
|
||||
backgroundColor: '#1f2937',
|
||||
color: 'white',
|
||||
padding: '40px 20px',
|
||||
marginTop: '60px'
|
||||
}}>
|
||||
<div style={{
|
||||
maxWidth: '1000px',
|
||||
margin: '0 auto',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
flexWrap: 'wrap',
|
||||
gap: '32px'
|
||||
}}>
|
||||
<div>
|
||||
<h3 style={{
|
||||
fontSize: '18px',
|
||||
fontWeight: '600',
|
||||
marginBottom: '12px'
|
||||
}}>🚀 Debug Challenge</h3>
|
||||
<p style={{
|
||||
color: '#9ca3af',
|
||||
maxWidth: '300px',
|
||||
lineHeight: '1.6',
|
||||
fontSize: '14px'
|
||||
}}>
|
||||
Een project van NOVI Hogeschool om te leren
|
||||
debuggen met Cursor AI.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style={{
|
||||
fontSize: '18px',
|
||||
fontWeight: '600',
|
||||
marginBottom: '12px'
|
||||
}}>Links</h3>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '8px'
|
||||
}}>
|
||||
<Link href="/" style={{ color: '#9ca3af', textDecoration: 'none', fontSize: '14px' }}>Home</Link>
|
||||
<Link href="/about" style={{ color: '#9ca3af', textDecoration: 'none', fontSize: '14px' }}>Over Ons</Link>
|
||||
<Link href="/contact" style={{ color: '#9ca3af', textDecoration: 'none', fontSize: '14px' }}>Contact</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style={{
|
||||
fontSize: '18px',
|
||||
fontWeight: '600',
|
||||
marginBottom: '12px'
|
||||
}}>NOVI Hogeschool</h3>
|
||||
<p style={{
|
||||
color: '#9ca3af',
|
||||
fontSize: '14px',
|
||||
lineHeight: '1.6'
|
||||
}}>
|
||||
AI Development Cursus<br/>
|
||||
Utrecht, Nederland
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
borderTop: '1px solid #374151',
|
||||
marginTop: '32px',
|
||||
paddingTop: '20px',
|
||||
textAlign: 'center',
|
||||
color: '#6b7280',
|
||||
fontSize: '13px'
|
||||
}}>
|
||||
© 2025 Debug Challenge — Les 3 Huiswerk
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
53
Les03-Cursor-Basics/les3-debug-challenge/components/Hero.tsx
Normal file
53
Les03-Cursor-Basics/les3-debug-challenge/components/Hero.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
padding: '80px 20px',
|
||||
textAlign: 'center',
|
||||
color: 'white',
|
||||
minHeight: '500px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<div style={{
|
||||
maxWidth: '700px'
|
||||
}}>
|
||||
<h1 style={{
|
||||
fontSize: '48px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '16px',
|
||||
lineHeight: '1.2'
|
||||
}}>
|
||||
Bouw Sneller met AI
|
||||
</h1>
|
||||
<p style={{
|
||||
fontSize: '20px',
|
||||
marginBottom: '32px',
|
||||
opacity: '0.9',
|
||||
lineHeight: '1.6'
|
||||
}}>
|
||||
Ontdek hoe je met Cursor en Next.js in minuten een professionele
|
||||
website bouwt. Van idee tot deployment in no-time.
|
||||
</p>
|
||||
<Link href="/about" style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
backgroundColor: 'white',
|
||||
color: '#764ba2',
|
||||
padding: '14px 28px',
|
||||
borderRadius: '9999px',
|
||||
fontWeight: '600',
|
||||
fontSize: '16px',
|
||||
textDecoration: 'none'
|
||||
}}>
|
||||
Meer Weten <ArrowRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Navbar() {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<nav style={{
|
||||
backgroundColor: 'white',
|
||||
borderBottom: '1px solid #e5e7eb',
|
||||
padding: '0 20px',
|
||||
position: 'sticky',
|
||||
top: '0',
|
||||
zIndex: '50'
|
||||
}}>
|
||||
<div style={{
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
height: '64px'
|
||||
}}>
|
||||
<Link href="/" style={{
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
color: '#7c3aed',
|
||||
textDecoration: 'none'
|
||||
}}>
|
||||
🚀 Debug Challenge
|
||||
</Link>
|
||||
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
gap: '24px',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<Link href="/" style={{
|
||||
color: '#4b5563',
|
||||
textDecoration: 'none',
|
||||
fontWeight: '500'
|
||||
}}>Home</Link>
|
||||
<Link href="/about" style={{
|
||||
color: '#4b5563',
|
||||
textDecoration: 'none',
|
||||
fontWeight: '500'
|
||||
}}>Over Ons</Link>
|
||||
<Link href="/contact" style={{
|
||||
color: '#4b5563',
|
||||
textDecoration: 'none',
|
||||
fontWeight: '500'
|
||||
}}>Contact</Link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
const testimonials = [
|
||||
{
|
||||
naam: "Lisa de Vries",
|
||||
rol: "Frontend Developer",
|
||||
tekst: "Cursor heeft mijn workflow compleet veranderd. Ik bouw nu in uren wat vroeger dagen kostte.",
|
||||
},
|
||||
{
|
||||
naam: "Mark Jansen",
|
||||
rol: "Student NOVI",
|
||||
tekst: "Eindelijk een tool die écht begrijpt wat ik wil bouwen. De Composer feature is geweldig!",
|
||||
},
|
||||
{
|
||||
naam: "Sophie Bakker",
|
||||
rol: "Full-Stack Developer",
|
||||
tekst: "Van OpenCode naar Cursor was de beste beslissing. Geen token limits meer, gewoon bouwen.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function TestimonialSection() {
|
||||
return (
|
||||
<section style={{
|
||||
padding: '60px 20px',
|
||||
backgroundColor: 'white'
|
||||
}}>
|
||||
<div style={{
|
||||
maxWidth: '1000px',
|
||||
margin: '0 auto'
|
||||
}}>
|
||||
<h2 style={{
|
||||
fontSize: '32px',
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'center',
|
||||
marginBottom: '40px',
|
||||
color: '#1a1a1a'
|
||||
}}>Wat Anderen Zeggen</h2>
|
||||
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
gap: '24px'
|
||||
}}>
|
||||
{testimonials.map((t, i) => (
|
||||
<div key={i} style={{
|
||||
padding: '28px',
|
||||
backgroundColor: '#faf5ff',
|
||||
borderRadius: '16px',
|
||||
border: '1px solid #e9d5ff'
|
||||
}}>
|
||||
<p style={{
|
||||
fontStyle: 'italic',
|
||||
color: '#4b5563',
|
||||
marginBottom: '16px',
|
||||
lineHeight: '1.6',
|
||||
fontSize: '15px'
|
||||
}}>"{t.tekst}"</p>
|
||||
<div>
|
||||
<p style={{
|
||||
fontWeight: '600',
|
||||
color: '#1a1a1a',
|
||||
fontSize: '15px'
|
||||
}}>{t.naam}</p>
|
||||
<p style={{
|
||||
color: '#7c3aed',
|
||||
fontSize: '13px'
|
||||
}}>{t.rol}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user