Skip to content

Commit fa40a3e

Browse files
nikohoffrennikohoffren
committed
add IDE page to Roadmap section
1 parent fb72dc3 commit fa40a3e

2 files changed

Lines changed: 223 additions & 90 deletions

File tree

‎components/data/roadmapList.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,6 @@ export const roadmapList = [
2121
{ name: 'Discussions', link: '/community/discussions' },
2222
{ name: 'Events', link: '/community/events' },
2323
{ name: 'Resources', link: '/resources/resources' },
24-
{ name: 'AI Tools', link: '/ai/ai' }
24+
{ name: 'AI Tools', link: '/ai/ai' },
25+
{ name: 'IDEs', link: '/tools/ide' }
2526
]

‎pages/tools/ide.tsx‎

Lines changed: 221 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,230 @@
1+
import { motion } from 'framer-motion'
12
import Link from 'next/link'
23
import { ides } from '../../components/data/IDEInfo'
34

5+
const container = {
6+
hidden: { opacity: 0 },
7+
show: {
8+
opacity: 1,
9+
transition: {
10+
staggerChildren: 0.1
11+
}
12+
}
13+
}
14+
15+
const item = {
16+
hidden: { opacity: 0, y: 20 },
17+
show: { opacity: 1, y: 0 }
18+
}
19+
420
export default function IDE() {
521
return (
6-
<div className='bg-primary min-h-screen'>
7-
<div
8-
className='page-header-background'
9-
style={{ backgroundImage: "url('/fcm-background-image.png')" }}
10-
>
11-
<div className='page-header-content'>
12-
<h1 className='mb-6 text-center text-4xl font-bold'>
13-
IDEs: Integrated Development Environments
14-
</h1>
15-
</div>
16-
</div>
17-
<div className='flex flex-col items-center justify-center px-5 py-10'>
18-
<h2 className='mb-6 text-3xl font-bold'>What is an IDE?</h2>
19-
<p className='mb-8 max-w-3xl text-center'>
20-
An Integrated Development Environment (IDE) is a software application
21-
that consolidates basic tools required for software testing and
22-
development. An IDE typically consists of a source code editor, build
23-
automation tools, and a debugger. Some IDEs, like Android Studio or
24-
Visual Studio, even offer more advanced features such as version
25-
control, databases, cloud services, and more. Why use an IDE? Using an
26-
IDE can significantly speed up the development process by offering a
27-
variety of tools and features under one roof.
28-
</p>
29-
<h4 className='mb-4 text-center text-2xl'>
30-
Here are a few reasons why developers use IDEs:
31-
</h4>
32-
<p className='mb-8 max-w-3xl text-center'>
33-
Efficiency: With everything in one place, developers can write, test,
34-
and debug code without needing to switch between different tools.
35-
</p>
36-
<p className='mb-8 max-w-3xl text-center'>
37-
Code Assistance: Many IDEs offer features like autocompletion, syntax
38-
highlighting, and suggestions, making the code-writing process
39-
smoother.
40-
</p>
41-
<p className='mb-8 max-w-3xl text-center'>
42-
Integrated Debugging: Integrated debuggers allow developers to test
43-
and debug their programs within the IDE, speeding up the development
44-
cycle.
45-
</p>
46-
<p className='mb-8 max-w-3xl text-center'>
47-
Extensions & Plugins: Most modern IDEs support a wide range of
48-
extensions and plugins, enabling developers to customize their
49-
environment and add even more functionalities.
50-
</p>
51-
<h2 className='mb-6 text-3xl font-bold'>A Brief History of IDEs</h2>
52-
<p className='mb-8 max-w-3xl text-center'>
53-
The concept of an IDE dates back to the early days of computing when
54-
programming tools started to be integrated into a single environment.
55-
One of the earliest examples of this was the Maestro I, developed in
56-
the 1970s for the PDP-11 minicomputers. As computers and programming
57-
languages evolved, so did IDEs. In the 1990s, with the rise of
58-
graphical user interfaces, IDEs like Microsoft&apos;s Visual Studio
59-
and Borland&apos;s Delphi became popular. With the increasing demand
60-
for web development, IDEs evolved to support a plethora of languages,
61-
platforms, and technologies, leading to the diverse range of options
62-
available today.
63-
</p>
64-
<p className='mb-8 max-w-3xl text-center'>
65-
Now, let&apos;s look at some popular IDEs:
66-
</p>
67-
<div className='grid w-full max-w-4xl gap-8 md:grid-cols-2'>
68-
{ides.map((ide, index) => (
69-
<div key={index} className='rounded-lg bg-gray-800 p-6 shadow-lg'>
70-
<h2 className='mb-4 text-2xl font-semibold'>{ide.name}</h2>
71-
<p className='mb-4'>{ide.description}</p>
72-
<h3 className='mb-2 text-xl'>Functionalities:</h3>
73-
<ul className='mb-4 list-disc pl-5'>
74-
{ide.functionalities.map((func, idx) => (
75-
<li key={idx}>{func}</li>
76-
))}
77-
</ul>
78-
<h3 className='mb-2 text-xl'>Supported Languages:</h3>
79-
<ul className='mb-4 list-disc pl-5'>
80-
{ide.supportedLanguages.map((lang, idx) => (
81-
<li key={idx}>{lang}</li>
22+
<div className='bg-white'>
23+
<div className='modern-container'>
24+
<div className='py-16 sm:py-24'>
25+
<motion.div
26+
initial={{ opacity: 0, y: 20 }}
27+
animate={{ opacity: 1, y: 0 }}
28+
className='text-center'
29+
>
30+
<h1 className='text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl'>
31+
Integrated Development{' '}
32+
<span className='text-modern-purple'>Environments</span>
33+
</h1>
34+
<p className='mx-auto mt-6 max-w-2xl text-lg text-gray-600'>
35+
Discover powerful IDEs and development tools to enhance your
36+
coding workflow.
37+
</p>
38+
</motion.div>
39+
40+
<motion.div
41+
variants={container}
42+
initial='hidden'
43+
animate='show'
44+
className='mt-16 flex justify-center'
45+
>
46+
<motion.div variants={item} className='w-full max-w-4xl'>
47+
<div className='rounded-lg bg-gray-50 p-8 shadow-sm'>
48+
<h2 className='mb-6 text-2xl font-bold text-gray-900'>
49+
What is an IDE?
50+
</h2>
51+
<p className='mb-6 text-gray-600'>
52+
An Integrated Development Environment (IDE) is a software
53+
application that consolidates basic tools required for
54+
software testing and development. An IDE typically consists of
55+
a source code editor, build automation tools, and a debugger.
56+
Some IDEs, like Android Studio or Visual Studio, even offer
57+
more advanced features such as version control, databases,
58+
cloud services, and more.
59+
</p>
60+
<h3 className='mb-4 text-xl font-bold text-gray-900'>
61+
Why use an IDE?
62+
</h3>
63+
<p className='mb-6 text-gray-600'>
64+
Using an IDE can significantly speed up the development
65+
process by offering a variety of tools and features under one
66+
roof.
67+
</p>
68+
<h3 className='mb-4 text-xl font-bold text-gray-900'>
69+
Key Benefits:
70+
</h3>
71+
<ul className='grid gap-4 text-gray-600 sm:grid-cols-2'>
72+
<li className='flex items-start'>
73+
<svg
74+
className='mr-2 h-6 w-6 flex-shrink-0 text-modern-purple'
75+
fill='none'
76+
viewBox='0 0 24 24'
77+
stroke='currentColor'
78+
>
79+
<path
80+
strokeLinecap='round'
81+
strokeLinejoin='round'
82+
strokeWidth={2}
83+
d='M5 13l4 4L19 7'
84+
/>
85+
</svg>
86+
Efficiency: With everything in one place, developers can
87+
write, test, and debug code without needing to switch
88+
between different tools.
89+
</li>
90+
<li className='flex items-start'>
91+
<svg
92+
className='mr-2 h-6 w-6 flex-shrink-0 text-modern-purple'
93+
fill='none'
94+
viewBox='0 0 24 24'
95+
stroke='currentColor'
96+
>
97+
<path
98+
strokeLinecap='round'
99+
strokeLinejoin='round'
100+
strokeWidth={2}
101+
d='M5 13l4 4L19 7'
102+
/>
103+
</svg>
104+
Code Assistance: Many IDEs offer features like
105+
autocompletion, syntax highlighting, and suggestions, making
106+
the code-writing process smoother.
107+
</li>
108+
<li className='flex items-start'>
109+
<svg
110+
className='mr-2 h-6 w-6 flex-shrink-0 text-modern-purple'
111+
fill='none'
112+
viewBox='0 0 24 24'
113+
stroke='currentColor'
114+
>
115+
<path
116+
strokeLinecap='round'
117+
strokeLinejoin='round'
118+
strokeWidth={2}
119+
d='M5 13l4 4L19 7'
120+
/>
121+
</svg>
122+
Integrated Debugging: Integrated debuggers allow developers
123+
to test and debug their programs within the IDE, speeding up
124+
the development cycle.
125+
</li>
126+
<li className='flex items-start'>
127+
<svg
128+
className='mr-2 h-6 w-6 flex-shrink-0 text-modern-purple'
129+
fill='none'
130+
viewBox='0 0 24 24'
131+
stroke='currentColor'
132+
>
133+
<path
134+
strokeLinecap='round'
135+
strokeLinejoin='round'
136+
strokeWidth={2}
137+
d='M5 13l4 4L19 7'
138+
/>
139+
</svg>
140+
Extensions & Plugins: Most modern IDEs support a wide range
141+
of extensions and plugins, enabling developers to customize
142+
their environment and add even more functionalities.
143+
</li>
144+
</ul>
145+
</div>
146+
</motion.div>
147+
</motion.div>
148+
149+
<motion.div
150+
variants={container}
151+
initial='hidden'
152+
animate='show'
153+
className='mt-16 flex justify-center'
154+
>
155+
<motion.div variants={item} className='w-full max-w-4xl'>
156+
<div className='rounded-lg bg-gray-50 p-8 shadow-sm'>
157+
<h2 className='mb-6 text-2xl font-bold text-gray-900'>
158+
A Brief History of IDEs
159+
</h2>
160+
<p className='mb-6 text-gray-600'>
161+
The concept of an IDE dates back to the early days of
162+
computing when programming tools started to be integrated into
163+
a single environment. One of the earliest examples of this was
164+
the Maestro I, developed in the 1970s for the PDP-11
165+
minicomputers. As computers and programming languages evolved,
166+
so did IDEs. In the 1990s, with the rise of graphical user
167+
interfaces, IDEs like Microsoft&apos;s Visual Studio and
168+
Borland&apos;s Delphi became popular. With the increasing
169+
demand for web development, IDEs evolved to support a plethora
170+
of languages, platforms, and technologies, leading to the
171+
diverse range of options available today.
172+
</p>
173+
</div>
174+
</motion.div>
175+
</motion.div>
176+
177+
<motion.div
178+
variants={container}
179+
initial='hidden'
180+
animate='show'
181+
className='mt-16 flex justify-center'
182+
>
183+
<motion.div variants={item} className='w-full max-w-4xl'>
184+
<h2 className='mb-6 text-2xl font-bold text-gray-900'>
185+
Popular IDEs
186+
</h2>
187+
<div className='grid gap-8 md:grid-cols-2'>
188+
{ides.map((ide, index) => (
189+
<div
190+
key={index}
191+
className='rounded-lg bg-gray-50 p-6 shadow-sm'
192+
>
193+
<h3 className='mb-4 text-xl font-semibold text-gray-900'>
194+
{ide.name}
195+
</h3>
196+
<p className='mb-4 text-gray-600'>{ide.description}</p>
197+
<h4 className='mb-2 text-lg font-medium text-gray-900'>
198+
Functionalities:
199+
</h4>
200+
<ul className='mb-4 list-disc pl-5 text-gray-600'>
201+
{ide.functionalities.map((func, idx) => (
202+
<li key={idx}>{func}</li>
203+
))}
204+
</ul>
205+
<h4 className='mb-2 text-lg font-medium text-gray-900'>
206+
Supported Languages:
207+
</h4>
208+
<ul className='mb-4 list-disc pl-5 text-gray-600'>
209+
{ide.supportedLanguages.map((lang, idx) => (
210+
<li key={idx}>{lang}</li>
211+
))}
212+
</ul>
213+
<Link
214+
target='_blank'
215+
rel='noopener noreferrer'
216+
href={ide.installLink}
217+
passHref
218+
>
219+
<span className='cursor-pointer text-modern-purple hover:underline'>
220+
Install {ide.name}
221+
</span>
222+
</Link>
223+
</div>
82224
))}
83-
</ul>
84-
<Link
85-
target='_blank'
86-
rel='noopener noreferrer'
87-
href={ide.installLink}
88-
passHref
89-
>
90-
<span className='cursor-pointer text-blue-400 hover:underline'>
91-
Install {ide.name}
92-
</span>
93-
</Link>
94-
</div>
95-
))}
225+
</div>
226+
</motion.div>
227+
</motion.div>
96228
</div>
97229
</div>
98230
</div>

0 commit comments

Comments
 (0)