Skip to content

Commit

Permalink
refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@araujo88
araujo88 committed Dec 26, 2024
1 parent 972080f commit 9cc99d3
Show file tree
Hide file tree
Showing 10 changed files with 199 additions and 192 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ A small React + TypeScript + Tailwind single-page application for the **Brainrot
1. Clone the repo:

```bash
git clone https://github.com/araujo88/brainrot-webpage.git
git clone https://github.com/Brainrotlang/brainrot-webpage.git
cd brainrot-webpage
```

Expand Down
8 changes: 8 additions & 0 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Learn Brainrot programming language. A fun, meme-inspired language!"
/>
<meta
name="keywords"
content="brainrot, brainrotlang, programming, meme, fun, language"
/>
<meta name="theme-color" content="#000000" />
<meta
name="description"
Expand Down
137 changes: 15 additions & 122 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,131 +1,24 @@
// App.tsx
import React from 'react';
import { Monitor, Terminal, Users } from 'lucide-react';
import './index.css';
import Footer from './Footer.tsx';
import Hero from './Hero.tsx';
import Navbar from './Navbar.tsx';
import GetStarted from './GetStarted.tsx';
import Features from './Features.tsx';

export default function BrainrotLanding() {
const App: React.FC = () => {
return (
<div>
<div className="min-h-screen bg-gray-900 text-white">
{/* Navbar */}
<nav className="bg-gray-800 p-4">
<div className="container mx-auto flex justify-between items-center">
<div className="flex items-center space-x-2">
<Terminal className="w-8 h-8" />
<span className="text-xl font-bold">Brainrot 🧠</span>
</div>
<div className="flex space-x-6">
<a href="#" className="hover:text-purple-400">Docs</a>
<a href="#" className="hover:text-purple-400">Community</a>
<a
href="https://github.com/araujo88/brainrot"
className="hover:text-purple-400"
>
GitHub
</a>
</div>
</div>
</nav>

{/* Hero */}
<div className="bg-gradient-to-b from-gray-800 to-gray-900 py-20">
<div className="container mx-auto text-center px-4">
<h1 className="text-5xl font-bold mb-6">No Cap, Just Pure Rizz 🔥</h1>
<p className="text-xl mb-8">
The most bussin' programming language that'll have your code
absolutely based!
</p>
<div className="space-x-4">
<button className="bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-lg">
Get Started
</button>
<button className="border border-purple-600 hover:bg-purple-700 px-6 py-3 rounded-lg">
Try Online
</button>
</div>
</div>
</div>

{/* Code Example */}
<div className="container mx-auto py-16 px-4">
<div className="bg-gray-800 rounded-lg p-6 mb-12">
<h3 className="text-xl mb-4">Your First Brainrot Program (fr fr no cap)</h3>
<pre className="bg-gray-900 p-4 rounded-lg overflow-x-auto">
<code className="text-green-400">
{`skibidi main {
yapping("sheeeesh! World! 🔥");
bussin 0; // return but make it lit
}`}
</code>
</pre>
</div>

{/* Features */}
<div className="grid md:grid-cols-3 gap-8">
<div className="bg-gray-800 p-6 rounded-lg">
<Monitor className="w-12 h-12 mb-4 text-purple-400" />
<h3 className="text-xl font-semibold mb-2">Based Syntax</h3>
<p>No mid code here! Replace boring keywords with absolute bangers:</p>
<ul className="mt-2 space-y-1 text-gray-300">
<li>void → skibidi</li>
<li>int → rizz</li>
<li>return → bussin</li>
</ul>
</div>

<div className="bg-gray-800 p-6 rounded-lg">
<Terminal className="w-12 h-12 mb-4 text-purple-400" />
<h3 className="text-xl font-semibold mb-2">Chad Features</h3>
<p>Built different with that sigma grindset:</p>
<ul className="mt-2 space-y-1 text-gray-300">
<li>Built-in meme references</li>
<li>Error messages that don't make you cry</li>
<li>VSCode support (no cap)</li>
</ul>
</div>

<div className="bg-gray-800 p-6 rounded-lg">
<Users className="w-12 h-12 mb-4 text-purple-400" />
<h3 className="text-xl font-semibold mb-2">Absolutely Goated Community</h3>
<p>Join the squad:</p>
<ul className="mt-2 space-y-1 text-gray-300">
<li>Discord server full of gigachads</li>
<li>GitHub contributors on that grind</li>
<li>Weekly meme updates (real)</li>
</ul>
</div>
</div>
</div>

{/* Installation */}
<div className="container mx-auto py-16 px-4">
<h2 className="text-3xl font-bold mb-8 text-center">Get That Bread 🍞</h2>
<div className="bg-gray-800 rounded-lg p-6">
<p className="mb-4">Install Brainrot (it's giving terminal vibes):</p>
<pre className="bg-gray-900 p-4 rounded-lg overflow-x-auto">
<code className="text-green-400">
{`# No cap, just paste this
git clone https://github.com/araujo88/brainrot.git
cd brainrot
make # Compilation go brrrrr`}
</code>
</pre>
</div>
<Navbar/>
<Hero/>
<Features/>
<GetStarted/>
<Footer/>
</div>

{/* Footer */}
<footer className="bg-gray-800 py-8">
<div className="container mx-auto px-4 text-center">
<p className="mb-4">Made with 💀 by the most unhinged developers</p>
<div className="flex justify-center space-x-6">
<a href="#" className="hover:text-purple-400">Discord</a>
<a href="#" className="hover:text-purple-400">Twitter</a>
<a href="#" className="hover:text-purple-400">GitHub</a>
</div>
<p className="mt-6 text-sm text-gray-400">
© 2024 Brainrot - No thoughts, just vibes
</p>
</div>
</footer>
</div>
);
}
};

export default App;
26 changes: 0 additions & 26 deletions src/DarkTheme.tsx
View file

This file was deleted.

47 changes: 47 additions & 0 deletions src/Features.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React from "react";
import { Monitor, Terminal, Users } from 'lucide-react';

const Features: React.FC = () => {
return (
<div>
<div className="container mx-auto py-16 px-4">
<div className="grid md:grid-cols-3 gap-8">
<div className="bg-gray-800 p-6 rounded-lg">
<Monitor className="w-12 h-12 mb-4 text-purple-400" />
<h3 className="text-xl font-semibold mb-2">Based Syntax</h3>
<p>No mid code here! Replace boring keywords with absolute bangers:</p>
<ul className="mt-2 space-y-1 text-gray-300">
<li>void → skibidi</li>
<li>int → rizz</li>
<li>return → bussin</li>
</ul>
</div>

<div className="bg-gray-800 p-6 rounded-lg">
<Terminal className="w-12 h-12 mb-4 text-purple-400" />
<h3 className="text-xl font-semibold mb-2">Chad Features</h3>
<p>Built different with that sigma grindset:</p>
<ul className="mt-2 space-y-1 text-gray-300">
<li>Built-in meme references</li>
<li>Error messages that don't make you cry</li>
<li>VSCode support (no cap)</li>
</ul>
</div>

<div className="bg-gray-800 p-6 rounded-lg">
<Users className="w-12 h-12 mb-4 text-purple-400" />
<h3 className="text-xl font-semibold mb-2">Absolutely Goated Community</h3>
<p>Join the squad:</p>
<ul className="mt-2 space-y-1 text-gray-300">
<li>Discord server full of gigachads</li>
<li>GitHub contributors on that grind</li>
<li>Weekly meme updates (real)</li>
</ul>
</div>
</div>
</div>
</div>
);
};

export default Features;
23 changes: 23 additions & 0 deletions src/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from "react";

const Footer: React.FC = () => {
return (
<div>
<footer className="bg-gray-800 py-8">
<div className="container mx-auto px-4 text-center">
<p className="mb-4">Made with 💀 by the most unhinged developers 🧟</p>
<div className="flex justify-center space-x-6">
<a href="https://discord.com/channels/1321786173349298176/1321786173781184532" className="hover:text-purple-400">Discord</a>
<a href="https://github.com/Brainrotlang/brainrot" className="hover:text-purple-400">GitHub</a>
</div>
<p className="mt-6 text-sm text-gray-400">
© 2024 Brainrot - No thoughts, just vibes
</p>
</div>
</footer>
</div>
);
};

export default Footer;

48 changes: 48 additions & 0 deletions src/GetStarted.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from "react";

const GetStarted: React.FC = () => {
return (
<div id="get-started-section">
<div className="container mx-auto py-16 px-4">
<h2 className="text-3xl font-bold mb-8 text-center">Get That Bread 🍞</h2>
<div className="bg-gray-800 rounded-lg p-6">
<h3 className="text-xl mb-4">Install Brainrot (it's giving terminal vibes):</h3>
<pre className="bg-gray-900 p-4 rounded-lg overflow-x-auto">
<code className="text-green-400">
{`# No cap, just paste this
git clone https://github.com/Brainrotlang/brainrot.git
cd brainrot
make # Compilation go brrrrr`}
</code>
</pre>
<br/>
<h3 className="text-xl mb-4">Create noobz.brainrot file:</h3>
<pre className="bg-gray-900 p-4 rounded-lg overflow-x-auto">
<code className="text-green-400">
{`touch noobz.brainrot`}
</code>
</pre>
<br/>
<h3 className="text-xl mb-4">Write Your First Brainrot Program (fr fr no cap):</h3>
<pre className="bg-gray-900 p-4 rounded-lg overflow-x-auto">
<code className="text-green-400">
{`skibidi main {
yapping("sheeeesh! World! 🔥");
bussin 0;
}`}
</code>
</pre>
<br/>
<h3 className="text-xl mb-4">Run!</h3>
<pre className="bg-gray-900 p-4 rounded-lg overflow-x-auto">
<code className="text-green-400">
{`./brainrot < noobz.brainrot`}
</code>
</pre>
</div>
</div>
</div>
);
};

export default GetStarted;
28 changes: 28 additions & 0 deletions src/Hero.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from "react";

const Hero: React.FC = () => {
return (
<div className="bg-gradient-to-b from-gray-800 to-gray-900 py-20">
<div className="container mx-auto text-center px-4">
<h1 className="text-5xl font-bold mb-6">No Cap, Just Pure Rizz 🔥</h1>
<p className="text-xl mb-8">
The most bussin' programming language that'll have your code
absolutely based!
</p>
<div className="space-x-4">
<button
className="bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-lg"
onClick={() => {
const section = document.getElementById("get-started-section");
section?.scrollIntoView({ behavior: "smooth" });
}}
>
Get Started
</button>
</div>
</div>
</div>
);
};

export default Hero;
43 changes: 0 additions & 43 deletions src/MainContent.tsx
View file

This file was deleted.

Loading

0 comments on commit 9cc99d3

Please sign in to comment.