Improved sign up form

site/snippets/templates/partners-signup/preview.php

@@ -50,6 +50,13 @@
 	color: inherit;
 	width: 100%;
 }
+
+.partner-listing input::placeholder,
+.partner-listing textarea::placeholder {
+	color: inherit;
+	opacity: 1;
+}
+
 .partner-listing input:focus,
 .partner-listing textarea:focus {
 	position: relative;
@@ -92,25 +99,25 @@
 			Certified partner <?= icon('verified') ?>
 		</p>
 		<p class="partner-listing-label" v-else>
-			<input name="subtitle" type="text" v-model="personalInfo.subtitle">
+			<input name="subtitle" type="text" v-model="personalInfo.subtitle" placeholder="Type of company">
 		</p>
 		<h4 class="partner-listing-title h3">
-			<input name="title" type="text" v-model="personalInfo.title">
+			<input name="title" type="text" v-model="personalInfo.title" placeholder="Your company name">
 		</h4>
 	</header>
 	<figure class="partner-listing-image">
 		<?= icon('image') ?>
 	</figure>
 	<aside class="partner-listing-footer">
 		<p class="partner-listing-subtitle" v-if="personalInfo.tier === 'certified'">
-			<input name="subtitle" type="text" v-model="personalInfo.subtitle">
+			<input name="subtitle" type="text" v-model="personalInfo.subtitle" placeholder="Type of company">
 		</p>
 		<p class="partner-listing-location">
-			<input type="text" name="location" v-model="personalInfo.location">
+			<input type="text" name="location" v-model="personalInfo.location" placeholder="City, Country">
 		</p>
 	</aside>
 	<p class="partner-listing-description" v-if="personalInfo.tier === 'certified'">
-		<textarea name="description" rows="2" maxlength="140" v-model="personalInfo.description"></textarea>
+		<textarea name="description" rows="2" maxlength="140" v-model="personalInfo.description" placeholder="Tell the audience about yourself in 140 characters or less. Describe your strengths as company and let them know why they should choose you."></textarea>
 	</p>
 </article>
 

site/snippets/templates/partners-signup/price.php

@@ -0,0 +1,9 @@
+<section class="mb-12">
+	<h3 class="font-bold">Price per year</h3>
+	<p class="text-xl mb-3">€{{ price }}</p>
+	<ul class="text-xs color-gray-700">
+		<li>VAT is not included in the price.</li>
+		<li>You will be charged, once your application has been accepted.</li>
+		<li>Your partnership won't auto-renew after one year.</li>
+	</ul>
+</section>

site/snippets/templates/partners-signup/signup.php

@@ -114,10 +114,12 @@
 						<li><?= icon('alert') ?> 2 completed Kirby projects</li>
 					</ul>
 				</section>
+
+				<?php snippet('templates/partners-signup/price') ?>
 			</div>
 
 			<a :href="link" target="_blank" class="btn btn--filled">
-				<?= icon('icon-blank') ?> Join for&nbsp;<strong>€{{ price }}</strong>
+				<?= icon('icon-blank') ?> Apply now
 			</a>
 		</div>
 
@@ -147,17 +149,19 @@
 					</ul>
 				</section>
 
-				<section class="mb-12">
+				<section class="mb-6">
 					<h3 class="font-bold mb-1">Requirements</h3>
 					<ul class="requirements">
 						<li><?= icon('alert') ?> 4 completed Kirby projects</li>
 						<li><?= icon('alert') ?> 1 reviewed project</li>
 					</ul>
 				</section>
+
+				<?php snippet('templates/partners-signup/price') ?>
 			</div>
 
 			<a :href="link" target="_blank" class="btn btn--filled">
-				<?= icon('verified') ?> Join for&nbsp;<strong>€{{ price }}</strong>
+				<?= icon('verified') ?> Apply now
 			</a>
 		</div>
 	</div>
@@ -174,11 +178,11 @@
 	// user-generated props
 	personalInfo: {
 		people: 1,
-		tier: "regular",
-		title: "Your company name",
-		subtitle: "Type of company",
-		location: "City, Country",
-		description: "Tell the audience about yourself in 140 characters or less. Describe your strengths as company and let them know why they should choose you."
+		tier: "certified",
+		title: "",
+		subtitle: "",
+		location: "",
+		description: ""
 	},
 	prices: {
 		regular: {