Skip to content

Commit 5b494a8

Browse files
atilafassinaatilafassina
committed
wip
1 parent 1e6d157 commit 5b494a8

10 files changed

Lines changed: 1264 additions & 824 deletions

File tree

‎packages/landing-page/package.json‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@
44
"private": true,
55
"scripts": {
66
"dev": "vinxi dev",
7-
"build": "vinxi build",
7+
"build": "pnpm --filter @solidjs/start build && vinxi build",
88
"start": "vinxi start"
99
},
1010
"devDependencies": {
11-
"@kobalte/core": "^0.13.1",
11+
"@kobalte/core": "^0.13.11",
1212
"@kobalte/utils": "^0.9.0",
1313
"@tailwindcss/typography": "^0.5.16",
14-
"autoprefixer": "^10.4.19",
15-
"postcss": "^8.5.1",
16-
"tailwind-merge": "^2.6.0",
14+
"autoprefixer": "^10.4.21",
15+
"postcss": "^8.5.6",
16+
"tailwind-merge": "^3.3.1",
1717
"tailwindcss": "^3.4.17",
1818
"tailwindcss-animate": "^1.0.7",
19-
"tinyglobby": "^0.2.2",
19+
"tinyglobby": "^0.2.14",
2020
"tippy.js": "^6.3.7",
2121
"vinxi": "^0.5.3"
2222
},
@@ -26,7 +26,8 @@
2626
"@solidjs/start": "workspace:*",
2727
"class-variance-authority": "^0.7.1",
2828
"clsx": "^2.1.1",
29-
"solid-js": "^1.9.4",
30-
"solid-transition-group": "^0.2.3"
29+
"solid-js": "^1.9.9",
30+
"solid-motionone": "^1.0.4",
31+
"solid-transition-group": "^0.3.0"
3132
}
3233
}

‎packages/landing-page/src/app.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import {
66
} from "@kobalte/core/color-mode";
77
import { isServer } from "solid-js/web";
88
import { getCookie } from "vinxi/http";
9-
import { Announcement } from "~/components/sections/announcement";
109
import { DeployAnywhere } from "~/components/sections/deploy-anywhere";
1110
import { Footer } from "~/components/sections/footer";
1211
import { Hero } from "~/components/sections/hero";
1312
import { MetaFramework } from "~/components/sections/meta-framework";
1413
import { RockSolidDX } from "~/components/sections/rock-solid-dx";
14+
import { SponsoredBy } from "~/components/sections/sponsored-by";
1515
import { TopNav } from "~/components/sections/top-nav";
1616
import "./fonts.css";
1717
import "./root.css";
@@ -33,10 +33,10 @@ export default function App() {
3333
<TopNav />
3434
<Hero />
3535
<article class="w-full flex flex-col bg-white dark:bg-gradient-to-b dark:from-[#081924] from-white dark:via-[#081924] via-white dark:to-sky-950 to-sky-300">
36-
<Announcement />
3736
<MetaFramework />
3837
<RockSolidDX />
3938
<DeployAnywhere />
39+
<SponsoredBy />
4040
</article>
4141
<Footer />
4242
</main>

‎packages/landing-page/src/components/sections/announcement.tsx‎

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎packages/landing-page/src/components/sections/rock-solid-dx.tsx‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,43 @@
11
import { BentoBox, BentoItem } from "../bento";
2+
import { SparklesText } from "../ui/mystic/sparkle-text";
23
import { SectionTitle } from "../ui/section-title";
34

45
export function RockSolidDX() {
56
return (
67
<section class="max-w-5xl w-full mx-auto relative group pt-12">
78
<header class="pb-10">
8-
<SectionTitle stylesOverride="group-hover:shiny-text">
9-
Rock-Solid Developer Experience
9+
<SectionTitle>
10+
<SparklesText>Rock-Solid Developer Experience</SparklesText>
1011
</SectionTitle>
1112
<p class="leading-relaxed max-w-[50ch] mx-auto text-center dark:font-thin text-md">
1213
(pun intended)
1314
</p>
1415
</header>
1516
<BentoBox>
1617
<BentoItem isHighlight accent="pink" title="Single-Flight Mutations">
18+
<p class="text-lg pt-4">Avoid waterfalls when updating data on the server.</p>
1719
<p class="text-lg pt-4">
18-
Avoid waterfalls when updating data on the server.
19-
</p>
20-
<p class="text-lg pt-4">
21-
E.g.: when updating your view after a mutation, SolidStart will
22-
prevent a waterfall even if a navigation is triggered by the
23-
mutation. New data comes on the same flight as the mutation
24-
response.
20+
E.g.: when updating your view after a mutation, SolidStart will prevent a waterfall even
21+
if a navigation is triggered by the mutation. New data comes on the same flight as the
22+
mutation response.
2523
</p>
2624
</BentoItem>
2725
<BentoItem accent="lime" title="Request & Resource Deduplication">
2826
<p class="text-lg pt-4">
29-
During a roundtrip 2 identical requests never fly out, and 2
30-
identical resources are never serialized again.
27+
During a roundtrip 2 identical requests never fly out, and 2 identical resources are
28+
never serialized again.
3129
</p>
3230
</BentoItem>
3331
<BentoItem accent="emerald" title="Server Actions">
3432
<p>
35-
Form actions running on the server with code co-location and all the
36-
bells, whisltles, and whimsy you need.
33+
Form actions running on the server with code co-location and all the bells, whisltles,
34+
and whimsy you need.
3735
</p>
3836
</BentoItem>
3937
<BentoItem accent="teal" title="Server Functions">
4038
<p>
41-
Also known as Lambda Functions, SolidStart can create these API
42-
endpoints automatically, just as any other route.
39+
Also known as Lambda Functions, SolidStart can create these API endpoints automatically,
40+
just as any other route.
4341
</p>
4442
</BentoItem>
4543
<BentoItem
@@ -51,9 +49,8 @@ export function RockSolidDX() {
5149
}
5250
>
5351
<p>
54-
Strongly parallelized data loading, easily define preloading
55-
strategies and empower your users with the snappiest UX they can
56-
imagine!
52+
Strongly parallelized data loading, easily define preloading strategies and empower your
53+
users with the snappiest UX they can imagine!
5754
</p>
5855
</BentoItem>
5956
</BentoBox>

‎packages/landing-page/src/components/sections/sponsored-by.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { Index } from "solid-js";
2+
import { CloudflareLogo } from "../icons/platform/cloudflare-logo";
3+
import { SectionTitle } from "../ui/section-title";
4+
5+
const SPONSORED_BY = [
6+
{
7+
name: "Cloudflare",
8+
url: "https://cloudflare.com/",
9+
icon: <CloudflareLogo class="w-32 h-32" />
10+
}
11+
];
12+
13+
export function SponsoredBy() {
14+
return (
15+
<section class="max-w-5xl pt-12 w-full mx-auto relative">
16+
<header>
17+
<SectionTitle>Sponsored by</SectionTitle>
18+
<p class="pt-5 px-2 leading-relaxed max-w-[70ch] mx-auto text-center dark:font-thin text-lg">
19+
SolidStart is a project of the{" "}
20+
<a href="https://solidjs.com/" target="_blank">
21+
SolidJS
22+
</a>
23+
team.
24+
</p>
25+
</header>
26+
<div class="mx-auto w-fit pt-12">
27+
<pre class="bg-gradient-to-tr px-4 py-14 sm:p-14 dark:from-sky-950/20 dark:to-sky-800/20 from-sky-50 to-sky-100 dark:shadow-[0px_0px_35px_rgb(125,211,252,0.10)] ring-1 ring-sky-950 relative rounded-md">
28+
<div
29+
id="upper-line"
30+
class="absolute -top-px left-20 right-11 h-px bg-gradient-to-r from-blue-300/0 via-blue-300/70 to-blue-300/0 animate-bounce"
31+
></div>
32+
<div
33+
id="bottom-line"
34+
class="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-blue-400/0 via-blue-800 dark:via-blue-400 to-blue-400/0 animate-bounce"
35+
></div>
36+
<code>
37+
<span class="dark:text-[#C792EA] text-purple-800">export default</span>{" "}
38+
<span class="dark:text-[#82AAFF] text-sky-950">defineConfig</span>
39+
<span class="dark:text-[#89DDFF] text-pink-600">{`({`}</span>
40+
<br />
41+
<span>
42+
{" "}server{`: `}
43+
</span>
44+
<span class="dark:text-[#89DDFF]">{`{`}</span>
45+
<br />
46+
<span>
47+
{" "}preset{`: `}
48+
</span>
49+
<span class="dark:text-[#89DDFF] text-pink-600">{`"`}</span>
50+
<span class="dark:text-[#C3E88D] text-rose-500">netlify</span>
51+
<span class="dark:text-[#89DDFF] text-pink-600">{`"`}</span>
52+
<br />
53+
<span class="dark:text-[#89DDFF] text-pink-600">
54+
{" "}
55+
{`}`}
56+
</span>
57+
<br />
58+
<span class="dark:text-[#89DDFF] text-pink-600">{`})`}</span>
59+
</code>
60+
</pre>
61+
</div>
62+
<ul class="pt-16 grid grid-cols-2 place-items-center gap-4 sm:gap-6 md:grid-cols-3">
63+
<Index each={SPONSORED_BY}>
64+
{platform => (
65+
<li>
66+
<a
67+
class={`group size-36 sm:size-44 grid gap-5 place-items-center border-2 rounded-md py-4 px-2 hover:border-sky-950 dark:border-sky-950 border-sky-200 dark:hover:border-sky-200 z-10 relative`}
68+
href={platform().url}
69+
target="_blank"
70+
rel="noopener"
71+
>
72+
{platform().icon}
73+
<span class="text-sm">{platform().name}</span>
74+
</a>
75+
</li>
76+
)}
77+
</Index>
78+
<li>...and over 20 others!</li>
79+
</ul>
80+
</section>
81+
);
82+
}

‎packages/landing-page/src/components/sections/top-nav.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ export function TopNav() {
99
<DiscordIcon />
1010
<span class="sr-only">Invitation to SolidJS discord server</span>
1111
</a>
12-
{/* <SolidStartLogo class="w-10 h-10 grayscale" /> */}
1312
<ThemeToggle />
1413
</div>
1514
</nav>

‎packages/landing-page/src/components/ui/mystic/dot-pattern.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { type Component, type JSX, createUniqueId, mergeProps, splitProps } from "solid-js";
2+
3+
import { cn } from "~/lib/utils";
4+
5+
export interface DotPatternProps extends JSX.SvgSVGAttributes<SVGSVGElement> {
6+
width?: number;
7+
height?: number;
8+
x?: number;
9+
y?: number;
10+
cx?: number;
11+
cy?: number;
12+
cr?: number;
13+
}
14+
15+
export const DotPattern: Component<DotPatternProps> = props => {
16+
const [_localProps, forwardProps] = splitProps(props, [
17+
"width",
18+
"height",
19+
"x",
20+
"y",
21+
"cx",
22+
"cy",
23+
"cr",
24+
"class"
25+
]);
26+
const localProps = mergeProps(
27+
{
28+
width: 16,
29+
height: 16,
30+
x: 0,
31+
y: 0,
32+
cx: 1,
33+
cy: 1,
34+
cr: 1
35+
},
36+
_localProps
37+
);
38+
const id = createUniqueId();
39+
40+
return (
41+
<svg
42+
aria-hidden="true"
43+
class={cn(
44+
"pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80",
45+
localProps.class
46+
)}
47+
{...forwardProps}
48+
>
49+
<defs>
50+
<pattern
51+
id={id}
52+
width={localProps.width}
53+
height={localProps.height}
54+
patternUnits="userSpaceOnUse"
55+
patternContentUnits="userSpaceOnUse"
56+
x={localProps.x}
57+
y={localProps.y}
58+
>
59+
<circle id="pattern-circle" cx={localProps.cx} cy={localProps.cy} r={localProps.cr} />
60+
</pattern>
61+
</defs>
62+
<rect width="100%" height="100%" stroke-width={0} fill={`url(#${id})`} />
63+
</svg>
64+
);
65+
};

0 commit comments

Comments
 (0)