Kessinen/levyraatiRevived.old
Archived
1
0
Fork 0
Code Issues 5 Pull Requests Projects 1 Wiki Activity

Add Landing page placeholder

Browse Source
This commit is contained in:
Esa Kataja
2024-10-12 11:31:08 +03:00
parent 96f55c2644
commit d05aaed5c6
1 changed files with 124 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+page.svelte
+124
View File
@@ -0,0 +1,124 @@
<script>
// Add any necessary script logic here
</script>
<section class="hero">
<h1>Levyraati 2024</h1>
<p>Liity mukaan ja koe musiikki yhdessä ystävien kanssa.</p>
<a href="/login" class="cta-button">Kirjaudu sisään</a>
</section>
<section class="features bg-zinc-200 rounded-lg">
<h2>Miksi Levyraati 2024?</h2>
<div class="feature-item">
<h3>Yhteisöllisyys</h3>
<p>Luomme alustan, jossa ystäväporukat voivat yhdessä kuunnella ja arvioida musiikkia.</p>
</div>
<div class="feature-item">
<h3>Helppo käyttää</h3>
<p>Lähetä kappaleita YouTube-linkkien avulla tai lataamalla tiedostoja suoraan sivustolle.</p>
</div>
<div class="feature-item">
<h3>Reilu kilpailu</h3>
<p>Jokainen kappale arvioidaan anonyymisti, jotta vain musiikki itsessään on keskipisteenä.</p>
</div>
<div class="feature-item">
<h3>Automatisoitu Pisteytys</h3>
<p>
Sovellus laskee pisteet ja julistaa voittajan. Voit keskittyä vain musiikkiin ja
hauskanpitoon!
</p>
</div>
</section>
<section class="testimonials text-zinc-700">
<h2>Osallistujien Kokemuksia</h2>
<div class="testimonial">
<p>
"Levyraati 2024 toi meidät taas yhteen kuuntelemaan ja nauttimaan musiikista. Suosittelen!"
</p>
<p><strong>- Kalle</strong></p>
</div>
<div class="testimonial">
<p>"Tämä on loistava tapa tutustua uusiin kappaleisiin ja pitää yhteyttä kavereihin."</p>
<p><strong>- Saara</strong></p>
</div>
</section>
<style>
:global(body) {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: #333;
background-color: #f7f7f7;
}
.hero {
background: linear-gradient(to right, #ff4b4b, #ff7f50);
color: #fff;
padding: 60px 20px;
text-align: center;
}
.hero h1 {
font-size: 3em;
margin: 0;
}
.hero p {
font-size: 1.2em;
margin: 10px 0 20px;
}
.cta-button {
background-color: #fff;
color: #ff4b4b;
padding: 15px 30px;
text-decoration: none;
border-radius: 5px;
font-size: 1.1em;
margin-top: 20px;
display: inline-block;
}
.cta-button:hover {
background-color: #ffdfdf;
}
.features,
.testimonials {
max-width: 800px;
margin: 40px auto;
padding: 20px;
}
.features h2,
.testimonials h2 {
color: #ff4b4b;
font-size: 2em;
margin-bottom: 20px;
text-align: center;
}
.feature-item {
text-align: center;
margin: 20px 0;
}
.feature-item h3 {
font-size: 1.5em;
color: #333;
}
.feature-item p {
font-size: 1em;
color: #666;
}
.testimonials .testimonial {
background-color: #fefefe;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
margin: 20px 0;
font-style: italic;
text-align: center;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
font-size: 0.9em;
}
</style>