Skip to content

Commit 21ba44f

Browse files
tomaspozotomaspozo
authored
fix: marketing company stats (supabase#38669)
* Update stats accross components to use same object * Fix hydration error * Consolidate users growth chart component * Fix animated stat position * Add company-stats legend * Set stats labels on shared company-stats
1 parent d91ea9d commit 21ba44f

File tree

15 files changed

+216
-284
lines changed

15 files changed

+216
-284
lines changed

‎apps/www/components/Enterprise/Performance.tsx‎

Lines changed: 2 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { FC } from 'react'
2-
import { cn, Badge } from 'ui'
32

43
import SectionContainer from '~/components/Layouts/SectionContainer'
4+
import UsersGrowthChart from '~/components/UsersGrowthChart'
55

66
interface Props {
77
id: string
@@ -30,71 +30,11 @@ const Performance: FC<Props> = (props) => {
3030
))}
3131
</div>
3232
</div>
33-
<div className="relative xl:absolute z-0 inset-0 mt-4 -mb-8 sm:mt-0 sm:-mb-20 md:-mt-20 md:-mb-36 xl:mt-0 xl:top-10 w-full aspect-[2.15/1]">
34-
<GraphLabel className="" />
35-
<svg
36-
width="100%"
37-
height="100%"
38-
viewBox="0 0 1403 599"
39-
fill="none"
40-
xmlns="http://www.w3.org/2000/svg"
41-
className="absolute inset-0 w-full h-full"
42-
>
43-
<path
44-
d="M1402.27 0.744141C896.689 410.854 286.329 492.876 0.476562 492.876V598.744H1402.27V0.744141Z"
45-
fill="url(#paint0_linear_585_9420)"
46-
/>
47-
<path
48-
d="M11.4209 492.744C295.041 492.744 900.636 410.744 1402.27 0.744141"
49-
stroke="hsl(var(--foreground-lighter))"
50-
/>
51-
<defs>
52-
<linearGradient
53-
id="paint0_linear_585_9420"
54-
x1="701.374"
55-
y1="170.846"
56-
x2="701.374"
57-
y2="561.839"
58-
gradientUnits="userSpaceOnUse"
59-
>
60-
<stop stopColor="hsl(var(--border-overlay))" />
61-
<stop offset="1" stopColor="hsl(var(--border-overlay))" stopOpacity="0" />
62-
</linearGradient>
63-
</defs>
64-
</svg>
65-
<div className="absolute inset-0 w-full h-full bg-[radial-gradient(50%_50%_at_50%_50%,_transparent_0%,_hsl(var(--background-default))_100%)]" />
66-
</div>
33+
<UsersGrowthChart />
6734
</SectionContainer>
6835
)
6936
}
7037

71-
const GraphLabel: FC<{ className?: string }> = ({ className }) => (
72-
<div
73-
className={cn(
74-
'absolute z-10 inset-0 left-auto right-[20%] -top-8 md:top-0 xl:top-[15%] w-fit h-[200px] lg:h-[400px]',
75-
'flex flex-col items-center gap-1',
76-
className
77-
)}
78-
>
79-
<div className="w-fit text-foreground bg-alternative p-4 rounded-lg border flex flex-col gap-1">
80-
<span className="label !text-[10px] !leading-3">Users</span>
81-
<div className="flex items-center gap-2">
82-
<span className="text-foreground-light text-2xl">930,550</span>
83-
<Badge variant="success" size="small" className="h-[24px] px-2">
84-
+13.4%
85-
</Badge>
86-
</div>
87-
</div>
88-
<div
89-
className={cn(
90-
'relative w-2 h-2 min-w-2 min-h-2 rounded-full border-2 border-stronger',
91-
'after:absolute after:inset-0 after:top-full after:mx-auto after:w-[2px] after:h-[150px] after:lg:h-[250px]',
92-
'after:bg-gradient-to-b after:from-border-stronger after:to-transparent'
93-
)}
94-
/>
95-
</div>
96-
)
97-
9838
interface HighlightItemProps {
9939
highlight: Highlight
10040
}

‎apps/www/components/Solutions/ResultsSection.tsx‎

Lines changed: 3 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { FC } from 'react'
2-
import { cn, Badge, AnimatedCounter } from 'ui'
2+
33
import SectionContainer from '~/components/Layouts/SectionContainer'
4-
import { motion } from 'framer-motion'
5-
import { useMedia } from 'react-use'
4+
import UsersGrowthChart from '~/components/UsersGrowthChart'
65

76
export interface ResultsSectionProps {
87
id: string
@@ -31,127 +30,11 @@ const ResultsSection: FC<ResultsSectionProps> = (props) => {
3130
))}
3231
</div>
3332
</div>
34-
<div className="relative xl:absolute z-0 inset-0 mt-4 -mb-8 sm:mt-0 sm:-mb-20 md:-mt-20 md:-mb-36 xl:mt-0 xl:top-10 w-full aspect-[2.15/1]">
35-
<GraphLabel className="" />
36-
<GraphPath className="absolute inset-0 w-full h-full" />
37-
38-
<svg
39-
width="100%"
40-
height="100%"
41-
viewBox="0 0 1403 599"
42-
fill="none"
43-
xmlns="http://www.w3.org/2000/svg"
44-
className="absolute inset-0 w-full h-full"
45-
>
46-
<path
47-
d="M1402.27 0.744141C896.689 410.854 286.329 492.876 0.476562 492.876V598.744H1402.27V0.744141Z"
48-
fill="url(#paint0_linear_585_9420)"
49-
/>
50-
<path
51-
d="M11.4209 492.744C295.041 492.744 900.636 410.744 1402.27 0.744141"
52-
stroke="hsl(var(--foreground-lighter))"
53-
/>
54-
<defs>
55-
<linearGradient
56-
id="paint0_linear_585_9420"
57-
x1="701.374"
58-
y1="170.846"
59-
x2="701.374"
60-
y2="561.839"
61-
gradientUnits="userSpaceOnUse"
62-
>
63-
<stop stopColor="hsl(var(--border-overlay))" />
64-
<stop offset="1" stopColor="hsl(var(--border-overlay))" stopOpacity="0" />
65-
</linearGradient>
66-
</defs>
67-
</svg>
68-
<div className="absolute inset-0 w-full h-full bg-[radial-gradient(50%_50%_at_50%_50%,_transparent_0%,_hsl(var(--background-default))_100%)]" />
69-
</div>
33+
<UsersGrowthChart />
7034
</SectionContainer>
7135
)
7236
}
7337

74-
const GraphLabel: FC<{ className?: string }> = ({ className }) => {
75-
const isMobileOrTablet = useMedia('(max-width: 1280px)')
76-
77-
const motionProps = !isMobileOrTablet
78-
? {
79-
initial: { offsetDistance: '0%', rotate: '0deg', opacity: 0 },
80-
whileInView: { offsetDistance: '80%', rotate: '30deg', opacity: 1 },
81-
viewport: { once: true },
82-
transition: { type: 'spring', duration: 2.68, bounce: 0, delay: 0.25 },
83-
style: {
84-
offsetPath: 'path("M0 493.132C285.852 493.132 896.213 411.11 1401.8 1")',
85-
},
86-
}
87-
: undefined
88-
89-
const Component = isMobileOrTablet ? 'div' : motion.div
90-
91-
return (
92-
<Component
93-
className={cn(
94-
'absolute z-10 -top-10 2xl:top-[20%] left-[38%] md:top-[10%] md:left-[50%] lg:top-0 xl:left-0 w-fit h-[200px] lg:h-[400px]',
95-
'flex flex-col items-center gap-1',
96-
className
97-
)}
98-
{...motionProps}
99-
>
100-
<div className="w-fit text-foreground bg-alternative p-4 rounded-lg border flex flex-col gap-1">
101-
<span className="label !text-[10px] !leading-3">Users</span>
102-
<div className="flex items-center gap-2">
103-
<span className="text-foreground-light text-2xl">
104-
{isMobileOrTablet ? (
105-
'5,230,550'
106-
) : (
107-
<AnimatedCounter value={5230550} duration={2.68} delay={0.5} />
108-
)}
109-
</span>
110-
<Badge variant="success" size="small" className="h-[24px] px-2">
111-
{isMobileOrTablet ? (
112-
'+28.3%'
113-
) : (
114-
<AnimatedCounter
115-
value={28.3}
116-
duration={2.68}
117-
delay={0.5}
118-
isPercentage={true}
119-
prefix="+"
120-
/>
121-
)}
122-
</Badge>
123-
</div>
124-
</div>
125-
<div
126-
className={cn(
127-
'relative w-2 h-2 min-w-2 min-h-2 rounded-full border-2 border-stronger',
128-
'after:absolute after:inset-0 after:top-full after:mx-auto after:w-[2px] after:h-[150px] after:lg:h-[250px]',
129-
'after:bg-gradient-to-b after:from-border-stronger after:to-transparent'
130-
)}
131-
/>
132-
</Component>
133-
)
134-
}
135-
136-
const GraphPath: FC<{ className?: string }> = ({ className }) => (
137-
<svg
138-
width="100%"
139-
height="100%"
140-
viewBox="0 0 1403 494"
141-
fill="none"
142-
xmlns="http://www.w3.org/2000/svg"
143-
className={className}
144-
>
145-
<motion.path
146-
transition={{ duration: 0.5, delay: 0.5 }}
147-
initial={{ pathLength: 0.001 }}
148-
whileInView={{ pathLength: 1 }}
149-
viewport={{ once: true }}
150-
d="M0 493.132C285.852 493.132 896.213 411.11 1401.8 1"
151-
/>
152-
</svg>
153-
)
154-
15538
interface HighlightItemProps {
15639
highlight: Highlight
15740
}

‎apps/www/components/Supasquad/PerfectTiming.tsx‎

Lines changed: 3 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { FC } from 'react'
2-
import { cn, Badge } from 'ui'
2+
33
import SectionContainer from '~/components/Layouts/SectionContainer'
4-
import { companyStats } from '~/data/company-stats'
4+
import UsersGrowthChart from '~/components/UsersGrowthChart'
55

66
export interface PerfectTimingProps {
77
id: string
@@ -30,71 +30,11 @@ const PerfectTiming = (props: PerfectTimingProps) => {
3030
))}
3131
</div>
3232
</div>
33-
<div className="relative xl:absolute z-0 inset-0 mt-4 -mb-8 sm:mt-0 sm:-mb-20 md:-mt-20 md:-mb-36 xl:mt-0 xl:top-10 w-full aspect-[2.15/1]">
34-
<GraphLabel className="" />
35-
<svg
36-
width="100%"
37-
height="100%"
38-
viewBox="0 0 1403 599"
39-
fill="none"
40-
xmlns="http://www.w3.org/2000/svg"
41-
className="absolute inset-0 w-full h-full"
42-
>
43-
<path
44-
d="M1402.27 0.744141C896.689 410.854 286.329 492.876 0.476562 492.876V598.744H1402.27V0.744141Z"
45-
fill="url(#paint0_linear_585_9420)"
46-
/>
47-
<path
48-
d="M11.4209 492.744C295.041 492.744 900.636 410.744 1402.27 0.744141"
49-
stroke="hsl(var(--foreground-lighter))"
50-
/>
51-
<defs>
52-
<linearGradient
53-
id="paint0_linear_585_9420"
54-
x1="701.374"
55-
y1="170.846"
56-
x2="701.374"
57-
y2="561.839"
58-
gradientUnits="userSpaceOnUse"
59-
>
60-
<stop stopColor="hsl(var(--border-overlay))" />
61-
<stop offset="1" stopColor="hsl(var(--border-overlay))" stopOpacity="0" />
62-
</linearGradient>
63-
</defs>
64-
</svg>
65-
<div className="absolute inset-0 w-full h-full bg-[radial-gradient(50%_50%_at_50%_50%,_transparent_0%,_hsl(var(--background-default))_100%)]" />
66-
</div>
33+
<UsersGrowthChart />
6734
</SectionContainer>
6835
)
6936
}
7037

71-
const GraphLabel: FC<{ className?: string }> = ({ className }) => (
72-
<div
73-
className={cn(
74-
'absolute z-10 inset-0 left-auto right-[20%] -top-8 md:top-0 xl:top-[15%] w-fit h-[200px] lg:h-[400px]',
75-
'flex flex-col items-center gap-1',
76-
className
77-
)}
78-
>
79-
<div className="w-fit text-foreground bg-alternative p-4 rounded-lg border flex flex-col gap-1">
80-
<span className="label !text-[10px] !leading-3">Developers</span>
81-
<div className="flex items-center gap-2">
82-
<span className="text-foreground-light text-2xl">{companyStats.developersRegistered}</span>
83-
<Badge variant="success" size="small" className="h-[24px] px-2">
84-
{companyStats.developersRegisteredChange}
85-
</Badge>
86-
</div>
87-
</div>
88-
<div
89-
className={cn(
90-
'relative w-2 h-2 min-w-2 min-h-2 rounded-full border-2 border-stronger',
91-
'after:absolute after:inset-0 after:top-full after:mx-auto after:w-[2px] after:h-[150px] after:lg:h-[250px]',
92-
'after:bg-gradient-to-b after:from-border-stronger after:to-transparent'
93-
)}
94-
/>
95-
</div>
96-
)
97-
9838
interface HighlightItemProps {
9939
highlight: Highlight
10040
}

0 commit comments

Comments
 (0)