Skip to content

Commit 989279b

Browse files
codercatdevcodercatdev
authored
Merge pull request CodingCatDev#481 from CodingCatDev/feature/sponsorship-page
add sponsorship and links
2 parents 243c3a2 + 6a902ef commit 989279b

File tree

8 files changed

+885
-2
lines changed

8 files changed

+885
-2
lines changed

‎apps/codingcatdev/src/routes/(layout-partials)/CcdFooter.svelte

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
</script>
66

77
<hr />
8-
<footer class="md:mx-12 md:my-4 md:gap-16 flex justify-center p-8 sm:p-1">
9-
<div class="max-w-6xl">
8+
<footer class="md:mx-12 md:my-4 md:gap-16 flex justify-center md:p-8 p-2">
9+
<div class="flex flex-col gap-6 md:gap-10">
1010
<section class="flex flex-col md:flex-row justify-between gap-8 md:space-y-0 items-center">
1111
<p class="text-xs">
1212
<a class="bcu-button variant-soft" href="https://alexpatterson.dev"
@@ -46,5 +46,52 @@
4646
</a>
4747
</div>
4848
</section>
49+
50+
<!-- Links -->
51+
<section
52+
class="flex flex-col md:flex-row justify-between items-center md:items-start space-y-5 md:space-y-0 gap-4 md:gap-8 bcu-card p-8"
53+
>
54+
<div class="hidden md:grid grid-cols-2 gap-8">
55+
<div class="space-y-6">
56+
<h6>Stuff</h6>
57+
<ul class="space-y-3">
58+
<li><a href="/ftc-disclosure">FTC Disclosure</a></li>
59+
<li><a href="/privacy-policy">Privacy Policy</a></li>
60+
<li><a href="/terms-of-use">Terms</a></li>
61+
</ul>
62+
</div>
63+
<div class="space-y-6">
64+
<h6>More Stuff</h6>
65+
<ul class="space-y-3">
66+
<li><a href="/sponsorships">Sponsorships</a></li>
67+
</ul>
68+
</div>
69+
</div>
70+
71+
<form
72+
action="https://buttondown.email/api/emails/embed-subscribe/codingcatdev"
73+
method="post"
74+
target="popupwindow"
75+
class="embeddable-buttondown-form flex flex-col flex-1"
76+
>
77+
<label for="email" class="bcu-label">Email</label>
78+
<div class="flex gap-4 md:gap-8 flex-col md:flex-row">
79+
<input type="email" name="email" placeholder="you@example.com" class="text-black input" />
80+
<input type="hidden" value="1" name="embed" />
81+
<button class="bcu-button variant-filled-primary" type="submit">Subscribe</button>
82+
</div>
83+
<p>
84+
<a href="https://buttondown.email" target="_blank" class="text-xs">
85+
Powered by Buttondown.
86+
</a>
87+
</p>
88+
</form>
89+
</section>
4990
</div>
5091
</footer>
92+
93+
<style lang="postcss">
94+
a {
95+
@apply !no-underline;
96+
}
97+
</style>

‎apps/codingcatdev/src/routes/(layout-partials)/CcdSideNav.svelte

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,38 @@
4949
</li>
5050
</ul>
5151
</nav>
52+
<hr />
53+
<nav class="nav-list-nav">
54+
<ul>
55+
<li on:click={onListItemClick} on:keypress>
56+
<a href={`/sponsors`} class={classesActive('sponsors')} data-sveltekit-preload-data="hover">
57+
<span class="flex-auto text-3xl font-bold capitalize">Sponsors</span>
58+
</a>
59+
</li>
60+
<li on:click={onListItemClick} on:keypress>
61+
<a
62+
href={`/sponsorships`}
63+
class={classesActive('sponsorships')}
64+
data-sveltekit-preload-data="hover"
65+
>
66+
<span class="flex-auto text-3xl font-bold capitalize">Sponsorships</span>
67+
</a>
68+
</li>
69+
</ul>
70+
</nav>
71+
<hr />
72+
<nav class="nav-list-nav">
73+
<ul>
74+
<li on:click={onListItemClick} on:keypress>
75+
<a href={`/guests`} class={classesActive('guests')} data-sveltekit-preload-data="hover">
76+
<span class="flex-auto text-3xl font-bold capitalize">Guests</span>
77+
</a>
78+
</li>
79+
<li on:click={onListItemClick} on:keypress>
80+
<a href={`/authors`} class={classesActive('authors')} data-sveltekit-preload-data="hover">
81+
<span class="flex-auto text-3xl font-bold capitalize">Authors</span>
82+
</a>
83+
</li>
84+
</ul>
85+
</nav>
5286
</section>

‎apps/codingcatdev/src/routes/(top-level-pages)/sponsorships/+page.svelte

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<script lang="ts">
2+
import Image from '$lib/components/content/Image.svelte';
3+
</script>
4+
5+
<svelte:head>
6+
<title>Sponsorships</title>
7+
<!-- Meta Tags -->
8+
<meta name="title" content="CodingCat.dev Sponsorships" />
9+
<meta name="description" content="CodingCat.dev Sponsorships" />
10+
<meta name="keywords" content="codingcatdev, webdev, webdevelopment, learning, beginner" />
11+
<meta name="theme-color" content="#6366f1" />
12+
<meta name="author" content="CodingCatDev, LLC" />
13+
<!-- Open Graph - https://ogp.me/ -->
14+
<meta property="og:site_name" content="CodingCat.dev Sponsorships" />
15+
<meta property="og:type" content="website" />
16+
<meta property="og:url" content="https://codingcat.dev/sponsorships" />
17+
<meta property="og:locale" content="en_US" />
18+
<meta property="og:title" content="Sponsorships" />
19+
<meta property="og:description" content="CodingCat.dev Sponsorships" />
20+
<meta
21+
property="og:image"
22+
content="https://media.codingcat.dev/image/upload/main-codingcatdev-photo/Sponsorship.png"
23+
/>
24+
<meta
25+
property="og:image:secure_url"
26+
content="https://media.codingcat.dev/image/upload/main-codingcatdev-photo/Sponsorship.png"
27+
/>
28+
<meta property="og:image:type" content="image/png" />
29+
<meta property="og:image:width" content="1920" />
30+
<meta property="og:image:height" content="1080" />
31+
32+
<!-- Open Graph: Twitter -->
33+
<meta name="twitter:card" content="summary_large_image" />
34+
<meta name="twitter:site" content="@CodingCatDev" />
35+
<meta name="twitter:creator" content="@CodingCatDev" />
36+
<meta name="twitter:title" content="Sponsorships" />
37+
<meta name="twitter:description" content="CodingCat.dev Sponsorships" />
38+
<meta
39+
name="twitter:image"
40+
content="https://media.codingcat.dev/image/upload/main-codingcatdev-photo/Sponsorship.png"
41+
/>
42+
</svelte:head>
43+
44+
<div class="flex justify-center">
45+
<section class="flex flex-col justify-center w-full gap-8 p-2 xl:flex-row xl:p-8">
46+
<div class="flex flex-col w-full gap-2 md:gap-8 max-w-7xl">
47+
<Image
48+
src="https://media.codingcat.dev/image/upload/main-codingcatdev-photo/Sponsorship.png"
49+
alt="Ad Sponsorship"
50+
/>
51+
<div class="flex flex-col gap-2 md:gap-8 overflow-x-auto">
52+
<h1>Sponsorships</h1>
53+
<hr />
54+
55+
<!-- Main Content -->
56+
<section class="relative grid gap-2 md:gap-4 grid-cols-1 sm:grid-cols-3">
57+
<a class="overflow-hidden bcu-card bg-initial card-hover" href="/sponsorships/podcast">
58+
<header>
59+
<Image
60+
src="https://media.codingcat.dev/image/upload/v1686699444/main-codingcatdev-photo/podcast-sponsorship.png"
61+
alt="Podcast Sponsorship"
62+
/>
63+
</header>
64+
<div class="p-4 space-y-4">
65+
<h3 data-toc-ignore="">Podcast Sponsorship</h3>
66+
<article>
67+
<p>
68+
Become an exclusive sponsor for a single episode, or multiple podcasts. Includes
69+
both video and audio within the show.
70+
</p>
71+
</article>
72+
</div>
73+
</a>
74+
<a
75+
class="overflow-hidden bcu-card bg-initial card-hover"
76+
href="/sponsorships/code-with-codingcatdev"
77+
>
78+
<header>
79+
<Image
80+
src="https://media.codingcat.dev/image/upload/v1686702324/main-codingcatdev-photo/code-with-ccd-sponsorship.png"
81+
alt="Podcast Sponsorship"
82+
/>
83+
</header>
84+
<div class="p-4 space-y-4">
85+
<h3 data-toc-ignore="">Code with CodingCat.dev Sponsorship</h3>
86+
<article>
87+
<p>
88+
Looking to showcase your product, live coding helps others to explain how they can
89+
see your product!
90+
</p>
91+
</article>
92+
</div>
93+
</a>
94+
95+
<a class="overflow-hidden bcu-card bg-initial card-hover" href="/sponsorships/blog">
96+
<header>
97+
<Image
98+
src="https://media.codingcat.dev/image/upload/v1686700627/main-codingcatdev-photo/blog-sponsorship.png"
99+
alt="Blog Sponsorship"
100+
/>
101+
</header>
102+
<div class="p-4 space-y-4">
103+
<h3 data-toc-ignore="">Blog Sponsorship</h3>
104+
<article>
105+
<p>
106+
Blog sponsorship is a great way to reach a highly engaged audience of potential
107+
customers.
108+
</p>
109+
</article>
110+
</div>
111+
</a>
112+
</section>
113+
</div>
114+
</div>
115+
</section>
116+
</div>

‎apps/codingcatdev/src/routes/(top-level-pages)/sponsorships/blog/+page.svelte

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<script lang="ts">
2+
import Image from '$lib/components/content/Image.svelte';
3+
import AJPrimary from '$lib/components/global/icons/AJPrimary.svelte';
4+
</script>
5+
6+
<svelte:head>
7+
<title>Blog Sponsorship</title>
8+
<!-- Meta Tags -->
9+
<meta name="title" content="CodingCat.dev Blog Sponsorship" />
10+
<meta name="description" content="CodingCat.dev Blog Sponsorship" />
11+
<meta name="keywords" content="codingcatdev, webdev, webdevelopment, learning, beginner" />
12+
<meta name="theme-color" content="#6366f1" />
13+
<meta name="author" content="CodingCatDev, LLC" />
14+
<!-- Open Graph - https://ogp.me/ -->
15+
<meta property="og:site_name" content="CodingCat.dev Blog Sponsorship" />
16+
<meta property="og:type" content="website" />
17+
<meta property="og:url" content="https://codingcat.dev/sponsorships" />
18+
<meta property="og:locale" content="en_US" />
19+
<meta property="og:title" content="Blog Sponsorship" />
20+
<meta property="og:description" content="CodingCat.dev Blog Sponsorship" />
21+
<meta
22+
property="og:image"
23+
content="https://media.codingcat.dev/image/upload/v1686700627/main-codingcatdev-photo/blog-sponsorship.png"
24+
/>
25+
<meta
26+
property="og:image:secure_url"
27+
content="https://media.codingcat.dev/image/upload/v1686700627/main-codingcatdev-photo/blog-sponsorship.png"
28+
/>
29+
<meta property="og:image:type" content="image/png" />
30+
<meta property="og:image:width" content="1920" />
31+
<meta property="og:image:height" content="1080" />
32+
33+
<!-- Open Graph: Twitter -->
34+
<meta name="twitter:card" content="summary_large_image" />
35+
<meta name="twitter:site" content="@CodingCatDev" />
36+
<meta name="twitter:creator" content="@CodingCatDev" />
37+
<meta name="twitter:title" content="Sponsorships" />
38+
<meta name="twitter:description" content="CodingCat.dev Blog Sponsorship" />
39+
<meta
40+
name="twitter:image"
41+
content="https://media.codingcat.dev/image/upload/v1686699444/main-codingcatdev-photo/blog-sponsorship.png"
42+
/>
43+
</svelte:head>
44+
45+
<ol class="bcu-breadcrumb">
46+
<li class="capitalize bcu-crumb"><a href="/sponsorships">Sponsorships</a></li>
47+
<li class="bcu-crumb-separator" aria-hidden>&rsaquo;</li>
48+
<li>Blog Sponsorship</li>
49+
</ol>
50+
51+
<section class="grid grid-cols-1 gap-2 mx-2 md:mx-8 md:gap-8 markdown">
52+
<div class="flex flex-col items-center sm:hidden">
53+
<AJPrimary cls="w-48 h-48" />
54+
</div>
55+
<div class="flex justify-center m-4">
56+
<h1 class="flex flex-col gap-2">
57+
<span class="text-xl md:text-4xl">Sponsorship for</span>
58+
<span class="md:text-6xl font-extrabold"> CodingCat.dev Blog </span>
59+
<span class="text-xl md:text-2xl">a CodingCat.dev Production</span>
60+
</h1>
61+
<div class="flex-col items-center hidden sm:flex">
62+
<AJPrimary cls="w-48 h-48" />
63+
</div>
64+
</div>
65+
<div class="flex justify-center bcu-card variant-soft-surface">
66+
<div class="flex flex-col p-8">
67+
<div class="flex justify-center w-full gap-4 p-8 font-extrabold">
68+
<p class="text-4xl">
69+
<span class="text-8xl text-primary-500"> Why </span>
70+
<span class="font-bold">would you sponsor our blog?</span>
71+
</p>
72+
</div>
73+
<p>
74+
Blog sponsorship is a great way to reach a highly engaged audience of potential customers.
75+
By sponsoring a blog post, your company can be featured prominently on a popular blog, with
76+
the opportunity to reach a large number of readers who are already interested in the topics
77+
you post is about.
78+
</p>
79+
</div>
80+
</div>
81+
82+
<div class="flex flex-wrap justify-center p-8 bg-basics-900 text-primary-50 rounded-xl">
83+
<iframe
84+
class="w-full border-none rounded-xl"
85+
height="720px"
86+
src="https://notionforms.io/forms/sponsor-submissions"
87+
title="Sponsorship Form"
88+
/>
89+
</div>
90+
</section>

0 commit comments

Comments
 (0)