Added a LOT of icons.
Signed-off-by: Ioan Chelaru Cristian <iccjoc@localhost.localdomain> f
This commit is contained in:
parent
2bf3ae95a2
commit
6557cfba89
5 changed files with 45 additions and 35 deletions
40
api/db.json
40
api/db.json
|
@ -2,140 +2,140 @@
|
||||||
"questions": [
|
"questions": [
|
||||||
{
|
{
|
||||||
"id": 1,
|
"id": 1,
|
||||||
"category": "c++",
|
"category": "cpp",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is the purpose of the 'std' namespace in C++?",
|
"question": "What is the purpose of the 'std' namespace in C++?",
|
||||||
"answer": "The 'std' namespace in C++ is used to define the standard C++ library functions and objects."
|
"answer": "The 'std' namespace in C++ is used to define the standard C++ library functions and objects."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 2,
|
"id": 2,
|
||||||
"category": "c++",
|
"category": "cpp",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What does the 'cout' object in C++ do?",
|
"question": "What does the 'cout' object in C++ do?",
|
||||||
"answer": "'cout' is used to output data to the standard output, typically the screen."
|
"answer": "'cout' is used to output data to the standard output, typically the screen."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 3,
|
"id": 3,
|
||||||
"category": "c++",
|
"category": "cpp",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "How do you declare an integer variable in C++?",
|
"question": "How do you declare an integer variable in C++?",
|
||||||
"answer": "You declare an integer variable in C++ using the 'int' keyword followed by the variable name, e.g., 'int myVar;'."
|
"answer": "You declare an integer variable in C++ using the 'int' keyword followed by the variable name, e.g., 'int myVar;'."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 4,
|
"id": 4,
|
||||||
"category": "c++",
|
"category": "cpp",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is a pointer in C++?",
|
"question": "What is a pointer in C++?",
|
||||||
"answer": "A pointer is a variable that holds the memory address of another variable."
|
"answer": "A pointer is a variable that holds the memory address of another variable."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 5,
|
"id": 5,
|
||||||
"category": "c++",
|
"category": "cpp",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is the use of the 'new' operator in C++?",
|
"question": "What is the use of the 'new' operator in C++?",
|
||||||
"answer": "The 'new' operator is used to dynamically allocate memory on the heap."
|
"answer": "The 'new' operator is used to dynamically allocate memory on the heap."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 6,
|
"id": 6,
|
||||||
"category": "c++",
|
"category": "cpp",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is a class in C++?",
|
"question": "What is a class in C++?",
|
||||||
"answer": "A class in C++ is a user-defined type that contains data members and member functions to operate on the data."
|
"answer": "A class in C++ is a user-defined type that contains data members and member functions to operate on the data."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 7,
|
"id": 7,
|
||||||
"category": "c++",
|
"category": "cpp",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is inheritance in C++?",
|
"question": "What is inheritance in C++?",
|
||||||
"answer": "Inheritance is a feature in C++ where one class can inherit the properties and methods of another class."
|
"answer": "Inheritance is a feature in C++ where one class can inherit the properties and methods of another class."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 8,
|
"id": 8,
|
||||||
"category": "c++",
|
"category": "cpp",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "How do you define a function in C++?",
|
"question": "How do you define a function in C++?",
|
||||||
"answer": "A function in C++ is defined by specifying the return type, function name, and parameters, followed by the function body enclosed in curly braces."
|
"answer": "A function in C++ is defined by specifying the return type, function name, and parameters, followed by the function body enclosed in curly braces."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 9,
|
"id": 9,
|
||||||
"category": "c++",
|
"category": "cpp",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is a constructor in C++?",
|
"question": "What is a constructor in C++?",
|
||||||
"answer": "A constructor is a special member function of a class that is executed whenever an object of that class is created."
|
"answer": "A constructor is a special member function of a class that is executed whenever an object of that class is created."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 10,
|
"id": 10,
|
||||||
"category": "c++",
|
"category": "cpp",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is polymorphism in C++?",
|
"question": "What is polymorphism in C++?",
|
||||||
"answer": "Polymorphism in C++ allows for functions or methods to be used in different contexts, typically through inheritance and function overriding."
|
"answer": "Polymorphism in C++ allows for functions or methods to be used in different contexts, typically through inheritance and function overriding."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 11,
|
"id": 11,
|
||||||
"category": "cybersecurity",
|
"category": "cybersec",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is a firewall in cybersecurity?",
|
"question": "What is a firewall in cybersecurity?",
|
||||||
"answer": "A firewall is a network security device that monitors and filters incoming and outgoing network traffic based on an organization's previously established security policies."
|
"answer": "A firewall is a network security device that monitors and filters incoming and outgoing network traffic based on an organization's previously established security policies."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 12,
|
"id": 12,
|
||||||
"category": "cybersecurity",
|
"category": "cybersec",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is phishing?",
|
"question": "What is phishing?",
|
||||||
"answer": "Phishing is a cyber attack that uses disguised email as a weapon to trick the email recipient into believing that the message is something they want or need."
|
"answer": "Phishing is a cyber attack that uses disguised email as a weapon to trick the email recipient into believing that the message is something they want or need."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 13,
|
"id": 13,
|
||||||
"category": "cybersecurity",
|
"category": "cybersec",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is malware?",
|
"question": "What is malware?",
|
||||||
"answer": "Malware is malicious software designed to harm, exploit, or otherwise compromise the operation of a computer system."
|
"answer": "Malware is malicious software designed to harm, exploit, or otherwise compromise the operation of a computer system."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 14,
|
"id": 14,
|
||||||
"category": "cybersecurity",
|
"category": "cybersec",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is encryption?",
|
"question": "What is encryption?",
|
||||||
"answer": "Encryption is the process of converting data into a code to prevent unauthorized access."
|
"answer": "Encryption is the process of converting data into a code to prevent unauthorized access."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 15,
|
"id": 15,
|
||||||
"category": "cybersecurity",
|
"category": "cybersec",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is a VPN?",
|
"question": "What is a VPN?",
|
||||||
"answer": "A VPN (Virtual Private Network) extends a private network across a public network and enables users to send and receive data across shared or public networks as if their computing devices were directly connected to the private network."
|
"answer": "A VPN (Virtual Private Network) extends a private network across a public network and enables users to send and receive data across shared or public networks as if their computing devices were directly connected to the private network."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 16,
|
"id": 16,
|
||||||
"category": "cybersecurity",
|
"category": "cybersec",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is two-factor authentication?",
|
"question": "What is two-factor authentication?",
|
||||||
"answer": "Two-factor authentication is a security process in which the user provides two different authentication factors to verify themselves."
|
"answer": "Two-factor authentication is a security process in which the user provides two different authentication factors to verify themselves."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 17,
|
"id": 17,
|
||||||
"category": "cybersecurity",
|
"category": "cybersec",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is a DDoS attack?",
|
"question": "What is a DDoS attack?",
|
||||||
"answer": "A DDoS (Distributed Denial of Service) attack is an attempt to make an online service unavailable by overwhelming it with traffic from multiple sources."
|
"answer": "A DDoS (Distributed Denial of Service) attack is an attempt to make an online service unavailable by overwhelming it with traffic from multiple sources."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 18,
|
"id": 18,
|
||||||
"category": "cybersecurity",
|
"category": "cybersec",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is social engineering?",
|
"question": "What is social engineering?",
|
||||||
"answer": "Social engineering is the psychological manipulation of people into performing actions or divulging confidential information."
|
"answer": "Social engineering is the psychological manipulation of people into performing actions or divulging confidential information."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 19,
|
"id": 19,
|
||||||
"category": "cybersecurity",
|
"category": "cybersec",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is a zero-day vulnerability?",
|
"question": "What is a zero-day vulnerability?",
|
||||||
"answer": "A zero-day vulnerability is a software security flaw that is known to the software vendor but does not have a patch in place to fix the flaw."
|
"answer": "A zero-day vulnerability is a software security flaw that is known to the software vendor but does not have a patch in place to fix the flaw."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 20,
|
"id": 20,
|
||||||
"category": "cybersecurity",
|
"category": "cybersec",
|
||||||
"type": "none",
|
"type": "none",
|
||||||
"question": "What is ransomware?",
|
"question": "What is ransomware?",
|
||||||
"answer": "Ransomware is a type of malicious software designed to block access to a computer system until a sum of money is paid."
|
"answer": "Ransomware is a type of malicious software designed to block access to a computer system until a sum of money is paid."
|
||||||
|
|
|
@ -1,16 +1,17 @@
|
||||||
const Logo = () => {
|
const Logo = () => {
|
||||||
return (
|
return (
|
||||||
<div style={{ display:"flex", alignItems: 'center', justifyContent: 'center'}}>
|
<div style={{ display:"flex", alignItems: 'center', justifyContent: 'center', marginLeft: "40px", marginRight: "40px"}}>
|
||||||
<a href="/">
|
<a href="/" style={{ marginBottom: '40px', marginLeft: '40px' }}>
|
||||||
<img src="/logo-no-background.png" height="auto" width="40%"/>
|
<img src="/logo-no-background.png" height="auto" width="400px"/>
|
||||||
</a>
|
</a>
|
||||||
|
<div style={{ marginBottom: '40px', marginRight: '40px' }}></div>
|
||||||
<a
|
<a
|
||||||
href="/about-us"
|
href="/about-us"
|
||||||
className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
|
className="rounded-md bg-white text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
|
||||||
style={{ marginBottom: '40px' }}
|
style={{ marginBottom: '40px', marginRight: '40px', padding: '10px' }}
|
||||||
>
|
>
|
||||||
About us
|
About us
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { PlayIcon } from '@heroicons/react/24/outline'
|
||||||
const TopicCard = ({ title, children, link }) => {
|
const TopicCard = ({ title, children, link }) => {
|
||||||
return(
|
return(
|
||||||
<div className="mx-auto mt-16 max-w-2xl rounded-3xl sm:mt-20 lg:mx-0 lg:flex lg:max-w-none relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0" style={{marginTop: '20px', paddingTop: '0px', paddingBottom: '24px'}}>
|
<div className="mx-auto mt-16 max-w-2xl rounded-3xl sm:mt-20 lg:mx-0 lg:flex lg:max-w-none relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0" style={{marginTop: '20px', paddingTop: '0px', paddingBottom: '24px'}}>
|
||||||
|
@ -20,11 +21,13 @@ const TopicCard = ({ title, children, link }) => {
|
||||||
{children}
|
{children}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0 lg:flex lg:flex-col lg:justify-center">
|
<div className="-mt-2 p-2 lg:mt-0 lg:max-w-md lg:flex-shrink-0 lg:flex lg:flex-col lg:justify-center">
|
||||||
<a
|
<a
|
||||||
href={link}
|
href={link}
|
||||||
className="mt-10 block w-full rounded-md bg-blue-500 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
className="mt-10 block w-full rounded-md bg-blue-500 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||||
|
style={{paddingLeft: '50px', paddingRight: '50px', paddingTop: '20px', paddingBottom: '20px'}}
|
||||||
>
|
>
|
||||||
|
<PlayIcon className="text-white"/>
|
||||||
Begin
|
Begin
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,6 +3,7 @@ import { useState } from 'react'
|
||||||
import { Dialog, DialogPanel } from '@headlessui/react'
|
import { Dialog, DialogPanel } from '@headlessui/react'
|
||||||
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
|
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
|
||||||
import Logo from '../../components/logo';
|
import Logo from '../../components/logo';
|
||||||
|
import { CheckIcon } from '@heroicons/react/20/solid';
|
||||||
|
|
||||||
|
|
||||||
const Page = ({ params }: { params: { category: string }}) => {
|
const Page = ({ params }: { params: { category: string }}) => {
|
||||||
|
@ -42,10 +43,15 @@ const Page = ({ params }: { params: { category: string }}) => {
|
||||||
href="#"
|
href="#"
|
||||||
className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||||
>
|
>
|
||||||
I knew that!
|
<CheckIcon width={'100px'}></CheckIcon>
|
||||||
|
I did know
|
||||||
</a>
|
</a>
|
||||||
<a href="#" className="text-sm font-semibold leading-6 text-gray-300">
|
<a
|
||||||
I didn't know that!
|
href="#"
|
||||||
|
className="rounded-md bg-gray-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||||
|
>
|
||||||
|
<XMarkIcon width={'100px'}></XMarkIcon>
|
||||||
|
I didn't know
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -14,7 +14,7 @@ export default function Example() {
|
||||||
const cards = [
|
const cards = [
|
||||||
["Learn cybersecurity", "Learning cybersecurity is like becoming a guardian of the digital realm.\nIt's about mastering the art of protecting information, systems, and networks from cyber threats.\nFrom understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.", "/learn/cybersec" ],
|
["Learn cybersecurity", "Learning cybersecurity is like becoming a guardian of the digital realm.\nIt's about mastering the art of protecting information, systems, and networks from cyber threats.\nFrom understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.", "/learn/cybersec" ],
|
||||||
["Learn geography", "Geography is the study of our world's intricate tapestry — from the towering peaks of the Himalayas to the vast expanse of the Sahara Desert. It's about understanding the relationships between people, places, and the environment.", "/learn/geography"],
|
["Learn geography", "Geography is the study of our world's intricate tapestry — from the towering peaks of the Himalayas to the vast expanse of the Sahara Desert. It's about understanding the relationships between people, places, and the environment.", "/learn/geography"],
|
||||||
["Learn C++", "As a powerful, versatile language, C++ teaches you the fundamentals of object-oriented programming while offering fine-grained control over system resources. You'll explore concepts like classes, inheritance, and polymorphism, alongside memory management and pointers.", "/learn/cpp"]
|
["Learn CPP", "As a powerful, versatile language, CPP teaches you the fundamentals of object-oriented programming while offering fine-grained control over system resources. You'll explore concepts like classes, inheritance, and polymorphism, alongside memory management and pointers.", "/learn/cpp"]
|
||||||
];
|
];
|
||||||
return (
|
return (
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue