Skip to content
Snippets Groups Projects
Commit dc7296a4 authored by insert's avatar insert
Browse files

Update the website.

parent a9dbacd2
Branches
No related merge requests found
......@@ -63,7 +63,7 @@ section {
width: 100%;
justify-content: center;
background: grey;
background: rgb(28, 28, 28);
padding: 24px 0;
&:nth-child(even) {
......
......@@ -63,3 +63,9 @@ section[data-reverse="true"] .container {
text-align: center;
}
}
.description {
a, a:link, a:visited {
color: white;
}
}
......@@ -45,6 +45,42 @@ export default function Home() {
</div>
<SignupForm />
</header>
<section>
<div>
<div className={styles.description}>
<div>
<h1>Interested in more?</h1>
<p>
You can contact us through any of these mediums, do get in touch if you want to learn more or are interested in helping out.
</p>
</div>
</div>
<div className={styles.description}>
<div>
<p>
Discord server: <a href="#">discord.gg/abcdefg</a><br/>
Matrix channel: <a href="#">#revolt-chat:clustor.net</a> <br/>
Email the lead developer: <a href="#">me@insrt.uk</a>
</p>
</div>
</div>
</div>
</section>
<section>
<div data-reverse="true">
<img className={styles.image} src="/code.png" style={{ borderRadius: '12px' }} />
<div className={styles.description}>
<div>
<h1>Open source.</h1>
<p>
You can feel free to browse all of <a href="https://gitlab.insrt.uk/revolt">our platform's source code online</a>, we plan to allow users to have completely unrestricted options (to a reasonable extent!) when it comes to what clients and software they use with Revolt. <br/>
<br/>
Currently the majority of the code is unlicensed but we are planning to release it with a suitable license towards the end of development so anyone can feel free to contribute, fork, and extend as they wish.
</p>
</div>
</div>
</div>
</section>
{/*<section>
<div>
<div className={styles.description}>
......
import Head from 'next/head';
import classNames from 'classnames';
import styles from './index.module.scss';
import flex from '../components/util/flex.module.scss';
import SignupForm from '../components/SignupForm';
export default function Home() {
return (
<div>
<Head>
<title>Revolt</title>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=0"></meta>
<meta property="og:title" content="REVOLT" />
<meta property="og:description" content="Don't bother with chat apps that don't respect your privacy. REVOLT is a brand new chat platform designed around you." />
<meta property="og:url" content="https://revolt.chat" />
<meta property="og:image" content="/embed.png" />
<meta property="twitter:card" content="summary_large_image"></meta>
<meta property="twitter:image" content="/embed.png"></meta>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="720" />
</Head>
<main>
<div className={styles.hero}>
<div className={styles.nav}>
<img className={styles.logo} src="/logo.svg" />
</div>
<div className={classNames(styles.body, flex.columns)}>
<div className={classNames(flex.column, styles.heroText)}>
<div className={styles.primary}>
<h2>Don't bother with chat apps that don't respect your privacy.</h2>
<h3>Communication is critical.<br/>Privacy is essential.</h3>
<SignupForm />
</div>
</div>
<div className={classNames(flex.column, styles.heroImage)}>
<div className={styles.container}>
<img src="/concept_inner.svg" />
</div>
</div>
</div>
<div className={styles.heroFix}></div>
</div>
</main>
</div>
);
}
.hero {
min-height: 100vh;
max-width: 1800px;
margin: 0 auto;
display: flex;
flex-direction: column;
background-color: #ff4754;
color: whitesmoke;
> .body {
flex-grow: 1;
}
.heroText {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
}
.primary {
max-width: 560px;
h2 {
font-size: 34px;
font-weight: 700;
}
h3 {
font-size: 34px;
font-weight: 300;
margin: 0;
}
}
.heroFix {
min-height: 128px;
}
.link {
display: block;
margin-top: 4em;
color: white;
text-decoration: none;
span {
font-weight: 400;
border-bottom: 2px solid white;
}
}
.heroImage {
display: flex;
align-items: center;
justify-content: center;
.container {
background: url('/concept_outer.svg');
background-repeat: no-repeat;
animation-name: outer;
animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-iteration-count: infinite;
animation-duration: 5s;
img {
position: relative;
left: -15px;
top: 10px;
animation-name: inner;
animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-iteration-count: infinite;
animation-duration: 5s;
}
}
}
}
@keyframes outer {
0% { transform: translateY(0px) };
50% { transform: translateY(14px) };
100% { transform: translateY(0px) };
}
@keyframes inner {
0% { transform: translateY(0px) };
50% { transform: translateY(4px) };
100% { transform: translateY(0px) };
}
// will be moved to its own component
.nav {
width: 100%;
min-height: 128px;
padding: 40px;
flex: 0 1;
display: flex;
.logo {
height: 38px;
}
}
@media (max-width: 1240px) {
.hero > .body {
flex-direction: column-reverse;
}
.heroImage {
margin-bottom: 2em;
}
}
@media (max-width: 720px) {
.heroImage {
transform: scale(0.8);
}
.nav {
justify-content: center;
}
}
@media (max-width: 640px) {
.heroImage {
transform: scale(0.7);
}
}
public/code.png

108 KiB

0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment