feat: implement about page
This commit is contained in:
daniyal
parent
eceec99489
commit
e56a29356b
37
src/components/FAQAccordion.tsx
Normal file
37
src/components/FAQAccordion.tsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { FAQItem } from '../pages/about'
|
||||||
|
import '../styles/FAQ.css'
|
||||||
|
|
||||||
|
type FAQAccordionProps = {
|
||||||
|
id: string
|
||||||
|
items: FAQItem[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export const FAQAccordion = ({ id, items }: FAQAccordionProps) => (
|
||||||
|
<div className='accordion FAQ_Acco' role='tablist' id={id}>
|
||||||
|
{items.map((item, index) => (
|
||||||
|
<div className='accordion-item FAQ_AccoItem' key={index}>
|
||||||
|
<h2 className='accordion-header FAQ_AccoItemHead' role='tab'>
|
||||||
|
<button
|
||||||
|
className='accordion-button collapsed FAQ_AccoItemHeadBtn'
|
||||||
|
type='button'
|
||||||
|
data-bs-toggle='collapse'
|
||||||
|
data-bs-target={`#${id} .item-${index}`}
|
||||||
|
aria-expanded='false'
|
||||||
|
aria-controls={`${id} .item-${index}`}
|
||||||
|
>
|
||||||
|
{item.question}
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
className={`accordion-collapse collapse item-${index} FAQ_AccoItemContent`}
|
||||||
|
role='tabpanel'
|
||||||
|
data-bs-parent={`#${id}`}
|
||||||
|
>
|
||||||
|
<div className='accordion-body sMFAQI_AccoItemContentBody'>
|
||||||
|
<p className='FAQ_AccoItemContentText'>{item.answer}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
232
src/pages/about.tsx
Normal file
232
src/pages/about.tsx
Normal file
@ -0,0 +1,232 @@
|
|||||||
|
import { FAQAccordion } from '../components/FAQAccordion'
|
||||||
|
import '../styles/about.css'
|
||||||
|
import '../styles/FAQ.css'
|
||||||
|
import '../styles/styles.css'
|
||||||
|
|
||||||
|
export type FAQItem = {
|
||||||
|
question: string
|
||||||
|
answer: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const FAQ_ITEMS: FAQItem[] = [
|
||||||
|
{
|
||||||
|
question: "You don't host mods files?",
|
||||||
|
answer: "Nope. And that's for the better."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: 'How do you assure security on the files?',
|
||||||
|
answer:
|
||||||
|
"We don't, but you, as the user, do. You know how sometimes you go to some forums or social sites and someone shares a download link, you'd see someone asking 'is this link safe?' and people would reply with yes/no, etc. People will be doing that same process here, with a bit of help by having a simple reaction system for each link so you'd get a quicker idea on the safety of these links that's being provided by mod creators."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Why are you quoting 'account'?",
|
||||||
|
answer:
|
||||||
|
"Because technically you aren't creating an 'account', you're generating/creating/obtaining an address/key-pair. Check the next question/answer to get more details."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "You 'can't' remove mods or ban accounts? How does that work?",
|
||||||
|
answer:
|
||||||
|
"I'll try my best to simplify the technicalities of this answer... Because of the nature of Nostr, the 'account' creation process involves the generation/obtaining two cryptographic key pairs, one private (think of that as your password that you cannot change), and one public (think of that as your username that you cannot change). These keypairs are coming from the Nostr protocol itself, and nobody controls Nostr, it's just there. Considering that, we can't 'ban' anyone directly. We might have a mute-list with public address that won't show their posts/submissions on this site, but they are still there and accessible by anyone. It's the same with someone's posts, we can't touch those as well. Gist: If someone put a gun to your / the team's head, will you censor or ban anyone? No, because we can't."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question:
|
||||||
|
"You can't do anything about any mod or person? Nothing at all? What about the illegal stuff?",
|
||||||
|
answer:
|
||||||
|
"Directly removing the content can't be done, and directly 'banning' someone also can't be done. At most, pages/posts and people can be filtered out / hidden from the website, but people can still see the content with a quick copy/paste."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question:
|
||||||
|
'Why did you have to add Bitcoin? Why not traditional payment methods like Visa, PayPal, etc?',
|
||||||
|
answer:
|
||||||
|
"For various reasons. With traditional payment methods, not everyone has access to them, they can pressure/threaten us or mod creators or even gamers to censor or ban or not use this site by holding our funds or take them away, they can prevent you from tipping on this site or specific mod creators, and there's no privacy, among other reasons. With Bitcoin, anyone has access to it, nobody controls it so you can't be threatened with/by it, you can actually own it so you control it, and with it you're Pseudonymous."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: 'Is this an open-source project?',
|
||||||
|
answer: "Yes. Here's the repo."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Who's developing / maintaining DEG Mods?",
|
||||||
|
answer:
|
||||||
|
'Considering this is an open-source project, anyone can contribute to its development and maintenance. With that said, the initial idea-tor, designer, and frontend developer is Freakoverse, the initial backend developer and Nostr implementor is NAME.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Who's that character above with the orange hair?",
|
||||||
|
answer: "That's Vivian James. A gamer that just wants to game in peace."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Who's that character above with the purple hair?",
|
||||||
|
answer:
|
||||||
|
"That's Moda-chan. DEG Mods' mascot. She's a master game mod creator! (Yes, she was AI generated, as such her design is temporary and will be replaced with a design created by an artist (or artists) when that time comes.)"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export const AboutPage = () => {
|
||||||
|
return (
|
||||||
|
<div className='InnerBodyMain'>
|
||||||
|
<div className='ContainerMain'>
|
||||||
|
<div className='IBMSecMainGroup'>
|
||||||
|
<div className='IBMSecMain'>
|
||||||
|
<div className='AboutSec'>
|
||||||
|
<img
|
||||||
|
src='https://image.nostr.build/ad021a18bc5784d26c000ab63b56b8c4358ff3f0765b5eb71dc14415419bd6a2.png'
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
alt='About Section'
|
||||||
|
/>
|
||||||
|
<div className='LearnText'>
|
||||||
|
<div className='LearnTextInside'>
|
||||||
|
<h1
|
||||||
|
className='LearnTextHeading'
|
||||||
|
style={{ textAlign: 'center' }}
|
||||||
|
>
|
||||||
|
Liberating Game Mods
|
||||||
|
</h1>
|
||||||
|
<img src='/assets/img/DEGM%20Thumb.png' alt='Thumbnail' />
|
||||||
|
<p className='LearnTextPara'>
|
||||||
|
Never get your game mods censored, get banned, lose your
|
||||||
|
history, nor lose the connection between creators and fans.
|
||||||
|
Find the game mod you want and download it. Gamers and
|
||||||
|
developers are getting censored and suppressed, and this is
|
||||||
|
an attempt to stop it.
|
||||||
|
<br />
|
||||||
|
</p>
|
||||||
|
<p className='LearnTextPara'>
|
||||||
|
DEG Mods (Decentralized Game Mods) is an actual platform
|
||||||
|
where game mod creators can thrive without the fear of
|
||||||
|
censorship, bans, or losing their connection with fans. Game
|
||||||
|
mod creators and enthusiasts are empowered here because,
|
||||||
|
well, we literally can't fuck with them.
|
||||||
|
<br />
|
||||||
|
</p>
|
||||||
|
<h3 className='LearnTextHeading'>
|
||||||
|
What's the story with DEG Mods?
|
||||||
|
</h3>
|
||||||
|
<p className='LearnTextPara'>
|
||||||
|
The idea behind DEG Mods was born out of frustration with
|
||||||
|
the widespread censorship and control imposed on game mods
|
||||||
|
across various platforms. Many mod creators faced bans, lost
|
||||||
|
their work, and had their voices silenced by platforms
|
||||||
|
imposing their ideals. DEG Mods aims to change that
|
||||||
|
narrative by being developed on Nostr, a revolutionary new
|
||||||
|
communications protocol.{' '}
|
||||||
|
<a className='linkMain' href='#'>
|
||||||
|
Learn more about Nostr here.
|
||||||
|
</a>
|
||||||
|
<br />
|
||||||
|
</p>
|
||||||
|
<h3 className='LearnTextHeading'>
|
||||||
|
Real quick though. What's Nostr?
|
||||||
|
</h3>
|
||||||
|
<p className='LearnTextPara'>
|
||||||
|
Nostr is a communications protocol that makes it extremely
|
||||||
|
hard for anyone to censor anyone's data, and can never have
|
||||||
|
your "account" get "banned". Nostr ensures that even this
|
||||||
|
site's creators cannot censor mods or ban anyone directly.
|
||||||
|
<br />
|
||||||
|
</p>
|
||||||
|
<h3 className='LearnTextHeading'>How DEG Mods Works</h3>
|
||||||
|
<p className='LearnTextPara'>
|
||||||
|
Unlike traditional mod hosting platforms, DEG Mods doesn't
|
||||||
|
host any files. Think of it as a browser, presenting game
|
||||||
|
mods published by their creators. Mod creators provide
|
||||||
|
direct download links on their mod pages, allowing gamers to
|
||||||
|
access the mods effortlessly. If a link breaks or gets
|
||||||
|
censored, mod creators can remove that link and add another,
|
||||||
|
and people can rate download links based on if they're
|
||||||
|
working and virus free. A public regulating system.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
Also, everything is open sourced. Even if the site were to
|
||||||
|
shut down, someone can simply take the same code and run it
|
||||||
|
under a different name, and every mod would still be
|
||||||
|
accessible, along with their links, reactions/ratings, and
|
||||||
|
comments.
|
||||||
|
</p>
|
||||||
|
<h3 className='LearnTextHeading'>Tips / Donations</h3>
|
||||||
|
<p className='LearnTextPara'>
|
||||||
|
DEG Mods supports hassle-free money transfers for modders.
|
||||||
|
Fans can show their appreciation by directly tipping mod
|
||||||
|
creators via Bitcoin through the Lightning Network, an
|
||||||
|
action known as Zapping. Support creators so they can
|
||||||
|
continue making more valuable game mods!
|
||||||
|
<br />
|
||||||
|
</p>
|
||||||
|
<h3 className='LearnTextHeading'>
|
||||||
|
Wait, Crypto?! Ew.
|
||||||
|
<br />
|
||||||
|
</h3>
|
||||||
|
<p className='LearnTextPara'>
|
||||||
|
We know. You don't have to use it. Nothing is reliant on it
|
||||||
|
on this platform/site. Pretend its not even there. We're not
|
||||||
|
even making any money out of this project/site, in-fact,
|
||||||
|
we're running at a loss (unless direct donations/tips covers
|
||||||
|
it). This is just a passion project to help free (liberate)
|
||||||
|
game mods and their creators, and this part potentially
|
||||||
|
helps them financially, even those in other countries where
|
||||||
|
"normal" methods of money payment/transfer are not an
|
||||||
|
option. You can just find the mod you want and download it,
|
||||||
|
or upload the mod you've created, and never even touch
|
||||||
|
Bitcoin.
|
||||||
|
<br />
|
||||||
|
</p>
|
||||||
|
<p className='LearnTextPara'>
|
||||||
|
DEG Mods is a response to censorship and oppression, to
|
||||||
|
bring freedom and not hinder people's desires and
|
||||||
|
creativity. If you know a mod creator that's being censored,
|
||||||
|
then show them the way. Gamers just want to game in peace...
|
||||||
|
<br />
|
||||||
|
</p>
|
||||||
|
<h3 className='LearnTextHeading'>
|
||||||
|
So, What is DEG Mods?
|
||||||
|
<br />
|
||||||
|
</h3>
|
||||||
|
<p className='LearnTextPara'>
|
||||||
|
DEG Mods is an open-source game mods browser (you can stop
|
||||||
|
right here if you want) of what's uploaded on servers owned
|
||||||
|
by unrelated people around the world. That's the appropriate
|
||||||
|
description.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
For what some people might call it:
|
||||||
|
<br />
|
||||||
|
"It's a game mods website."
|
||||||
|
</p>
|
||||||
|
<div className='learnLinks'>
|
||||||
|
<a
|
||||||
|
className='learnLinksLink'
|
||||||
|
href='https://primal.net/p/npub17jl3ldd6305rnacvwvchx03snauqsg4nz8mruq0emj9thdpglr2sst825x'
|
||||||
|
target='_blank'
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
className='learnLinksLinkImg'
|
||||||
|
src='https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif'
|
||||||
|
style={{ maxWidth: '28px' }}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className='learnLinksLink'
|
||||||
|
href='https://twitter.com/DEGMods'
|
||||||
|
target='_blank'
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
className='learnLinksLinkImg'
|
||||||
|
src='https://image.nostr.build/4b38de750bec88a7977767bb69824a928927ed542fee96a258b0e7e4ee4c5b53.png'
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
className='LearnTextCharacterImgRight'
|
||||||
|
src='assets/img/vivian%20james.png'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='LearnFAQ'>
|
||||||
|
<FAQAccordion id='accordion-1' items={FAQ_ITEMS} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
import { AboutPage } from '../pages/about'
|
||||||
import { BlogsPage } from '../pages/blogs'
|
import { BlogsPage } from '../pages/blogs'
|
||||||
import { GamesPage } from '../pages/games'
|
import { GamesPage } from '../pages/games'
|
||||||
import { HomePage } from '../pages/home'
|
import { HomePage } from '../pages/home'
|
||||||
@ -31,7 +32,7 @@ export const routes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: appRoutes.about,
|
path: appRoutes.about,
|
||||||
element: <HomePage />
|
element: <AboutPage />
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: appRoutes.blog,
|
path: appRoutes.blog,
|
||||||
|
|||||||
52
src/styles/FAQ.css
Normal file
52
src/styles/FAQ.css
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
.FAQ_Acco {
|
||||||
|
width: 100%;
|
||||||
|
outline: unset;
|
||||||
|
border: unset;
|
||||||
|
grid-gap: 25px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FAQ_AccoItem {
|
||||||
|
background: rgba(255,255,255,0);
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
outline: unset;
|
||||||
|
border: unset;
|
||||||
|
grid-gap: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FAQ_AccoItemHead {
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.FAQ_AccoItemContent {
|
||||||
|
outline: unset;
|
||||||
|
border: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-button.FAQ_AccoItemHeadBtn {
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
background: unset;
|
||||||
|
font-weight: bold;
|
||||||
|
border: unset;
|
||||||
|
border-bottom: unset;
|
||||||
|
box-shadow: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FAQ_AccoItemContentText {
|
||||||
|
}
|
||||||
|
|
||||||
|
.sMFAQI_AccoItemHeadBtn:focus {
|
||||||
|
outline: unset;
|
||||||
|
border: unset;
|
||||||
|
box-shadow: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FAQ_AccoItemContentBody {
|
||||||
|
padding: 25px 25px 0 25px;
|
||||||
|
}
|
||||||
|
|
||||||
105
src/styles/about.css
Normal file
105
src/styles/about.css
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
.LearnText {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 25px;
|
||||||
|
padding: 50px 15px;
|
||||||
|
border-radius: 15px;
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||||
|
color: rgba(255,255,255,0.75);
|
||||||
|
align-items: center;
|
||||||
|
justify-content: start;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LearnTextInside {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 750px;
|
||||||
|
grid-gap: 25px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.AboutSec {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LearnTextHeading {
|
||||||
|
}
|
||||||
|
|
||||||
|
.LearnTextPara {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LearnTextCharacterImgRight {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 200px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 15px;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.LearnTextCharacterImgRight {
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.LearnTextCharacterImgLeft {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 200px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 15px;
|
||||||
|
left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.LearnTextCharacterImg {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.LearnFAQ {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.learnLinks {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
border-top: solid 1px rgba(255,255,255,0.1);
|
||||||
|
padding: 10px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.learnLinksLink {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
opacity: 0.5;
|
||||||
|
transform: scale(1);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.learnLinksLink:hover {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.02);
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.learnLinksLinkImg {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user