Skip to content

Commit 1892e82

Browse files
Anant1711Anant1711
committed
Add community page and tutorial
1 parent debfe2d commit 1892e82

File tree

2 files changed

+71
-108
lines changed

2 files changed

+71
-108
lines changed

‎frontend/src/components/Community.tsx‎

Lines changed: 38 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,46 @@
1-
import React from 'react';
2-
import { Users, MessageSquare, Share2, Heart } from 'lucide-react';
3-
4-
const POSTS = [
5-
{
6-
id: 1,
7-
user: 'AutoGeek99',
8-
title: 'Custom DBC for Tesla Model 3',
9-
content: 'I just reverse engineered some of the body control messages. Check out this DBC file!',
10-
likes: 45,
11-
comments: 12,
12-
time: '2h ago'
13-
},
14-
{
15-
id: 2,
16-
user: 'EmbeddedDev',
17-
title: 'Scenario: Engine Overheat',
18-
content: 'Created a new simulation scenario where the engine overheats if you idle too long. Great for testing warning indicators.',
19-
likes: 32,
20-
comments: 5,
21-
time: '5h ago'
22-
}
23-
];
1+
import { Github, ExternalLink, MessageSquare, Users, Lightbulb } from 'lucide-react';
242

253
export const Community: React.FC = () => {
264
return (
27-
<div className="max-w-3xl mx-auto space-y-6">
28-
<div className="bg-gradient-to-r from-cyan-900/20 to-blue-900/20 rounded-xl p-8 text-center border border-cyan-500/20">
29-
<Users size={48} className="mx-auto text-cyan-400 mb-4" />
30-
<h2 className="text-2xl font-bold text-white mb-2">Join the Community</h2>
31-
<p className="text-gray-400 mb-6">Share your DBC files, custom scenarios, and learn from other automotive engineers.</p>
32-
<button className="px-6 py-2 bg-cyan-600 hover:bg-cyan-500 text-white font-bold rounded-lg transition-colors">
33-
Create Post
34-
</button>
35-
</div>
5+
<div className="flex items-center justify-center h-full">
6+
<div className="max-w-2xl mx-auto text-center space-y-8">
7+
{/* Main Card */}
8+
<div className="bg-gradient-to-br from-blue-50 to-cyan-50 border border-blue-200 rounded-xl p-12 shadow-lg">
9+
<Github size={64} className="mx-auto text-gray-900 mb-6" />
10+
<h2 className="text-4xl font-bold text-gray-900 mb-4">Join the Discussion</h2>
11+
<p className="text-gray-700 text-lg mb-8 max-w-xl mx-auto leading-relaxed">
12+
Connect with other automotive engineers, share your projects, ask questions, and contribute to the AutoLearn community on GitHub Discussions.
13+
</p>
14+
<a
15+
href="https://github.com/Anant1711/AutoLearn/discussions/1"
16+
target="_blank"
17+
rel="noopener noreferrer"
18+
className="inline-flex items-center gap-3 px-8 py-4 bg-gray-900 hover:bg-gray-800 text-white font-bold rounded-lg transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
19+
>
20+
<Github size={24} />
21+
Open GitHub Discussions
22+
<ExternalLink size={18} />
23+
</a>
24+
</div>
3625

37-
<div className="space-y-4">
38-
{POSTS.map((post) => (
39-
<div key={post.id} className="bg-gray-900 rounded-xl border border-gray-800 p-6">
40-
<div className="flex items-center gap-3 mb-4">
41-
<div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold">
42-
{post.user[0]}
43-
</div>
44-
<div>
45-
<div className="font-bold text-white">{post.user}</div>
46-
<div className="text-xs text-gray-500">{post.time}</div>
47-
</div>
48-
</div>
49-
<h3 className="text-lg font-bold text-white mb-2">{post.title}</h3>
50-
<p className="text-gray-400 text-sm mb-4">{post.content}</p>
51-
<div className="flex items-center gap-6 text-gray-500 text-sm">
52-
<button className="flex items-center gap-2 hover:text-red-400 transition-colors">
53-
<Heart size={16} /> {post.likes}
54-
</button>
55-
<button className="flex items-center gap-2 hover:text-blue-400 transition-colors">
56-
<MessageSquare size={16} /> {post.comments}
57-
</button>
58-
<button className="flex items-center gap-2 hover:text-white transition-colors">
59-
<Share2 size={16} /> Share
60-
</button>
61-
</div>
26+
{/* Feature Highlights */}
27+
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
28+
<div className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
29+
<MessageSquare size={32} className="text-cyan-500 mb-3 mx-auto" />
30+
<h3 className="font-bold text-gray-900 mb-2">Ask Questions</h3>
31+
<p className="text-sm text-gray-600">Get help from the community</p>
32+
</div>
33+
<div className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
34+
<Users size={32} className="text-blue-500 mb-3 mx-auto" />
35+
<h3 className="font-bold text-gray-900 mb-2">Share Projects</h3>
36+
<p className="text-sm text-gray-600">Show off your DBC files</p>
37+
</div>
38+
<div className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
39+
<Lightbulb size={32} className="text-yellow-500 mb-3 mx-auto" />
40+
<h3 className="font-bold text-gray-900 mb-2">Suggest Ideas</h3>
41+
<p className="text-sm text-gray-600">Help shape the future</p>
6242
</div>
63-
))}
43+
</div>
6444
</div>
6545
</div>
6646
);

‎frontend/src/components/Tutorials.tsx‎

Lines changed: 33 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,41 @@
1-
import React from 'react';
2-
import { BookOpen, PlayCircle, FileText } from 'lucide-react';
3-
4-
const TUTORIALS = [
5-
{
6-
id: 1,
7-
title: 'CAN Bus Basics',
8-
level: 'Beginner',
9-
duration: '10 min',
10-
description: 'Understand the fundamentals of Controller Area Network, message frames, and arbitration.',
11-
icon: <BookOpen size={24} className="text-blue-400" />
12-
},
13-
{
14-
id: 2,
15-
title: 'UDS Protocol Deep Dive',
16-
level: 'Intermediate',
17-
duration: '25 min',
18-
description: 'Learn about Diagnostic Sessions, Security Access, and how to read DTCs using UDS.',
19-
icon: <FileText size={24} className="text-emerald-400" />
20-
},
21-
{
22-
id: 3,
23-
title: 'ECU Flashing Simulation',
24-
level: 'Advanced',
25-
duration: '40 min',
26-
description: 'Step-by-step guide to simulating an ECU firmware update over CAN.',
27-
icon: <PlayCircle size={24} className="text-red-400" />
28-
}
29-
];
1+
import { Rocket, Sparkles } from 'lucide-react';
302

313
export const Tutorials: React.FC = () => {
324
return (
33-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
34-
{TUTORIALS.map((tutorial) => (
35-
<div key={tutorial.id} className="bg-gray-900 rounded-xl border border-gray-800 p-6 hover:border-cyan-500/50 transition-colors cursor-pointer group">
36-
<div className="flex justify-between items-start mb-4">
37-
<div className="p-3 bg-gray-800 rounded-lg group-hover:bg-gray-700 transition-colors">
38-
{tutorial.icon}
39-
</div>
40-
<span className={`text-xs font-bold px-2 py-1 rounded ${tutorial.level === 'Beginner' ? 'bg-blue-900/30 text-blue-400' :
41-
tutorial.level === 'Intermediate' ? 'bg-emerald-900/30 text-emerald-400' :
42-
'bg-red-900/30 text-red-400'
43-
}`}>
44-
{tutorial.level}
45-
</span>
46-
</div>
47-
<h3 className="text-lg font-bold text-white mb-2 group-hover:text-cyan-400 transition-colors">{tutorial.title}</h3>
48-
<p className="text-gray-400 text-sm mb-4 line-clamp-2">{tutorial.description}</p>
49-
<div className="flex items-center text-xs text-gray-500">
50-
<span>{tutorial.duration}</span>
51-
<span className="mx-2">•</span>
52-
<span>Interactive</span>
5+
<div className="flex items-center justify-center h-full">
6+
<div className="text-center max-w-md">
7+
<div className="mb-6 relative">
8+
<div className="absolute inset-0 flex items-center justify-center">
9+
<Sparkles size={120} className="text-cyan-500/20 animate-pulse" />
5310
</div>
11+
<Rocket size={80} className="mx-auto text-cyan-500 relative z-10" />
12+
</div>
13+
<h2 className="text-4xl font-bold text-gray-900 mb-4">Coming Soon!</h2>
14+
<p className="text-gray-600 text-lg mb-6">
15+
We're working on interactive tutorials to help you master CAN Bus, UDS protocols, and automotive diagnostics.
16+
</p>
17+
<div className="bg-gradient-to-br from-blue-50 to-cyan-50 border border-blue-200 rounded-xl p-6">
18+
<h3 className="text-blue-900 font-bold mb-3">What to Expect:</h3>
19+
<ul className="text-left text-gray-700 space-y-2">
20+
<li className="flex items-start gap-2">
21+
<span className="text-cyan-500 mt-1">✓</span>
22+
<span>Step-by-step CAN Bus fundamentals</span>
23+
</li>
24+
<li className="flex items-start gap-2">
25+
<span className="text-cyan-500 mt-1">✓</span>
26+
<span>Interactive UDS protocol exercises</span>
27+
</li>
28+
<li className="flex items-start gap-2">
29+
<span className="text-cyan-500 mt-1">✓</span>
30+
<span>Real-world diagnostic scenarios</span>
31+
</li>
32+
<li className="flex items-start gap-2">
33+
<span className="text-cyan-500 mt-1">✓</span>
34+
<span>ECU flashing simulations</span>
35+
</li>
36+
</ul>
5437
</div>
55-
))}
38+
</div>
5639
</div>
5740
);
5841
};

0 commit comments

Comments
 (0)