Merge branch 'main' into storage-product-page

src/lib/components/BlogCta.svelte

@@ -4,27 +4,17 @@
     export let label: string = 'Get started';
 </script>
 
-<div class="call-to-action">
-    <div class="details">
+<div
+    class="bg relative mt-12 !-mb-28 flex min-h-[12rem] items-center justify-center overflow-hidden border-t border-[hsl(var(--web-color-subtle))] py-12 lg:!-mb-[184px]"
+>
+    <div class="flex max-w-3xs flex-col items-center justify-center gap-5 text-center">
         <h2 class="text-label">{heading}</h2>
         <a href={url} class="web-button">{label}</a>
     </div>
 </div>
 
 <style lang="scss">
-    .call-to-action {
-        border-top: 1px solid hsl(var(--web-color-subtle));
-        padding: 48px 0;
-        min-height: 180px;
-        margin-top: 48px;
-        display: flex;
-        margin-bottom: -24px;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        overflow: hidden;
-
+    .bg {
         &::before {
             content: '';
             position: absolute;
@@ -36,22 +26,6 @@
                 rgba(253, 54, 110, 0.09),
                 transparent 85%
             );
-            //filter: blur(10px);
-        }
-
-        .details {
-            gap: 20px;
-            max-width: 250px;
-            color: #fff;
-            text-align: center;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-
-            h2 {
-                margin: 0;
-            }
         }
     }
 </style>

src/lib/components/Feedback.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
+    import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
 
     export let date: string | undefined = undefined;
     let showFeedback = false;
@@ -13,7 +14,7 @@
     async function handleSubmit() {
         submitting = true;
         error = undefined;
-        const response = await fetch('https://growth.appwrite.io/v1/feedback/docs', {
+        const response = await fetch(`${PUBLIC_GROWTH_ENDPOINT}/feedback/docs`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/lib/components/Newsletter.svelte

@@ -1,18 +1,19 @@
 <script context="module" lang="ts">
-    export async function newsletter(name: string, email: string) {
-        const response = await fetch('https://growth.appwrite.io/v1/newsletter/subscribe', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                name,
-                email,
-                cloud: true /* not optional on the growth endpoint. */
-            })
-        });
-        return response;
-    }
+	import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
+
+	export async function newsletter(name: string, email: string) {
+		const response = await fetch(`${PUBLIC_GROWTH_ENDPOINT}/newsletter/subscribe`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				name,
+				email
+			})
+		});
+		return response;
+	}
 </script>
 
 <script lang="ts">

src/lib/components/ProductsSubmenu.svelte

@@ -15,7 +15,7 @@
     export const products: Array<SubmenuItem> = [
         {
             name: 'Auth',
-            href: '/docs/products/auth',
+            href: '/products/auth',
             description: 'Secure login with multi-factor auth.',
             icon: '/images/icons/illustrated/dark/auth.png'
         },
@@ -39,7 +39,7 @@
         },
         {
             name: 'Messaging',
-            href: '/docs/products/messaging',
+            href: '/products/messaging',
             description: 'Set up a full-functioning messaging service.',
             icon: '/images/icons/illustrated/dark/messaging.png'
         },
@@ -103,12 +103,10 @@
 <div
     use:melt={$menu}
     class={classNames(
-        'data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in relative z-10 mt-6 mx-auto hidden w-full flex-col items-center p-0 outline-none md:flex'
+        'data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in relative !left-1/2 z-10 mt-6 mx-auto hidden w-full -translate-x-1/2 flex-col items-center p-0 outline-none [max-inline-size:86.875rem] md:flex'
     )}
 >
-    <div
-        class="is-special-padding w-full rounded-2xl border border-white/8 bg-[#232325] p-6 [max-inline-size:86.875rem]"
-    >
+    <div class="is-special-padding w-full rounded-2xl border border-white/8 bg-[#232325] p-6">
         <div class="grid w-full grid-cols-1 place-content-between gap-16 lg:grid-cols-12">
             <div class="col-span-8 -mr-12 pr-12">
                 <span
@@ -163,7 +161,9 @@
                             class="font-aeonik-fono tracking-loose text-secondary block text-xs uppercase"
                             >Case studies<span class="text-accent">_</span></span
                         >
-                        <a href="/" class="text-primary text-caption flex items-center gap-2"
+                        <a
+                            href="/blog/category/case-studies"
+                            class="text-primary text-caption flex items-center gap-2"
                             >See more <span class="web-icon-chevron-right" /></a
                         >
                     </header>

src/lib/components/carousel/Carousel.svelte

@@ -11,7 +11,6 @@
 
     let emblaApi: EmblaCarouselType;
 
-    export let showGradient: boolean = true;
     export let showBullets: boolean = true;
     export let showArrows: boolean = true;
     export let autoScrollOptions: AutoScrollOptionsType = {

src/markdoc/tags/Call_To_Action.svelte

@@ -5,12 +5,6 @@
     export let url: string = PUBLIC_APPWRITE_DASHBOARD;
 </script>
 
-<div class="call-to-action">
+<div class="py-12">
     <a href={url} class="web-button">{label}</a>
 </div>
-
-<style lang="scss">
-    .call-to-action {
-        margin: 48px 0;
-    }
-</style>

src/routes/blog/post/defying-the-laws-of-web-animations/+page.markdoc

@@ -7,6 +7,7 @@ cover: /images/blog/defying-the-laws-of-web-animations/cover.png
 timeToRead: 10
 author: thomas-g-lopes
 category: website
+callToAction: true
 ---
 
 If you're a frontend developer, you know that one of the scariest tasks you can receive is coding a complex web animation. If you're not a frontend developer, I bet that sounds even harder.
@@ -173,8 +174,6 @@ The video above showcases both Motion and Svelte transitions in action. The tabl
 {/if}
 ```
 
-{% call_to_action /%}
-
 ## Transitioning between sections
 
 There's one other nifty feature of Motion that I didn't mention: It can seamlessly interrupt ongoing animations.

src/routes/contact-us/+page.svelte

@@ -5,6 +5,7 @@
     import FooterNav from '../../lib/components/FooterNav.svelte';
     import MainFooter from '../../lib/components/MainFooter.svelte';
     import { socials } from '$lib/constants';
+    import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
 
     let email = '';
     let firstName = '';
@@ -15,7 +16,7 @@
 
     async function handleSubmit() {
         error = undefined;
-        const response = await fetch('https://growth.appwrite.io/v1/feedback', {
+        const response = await fetch(`${PUBLIC_GROWTH_ENDPOINT}/feedback`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/routes/init-0/tickets/get-ticket-doc/+server.ts

@@ -4,14 +4,15 @@ import { isProUser } from '$lib/utils/console.js';
 import type { User } from '$routes/init-0/helpers.js';
 import { ID, Query } from '@appwrite.io/console';
 import type { TicketData, TicketDoc } from '../constants.js';
+import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
 
 type SendToHubspotArgs = {
     name: string;
     email: string;
 };
 
 async function sendToHubspot({ name, email }: SendToHubspotArgs) {
-    await fetch('https://growth.appwrite.io/v1/mailinglists/init', {
+    await fetch(`${PUBLIC_GROWTH_ENDPOINT}/mailinglists/init`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'

src/routes/init/tickets/get-ticket-doc/+server.ts

@@ -4,6 +4,7 @@ import { isProUser } from '$lib/utils/console.js';
 import { type User } from '$routes/init/helpers.js';
 import { ID, Query } from '@appwrite.io/console';
 import type { TicketData, TicketDoc } from '../constants.js';
+import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
 
 type SendToHubspotArgs = {
     name: string;
@@ -12,7 +13,7 @@ type SendToHubspotArgs = {
 };
 
 async function sendToUserList({ name, email, userId }: SendToHubspotArgs) {
-    await fetch('https://growth.appwrite.io/v1/mailinglists/init-2.0', {
+    await fetch(`${PUBLIC_GROWTH_ENDPOINT}/mailinglists/init-2.0`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'

src/routes/integrations/technology-partner/+page.svelte

@@ -9,6 +9,7 @@
     //import BlobPink from "$routes/startups/(assets)/blob-pink.svg";
     // import BlobPinkMobile from "$routes/startups/(assets)/blob-pink-mobile.svg";
     import Pink from './bg.png';
+    import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
 
     let email = '';
     let name = '';
@@ -30,7 +31,7 @@
         message = `Name of representative: ${name}\n\nWork Email: ${email}\n\nCompany Name: ${companyName}\n\nCompany Size: ${companySize}\n\nCompany Website: ${companyWebsite}\n\nIntegration status: ${integrationStatus}\n\nLink to Documentation: ${linkToDocumentation}\n\nLink to product/company assets: ${productUrl}\n\nDetails: ${extraDetails}`;
         subject = `Technology Partner Application: ${companyName}`;
 
-        const response = await fetch('https://growth.appwrite.io/v1/feedback', {
+        const response = await fetch(`${PUBLIC_GROWTH_ENDPOINT}/feedback`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/routes/oss-program/+page.svelte

@@ -6,6 +6,7 @@
     import MainFooter from '../../lib/components/MainFooter.svelte';
     import { socials } from '$lib/constants';
     import GradientBackground from './bg.png';
+    import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
 
     let personName = '';
     let personEmail = '';
@@ -22,7 +23,7 @@
     async function handleSubmit() {
         error = undefined;
         submitting = true;
-        const response = await fetch('https://growth.appwrite.io/v1/conversations/oss', {
+        const response = await fetch(`${PUBLIC_GROWTH_ENDPOINT}/conversations/oss`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/routes/products/messaging/(components)/Draft.svelte

@@ -116,7 +116,6 @@
 
         aspect-ratio: 16 / 11;
         position: relative;
-        overflow: hidden;
 
         @media screen and (max-width: 1024px) {
             --m-border-gradient-before: transparent;

src/routes/products/messaging/+page.svelte

@@ -300,7 +300,7 @@ messaging.create_email(
                         </h2>
                     </section>
                     <div class="mt-20 overflow-hidden">
-                        <ul class="web-info-boxes is-desktop-max-out-3 text-sub-body font-medium">
+                        <ul class="text-sub-body grid grid-cols-1 font-medium md:grid-cols-3">
                             <li class="web-info-boxes-item">
                                 <img
                                     src="/images/icons/gradients/mobile.svg"
@@ -483,7 +483,9 @@ messaging.create_email(
                             Start today with your preferred technologies
                         </h2>
                     </div>
-                    <div class="code-snippets divide-border-primary mt-16 grid grid-cols-2 gap-16">
+                    <div
+                        class="code-snippets divide-border-primary mt-16 grid grid-cols-1 gap-16 md:grid-cols-2"
+                    >
                         <div class="flex min-w-0 flex-col gap-2">
                             <h3 class="text-label text-primary">Subscribe to a topic</h3>
                             <p class="text-description">

src/routes/subscription/verify/+page.svelte

@@ -1,30 +1,30 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { FooterNav, MainFooter } from '$lib/components';
-    import { Main } from '$lib/layouts';
-    import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import { FooterNav, MainFooter } from '$lib/components';
+	import { Main } from '$lib/layouts';
+	import { onMount } from 'svelte';
+	import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
 
-    let error: string | undefined;
+  let error: string | undefined;
 
-    onMount(async () => {
-        const email = $page.url.searchParams.get('email');
-        const key = $page.url.searchParams.get('key');
-        const response = await fetch('https://growth.appwrite.io/v1/newsletter/verify', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                email,
-                key,
-                cloud: true /* not optional on the growth endpoint. */
-            })
-        });
-        if (response.status >= 400) {
-            error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
-            return;
-        }
-    });
+	onMount(async () => {
+		const email = $page.url.searchParams.get('email');
+		const key = $page.url.searchParams.get('key');
+		const response = await fetch(`${PUBLIC_GROWTH_ENDPOINT}/newsletter/verify`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				email,
+				key
+			})
+		});
+		if (response.status >= 400) {
+			error = response.status >= 500 ? 'Server Error.' : 'Error submitting form.';
+			return;
+		}
+	});
 </script>
 
 <Main>