Skip to content

Commit

Permalink
Moved waitlist page to index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimmybisenius
jimmybisenius committed Nov 30, 2020
1 parent ed12f9b commit 8f90974
Show file tree
Hide file tree
Showing 3 changed files with 419 additions and 15 deletions.
202 changes: 202 additions & 0 deletions www/fundraiser.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
<html>
<head>
<!-- Primary Meta Tags -->
<title>Beautiful FOSS! - The ultimate repository boilerplate</title>
<meta name="title" content="Beautiful FOSS! - The ultimate repository boilerplate">
<meta name="description" content="A GitHub repository boilerplate to make your repositories beautiful & discoverable in minutes.">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://foss.neutron.so/">
<meta property="og:title" content="Beautiful FOSS! - The ultimate repository boilerplate">
<meta property="og:description" content="A GitHub repository boilerplate to make your repositories beautiful & discoverable in minutes.">
<meta property="og:image" content="https://foss.neutron.so/assets/Beautiful-FOSS-Hero.png">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://foss.neutron.so/">
<meta property="twitter:title" content="Beautiful FOSS! - The ultimate repository boilerplate">
<meta property="twitter:description" content="A GitHub repository boilerplate to make your repositories beautiful & discoverable in minutes.">
<meta property="twitter:image" content="https://foss.neutron.so/assets/Beautiful-FOSS-Hero.png">

<!-- Responsive device support -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
<style type="text/css">
* { font-family: 'Inter', sans-serif; outline: none !important; }
.terminal, .terminal * { font-family: 'Roboto Mono', 'Inter', sans-serif !important; }
.social-mark { opacity: .5; width:20px; height: auto; }
.social-mark:hover { opacity: 1; }
html, body { width: 100vw; height: auto; min-height: 100vh; margin: 0; padding: 0; overflow-x: hidden; }
</style>
</head>
<body class="w-screen min-h-screen h-auto text-gray-500 leading-relaxed">
<!-- Announcement banner -->
<a href="https://neutroncreative.com" class="flex flex-row items-center justify-center p-4 md:p-2 bg-white border border-x-0 border-top-0 border-gray-100">
<span class="flex flex-row text-xs md:text-sm font-semibold text-center items-center justify-center">
<!-- If exciting -->
<!-- <span class="flex mr-2 md:hidden">🎉</span> -->
Beautiful FOSS is provided free in our mission to make the world open-source.
<!-- If exciting -->
<!-- <span class="flex md:hidden ml-2">🎉</span> -->
</span>
<span class="hidden md:flex mx-4 text-xs text-gray-400">|</span>
<span class="hidden md:flex text-xs md:text-sm font-semibold">Learn more 👉</span>
</a>
<!-- Jumbotron -->
<section class="w-full flex flex-col items-center justify-center">
<!-- Container -->
<div class="w-full max-w-5xl p-8 md:py-32 flex flex-col items-center justify-center text-center">
<h1 class="text-gray-900 text-6xl lg:text-7xl font-extrabold mb-8">Beautiful FOSS!</h2>
<p class="text-xl lg:text-2xl font-medium">
A Github repository template to make your repositories <span class="text-black font-semibold">beautiful in minutes.</span>
</p>
<div class="flex flex-col md:flex-row items-center mt-10 space-x-4 w-full md:justify-center">
<a href="https://www.producthunt.com/upcoming/beautiful-foss" class="text-lg w-full text-center md:w-auto font-semibold text-white bg-blue-600 hover:bg-blue-500 py-4 px-8 rounded-xl">Join the waitlist</a>
<!-- <div class="hidden terminal md:flex flex-none bg-gray-50 text-gray-400 hover:text-gray-900 rounded-xl items-center justify-center space-x-2 px-6 py-3 border border-gray-200 w-full md:w-auto">
<span>$</span>
<span class="text-gray-900">git clone https://github.com/Neutron-Creative/Beautiful-FOSS.git</span>
</div>-->
<!-- Github star count
<iframe src="https://ghbtns.com/github-btn.html?user=Neutron-Creative&repo=Beautiful-FOSS&type=star&count=true&size=large" frameborder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
-->
</div>
</div>
</section>
<!-- "The Pitch" -->
<section class="w-full flex flex-col items-center justify-center bg-gray-100">
<!-- Container -->
<div class="w-full max-w-5xl p-8 md:py-20 items-center justify-center text-center">
<h2 class="font-extrabold text-gray-900 text-5xl tracking-tight mb-8">
Your repository needs a makeover.
</h2>
<p class="text-xl leading-relaxed font-medium mx-auto max-w-4xl">
The open-source community is contagious, but without the right resources to help others find & understand your project, it likely isn't getting the engagement it deserves. Beautiful FOSS makes it easier to understand your project with a high-quality readme file, get found online with an SEO optimized landing page, and promote your project with our archive of self-promotion links.
</p>
</div>
</section>
<!-- Feature 1 -->
<section class="w-full flex flex-col items-center justify-center">
<!-- Container -->
<div class="w-full max-w-5xl px-8 py-20 lg:py-44 pb-0 lg:pb-0 flex flex-col md:flex-row items-center">
<div class="flex flex-col w-full md:w-1/2 justify-center items-start mr-4">
<!--
Icons
<div class="w-12 h-12 rounded-xl bg-indigo-600 mb-8"></div>
-->
<h2 class="text-lg tracking-wide font-semibold text-indigo-600 uppercase mb-3">Quality Readme's</h2>
<h3 class="text-6xl text-gray-900 font-extrabold mb-8">Memorable & understood</h3>
<p class="text-2xl leading-relaxed font-medium mb-6">
A simple, thorough, and well-branded readme will help users understand your project and prevent it from slipping through the cracks of Github.
</p>
</div>
<!-- Readme example -->
<a href="https://github.com/Neutron-Creative/Beautiful-FOSS" class="hidden md:flex overflow-hidden shadow-xl relative w-full min-w-sm max-w-sm ml-8 bg-gray-800 rounded-md flex-col items-center justify-center transform-gpu transform" style="transform:perspective(1040px) rotate(0) rotateX(2deg) rotateY(-12deg) translateZ(-10px) scale(1.05);">
<!-- Prevents clicking on documents -->
<div class="w-full h-full absolute t-0 l-0 r-0 b-0 z-1"></div>
<!-- Example readme -->
<div class="w-full flex flex-row bg-gray-900 p-3 items-center">
<span class="text-sm text-gray-200 tracking-wide mr-2">README.md</span>
<div class="flex flex-row items-center justify-center ml-auto" style="filter:invert(1);opacity:.5;">
<img src="https://neutroncreative.com/github-mark.svg" class="mr-2" style="width:12px;"/>
<span class="text-xs tracking-wider">Neutron-Creative/Singlelink</span>
</div>
</div>
<div class="p-6 flex flex-col items-center text-center justify-center">
<img src="https://singlelink.co/singlelink-brandmark-white.svg" width="185" alt="SingleLink Logo" class="mb-4">
<div class="flex flex-row items-center justify-center mb-4">
<img src="https://img.shields.io/badge/beta-2.0.1-%2303d2d4" alt="Version" class="mr-2">
<img src="https://img.shields.io/badge/license-GPL-%236ab04c" alt="License" class="mr-2">
<img src="https://img.shields.io/badge/users-500+-%2330336b" alt="Users" class="mr-2">
</div>
<p class="text-gray-600 text-sm leading-relaxed mb-4">Welcome to the Singlelink Client Github repository. Here you can browse the source, view open issues and monitor development.</p>
<h2 class="text-gray-500 text-xl font-medium mb-2 leading-relaxed">Build Setup</h2>
<div class="terminal bg-gray-700 rounded p-4 tracking-wider text-sm text-left w-full">
<span class="italic text-indigo-600 font-medium" style="color:#fffF;opacity:.5"># install dependencies<br></span>
<span class="font-medium" style="color:#0f0">$</span>
<span class="text-gray-200">npm install</span>
<br/><br/>
<span class="italic text-indigo-600 font-medium" style="color:#fffF;opacity:.5"># serve with hot reload at on port 3000<br></span>
<span class="font-medium" style="color:#0f0">$</span>
<span class="text-gray-200">npm run dev</span>
</div>
</div>
</a>
</div>
</div>
</section>
<!-- Feature 2 -->
<section class="w-full flex flex-col items-center justify-center">
<!-- Container -->
<div class="w-full max-w-5xl px-8 py-20 lg:py-44 pb-0 lg:pb-0 flex flex-col md:flex-row items-center justify-center">
<div class="flex flex-col w-full md:w-2/3 justify-center items-start mr-4">
<!--
Icons
<div class="w-12 h-12 rounded-xl bg-indigo-600 mb-8"></div>
-->
<h2 class="text-lg tracking-wide font-semibold text-pink-600 uppercase mb-3">Enhanced SEO &amp; Previews</h2>
<h3 class="text-6xl text-gray-900 font-extrabold mb-8">Get found online</h3>
<p class="text-2xl leading-relaxed font-medium mb-6">Without an SEO optimized website & open-graph previews, you're left stranded with no way to find your project or share it on social media. With Beautiful FOSS, generate these assets to get found & get more shares in minutes!</p>
</div>
<!-- Floating preview -->
<a href="https://singlelink.co" class="hidden md:flex w-1/3 bg-gray-100 rounded-xl border border-r-0 border-t-0 border-b-0 border-l-2 border-gray-200 ml-auto p-3 flex-col shadow-lg cursor-pointer transform transform-gpu" style="transform:perspective(1040px) rotate(0) rotateX(2deg) rotateY(-12deg) translateZ(-10px) scale(1.05);">
<div class="w-full h-full absolute t-0 l-0 r-0 b-0 z-1"></div>
<span class="text-blue-600 font-semibold mb-2 text-sm">Singlelink - A single link for everything!</span>
<span class="text-xs mb-4 font-medium leading-loose">A single link for everything. Build your profile in seconds and get started for free!</span>
<img class="w-full h-auto rounded-lg" src="https://singlelink.co/SingleLink-Hero-v2.png"/>
</a>
</div>
</section>
<!-- Feature 3 -->
<section class="w-full flex flex-col items-center justify-center">
<!-- Container -->
<div class="w-full max-w-5xl px-8 py-20 lg:py-44">
<!--
Icons
<div class="w-12 h-12 rounded-xl bg-indigo-600 mb-8">
-->
<h2 class="text-lg tracking-wide font-semibold text-blue-600 uppercase mb-3">Forever free</h2>
<h3 class="text-6xl text-gray-900 font-extrabold mb-8">100% free, no catch.</h3>
<p class="text-2xl leading-relaxed font-medium mb-10">The best part about Beautiful FOSS is there's no excuse not to use it - it's entirely free! Licensed via LGPL, you're free to use this in your project and modify however you need without paying a dime.</p>
<div class="flex flex-col md:flex-row items-center space-x-4 w-full items-center justify-center md:justify-start">
<a href="https://www.producthunt.com/upcoming/beautiful-foss" class="text-lg text-center w-full md:w-auto font-semibold text-white bg-blue-600 hover:bg-blue-500 py-4 px-8 rounded-xl">Join the waitlist</a>
<!--<div class="terminal hidden md:flex flex-none bg-gray-50 text-gray-400 hover:text-gray-900 rounded-xl items-center justify-center space-x-2 px-6 py-3 border border-gray-200 w-full md:w-auto">
<span>$</span>
<span class="text-gray-700">git clone https://github.com/Neutron-Creative/Beautiful-FOSS.git</span>
</div>-->
</div>
</div>
</section>
<!-- Footer -->
<footer class="w-full flex flex-col items-center justify-center border border-gray-100 border-x-0 border-bottom-0">
<!-- Container -->
<div class="w-full max-w-5xl px-8 py-20 flex flex-row items-center justify-center">
<div class="flex flex-col mr-auto">
<img src="https://neutroncreative.com/Sidebar-brandmark.svg" class="mb-4" style="filter:invert(1);width:145px;"/>
<p>Copyright ©2020 Neutron Creative Inc. All rights reserved.</p>
</div>
<ul class="flex flex-row mx-auto space-x-4">
<a href="https://github.com/Neutron-Creative">
<li class="cursor-pointer social-mark">
<img src="https://neutroncreative.com/github-mark.svg"/>
</li>
</a>
<a href="https://discord.gg/3pBM4Px">
<li class="cursor-pointer social-mark">
<img src="https://neutroncreative.com/discord-mark.svg"/>
</li>
</a>
<a href="https://twitter.com/neutroncreative">
<li class=" cursor-pointer text-sm social-mark">
<img src="https://neutroncreative.com/twitter-mark.svg"/>
</li>
</a>
</ul>
</div>
</footer>
</body>
</html>
Loading

0 comments on commit 8f90974

Please sign in to comment.