Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add about project page #14

Merged
merged 3 commits into from
Aug 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion apps/frontend/src/app/app.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export const appRoutes: Route[] = [
{
path: 'about',
component: AboutComponent,
canActivate: [AuthGuard],
},
{
path: 'login',
Expand Down
254 changes: 253 additions & 1 deletion apps/frontend/src/app/features/about/about.component.html
Original file line number Diff line number Diff line change
@@ -1 +1,253 @@
<p>about works!</p>
<div class="bg-white">
<main class="isolate">
<div class="relative isolate -z-10">
<svg
aria-hidden="true"
class="absolute inset-x-0 top-0 -z-10 h-[64rem] w-full stroke-gray-200 [mask-image:radial-gradient(32rem_32rem_at_center,white,transparent)]"
>
<defs>
<pattern
height="200"
id="pattern-id"
patternUnits="userSpaceOnUse"
width="200"
x="50%"
y="-1"
>
<path d="M.5 200V.5H200" fill="none" />
</pattern>
</defs>
<svg class="overflow-visible fill-gray-50" x="50%" y="-1">
<path
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
stroke-width="0"
/>
</svg>
<rect
fill="url(#pattern-id)"
height="100%"
stroke-width="0"
width="100%"
/>
</svg>
<div
aria-hidden="true"
class="absolute left-1/2 right-0 top-0 -z-10 -ml-24 transform-gpu overflow-hidden blur-3xl lg:ml-24 xl:ml-48"
>
<div
class="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
style="
clip-path: polygon(
63.1% 29.5%,
100% 17.1%,
76.6% 3%,
48.4% 0%,
44.6% 4.7%,
54.5% 25.3%,
59.8% 49%,
55.2% 57.8%,
44.4% 57.2%,
27.8% 47.9%,
35.1% 81.5%,
0% 97.7%,
39.2% 100%,
35.2% 81.4%,
97.2% 52.8%,
63.1% 29.5%
);
"
></div>
</div>
<div class="overflow-hidden">
<div
class="mx-auto max-w-7xl px-6 pb-32 pt-36 sm:pt-60 lg:px-8 lg:pt-32"
>
<div
class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center"
>
<div class="w-full max-w-xl lg:shrink-0 xl:max-w-2xl">
<h1
class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl"
>
The Future of Voting: No Crypto, No Tokens, but anonymity and
just votes!
</h1>
<p
class="relative mt-6 text-lg leading-8 text-gray-600 sm:max-w-md lg:max-w-none"
>
We are excited to introduce you to our latest project that we
built for the
<strong>Stellar Smart Contracts Challenge on Dev</strong>. We
were originally going to dive into the crypto and token stuff,
but after a lot of discussions (and too many caffeine debates),
we decided to take a different route. Instead of adding to the
token world, we chose to build something with a real-world
impact as well. We’re talking about making voting simpler and
anonymous. Just a straightforward and privacy-focused platform
for casting votes.
</p>
</div>
<div
class="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0"
>
<div
class="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-none xl:pt-80"
>
<div class="relative">
<img
alt="Voting Process"
class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
src="https://as1.ftcdn.net/v2/jpg/02/67/03/72/1000_F_267037209_azqHZoev6ULaHkVXd5jAPI3NvbFutrMK.jpg"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"
></div>
</div>
</div>
<div
class="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36"
>
<div class="relative">
<img
alt="Voter Rights"
class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
src="https://images.seattletimes.com/wp-content/uploads/2021/02/voters-rights-gabi-web.jpg?d=780x1009"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"
></div>
</div>
<div class="relative">
<img
alt="Secure Voting"
class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
src="https://dl6pgk4f88hky.cloudfront.net/2024/01/10/202402-Bruno-main-min.jpg"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"
></div>
</div>
</div>
<div class="w-44 flex-none space-y-8 pt-32 sm:pt-0">
<div class="relative">
<img
alt="Anonymous Voting"
class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
src="https://img.freepik.com/premium-photo/hand-throws-blank-form-into-ballot-box-anonymous-voting_847296-16243.jpg?size=626&ext=jpg&ga=GA1.1.2008272138.1722556800&semt=sph"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"
></div>
</div>
<div class="relative">
<img
alt="Confidential Voting"
class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
src="https://preview.redd.it/anonymous-nba-player-poll-and-who-the-goat-is-any-idea-who-v0-2siiy4qtd1wc1.jpeg?width=640&crop=smart&auto=webp&s=f35c3569693ccad84f9e1e1bdedbf55a95bb6eb2"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="mx-auto -mt-12 max-w-7xl px-6 sm:mt-0 lg:px-8 xl:-mt-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Our Journey
</h2>
<div class="mt-6 flex flex-col gap-x-8 gap-y-20 lg:flex-row">
<div class="lg:w-full lg:max-w-2xl lg:flex-auto">
<p class="text-xl leading-8 text-gray-600">
So here’s the story... We were thinking about crypto and
tokenomics, but then we had another idea — what if we could make
something useful without adding to the crypto chaos? (Just a joke,
we love crypto) We thought: why not create a platform that makes
voting straightforward and completly anonymous? And that’s how we
ended up here. We built a system, in a very short period of time
for the Stellar Smart Contracts Challenge, that is all about
keeping votes anonymous and transparent on any kind of topic.
</p>
</div>
<div class="lg:flex lg:flex-auto lg:justify-center">
<dl class="w-64 space-y-8 xl:w-80">
<div class="flex flex-col-reverse gap-y-4">
<dt class="text-base leading-7 text-gray-600">
Create a "wallet" and vote
</dt>
<dd class="text-5xl font-semibold tracking-tight text-gray-900">
How Anonymous?
</dd>
</div>
<div class="flex flex-col-reverse gap-y-4">
<dt class="text-base leading-7 text-gray-600">
The Stellar Network is your friend
</dt>
<dd class="text-5xl font-semibold tracking-tight text-gray-900">
How Transparent?
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>

<div class="mt-32 sm:mt-40 xl:mx-auto xl:max-w-7xl xl:px-8">
<img
alt="Voting Imagery"
class="aspect-[5/2] w-full object-cover xl:rounded-3xl"
src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80"
/>
</div>

<div class="mx-auto mt-32 max-w-7xl px-6 sm:mt-48 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Meet the Duo
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
We’re a duo of young and passionate developers. We believe in making a
difference and having a bit of fun while we’re at it. Meet the faces
behind the code!
</p>
</div>
<ul
class="mx-auto mt-20 mb-32 grid max-w-2xl grid-cols-2 gap-x-8 gap-y-16 text-center sm:grid-cols-3 md:grid-cols-4 lg:mx-0 lg:max-w-none lg:grid-cols-5 xl:grid-cols-6"
role="list"
>
<li>
<img
alt="Daniel Jancar"
class="mx-auto h-24 w-24 rounded-full"
src="https://avatars.githubusercontent.com/u/112062588?v=4"
/>
<h3
class="mt-6 text-base font-semibold leading-7 tracking-tight text-gray-900"
>
Daniel Jancar
</h3>
<p class="text-sm leading-6 text-gray-600">Full Stack Engineer</p>
</li>
<li>
<img
alt="Cyril Kurmann"
class="mx-auto h-24 w-24 rounded-full"
src="https://avatars.githubusercontent.com/u/59368801?v=4"
/>
<h3
class="mt-6 text-base font-semibold leading-7 tracking-tight text-gray-900"
>
Cyril Kurmann
</h3>
<p class="text-sm leading-6 text-gray-600">Full Stack Engineer</p>
</li>
</ul>
</div>
</main>
</div>
11 changes: 7 additions & 4 deletions apps/frontend/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,15 @@
<head>
<meta charset="utf-8" />
<title>
VoteVault - Anonymously vote on anything with Stellar Blockchain
technology
VoteVault - Anonymously vote on anything with Stellar Smart Contracts
</title>
<meta
content="An anounymous and straightforward voting platform built on Stellar Smart Contract for the Dev Challenge"
name="description"
/>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="favicon.ico" rel="icon" type="image/x-icon" />
</head>
<body>
<app-root></app-root>
Expand Down