add anomaly and public roadmap

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/public/anomaly-logo.png

@@ -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/deploy-anywhere.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/hero.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/meta-framework.tsx

@@ -1,4 +1,3 @@
-import { Index } from "solid-js";
 import { CloudflareLogo } from "../icons/platform/cloudflare-logo";
 import { SectionTitle } from "../ui/section-title";
 
@@ -12,71 +11,18 @@ const SPONSORED_BY = [
 
 export function SponsoredBy() {
   return (
-    <section class="max-w-5xl pt-12 w-full mx-auto relative">
-      <header>
-        <SectionTitle>Sponsored by</SectionTitle>
-        <p class="pt-5 px-2 leading-relaxed max-w-[70ch] mx-auto text-center dark:font-thin text-lg">
-          SolidStart is a project of the{" "}
-          <a href="https://solidjs.com/" target="_blank">
-            SolidJS
-          </a>
-          team.
+    <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="mx-auto w-fit pt-12">
-        <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">
-          <div
-            id="upper-line"
-            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"
-          ></div>
-          <div
-            id="bottom-line"
-            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"
-          ></div>
-          <code>
-            <span class="dark:text-[#C792EA] text-purple-800">export default</span>{" "}
-            <span class="dark:text-[#82AAFF] text-sky-950">defineConfig</span>
-            <span class="dark:text-[#89DDFF] text-pink-600">{`({`}</span>
-            <br />
-            <span>
-              {"    "}server{`: `}
-            </span>
-            <span class="dark:text-[#89DDFF]">{`{`}</span>
-            <br />
-            <span>
-              {"        "}preset{`: `}
-            </span>
-            <span class="dark:text-[#89DDFF] text-pink-600">{`"`}</span>
-            <span class="dark:text-[#C3E88D] text-rose-500">netlify</span>
-            <span class="dark:text-[#89DDFF] text-pink-600">{`"`}</span>
-            <br />
-            <span class="dark:text-[#89DDFF] text-pink-600">
-              {"    "}
-              {`}`}
-            </span>
-            <br />
-            <span class="dark:text-[#89DDFF] text-pink-600">{`})`}</span>
-          </code>
-        </pre>
+      <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>
-      <ul class="pt-16 grid grid-cols-2 place-items-center gap-4 sm:gap-6 md:grid-cols-3">
-        <Index each={SPONSORED_BY}>
-          {platform => (
-            <li>
-              <a
-                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`}
-                href={platform().url}
-                target="_blank"
-                rel="noopener"
-              >
-                {platform().icon}
-                <span class="text-sm">{platform().name}</span>
-              </a>
-            </li>
-          )}
-        </Index>
-        <li>...and over 20 others!</li>
-      </ul>
     </section>
   );
 }

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

@@ -0,0 +1,33 @@
+import { type JSX, type ParentComponent, mergeProps, splitProps } from "solid-js";
+import { cn } from "~/lib/utils";
+
+export interface AnimatedShinyTextProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  shimmerWidth?: number;
+}
+
+export const AnimatedShinyText: ParentComponent<AnimatedShinyTextProps> = props => {
+  const [_localProps, forwardProps] = splitProps(props, ["shimmerWidth", "class", "children"]);
+  const localProps = mergeProps({ shimmerWidth: 100 }, _localProps);
+
+  return (
+    <p
+      style={{
+        "--shiny-width": `${localProps.shimmerWidth}px`
+      }}
+      class={cn(
+        "mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
+
+        // Shine effect
+        "animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
+
+        // Shine gradient
+        "bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80",
+
+        localProps.class
+      )}
+      {...forwardProps}
+    >
+      {localProps.children}
+    </p>
+  );
+};

packages/landing-page/src/components/ui/mystic/shine.tsx

@@ -1,17 +1,13 @@
 import { type JSX } from "solid-js";
+import { cn } from "~/lib/utils";
 
 interface Props {
   stylesOverride?: string;
   children: JSX.Element;
 }
 
-const DEFAULT_STYLES =
-  "text-3xl text-center text-sky-800 dark:text-sky-200/80 px-2";
+const DEFAULT_STYLES = "text-3xl text-center text-sky-800 dark:text-sky-200/80 px-2";
 
 export function SectionTitle(props: Props) {
-  return (
-    <h2 class={`${DEFAULT_STYLES} ${props.stylesOverride}`}>
-      {props.children}
-    </h2>
-  );
+  return <h2 class={cn(DEFAULT_STYLES, props.stylesOverride)}>{props.children}</h2>;
 }

packages/landing-page/src/components/ui/section-title.tsx

@@ -20,9 +20,18 @@ export default {
         "accordion-up": {
           from: { height: "var(--kb-accordion-content-height)" },
           to: { height: "0" }
+        },
+        "shiny-text": {
+          "0%, 90%, 100%": {
+            backgroundPosition: "calc(-100% - var(--shiny-width)) 0"
+          },
+          "30%, 60%": {
+            backgroundPosition: "calc(100% + var(--shiny-width)) 0"
+          }
         }
       },
       animation: {
+        "shiny-text": "shiny-text 8s infinite",
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out"
       }