fix: Adjust Hostinger card styling

Author: louisescher

www/src/assets/hostinger.svg

@@ -8,6 +8,7 @@ import Layout from '../layouts/Layout.astro';
 
 import Discord from '@/assets/discord.svg';
 import GitHub from '@/assets/github.svg';
+import HostingerWordmark from '@/assets/hostinger.svg';
 import AWS from '@/assets/icons/aws.svg';
 import Coolify from '@/assets/icons/coolify.svg';
 import Docker from '@/assets/icons/docker.svg';
@@ -317,21 +318,22 @@ const [npmDownloads, discordMembers, newestBlogPost, optimizedVideoPoster] = awa
 			</Card>
 		</div>
 
-		<div class="hosting-cta">
-			<h3>Looking for a hosting provider? Try Hostinger!</h3>
-			<span>High performance VPS perfect for hosting StudioCMS!</span>
-			<Button 
-				as='a' 
-				href='https://www.hostinger.com/cart?product=vps%3Avps_kvm_2&period=12&referral_type=cart_link&REFERRALCODE=FSMAMATTH73C&referral_id=019b013c-6b5c-7321-842a-aa21eef07473' 
+		<Card class="hosting-cta">
+			<HostingerWordmark width={300} height={60} />
+			<h3>Want to self-host StudioCMS?</h3>
+			<span>Hostinger offers high performance VPS, perfect for hosting StudioCMS. Use the link below to get a discount!</span>
+			<Button
+				as='a'
+				href='https://www.hostinger.com/cart?product=vps%3Avps_kvm_2&period=12&referral_type=cart_link&REFERRALCODE=FSMAMATTH73C&referral_id=019b013c-6b5c-7321-842a-aa21eef07473'
 				target='_blank'
-    			rel='noopener noreferrer'
+   			rel='noopener noreferrer'
 				class="cta"
 				color="primary"
-				variant='outlined'
-				>
+				variant='solid'
+			>
 				<span>Get started with <strong>Hostinger VPS</strong></span>
 			</Button>
-		</div>
+		</Card>
 
 	</section>
 	{
@@ -1048,25 +1050,29 @@ const [npmDownloads, discordMembers, newestBlogPost, optimizedVideoPoster] = awa
 		align-items: center;
 		width: fit-content;
 		margin: 0 auto;
-		margin-top: 4rem;
+		margin-top: 8rem;
+
+		svg {
+			margin-bottom: 2rem;
+		}
 
 		h3 {
 			font-size: 1.5em;
+			margin-bottom: .5rem;
 		}
 
-		span {
+		> span {
 			color: var(--text-muted);
 		}
 
 		.cta {
-			margin-top: 1rem;
+			margin: auto;
+			margin-top: 2rem;
+			width: fit-content;
+			position: relative;
 		}
 	}
 
-	.hosting-cta:hover {
-		background-color: var(--background-step-2);
-	}
-
 	.sponsors {
 		text-align: center;
 	}