Skip to content

Commit f3d2e26

Browse files
thejessewintonthejessewinton
committed
udpate logo list first load
1 parent 9c075c0 commit f3d2e26

File tree

4 files changed

+105
-66
lines changed

4 files changed

+105
-66
lines changed

‎src/lib/components/marketing/platforms.svelte

Lines changed: 48 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
import React from './(assets)/icons/react.svg';
1818
import GradientText from '$lib/components/fancy/gradient-text.svelte';
1919
import Noise from '$lib/components/fancy/noise.svelte';
20-
// import { Tooltip } from 'bits-ui';
20+
import { Tooltip } from 'bits-ui';
2121
import type { SvelteHTMLElements } from 'svelte/elements';
2222
2323
const platforms = [
@@ -101,40 +101,56 @@
101101
}
102102
)}
103103
>
104-
{#each platforms as platform, i}
105-
<div
106-
class="contents"
107-
style="--primary-color:{platform.primary};--secondary-color:{platform.secondary};--animation-delay:{i *
108-
25}ms"
109-
>
110-
<div
111-
class={classNames(
112-
'border-smooth group animate-fade-in relative mt-4 flex h-16 w-16 items-center justify-center border-dashed md:mt-0 md:w-full lg:border-r',
113-
{
114-
'lg:border-l': i === 0
115-
}
116-
)}
117-
>
118-
<img
119-
src={platform.icon}
120-
alt={platform.name}
121-
class="h-8 w-auto grayscale transition-all duration-500 group-hover:grayscale-0"
122-
aria-hidden={i < platforms.length - 1}
123-
/>
124-
104+
<Tooltip.Provider delayDuration={0} disableCloseOnTriggerClick>
105+
{#each platforms as platform, i}
106+
<Tooltip.Root>
125107
<div
126-
class={classNames(
127-
'absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100',
128-
'bg-gradient-to-tl from-transparent to-transparent',
129-
'hover:from-(--primary-color,_#fff)/4 hover:to-(--secondary-color,_transparent)/10'
130-
)}
131-
aria-hidden={i < platforms.length - 1}
108+
class="contents"
109+
style="--primary-color:{platform.primary};--secondary-color:{platform.secondary};--animation-delay:{i *
110+
25}ms"
132111
>
133-
<Noise opacity={0.1} />
112+
<Tooltip.Trigger
113+
class={classNames(
114+
'border-smooth group animate-fade-in relative mt-4 flex h-16 w-16 items-center justify-center border-dashed md:mt-0 md:w-full lg:border-r',
115+
{
116+
'lg:border-l': i === 0
117+
}
118+
)}
119+
aria-hidden={i < platforms.length - 1}
120+
>
121+
<img
122+
src={platform.icon}
123+
alt={platform.name}
124+
class="h-8 w-auto grayscale transition-all duration-500 group-hover:grayscale-0"
125+
/>
126+
127+
<div
128+
class={classNames(
129+
'absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100',
130+
'bg-gradient-to-tl from-transparent to-transparent',
131+
'hover:from-(--primary-color,_#fff)/4 hover:to-(--secondary-color,_transparent)/10'
132+
)}
133+
>
134+
<Noise opacity={0.1} />
135+
</div>
136+
</Tooltip.Trigger>
137+
<Tooltip.Content
138+
sideOffset={8}
139+
side="top"
140+
class={classNames(
141+
'text-primary bg-greyscale-900 relative hidden rounded-md border-0! px-2.5 py-1 text-sm md:block',
142+
'data-[state="closed"]:animate-menu-out data-[state="instant-open"]:animate-menu-in data-[state="delayed-open"]:animate-menu-in'
143+
)}
144+
>{platform.name}
145+
<div
146+
class="absolute inset-0 rounded-md bg-gradient-to-tl from-(--primary-color,_#fff)/4 to-(--secondary-color,_transparent)/10"
147+
></div>
148+
<Tooltip.Arrow class="text-(--primary-color)/4" />
149+
</Tooltip.Content>
134150
</div>
135-
</div>
136-
</div>
137-
{/each}
151+
</Tooltip.Root>
152+
{/each}
153+
</Tooltip.Provider>
138154
</div>
139155
{/each}
140156
</div>

‎src/routes/(marketing)/(components)/animated-logo.svelte

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,12 @@
3636
});
3737
</script>
3838

39-
<div bind:this={element} class={classNames('will-change-transform', className)}>
39+
<div
40+
bind:this={element}
41+
style:transform="translateY(10px)"
42+
style:opacity="0"
43+
style:filter="blur(5px)"
44+
class={classNames('transition-opacity will-change-transform', className)}
45+
>
4046
{@render children()}
4147
</div>

‎src/routes/(marketing)/(components)/logo-list.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script lang="ts">
2+
import { browser } from '$app/environment';
23
import { classNames } from '$lib/utils/classnames';
34
import AnimatedLogo from './animated-logo.svelte';
45

‎src/routes/(marketing)/(components)/platforms.svelte

Lines changed: 49 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -102,42 +102,58 @@
102102
}
103103
)}
104104
>
105-
{#each platforms as platform, i}
106-
<div
107-
class="contents"
108-
style="--primary-color:{platform.primary};--secondary-color:{platform.secondary};--animation-delay:{i *
109-
25}ms"
110-
>
111-
<div
112-
class={classNames(
113-
'border-smooth group animate-fade-in relative mt-4 flex h-16 w-16 items-center justify-center border-dashed md:mt-0 md:w-full lg:border-r',
114-
{
115-
'lg:border-l': i === 0
116-
}
117-
)}
118-
aria-hidden={i < platforms.length - 1}
119-
>
120-
<a href={platform.href} class="contents">
121-
<img
122-
loading="lazy"
123-
src={platform.icon}
124-
alt={platform.name}
125-
class="h-8 w-auto grayscale transition-all duration-500 group-hover:grayscale-0"
126-
/>
127-
128-
<div
105+
<Tooltip.Provider delayDuration={0} disableCloseOnTriggerClick>
106+
{#each platforms as platform, i}
107+
<Tooltip.Root>
108+
<div
109+
class="contents"
110+
style="--primary-color:{platform.primary};--secondary-color:{platform.secondary};--animation-delay:{i *
111+
25}ms"
112+
>
113+
<Tooltip.Trigger
129114
class={classNames(
130-
'absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100',
131-
'bg-gradient-to-tl from-transparent to-transparent',
132-
'hover:from-(--primary-color,_#fff)/4 hover:to-(--secondary-color,_transparent)/10'
115+
'border-smooth group animate-fade-in relative mt-4 flex h-16 w-16 items-center justify-center border-dashed md:mt-0 md:w-full lg:border-r',
116+
{
117+
'lg:border-l': i === 0
118+
}
133119
)}
120+
aria-hidden={i < platforms.length - 1}
134121
>
135-
<Noise opacity={0.1} />
136-
</div>
137-
</a>
138-
</div>
139-
</div>
140-
{/each}
122+
<a href={platform.href} class="contents">
123+
<img
124+
src={platform.icon}
125+
alt={platform.name}
126+
class="h-8 w-auto grayscale transition-all duration-500 group-hover:grayscale-0"
127+
/>
128+
129+
<div
130+
class={classNames(
131+
'absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100',
132+
'bg-gradient-to-tl from-transparent to-transparent',
133+
'hover:from-(--primary-color,_#fff)/4 hover:to-(--secondary-color,_transparent)/10'
134+
)}
135+
>
136+
<Noise opacity={0.1} />
137+
</div>
138+
</a>
139+
</Tooltip.Trigger>
140+
<Tooltip.Content
141+
sideOffset={8}
142+
side="top"
143+
class={classNames(
144+
'text-primary bg-greyscale-900 relative rounded-md border-0! px-2.5 py-1 text-sm',
145+
'data-[state="closed"]:animate-menu-out data-[state="instant-open"]:animate-menu-in data-[state="delayed-open"]:animate-menu-in'
146+
)}
147+
>{platform.name}
148+
<div
149+
class="absolute inset-0 rounded-md bg-gradient-to-tl from-(--primary-color,_#fff)/4 to-(--secondary-color,_transparent)/10"
150+
></div>
151+
<Tooltip.Arrow class="text-(--primary-color)/4" />
152+
</Tooltip.Content>
153+
</div>
154+
</Tooltip.Root>
155+
{/each}
156+
</Tooltip.Provider>
141157
</div>
142158
{/each}
143159
</div>

0 commit comments

Comments
 (0)