Update landing page (#1964)

Author: atilafassina

packages/landing-page/app.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from "@solidjs/start/config";
 
 export default defineConfig({
-  // experimental: { islands: true },
   server: {
     preset: "netlify"
   }

packages/landing-page/package.json

@@ -4,19 +4,19 @@
   "private": true,
   "scripts": {
     "dev": "vinxi dev",
-    "build": "vinxi build",
+    "build": "pnpm --filter @solidjs/start build && vinxi build",
     "start": "vinxi start"
   },
   "devDependencies": {
-    "@kobalte/core": "^0.13.1",
+    "@kobalte/core": "^0.13.11",
     "@kobalte/utils": "^0.9.0",
     "@tailwindcss/typography": "^0.5.16",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.5.1",
-    "tailwind-merge": "^2.6.0",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwind-merge": "^3.3.1",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
-    "tinyglobby": "^0.2.2",
+    "tinyglobby": "^0.2.14",
     "tippy.js": "^6.3.7",
     "vinxi": "^0.5.3"
   },
@@ -26,7 +26,8 @@
     "@solidjs/start": "workspace:*",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "solid-js": "^1.9.4",
-    "solid-transition-group": "^0.2.3"
+    "solid-js": "^1.9.9",
+    "solid-motionone": "^1.0.4",
+    "solid-transition-group": "^0.3.0"
   }
 }

packages/landing-page/public/anomaly-logo.png

@@ -1,46 +1,46 @@
 // @refresh reload
-import {
-  ColorModeProvider,
-  ColorModeScript,
-  cookieStorageManagerSSR
-} from "@kobalte/core/color-mode";
-import { isServer } from "solid-js/web";
-import { getCookie } from "vinxi/http";
-import { Announcement } from "~/components/sections/announcement";
+// import {
+//   ColorModeProvider,
+//   ColorModeScript,
+//   cookieStorageManagerSSR
+// } from "@kobalte/core/color-mode";
+// import { isServer } from "solid-js/web";
+// import { getCookie } from "vinxi/http";
 import { DeployAnywhere } from "~/components/sections/deploy-anywhere";
 import { Footer } from "~/components/sections/footer";
 import { Hero } from "~/components/sections/hero";
 import { MetaFramework } from "~/components/sections/meta-framework";
 import { RockSolidDX } from "~/components/sections/rock-solid-dx";
+import { SponsoredBy } from "~/components/sections/sponsored-by";
 import { TopNav } from "~/components/sections/top-nav";
 import "./fonts.css";
 import "./root.css";
 
-function getServerCookies() {
-  "use server";
-  const colorMode = getCookie("kb-color-mode");
-  return colorMode ? `kb-color-mode=${colorMode}` : "";
-}
+// function getServerCookies() {
+//   "use server";
+//   const colorMode = getCookie("kb-color-mode");
+//   return colorMode ? `kb-color-mode=${colorMode}` : "";
+// }
 
 export default function App() {
-  const storageManager = cookieStorageManagerSSR(isServer ? getServerCookies() : document.cookie);
+  // const storageManager = cookieStorageManagerSSR(isServer ? getServerCookies() : document.cookie);
 
   return (
     <>
-      <ColorModeScript storageType={storageManager.type} />
-      <ColorModeProvider storageManager={storageManager}>
-        <main class="min-h-screen h-full grid grid-rows-[auto,1fr,auto] place-items-center relative bg-gradient-to-b dark:from-sky-950 from-sky-800 to-sky-200 dark:to-[#081924]">
-          <TopNav />
-          <Hero />
-          <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">
-            <Announcement />
-            <MetaFramework />
-            <RockSolidDX />
-            <DeployAnywhere />
-          </article>
-          <Footer />
-        </main>
-      </ColorModeProvider>
+      {/* <ColorModeScript storageType={storageManager.type} /> */}
+      {/* <ColorModeProvider storageManager={storageManager}> */}
+      <main class="min-h-screen h-full grid grid-rows-[auto,1fr,auto] place-items-center relative bg-gradient-to-b dark:from-sky-950 from-sky-800 to-sky-200 dark:to-[#081924]">
+        <TopNav />
+        <Hero />
+        <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">
+          <MetaFramework />
+          <RockSolidDX />
+          <DeployAnywhere />
+          <SponsoredBy />
+        </article>
+        <Footer />
+      </main>
+      {/* </ColorModeProvider> */}
     </>
   );
 }

packages/landing-page/src/app.tsx

@@ -54,7 +54,7 @@ export function DeployAnywhere() {
     <section class="max-w-5xl pt-12 w-full mx-auto relative">
       <header>
         <SectionTitle>Deploy Anywhere</SectionTitle>
-        <p class="pt-5 px-2 leading-relaxed max-w-[70ch] mx-auto text-center dark:font-thin text-lg">
+        <p class="w-full sm:w-3/5 pt-5 px-2 leading-relaxed max-w-[70ch] mx-auto text-center dark:font-thin text-lg transition-all ease-in-out">
           On the shoulders of open-source. SolidStart can be deployed to every platform Nitro has a
           preset for.
         </p>

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

@@ -2,12 +2,27 @@ import { CodeSnippet } from "../code-snippet";
 import { GithubIcon } from "../icons/github-icon";
 import { SolidStartLogo } from "../icons/solidstart-logo";
 import { buttonVariants } from "../ui/button";
+import { AnimatedShinyText } from "../ui/mystic/shine";
+
 const buttonOutlineStyles = buttonVariants({
   variant: "outline"
 });
+
 export function Hero() {
   return (
-    <header class="w-full mx-auto pb-24 md:px-10 bg-gradient-to-b from-transparent dark:to-[#081924] via-white dark:via-white/0 to-white">
+    <header class="w-full mx-auto md:px-10 bg-gradient-to-b from-transparent dark:to-[#081924] via-white dark:via-white/0 to-white">
+      <div class="flex flex-col items-center justify-center">
+        <a
+          href="https://github.com/solidjs/solid-start/discussions/1960"
+          target="_blank"
+          rel="noopener"
+          class="inline-block px-4 py-1 group rounded-full border border-black/5 text-base text-white transition-all ease-in dark:border-white/15 dark:bg-neutral-900/30 dark:hover:bg-neutral-800/20"
+        >
+          <AnimatedShinyText>
+            <span>✨ Public Roadmap - DeVinxi and Beyond</span>
+          </AnimatedShinyText>
+        </a>
+      </div>
       <div class="max-w-5xl mx-auto">
         <SolidStartLogo class="drop-shadow-[10px_20px_35px_rgb(125,211,252,0.3)] size-52 md:size-[400px] mx-auto" />
         <div class="flex flex-col">

packages/landing-page/src/components/sections/deploy-anywhere.tsx

@@ -7,7 +7,7 @@ export function MetaFramework() {
     <section class="max-w-5xl w-full mx-auto pt-12 md:pt-28 group">
       <header>
         <SectionTitle>Composable Meta-framework</SectionTitle>
-        <p class="pt-5 px-2 leading-relaxed max-w-[70ch] mx-auto text-center dark:font-thin text-lg">
+        <p class="pt-5 px-2 leading-relaxed max-w-[70ch] mx-auto text-center dark:font-thin text-lg w-full md:w-3/5">
           SolidStart integrates multiple separate packages to provide a complete functionality. Each
           of these pieces can be replaced with your own implementation.
         </p>

packages/landing-page/src/components/sections/hero.tsx

@@ -1,45 +1,43 @@
 import { BentoBox, BentoItem } from "../bento";
+import { SparklesText } from "../ui/mystic/sparkle-text";
 import { SectionTitle } from "../ui/section-title";
 
 export function RockSolidDX() {
   return (
     <section class="max-w-5xl w-full mx-auto relative group pt-12">
       <header class="pb-10">
-        <SectionTitle stylesOverride="group-hover:shiny-text">
-          Rock-Solid Developer Experience
+        <SectionTitle>
+          <SparklesText>Rock-Solid Developer Experience</SparklesText>
         </SectionTitle>
         <p class="leading-relaxed max-w-[50ch] mx-auto text-center dark:font-thin text-md">
           (pun intended)
         </p>
       </header>
       <BentoBox>
         <BentoItem isHighlight accent="pink" title="Single-Flight Mutations">
+          <p class="text-lg pt-4">Avoid waterfalls when updating data on the server.</p>
           <p class="text-lg pt-4">
-            Avoid waterfalls when updating data on the server.
-          </p>
-          <p class="text-lg pt-4">
-            E.g.: when updating your view after a mutation, SolidStart will
-            prevent a waterfall even if a navigation is triggered by the
-            mutation. New data comes on the same flight as the mutation
-            response.
+            E.g.: when updating your view after a mutation, SolidStart will prevent a waterfall even
+            if a navigation is triggered by the mutation. New data comes on the same flight as the
+            mutation response.
           </p>
         </BentoItem>
         <BentoItem accent="lime" title="Request & Resource Deduplication">
           <p class="text-lg pt-4">
-            During a roundtrip 2 identical requests never fly out, and 2
-            identical resources are never serialized again.
+            During a roundtrip 2 identical requests never fly out, and 2 identical resources are
+            never serialized again.
           </p>
         </BentoItem>
         <BentoItem accent="emerald" title="Server Actions">
           <p>
-            Form actions running on the server with code co-location and all the
-            bells, whisltles, and whimsy you need.
+            Form actions running on the server with code co-location and all the bells, whisltles,
+            and whimsy you need.
           </p>
         </BentoItem>
         <BentoItem accent="teal" title="Server Functions">
           <p>
-            Also known as Lambda Functions, SolidStart can create these API
-            endpoints automatically, just as any other route.
+            Also known as Lambda Functions, SolidStart can create these API endpoints automatically,
+            just as any other route.
           </p>
         </BentoItem>
         <BentoItem
@@ -51,9 +49,8 @@ export function RockSolidDX() {
           }
         >
           <p>
-            Strongly parallelized data loading, easily define preloading
-            strategies and empower your users with the snappiest UX they can
-            imagine!
+            Strongly parallelized data loading, easily define preloading strategies and empower your
+            users with the snappiest UX they can imagine!
           </p>
         </BentoItem>
       </BentoBox>

packages/landing-page/src/components/sections/meta-framework.tsx

@@ -0,0 +1,28 @@
+import { CloudflareLogo } from "../icons/platform/cloudflare-logo";
+import { SectionTitle } from "../ui/section-title";
+
+const SPONSORED_BY = [
+  {
+    name: "Cloudflare",
+    url: "https://cloudflare.com/",
+    icon: <CloudflareLogo class="w-32 h-32" />
+  }
+];
+
+export function SponsoredBy() {
+  return (
+    <section class="pt-32 w-full flex flex-row justify-center items-center gap-32 relative">
+      <header class="text-left w-1/3">
+        <SectionTitle stylesOverride="text-left">Anomaly Innovations</SectionTitle>
+        <p class="pt-5 px-2 leading-relaxed max-w-[70ch] mx-auto dark:font-thin text-lg">
+          Thank you to our official partner who accelerate our development.
+        </p>
+      </header>
+      <div class="grid place-items-center gap-4 sm:gap-6">
+        <a href="https://anoma.ly/" target="_blank" rel="noopener">
+          <img src="/anomaly-logo.png" alt="Anomaly Innovations" class="w-32 h-32" />
+        </a>
+      </div>
+    </section>
+  );
+}