+ +
{t("title")}
+
+ {featuresList.map(({ title, description, icon, altText }) => (
+
+
+ 
+
+ ))}
+
+
+ {title}
+{description}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/docs/landing-page/src/components/landing-page/Heading/Tagline.tsx b/docs/landing-page/src/components/landing-page/Heading/Tagline.tsx
new file mode 100644
index 00000000000..93e6f883c81
--- /dev/null
+++ b/docs/landing-page/src/components/landing-page/Heading/Tagline.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export const Tagline = () => {
+ const { t } = useTranslation("translation", { keyPrefix: "title" });
+ return (
+
+
+
+
+
+ Smithy Service Example
+
+
+
+
+
+ Model
+ Something else
+
+
+
+
+
+
+
+
+
+ > smithy build
+
+
+
+ Sun
+
+
+
+
+ Moon
+
+
+
+
+ Earth
+
+
+
+
+ Water
+
+
+
+
+
+
+ );
+};
diff --git a/docs/landing-page/src/components/landing-page/Heading/index.tsx b/docs/landing-page/src/components/landing-page/Heading/index.tsx
new file mode 100644
index 00000000000..0207e354d84
--- /dev/null
+++ b/docs/landing-page/src/components/landing-page/Heading/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { Tagline } from "./Tagline";
+import { SmithyPopGradient } from "@/components/ui/SmithyPopGradient";
+
+import { Card, CardHeader } from "@/components/ui/card";
+import { IdePanel } from "@/components/ui/ide-panel";
+import { ServiceExample } from "../ServiceExample";
+
+interface HeadingProps {
+ serviceExampleRef: React.RefObject+ {t("lineOne")} + {t("lineTwo")} + + {t("tagline")} + +
+{t("subtitle")}
+
+
+
+
+
+
+
+
+
+
+
+ Smithy Service Example
+
+
+
+ );
+};
diff --git a/docs/landing-page/src/components/landing-page/Quote/index.stories.tsx b/docs/landing-page/src/components/landing-page/Quote/index.stories.tsx
new file mode 100644
index 00000000000..1b5ebd8d05d
--- /dev/null
+++ b/docs/landing-page/src/components/landing-page/Quote/index.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { Quote } from ".";
+
+const meta = {
+ title: "Smithy/LandingPage/Quote",
+ component: Quote,
+ parameters: {
+ layout: "centered",
+ },
+ tags: ["autodocs"],
+ args: {
+ onClick: fn(),
+ },
+} satisfies Meta
+
+
+ ![{altText}]({"/icons/dark/pull_quote.svg"})
+ ![{altText}]({"/icons/light/pull_quote.svg"})
+
+
+
+
+ {t("partOne")}
+ {t("partTwo")}
+
+
+ – {t("author")}
+
+
+
+ {lines.map((line, i) => (
+
+ {/*
+ {i < 9 ? " " : ""}
+ {i + 1}
+ |
+ */}
+ {line === "" && <> }
+ {line}
+
+ ))}
+
+
+ );
+};
diff --git a/docs/landing-page/src/components/landing-page/SubHeading/index.stories.tsx b/docs/landing-page/src/components/landing-page/SubHeading/index.stories.tsx
new file mode 100644
index 00000000000..666552330f8
--- /dev/null
+++ b/docs/landing-page/src/components/landing-page/SubHeading/index.stories.tsx
@@ -0,0 +1,20 @@
+import { useRef } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { SubHeading } from "./index";
+
+const meta = {
+ title: "Smithy/LandingPage/SubHeading",
+ component: () => {
+ const modelRef = useRef
+
+ );
+};
diff --git a/docs/landing-page/src/components/landing-page/SubHeading/web.stories.tsx b/docs/landing-page/src/components/landing-page/SubHeading/web.stories.tsx
new file mode 100644
index 00000000000..f9db8416c8b
--- /dev/null
+++ b/docs/landing-page/src/components/landing-page/SubHeading/web.stories.tsx
@@ -0,0 +1,20 @@
+import React, { useRef } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Web } from "./web";
+
+const meta = {
+ title: "Smithy/LandingPage/Web",
+ component: () => {
+ const centerRef = useRef
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t("model")}
+
+
+
+ /{t("build")}
+ /{t("validate")}
+ /{t("transform")}
+ /{t("share")}
+
+
+
+
+
+
+
+
+
+
+ {/* CENTER */}
+
+ );
+};
diff --git a/docs/landing-page/src/components/landing-page/index.tsx b/docs/landing-page/src/components/landing-page/index.tsx
new file mode 100644
index 00000000000..9a4be1b14ab
--- /dev/null
+++ b/docs/landing-page/src/components/landing-page/index.tsx
@@ -0,0 +1,6 @@
+export * from "./Heading";
+export * from "./SubHeading";
+export * from "./Quote";
+export * from "./Features";
+export * from "./InformationCircles";
+export * from "./Footer";
diff --git a/docs/landing-page/src/components/landing-page/useSupportedLanguagesHook.tsx b/docs/landing-page/src/components/landing-page/useSupportedLanguagesHook.tsx
new file mode 100644
index 00000000000..397403a4824
--- /dev/null
+++ b/docs/landing-page/src/components/landing-page/useSupportedLanguagesHook.tsx
@@ -0,0 +1,91 @@
+import React, { useMemo } from "react";
+import { useTranslation, Trans } from "react-i18next";
+
+interface useSupportedLanguagesProps {
+ filter?: "clients" | "servers";
+}
+
+export const useSupportedLanguages = (props?: useSupportedLanguagesProps) => {
+ const { t } = useTranslation("translation", {
+ keyPrefix: "supportedLanguages",
+ });
+ return useMemo(() => {
+ const serverUrls = [
+ {
+ src: "/icons/duke.svg",
+ alt: t("java.alt"),
+ trademark: t("java.trademark"),
+ location: "https://github.com/smithy-lang/smithy-java",
+ },
+ {
+ src: "/icons/ts.svg",
+ alt: t("ts.alt"),
+ trademark: t("ts.trademark"),
+ location: "https://github.com/awslabs/smithy-typescript",
+ },
+ {
+ src: "/icons/rust.svg",
+ alt: t("rust.alt"),
+ trademark: (
+ <>
+
+
+
+
+
+
+
+
+ › smithy build
+
+
+
+
+
+
+
+
+ SDKs
+
+
+
+
+
+
+
+ Docs
+
+
+
+
+
+
+
+ Server Stubs
+ 
+
+ ![{t("logoAlt")}]({"/logos/smithy_logo_lt.svg"}){kind=logo}
+
+
+
+ Hello World
+
+
+
+
+
+
+
+
+
+ Goodbye World
+
+
+
+ );
+};
+
+const meta = {
+ title: "Smithy/svg/Arrow",
+ component: MyComponent,
+ parameters: {
+ layout: "centered",
+ },
+} satisfies MetaStart Component
*/}
+
+ +
+
+
+
+
+
+ Hello World
+
+
+
+
+
+
+
+
+
+ Goodbye World
+
+
+
+ );
+};
+
+const meta = {
+ title: "Smithy/svg/line",
+ component: MyComponent,
+ parameters: {
+ layout: "centered",
+ },
+ globals: {
+ theme: "dark",
+ },
+} satisfies MetaStart Component
*/}
+
+ +
+
+
+
+
+
+ Universe
+
+
+
+
+
+
+
+
+ );
+};
+
+const meta = {
+ title: "Smithy/svg/Spider",
+ component: MyComponent,
+ parameters: {
+ layout: "fullscreen",
+ },
+} satisfies MetaStart Component
*/}
+
+ +
+
+
+
+
+
+ Sun
+
+
+
+
+ Moon
+
+
+
+
+ Earth
+
+
+
+
+ Water
+
+
+
+
+
+
+
+ {planet}
+
+
+ ))}
+ />
+
+ );
+};
+
+const meta = {
+ title: "Smithy/svg/wheel",
+ component: MyComponent,
+ parameters: {
+ layout: "centered",
+ },
+ globals: {
+ theme: "dark",
+ },
+} satisfies MetaServer
,
+ IDE
,
+ SDK
,
+ Lint
,
+ Validate
,
+ Lorem
,
+ Ipsum
,
+ Dolor
,
+ ],
+ },
+};
+export const LineColorOverride: Story = {
+ args: {
+ planets: ["Earth", "Mars"],
+ lineColor: "blue",
+ },
+};
+export const One: Story = {
+ args: {
+ planets: ["Earth"],
+ },
+};
+export const Two: Story = {
+ args: {
+ planets: ["Earth", "Mars"],
+ },
+};
+export const Three: Story = {
+ args: {
+ planets: ["Earth", "Mars", "Jupiter"],
+ },
+};
+export const Four: Story = {
+ args: {
+ planets: ["Earth", "Mars", "Jupiter", "Saturn"],
+ },
+};
+export const Five: Story = {
+ args: {
+ planets: ["Mercury", "Venus", "Earth", "Mars", "Jupiter"],
+ },
+};
+export const Six: Story = {
+ args: {
+ planets: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn"],
+ },
+};
+export const Seven: Story = {
+ args: {
+ planets: [
+ "Mercury",
+ "Venus",
+ "Earth",
+ "Mars",
+ "Jupiter",
+ "Saturn",
+ "Uranus",
+ ],
+ },
+};
diff --git a/docs/landing-page/src/components/svg/wheel.tsx b/docs/landing-page/src/components/svg/wheel.tsx
new file mode 100644
index 00000000000..a1f29cdb15d
--- /dev/null
+++ b/docs/landing-page/src/components/svg/wheel.tsx
@@ -0,0 +1,123 @@
+import React, {
+ useRef,
+ useCallback,
+ useEffect,
+ useMemo,
+ useState,
+ RefObject,
+} from "react";
+
+import { LineConnector } from "./line";
+
+export interface WheelProps {
+ centerComponent: React.ReactElement<{ ref?: RefObject
+ {React.cloneElement(props.centerComponent, {
+ ref: centerRef,
+ })}
+
+ );
+ }, [props.centerComponent]);
+
+ const [beforeCenter, afterCenter] = useMemo(() => {
+ if (!props.endComponents) return [[], []];
+ if (props.endComponents.length === 0) return [[], []];
+
+ const beforeCenter: React.ReactNode[] = [];
+ const afterCenter: React.ReactNode[] = [];
+ const fillOrder = fillOrderByLength[props.endComponents.length.toString()];
+ let currentEndComponent = 0;
+
+ for (let i = 0; i < 8; i++) {
+ if (fillOrder.includes(i)) {
+ const component: React.ReactElement<{ ref?: RefObject
+ {React.cloneElement(component, {
+ ref: refs[i],
+ })}
+
+ );
+
+ // const element = props.endComponents[currentEndComponent];
+ if (i < centerPosition) {
+ beforeCenter.push(wrappedComponent);
+ } else {
+ afterCenter.push(wrappedComponent);
+ }
+ currentEndComponent++;
+ } else {
+ if (i < centerPosition) {
+ beforeCenter.push();
+ } else {
+ afterCenter.push();
+ }
+ }
+ }
+ return [beforeCenter, afterCenter];
+ }, [props.endComponents]);
+
+ return (
+
+ {refs.map((ref, index) => {
+ if (!ref) return "";
+ return (
+
+ );
+};
diff --git a/docs/landing-page/src/components/ui/CircleSection.stories.tsx b/docs/landing-page/src/components/ui/CircleSection.stories.tsx
new file mode 100644
index 00000000000..c27408c16b9
--- /dev/null
+++ b/docs/landing-page/src/components/ui/CircleSection.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { CircleSection } from "./CircleSection";
+
+const meta = {
+ title: "Smithy/ui/CircleSection",
+ component: CircleSection,
+ args: {
+ title: "hello world",
+ description: "some random text",
+ circleUrls: [
+ { src: "/icons/dark/swift.svg" },
+ { src: "/icons/dark/javaScript.svg" },
+ { src: "/icons/dark/rust.svg" },
+ ],
+ },
+ parameters: {
+ layout: "fullscreen",
+ },
+} satisfies Meta
+ {props.circleUrls.map((imgProps) => (
+
+
+ {props.action}
+
+ ![]()
+
+
+ ))}
+ hello world
,
+ },
+};
diff --git a/docs/landing-page/src/components/ui/Section.tsx b/docs/landing-page/src/components/ui/Section.tsx
new file mode 100644
index 00000000000..45fb83816b9
--- /dev/null
+++ b/docs/landing-page/src/components/ui/Section.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const gradientPopClasses = "";
+
+export interface SectionProps extends React.HTMLAttributes{props.title}
+{props.description}
+ {props.children} + {props.action} +
+
+ {props.children}
+ );
+};
diff --git a/docs/landing-page/src/components/ui/SmithyPopGradient.stories.tsx b/docs/landing-page/src/components/ui/SmithyPopGradient.stories.tsx
new file mode 100644
index 00000000000..0f8edd258e6
--- /dev/null
+++ b/docs/landing-page/src/components/ui/SmithyPopGradient.stories.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { SmithyPopGradient } from "./SmithyPopGradient";
+import { Tagline } from "../landing-page/Heading/Tagline";
+
+const meta = {
+ title: "Smithy/ui/SmithyPopGradient",
+ component: (props) => {
+ return (
+
+
+
+
+
+ );
+};
diff --git a/docs/landing-page/src/components/ui/brand.stories.tsx b/docs/landing-page/src/components/ui/brand.stories.tsx
new file mode 100644
index 00000000000..c56d48dad35
--- /dev/null
+++ b/docs/landing-page/src/components/ui/brand.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Brand } from "./brand";
+
+const meta = {
+ title: "Smithy/Brand",
+ component: Brand,
+ parameters: {
+ layout: "fullscreen",
+ },
+} satisfies Meta{props.children}
+
+
+ );
+};
diff --git a/docs/landing-page/src/components/ui/button.stories.tsx b/docs/landing-page/src/components/ui/button.stories.tsx
new file mode 100644
index 00000000000..e37db48bb31
--- /dev/null
+++ b/docs/landing-page/src/components/ui/button.stories.tsx
@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { Button } from "./button";
+
+const meta = {
+ title: "Smithy/ui/Button",
+ component: Button,
+ parameters: {
+ layout: "centered",
+ },
+ tags: ["autodocs"],
+ args: {
+ variant: "default",
+ onClick: fn(),
+ },
+ argTypes: {
+ variant: {
+ control: "select",
+ options: [
+ "default",
+ "gradient",
+ "destructive",
+ "outline",
+ "gradient-outline",
+ "secondary",
+ "ghost",
+ "link",
+ ],
+ },
+ },
+} satisfies MetaColors
+
+
+ Smithy Gradient
+
+
+
+ Smithy Black
+
+
+ Smithy Red
+
+
+
+ Smithy Light Gray
+
+
+ Smithy Dark Gray
+
+
+
+
+ Red 33%
+ Red 15%
+ Plum
+ Rose
+ Purple
+ Purple 50%
+
+
+
+
+
+
+
+ Card Footer
+
+
+ );
+ }
+ return (
+
+ {children}
+
+
+ {renderedChildren}
+
+ );
+ },
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+
+ );
+};
diff --git a/docs/landing-page/src/components/ui/navigation-menu.tsx b/docs/landing-page/src/components/ui/navigation-menu.tsx
new file mode 100644
index 00000000000..6e00b3d8dab
--- /dev/null
+++ b/docs/landing-page/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,128 @@
+import * as React from "react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const NavigationMenu = React.forwardRef<
+ React.ElementRef
+
+
+
+
+ {props.children}
+
+
+));
+NavigationMenuViewport.displayName =
+ NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+ React.ElementRef