Skip to content

Commit

Permalink
fix: improve home component and about text
Browse files Browse the repository at this point in the history
  • Loading branch information
@danieljancar
danieljancar committed Aug 13, 2024
1 parent d2138b0 commit ea9c49c
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 78 deletions.
Binary file added apps/frontend/public/results-preview.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
93 changes: 35 additions & 58 deletions apps/frontend/src/app/features/about/about.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
</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"
class="mx-auto max-w-7xl px-6 pb-32 pt-24 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"
Expand All @@ -69,22 +69,24 @@
<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!
The Future of Voting: Secure, Anonymous, and Transparent
</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.
We are happy to show you VoteVault, our latest project built for
the
<a
class="text-indigo-600 hover:underline"
href="https://dev.to/challenges/stellar"
target="_blank"
>Stellar Smart Contracts Challenge</a
>. Initially, we considered diving into crypto and tokens, but
after many debates (and a lot of caffeine), we chose a different
path. Rather than adding to the crypto landscape, we tried to
create something with tangble real-world impact as well.
VoteVault is a simple, straightforward platform that prioritizes
secure and anonymous voting.
</p>
</div>
<div
Expand Down Expand Up @@ -157,64 +159,39 @@
</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">
<div class="mx-auto 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 class="mt-6 flex">
<p class="text-xl leading-8 text-gray-600">
Our journey began with a simple lunchtime idea. We set out to create
something useful, avoiding the complexities of tokenomics while
making a platform that simplifies and secures voting, polls and
getting peoples opinions. In just a short time, we built a robust
system for the Stellar Smart Contracts Challenge that focuses on
making voting and polls both anonymous and transparent, regardless
of the topic. Find out more about our journey on our
<a
class="text-indigo-600 hover:underline"
href="https://dev.to/gr1ll/votevault-our-journey-from-a-lunchtime-idea-to-dapp-2opf"
target="_blank"
>
Dev.to post </a
>.
</p>
</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!
We’re a duo of passionate developers, dedicated to making a difference
while having fun long the way. Here are the faces behind the code!
</p>
</div>
<ul
Expand Down
83 changes: 65 additions & 18 deletions apps/frontend/src/app/features/home/home.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,39 @@
<div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
<div class="relative isolate overflow-hidden bg-white">
<svg
aria-hidden="true"
class="absolute inset-0 -z-10 h-full w-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
>
<defs>
<pattern
height="200"
id="pattern-1"
patternUnits="userSpaceOnUse"
width="200"
x="50%"
y="-1"
>
<path d="M.5 200V.5H200" fill="none" />
</pattern>
</defs>
<rect fill="url(#pattern-1)" height="100%" stroke-width="0" width="100%" />
</svg>

<div
class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow"
class="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:flex lg:px-8 lg:py-40"
>
<div class="px-4 py-5 sm:px-6">
<h1 class="text-lg font-bold text-gray-900">VoteVault</h1>
</div>
<div class="px-4 py-5 sm:p-6">
<p class="text-md text-gray-900">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl lg:flex-shrink-0 lg:pt-8">
<img alt="VoteVault Logo" height="50" ngSrc="vv-logo-s.png" width="50" />
<h1
class="mt-10 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl"
>
VoteVault
</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">
A open-source, blockchain-based and anonymous voting platform for any
topic or poll, built with Stellar Smart Contracts.
</p>

<p class="mt-6 text-md text-gray-900">
Search for a vote by entering the vote ID below.
</p>
<div>
Expand Down Expand Up @@ -45,19 +72,39 @@ <h1 class="text-lg font-bold text-gray-900">VoteVault</h1>
Search
</button>
</div>
<div class="px-4 py-4 sm:px-6 text-center">
<p class="text-md text-gray-900">
Or
<button
(click)="createVote()"
aria-label="Create a New Vote"
class="text-indigo-600 hover:underline cursor-pointer focus:outline-none focus:underline"
>
create a new vote
</button>
on the blockchain.
</p>
</div>
</div>
<div class="px-4 py-4 sm:px-6 text-center">
<p class="text-md text-gray-900">
Or
<button
(click)="createVote()"
aria-label="Create a New Vote"
class="text-indigo-600 hover:underline cursor-pointer focus:outline-none focus:underline"

<!-- Right Side Image -->
<div
class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32"
>
<div class="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
<div
class="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4"
>
create a new vote
</button>
on the blockchain.
</p>
<img
alt="Vote results app preview"
class="w-[76rem] rounded-md shadow-2xl ring-1 ring-gray-900/10"
height="400"
ngSrc="results-preview.png"
priority="true"
width="890"
/>
</div>
</div>
</div>
</div>
</div>
4 changes: 2 additions & 2 deletions apps/frontend/src/app/features/home/home.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Component, OnInit } from '@angular/core'
import { CommonModule } from '@angular/common'
import { CommonModule, NgOptimizedImage } from '@angular/common'
import { FormControl, ReactiveFormsModule } from '@angular/forms'
import { Router } from '@angular/router'

@Component({
selector: 'app-home',
standalone: true,
imports: [CommonModule, ReactiveFormsModule],
imports: [CommonModule, ReactiveFormsModule, NgOptimizedImage],
templateUrl: './home.component.html',
styleUrl: './home.component.css',
})
Expand Down

0 comments on commit ea9c49c

Please sign in to comment.