66 lines
2.0 KiB
Svelte
66 lines
2.0 KiB
Svelte
<script>
|
|
import { browser } from "$app/environment";
|
|
import "../app.css";
|
|
export let data;
|
|
|
|
let isSubscribed = false;
|
|
|
|
function saveSubscribed() {
|
|
isSubscribed = true;
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="py-5 px-24 w-full fixed h-min top-0 flex flex-row justify-between bg-white drop-shadow-md"
|
|
>
|
|
<div>
|
|
<a href="/" class="font-bold text-2xl">{data.blog.site.name}</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
href="#subscribe-form"
|
|
class="px-8 py-3 bg-gray-900 text-white rounded-lg font-semibold ml-auto"
|
|
>Subscribe</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<slot></slot>
|
|
|
|
<div class="bg-white py-16 text-center" id="subscribe-form">
|
|
<div class="max-w-lg mx-auto">
|
|
<h3 class="text-3xl font-bold mb-3">Our newsletter</h3>
|
|
{#if isSubscribed}
|
|
<p>Thanks for subscribing!</p>
|
|
{:else}
|
|
{#if data.blog.site.freebie_text}
|
|
<p class="text-base/7 mb-8">
|
|
{data.blog.site.freebie_text}
|
|
</p>
|
|
{/if}
|
|
<div
|
|
class="max-w-[400px] whitespace-nowrap flex justify-around mx-auto"
|
|
>
|
|
<form method="post" on:submit={saveSubscribed}>
|
|
<input
|
|
name="email"
|
|
id="email"
|
|
type="text"
|
|
placeholder="Email address"
|
|
class="py-3 px-5 flex-grow border-l border-y border-solid border-gray-300 h-[50px] rounded-l-lg"
|
|
/>
|
|
<button
|
|
class="px-8 py-3 bg-gray-900 text-white font-semibold rounded-r-lg h-[50px]"
|
|
>Subscribe</button
|
|
>
|
|
</form>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<div class="h-24 flex items-center justify-center border-t border-gray-200">
|
|
<span>Copyright {new Date().getFullYear()} - Omer Sabic</span>
|
|
</div>
|
|
|
|
<style></style>
|