Skip to content

Commit

Permalink
Merge pull request #1685 from appwrite/partners-page-copy
Browse files Browse the repository at this point in the history 
page copy
  • Loading branch information
@ItzNotABug
ItzNotABug authored Jan 23, 2025
2 parents 81c95e1 + d627f42 commit 0d4eeab
Show file tree
Hide file tree
Showing 6 changed files with 128 additions and 43 deletions.
2 changes: 0 additions & 2 deletions src/routes/+layout.server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,6 @@ export const load = async ({ request, getClientAddress }) => {
distinctId
);

console.log(isStartBuilding);

const isStartForFree = await getFeatureFlag<'cta-copy_ab-test'>(
'sticky-navigation_ab-test',
'start-for-free_variant',
Expand Down
110 changes: 92 additions & 18 deletions src/routes/partners/(components)/benefits.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,24 +55,98 @@
<h2 class="text-primary font-aeonik-pro text-title">Growing together</h2>
</div>

<div
class={classNames(
'border-smooth relative w-full border-y border-dashed',
'before:border-smooth before:absolute before:inset-x-0 before:top-1/2 before:hidden before:h-px before:-translate-y-1/2 before:border before:border-dashed before:md:block'
)}
>
<div
class="container divide-smooth grid grid-cols-1 gap-px divide-x divide-dashed sm:grid-cols-2 lg:grid-cols-3"
>
{#each items as item}
<div
class="bg-greyscale-900 relative flex flex-col gap-4 p-8 nth-of-type-[3]:border-none"
>
<img src={item.icon} alt="{item.title} Icon" class="size-12" />
<span class="text-primary -mb-3">{item.title}</span>
<p class="text-secondary">{item.description}</p>
</div>
{/each}
<div class="hidden w-full lg:block">
<div class="border-smooth relative w-full border-t border-dashed">
<div
class="container divide-smooth hidden grid-cols-3 gap-px divide-x divide-dashed lg:grid"
>
{#each items.slice(0, 3) as item}
<div
class="bg-greyscale-900 relative flex flex-col gap-4 p-8 nth-of-type-[3]:border-none"
>
<img src={item.icon} alt="{item.title} Icon" class="size-12" />
<span class="text-primary -mb-3">{item.title}</span>
<p class="text-secondary">{item.description}</p>
</div>
{/each}
</div>
</div>
<div class="border-smooth relative w-full border-y border-dashed">
<div
class="container divide-smooth hidden grid-cols-3 gap-px divide-x divide-dashed lg:grid"
>
{#each items.slice(3, items.length) as item}
<div
class="bg-greyscale-900 relative flex flex-col gap-4 p-8 nth-of-type-[3]:border-none"
>
<img src={item.icon} alt="{item.title} Icon" class="size-12" />
<span class="text-primary -mb-3">{item.title}</span>
<p class="text-secondary">{item.description}</p>
</div>
{/each}
</div>
</div>
</div>

<div class="hidden w-full md:block lg:hidden">
<div class="border-smooth relative w-full border-t border-dashed">
<div
class="container divide-smooth hidden grid-cols-2 gap-px divide-x divide-dashed md:grid"
>
{#each items.slice(0, 2) as item}
<div
class="bg-greyscale-900 relative flex flex-col gap-4 p-8 nth-of-type-[3]:border-none"
>
<img src={item.icon} alt="{item.title} Icon" class="size-12" />
<span class="text-primary -mb-3">{item.title}</span>
<p class="text-secondary">{item.description}</p>
</div>
{/each}
</div>
</div>
<div class="border-smooth relative w-full border-y border-dashed">
<div
class="container divide-smooth hidden grid-cols-2 gap-px divide-x divide-dashed md:grid"
>
{#each items.slice(2, 4) as item}
<div
class="bg-greyscale-900 relative flex flex-col gap-4 p-8 nth-of-type-[3]:border-none"
>
<img src={item.icon} alt="{item.title} Icon" class="size-12" />
<span class="text-primary -mb-3">{item.title}</span>
<p class="text-secondary">{item.description}</p>
</div>
{/each}
</div>
</div>
<div class="border-smooth relative w-full border-b border-dashed">
<div
class="container divide-smooth hidden grid-cols-2 gap-px divide-x divide-dashed md:grid"
>
{#each items.slice(4, items.length) as item}
<div
class="bg-greyscale-900 relative flex flex-col gap-4 p-8 nth-of-type-[3]:border-none"
>
<img src={item.icon} alt="{item.title} Icon" class="size-12" />
<span class="text-primary -mb-3">{item.title}</span>
<p class="text-secondary">{item.description}</p>
</div>
{/each}
</div>
</div>
</div>

<div class="block w-full md:hidden">
<div class="border-smooth relative w-full border-y border-dashed">
<div class="container divide-smooth grid grid-cols-1 gap-px divide-y divide-dashed">
{#each items as item}
<div class="bg-greyscale-900 relative flex flex-col gap-4 p-8">
<img src={item.icon} alt="{item.title} Icon" class="size-12" />
<span class="text-primary -mb-3">{item.title}</span>
<p class="text-secondary">{item.description}</p>
</div>
{/each}
</div>
</div>
</div>
</div>
12 changes: 8 additions & 4 deletions src/routes/partners/(components)/hero.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,17 @@
Boost businesses with Appwrite<span class="text-accent">_</span>
</h1>
<p class="text-description text-secondary text-pretty font-medium">
Join the Appwrite Partner program to unlock growth opportunities with tools,
resources, and support to boost revenue and expand your reach.
Join the Appwrite Partners program and grow your business. Deliver powerful
solutions to clients, increase revenue, and expand your reach.
</p>

<div class="flex flex-col items-center gap-2 md:flex-row">
<a href="/" class="web-button is-secondary !w-full md:!w-fit">Find an expert</a>
<a href="/" class="web-button is-secondary !w-full md:!w-fit">Become a partner</a>
<button class="web-button is-secondary !w-full md:!w-fit"
>Find an expert soon</button
>
<a href="#become-a-partner" class="web-button is-secondary !w-full md:!w-fit"
>Become a partner</a
>
</div>
</div>
<Puzzle />
Expand Down
10 changes: 6 additions & 4 deletions src/routes/partners/(components)/partners.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,12 @@
<div
class={classNames(
'border-smooth relative flex items-center justify-center border-t border-b border-dashed bg-[#17171A] py-32 [border-top-style:solid]',
'after:absolute after:inset-0 after:top-0 after:right-0 after:mt-auto after:mb-0 after:block after:h-full after:bg-[radial-gradient(circle_at_120%_-40%,_hsla(343,_98%,_60%,_0.2)_0px,_transparent_40%)]'
'after:absolute after:inset-0 after:top-0 after:right-0 after:z-0 after:mt-auto after:mb-0 after:block after:h-full after:bg-[radial-gradient(circle_at_120%_-40%,_hsla(343,_98%,_60%,_0.2)_0px,_transparent_40%)]'
)}
use:useInView
>
<div
class="container mx-auto flex w-full flex-col items-center justify-between gap-16 md:flex-row"
class="container relative z-10 mx-auto flex w-full flex-col items-center justify-between gap-16 md:flex-row"
>
<div class="flex max-w-lg flex-col gap-8 px-8">
<div class="flex flex-col gap-4">
Expand All @@ -55,11 +55,13 @@
</div>

<div class="mt-3 flex flex-col items-center gap-2 md:flex-row">
<a href="/" class="web-button is-secondary !w-full md:!w-fit">Become a partner</a>
<a href="#become-a-partner" class="web-button is-secondary !w-full md:!w-fit"
>Become a partner</a
>
</div>
</div>

<div class="mask overflow-hiddens relative px-8" style:--mask-height="150px">
<div class="mask relative overflow-hidden px-8" style:--mask-height="150px">
{#each tiers as { title, icon }, i}
<div
class={classNames('relative h-fit min-w-md rounded-3xl opacity-0', {
Expand Down
22 changes: 13 additions & 9 deletions src/routes/partners/(components)/submission-form.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,16 @@
submitted = true;
submitting = false;
}
const list = [
'Grow your business',
'Work with the latest technology',
'Deliver your clients a great experience'
];
</script>

<div
id="become-a-partner"
class={classNames(
'relative -mb-[6rem] flex min-h-[75vh] flex-col items-center justify-center overflow-hidden bg-black/8',
'before:absolute before:inset-0 before:top-0 before:left-0 before:-z-10 before:block before:h-full before:bg-[radial-gradient(circle_at_-15%_-30%,_hsla(343,_98%,_60%,_0.2)_0px,_transparent_40%)] before:blur-2xl',
Expand All @@ -60,15 +67,12 @@
</p>

<ul class="space-y-4">
<li class="text-body flex items-center gap-2 font-medium">
<img src="/images/icons/colored/check.svg" alt="checkmark icon" /> Item
</li>
<li class="text-body flex items-center gap-2 font-medium">
<img src="/images/icons/colored/check.svg" alt="checkmark icon" /> Item
</li>
<li class="text-body flex items-center gap-2 font-medium">
<img src="/images/icons/colored/check.svg" alt="checkmark icon" /> Item
</li>
{#each list as item}
<li class="text-body flex items-center gap-2 font-medium">
<img src="/images/icons/colored/check.svg" alt="checkmark icon" />
{item}
</li>
{/each}
</ul>
</div>

Expand Down
15 changes: 9 additions & 6 deletions src/routes/partners/(components)/ways.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,14 @@
{
title: 'Experts',
description:
'For agencies, consultancies, and system integrators obsessed with productivity and performance. Partner with Vercel to deliver state-of-the-art digital experiences and redefine web development today.',
href: '/',
label: 'Find an Expert'
'For agencies, consultancies, freelancers, and integrators who want to provide a scalable backend solution for their clients. Partner with Appwrite to provide a highly custom solution with the newest technology.',
label: 'Coming Soon'
},
{
title: 'Integrations',
description:
'For innovative software companies striving to create solutions that integrate seamlessly with our platform. Partner with Vercel to build and enhance performant user experiences across the Web.',
href: '/',
'For innovative software companies striving to create solutions that integrate seamlessly with our platform. Partner with Appwrite to create a better developer experience.',
href: '/integrations',
label: 'Find an Integration'
}
];
Expand All @@ -26,7 +25,11 @@
<GradientBorderCard class="flex flex-col gap-5 p-8">
<h2 class="text-primary font-aeonik-pro text-label font-medium">{item.title}</h2>
<p class="text-secondary text-body font-medium">{item.description}</p>
<a href={item.href} class="web-button is-secondary mt-3">{item.label}</a>
{#if item.href}
<a href={item.href} class="web-button is-secondary mt-3">{item.label}</a>
{:else}
<button class="web-button is-secondary mt-3">{item.label}</button>
{/if}
</GradientBorderCard>
{/each}
</div>
Expand Down

0 comments on commit 0d4eeab

Please sign in to comment.