Skip to content

Commit b3df86f

Browse files
mvriu5mvriu5
committed
feat: removed shadows, unified card design & prettified
1 parent c191007 commit b3df86f

60 files changed

Lines changed: 765 additions & 1126 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/app/(landing)/[locale]/blog/[slug]/page.tsx‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -45,25 +45,17 @@ export default async function Page({ params }: { params: LocaleSlugPageParams })
4545
/>
4646

4747
<div className={"relative z-20 flex w-full max-w-4xl flex-col items-center gap-8 text-center md:flex-row md:items-center md:text-left"}>
48-
<div
49-
className={
50-
"relative flex size-32 shrink-0 items-center justify-center rounded-3xl border border-white/10 bg-white/5 shadow-[0_18px_46px_rgba(0,0,0,0.24)] backdrop-blur-md md:size-40"
51-
}
52-
>
53-
<div className={"relative isolate flex items-center justify-center rounded-3xl ring ring-white/10 px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]"}>
54-
<div aria-hidden="true" className="pointer-events-none absolute inset-0 rounded-[1.25rem] bg-linear-to-br from-primary via-primary to-secondary" />
48+
<div className={"relative flex size-32 shrink-0 items-center justify-center rounded-3xl border border-white/10 bg-white/5 md:size-40"}>
49+
<div className={"relative isolate flex items-center justify-center rounded-3xl ring ring-white/10 px-4 py-4"}>
50+
<div aria-hidden="true" className="pointer-events-none absolute inset-0 rounded-[1.25rem] bg-linear-to-br from-primary via-primary to-slate-900" />
5551
<Image src={"/code0_logo_white.png"} width={"120"} height={"120"} alt={"Code0 Logo"} className={"z-20"} />
5652
</div>
5753
</div>
5854

5955
<div className={"z-20 flex max-w-2xl flex-col items-center text-center md:items-start md:text-left"}>
6056
<p className={"max-w-xl text-3xl font-semibold leading-tight text-white"}>{ctaBlock?.heading ?? "Contact us"}</p>
6157
<p className={"mb-4 max-w-xl text-base leading-7 text-white/70"}>{ctaBlock?.subheading ?? ""}</p>
62-
<HapticButtonLink
63-
href={"/contact"}
64-
variant="normal"
65-
className={"h-11 rounded-xl px-8! bg-white/90! text-primary! shadow-[0_12px_28px_rgba(255,255,255,0.12)] hover:bg-white!"}
66-
>
58+
<HapticButtonLink href={"/contact"} variant="normal" className={"h-11 rounded-xl px-8! bg-white/90! text-primary! hover:bg-white!"}>
6759
Contact us
6860
</HapticButtonLink>
6961
</div>

‎src/app/(landing)/[locale]/not-found.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,11 @@ export default function LocalizedNotFound() {
1313

1414
return (
1515
<section className="h-dvh flex flex-col items-center justify-center bg-primary px-4 text-center text-white">
16-
<div className="mb-8 rounded-4xl border-2 border-dashed border-error/50 bg-error/10 p-6 shadow-md">
17-
<svg id="a" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="var(--color-error)"><path d="M11.996,10.545c.739,0,1.272-.213,1.6-.64.329-.427.493-.985.493-1.674v-3.718c0-.706.09-1.333.271-1.884.18-.549.48-1.013.898-1.391s.977-.665,1.674-.862c.697-.197,1.563-.295,2.598-.295h.492v2.93h-.615c-.739,0-1.235.164-1.49.493-.255.328-.382.837-.382,1.526v3.274c0,.854-.115,1.576-.345,2.167s-.689,1.1-1.378,1.526c.689.427,1.148.936,1.378,1.526.23.591.345,1.313.345,2.167v3.274c0,.689.127,1.198.382,1.527.254.328.751.492,1.49.492h.615v2.93h-.492c-1.034,0-1.9-.099-2.598-.296-.698-.197-1.256-.484-1.674-.861-.418-.378-.718-.842-.898-1.391-.181-.55-.271-1.178-.271-1.884v-3.718c0-.689-.164-1.247-.493-1.674-.328-.427-.861-.64-1.6-.64v-2.905Z"/><path d="M12.002,13.451c-.739,0-1.272.213-1.601.64-.329.427-.492.985-.492,1.674v3.718c0,.706-.091,1.333-.271,1.884-.181.549-.48,1.013-.899,1.391-.418.377-.977.665-1.674.861-.698.197-1.563.296-2.598.296h-.493v-2.93h.616c.739,0,1.235-.164,1.49-.492.254-.329.381-.837.381-1.527v-3.274c0-.854.115-1.576.345-2.167.229-.591.689-1.099,1.379-1.526-.689-.427-1.149-.936-1.379-1.526-.23-.591-.345-1.313-.345-2.167v-3.274c0-.689-.127-1.198-.381-1.526-.255-.329-.751-.493-1.49-.493h-.616V.082h.493c1.034,0,1.899.098,2.598.295.697.197,1.255.484,1.674.862.419.377.718.841.899,1.391.18.55.271,1.178.271,1.884v3.718c0,.689.164,1.248.492,1.674.328.427.862.64,1.601.64v2.905Z"/></svg>
16+
<div className="mb-8 rounded-4xl border-2 border-dashed border-error/50 bg-error/10 p-6">
17+
<svg id="a" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="var(--color-error)">
18+
<path d="M11.996,10.545c.739,0,1.272-.213,1.6-.64.329-.427.493-.985.493-1.674v-3.718c0-.706.09-1.333.271-1.884.18-.549.48-1.013.898-1.391s.977-.665,1.674-.862c.697-.197,1.563-.295,2.598-.295h.492v2.93h-.615c-.739,0-1.235.164-1.49.493-.255.328-.382.837-.382,1.526v3.274c0,.854-.115,1.576-.345,2.167s-.689,1.1-1.378,1.526c.689.427,1.148.936,1.378,1.526.23.591.345,1.313.345,2.167v3.274c0,.689.127,1.198.382,1.527.254.328.751.492,1.49.492h.615v2.93h-.492c-1.034,0-1.9-.099-2.598-.296-.698-.197-1.256-.484-1.674-.861-.418-.378-.718-.842-.898-1.391-.181-.55-.271-1.178-.271-1.884v-3.718c0-.689-.164-1.247-.493-1.674-.328-.427-.861-.64-1.6-.64v-2.905Z" />
19+
<path d="M12.002,13.451c-.739,0-1.272.213-1.601.64-.329.427-.492.985-.492,1.674v3.718c0,.706-.091,1.333-.271,1.884-.181.549-.48,1.013-.899,1.391-.418.377-.977.665-1.674.861-.698.197-1.563.296-2.598.296h-.493v-2.93h.616c.739,0,1.235-.164,1.49-.492.254-.329.381-.837.381-1.527v-3.274c0-.854.115-1.576.345-2.167.229-.591.689-1.099,1.379-1.526-.689-.427-1.149-.936-1.379-1.526-.23-.591-.345-1.313-.345-2.167v-3.274c0-.689-.127-1.198-.381-1.526-.255-.329-.751-.493-1.49-.493h-.616V.082h.493c1.034,0,1.899.098,2.598.295.697.197,1.255.484,1.674.862.419.377.718.841.899,1.391.18.55.271,1.178.271,1.884v3.718c0,.689.164,1.248.492,1.674.328.427.862.64,1.601.64v2.905Z" />
20+
</svg>
1821
</div>
1922
<h1 className="mb-2 font-mono text-5xl font-bold tracking-tighter">404 Not Found</h1>
2023
<p className="mb-4 text-white/75">The page you are looking for does not exist.</p>

‎src/app/(landing)/not-found.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,17 @@ import { IconArrowBackUp } from "@tabler/icons-react"
88
export default function NotFound() {
99
return (
1010
<div className="h-dvh flex flex-col items-center justify-center bg-primary px-4 text-center text-white">
11-
<div className="mb-8 rounded-4xl border-2 border-dashed border-error/50 bg-error/10 p-6 shadow-md">
12-
<svg aria-hidden="true" id="a" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="var(--color-error)"><path d="M11.996,10.545c.739,0,1.272-.213,1.6-.64.329-.427.493-.985.493-1.674v-3.718c0-.706.09-1.333.271-1.884.18-.549.48-1.013.898-1.391s.977-.665,1.674-.862c.697-.197,1.563-.295,2.598-.295h.492v2.93h-.615c-.739,0-1.235.164-1.49.493-.255.328-.382.837-.382,1.526v3.274c0,.854-.115,1.576-.345,2.167s-.689,1.1-1.378,1.526c.689.427,1.148.936,1.378,1.526.23.591.345,1.313.345,2.167v3.274c0,.689.127,1.198.382,1.527.254.328.751.492,1.49.492h.615v2.93h-.492c-1.034,0-1.9-.099-2.598-.296-.698-.197-1.256-.484-1.674-.861-.418-.378-.718-.842-.898-1.391-.181-.55-.271-1.178-.271-1.884v-3.718c0-.689-.164-1.247-.493-1.674-.328-.427-.861-.64-1.6-.64v-2.905Z"/><path d="M12.002,13.451c-.739,0-1.272.213-1.601.64-.329.427-.492.985-.492,1.674v3.718c0,.706-.091,1.333-.271,1.884-.181.549-.48,1.013-.899,1.391-.418.377-.977.665-1.674.861-.698.197-1.563.296-2.598.296h-.493v-2.93h.616c.739,0,1.235-.164,1.49-.492.254-.329.381-.837.381-1.527v-3.274c0-.854.115-1.576.345-2.167.229-.591.689-1.099,1.379-1.526-.689-.427-1.149-.936-1.379-1.526-.23-.591-.345-1.313-.345-2.167v-3.274c0-.689-.127-1.198-.381-1.526-.255-.329-.751-.493-1.49-.493h-.616V.082h.493c1.034,0,1.899.098,2.598.295.697.197,1.255.484,1.674.862.419.377.718.841.899,1.391.18.55.271,1.178.271,1.884v3.718c0,.689.164,1.248.492,1.674.328.427.862.64,1.601.64v2.905Z"/></svg>
11+
<div className="mb-8 rounded-4xl border-2 border-dashed border-error/50 bg-error/10 p-6">
12+
<svg aria-hidden="true" id="a" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="var(--color-error)">
13+
<path d="M11.996,10.545c.739,0,1.272-.213,1.6-.64.329-.427.493-.985.493-1.674v-3.718c0-.706.09-1.333.271-1.884.18-.549.48-1.013.898-1.391s.977-.665,1.674-.862c.697-.197,1.563-.295,2.598-.295h.492v2.93h-.615c-.739,0-1.235.164-1.49.493-.255.328-.382.837-.382,1.526v3.274c0,.854-.115,1.576-.345,2.167s-.689,1.1-1.378,1.526c.689.427,1.148.936,1.378,1.526.23.591.345,1.313.345,2.167v3.274c0,.689.127,1.198.382,1.527.254.328.751.492,1.49.492h.615v2.93h-.492c-1.034,0-1.9-.099-2.598-.296-.698-.197-1.256-.484-1.674-.861-.418-.378-.718-.842-.898-1.391-.181-.55-.271-1.178-.271-1.884v-3.718c0-.689-.164-1.247-.493-1.674-.328-.427-.861-.64-1.6-.64v-2.905Z" />
14+
<path d="M12.002,13.451c-.739,0-1.272.213-1.601.64-.329.427-.492.985-.492,1.674v3.718c0,.706-.091,1.333-.271,1.884-.181.549-.48,1.013-.899,1.391-.418.377-.977.665-1.674.861-.698.197-1.563.296-2.598.296h-.493v-2.93h.616c.739,0,1.235-.164,1.49-.492.254-.329.381-.837.381-1.527v-3.274c0-.854.115-1.576.345-2.167.229-.591.689-1.099,1.379-1.526-.689-.427-1.149-.936-1.379-1.526-.23-.591-.345-1.313-.345-2.167v-3.274c0-.689-.127-1.198-.381-1.526-.255-.329-.751-.493-1.49-.493h-.616V.082h.493c1.034,0,1.899.098,2.598.295.697.197,1.255.484,1.674.862.419.377.718.841.899,1.391.18.55.271,1.178.271,1.884v3.718c0,.689.164,1.248.492,1.674.328.427.862.64,1.601.64v2.905Z" />
15+
</svg>
1316
</div>
1417
<h1 className="mb-2 font-mono text-5xl font-bold tracking-tighter">404 Not Found</h1>
1518
<p className="mb-4 text-white/75">The page you are looking for does not exist.</p>
1619
<Link href="/">
1720
<Button variant="filled">
18-
<IconArrowBackUp size={16} className="-mt-0.5 text-white/50"/>
21+
<IconArrowBackUp size={16} className="-mt-0.5 text-white/50" />
1922
Go back
2023
</Button>
2124
</Link>

‎src/components/AcceptTermsCheckbox.tsx‎

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ interface AcceptTermsCheckboxProps extends Omit<CheckboxInputProps, "label"> {
1212
revalidateOnToggle?: () => void
1313
}
1414

15-
const copy: Record<AppLocale, { labelStart: string, termsLabel: string, privacyLabel: string, labelJoin: string }> = {
15+
const copy: Record<AppLocale, { labelStart: string; termsLabel: string; privacyLabel: string; labelJoin: string }> = {
1616
en: {
1717
labelStart: "I accept the",
1818
termsLabel: "Terms and Conditions",
@@ -27,12 +27,7 @@ const copy: Record<AppLocale, { labelStart: string, termsLabel: string, privacyL
2727
},
2828
}
2929

30-
export function AcceptTermsCheckbox({
31-
locale = DEFAULT_LOCALE,
32-
className,
33-
revalidateOnToggle,
34-
...checkboxProps
35-
}: AcceptTermsCheckboxProps) {
30+
export function AcceptTermsCheckbox({ locale = DEFAULT_LOCALE, className, revalidateOnToggle, ...checkboxProps }: AcceptTermsCheckboxProps) {
3631
const { trigger } = useWebHaptics()
3732
const { formValidation, ...rest } = checkboxProps
3833

@@ -42,15 +37,15 @@ export function AcceptTermsCheckbox({
4237

4338
const checkboxFormValidation = formValidation
4439
? {
45-
...formValidation,
46-
notValidMessage: null,
47-
setValue: (value: boolean) => {
48-
formValidation.setValue?.(value)
49-
if (!formValidation.valid) {
50-
revalidateOnToggle?.()
51-
}
52-
},
53-
}
40+
...formValidation,
41+
notValidMessage: null,
42+
setValue: (value: boolean) => {
43+
formValidation.setValue?.(value)
44+
if (!formValidation.valid) {
45+
revalidateOnToggle?.()
46+
}
47+
},
48+
}
5449
: undefined
5550

5651
const label: ReactNode = (
@@ -82,16 +77,10 @@ export function AcceptTermsCheckbox({
8277
return (
8378
<div className={className}>
8479
<div className="flex items-start">
85-
<CheckboxInput
86-
className="-mr-3"
87-
formValidation={checkboxFormValidation}
88-
{...rest}
89-
/>
80+
<CheckboxInput className="-mr-3" formValidation={checkboxFormValidation} {...rest} />
9081
{label}
9182
</div>
92-
{!formValidation?.valid && formValidation?.notValidMessage && (
93-
<InputMessage>{formValidation.notValidMessage}</InputMessage>
94-
)}
83+
{!formValidation?.valid && formValidation?.notValidMessage && <InputMessage>{formValidation.notValidMessage}</InputMessage>}
9584
</div>
9685
)
9786
}

‎src/components/ActionTriggerCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export function ActionTriggerCard({ type, item }: ActionTriggerCardProps) {
4545
question={`${parameterLabel} (${parameters.length})`}
4646
isOpen={openItem === 0}
4747
onToggle={toggleItem}
48-
className="rounded-lg shadow-none! before:bg-none"
48+
className="rounded-lg before:bg-none"
4949
questionClassname="pl-5 pr-2 py-1 text-sm lg:text-sm"
5050
answer={
5151
<div className="flex flex-col gap-2">

‎src/components/ActionTriggerView.tsx‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,14 @@ import { useEffect, useState } from "react"
44
import { SegmentedControl, SegmentedControlItem, Text } from "@code0-tech/pictor"
55
import type { Media } from "@/payload-types"
66
import { ActionTriggerCard } from "@/components/ActionTriggerCard"
7-
import {
8-
extractFunctionDefsFromJson,
9-
extractTriggersFromJson,
10-
fetchMediaJson,
11-
type ExtractedActionTriggerItem,
12-
type ExtractedFunctionDef,
13-
type ExtractedTrigger,
14-
} from "@/lib/actionTriggerExtraction"
7+
import { extractFunctionDefsFromJson, extractTriggersFromJson, fetchMediaJson, type ExtractedActionTriggerItem, type ExtractedFunctionDef, type ExtractedTrigger } from "@/lib/actionTriggerExtraction"
158

169
interface ActionTriggerViewProps {
1710
locale: string
1811
triggers: Media | undefined
1912
functionDefs: Media | undefined
2013
}
2114

22-
const controlClassName = "h-10! w-max! ring-2! ring-white/6! shadow-md!"
2315
const itemClassName = "text-white/70! transition-colors! data-[state=on]:bg-brand/20! data-[state=on]:text-brand!"
2416

2517
interface DisplayItem {
@@ -36,10 +28,7 @@ export function ActionTriggerView({ locale, triggers, functionDefs }: ActionTrig
3628
let cancelled = false
3729

3830
async function loadMediaJson() {
39-
const [triggerJson, functionDefJson] = await Promise.all([
40-
fetchMediaJson(triggers),
41-
fetchMediaJson(functionDefs),
42-
])
31+
const [triggerJson, functionDefJson] = await Promise.all([fetchMediaJson(triggers), fetchMediaJson(functionDefs)])
4332

4433
if (cancelled) {
4534
return
@@ -62,12 +51,8 @@ export function ActionTriggerView({ locale, triggers, functionDefs }: ActionTrig
6251
}, [triggers, functionDefs])
6352

6453
const visibleItems: DisplayItem[] = [
65-
...(viewMode === "both" || viewMode === "triggers"
66-
? extractedTriggers.map((trigger) => ({ type: "trigger" as const, item: trigger }))
67-
: []),
68-
...(viewMode === "both" || viewMode === "functionDefs"
69-
? extractedFunctionDefs.map((functionDef) => ({ type: "functionDef" as const, item: functionDef }))
70-
: []),
54+
...(viewMode === "both" || viewMode === "triggers" ? extractedTriggers.map((trigger) => ({ type: "trigger" as const, item: trigger })) : []),
55+
...(viewMode === "both" || viewMode === "functionDefs" ? extractedFunctionDefs.map((functionDef) => ({ type: "functionDef" as const, item: functionDef })) : []),
7156
]
7257

7358
return (
@@ -80,7 +65,7 @@ export function ActionTriggerView({ locale, triggers, functionDefs }: ActionTrig
8065
setViewMode(value)
8166
}
8267
}}
83-
className={controlClassName}
68+
className={"h-10! w-max!"}
8469
>
8570
<SegmentedControlItem value="both" className={itemClassName}>
8671
<Text>{locale === "en" ? "Both" : "Beide"}</Text>

‎src/components/BuyMenu.tsx‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,7 @@ interface BuyMenuProps {
1313
subscribeLabel: string
1414
}
1515

16-
export function BuyMenu({
17-
price,
18-
priceHeading,
19-
priceCaption,
20-
subscribeHref,
21-
subscribeLabel
22-
}: BuyMenuProps) {
16+
export function BuyMenu({ price, priceHeading, priceCaption, subscribeHref, subscribeLabel }: BuyMenuProps) {
2317
const [mounted, setMounted] = useState(false)
2418

2519
useEffect(() => {
@@ -31,28 +25,18 @@ export function BuyMenu({
3125
return createPortal(
3226
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex flex-row items-center gap-6 rounded-3xl bg-primary/30 backdrop-blur-md border border-white/10 p-4 shadow-[0_8px_32px_0_rgba(0,0,0,0.45),0_0_0_1px_rgba(255,255,255,0.04)]">
3327
<div className="flex flex-col justify-center">
34-
<span className="text-xs font-semibold tracking-wider text-white/50 uppercase">
35-
{priceHeading}
36-
</span>
28+
<span className="text-xs font-semibold tracking-wider text-white/50 uppercase">{priceHeading}</span>
3729
<div className="flex flex-row items-baseline gap-1.5">
38-
<span className="text-2xl font-semibold text-brand tabular-nums">
39-
{price}
40-
</span>
41-
<span className="text-xs text-white/45">
42-
{priceCaption}
43-
</span>
30+
<span className="text-2xl font-semibold text-brand tabular-nums">{price}</span>
31+
<span className="text-xs text-white/45">{priceCaption}</span>
4432
</div>
4533
</div>
4634

47-
<HapticButtonLink
48-
href={subscribeHref}
49-
variant="filled"
50-
className="bg-white/80! text-primary! hover:bg-white! font-semibold! tracking-wide! gap-3!"
51-
>
35+
<HapticButtonLink href={subscribeHref} variant="filled" className="bg-white/80! text-primary! hover:bg-white! font-semibold! tracking-wide! gap-3!">
5236
<IconShoppingCart size={20} stroke={2.2} className="text-black/75" />
5337
{subscribeLabel}
5438
</HapticButtonLink>
5539
</div>,
56-
document.body,
40+
document.body
5741
)
5842
}

0 commit comments

Comments
 (0)