From 66918a16ee863a30debc5343b94f6c3b0c31b0e5 Mon Sep 17 00:00:00 2001 From: Tirey Morris Date: Fri, 21 Jun 2024 15:40:27 -0700 Subject: [PATCH] Improve landing page --- public/styles/uno.css | 68 ++++++++++++++++++++++----- src/components/Layout.tsx | 9 ++-- src/server.tsx | 96 ++++++++++++++++++++++++++++++++------- 3 files changed, 140 insertions(+), 33 deletions(-) diff --git a/public/styles/uno.css b/public/styles/uno.css index b4645ba..2b0cf1b 100644 --- a/public/styles/uno.css +++ b/public/styles/uno.css @@ -19,43 +19,87 @@ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } +/* layer: shortcuts */ +.container{width:100%;} +@media (min-width: 640px){ +.container{max-width:640px;} +} +@media (min-width: 768px){ +.container{max-width:768px;} +} +@media (min-width: 1024px){ +.container{max-width:1024px;} +} +@media (min-width: 1280px){ +.container{max-width:1280px;} +} +@media (min-width: 1536px){ +.container{max-width:1536px;} +} /* layer: default */ .m-0{margin:0;} -.m-auto{margin:auto;} +.mx-auto{margin-left:auto;margin-right:auto;} +.mb-4{margin-bottom:1rem;} +.mb-6{margin-bottom:1.5rem;} +.mt-2{margin-top:0.5rem;} +.mt-4{margin-top:1rem;} +.mt-6{margin-top:1.5rem;} .h-8{height:2rem;} -.h-full{height:100%;} +.h-auto{height:auto;} +.max-w-4xl{max-width:56rem;} +.min-h-screen{min-height:100vh;} +.w-full{width:100%;} .flex{display:flex;} -.flex-col{flex-direction:column;} .cursor-pointer{cursor:pointer;} +.list-disc{list-style-type:disc;} +.list-inside{list-style-position:inside;} .items-center{align-items:center;} .justify-center{justify-content:center;} .gap-3{gap:0.75rem;} -.gap-8{gap:2rem;} .border{border-width:1px;} .border-gray-2{--un-border-opacity:1;border-color:rgb(229 231 235 / var(--un-border-opacity));} .focus\:border-blue-200:focus{--un-border-opacity:1;border-color:rgb(191 219 254 / var(--un-border-opacity));} +.rounded{border-radius:0.25rem;} +.rounded-lg{border-radius:0.5rem;} .rounded-md{border-radius:0.375rem;} .border-none{border-style:none;} .border-solid{border-style:solid;} -.bg-blue-100{--un-bg-opacity:1;background-color:rgb(219 234 254 / var(--un-bg-opacity));} -.bg-blue-200{--un-bg-opacity:1;background-color:rgb(191 219 254 / var(--un-bg-opacity));} .bg-blue-300{--un-bg-opacity:1;background-color:rgb(147 197 253 / var(--un-bg-opacity));} -.bg-slate-200{--un-bg-opacity:1;background-color:rgb(226 232 240 / var(--un-bg-opacity));} +.bg-blue-600{--un-bg-opacity:1;background-color:rgb(37 99 235 / var(--un-bg-opacity));} +.bg-gray-200{--un-bg-opacity:1;background-color:rgb(229 231 235 / var(--un-bg-opacity));} .bg-transparent{background-color:transparent;} +.bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));} .hover\:bg-blue-400:hover{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity));} -.p-0{padding:0;} -.px-10{padding-left:2.5rem;padding-right:2.5rem;} +.hover\:bg-blue-700:hover{--un-bg-opacity:1;background-color:rgb(29 78 216 / var(--un-bg-opacity));} +.from-blue-300{--un-gradient-from-position:0%;--un-gradient-from:rgb(147 197 253 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(147 197 253 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.via-purple-300{--un-gradient-via-position:50%;--un-gradient-to:rgb(216 180 254 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(216 180 254 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);} +.to-pink-300{--un-gradient-to-position:100%;--un-gradient-to:rgb(249 168 212 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);} +.bg-gradient-to-br{--un-gradient-shape:to bottom right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} +.p-4{padding:1rem;} +.p-8{padding:2rem;} .px-4{padding-left:1rem;padding-right:1rem;} .py-1{padding-top:0.25rem;padding-bottom:0.25rem;} +.py-10{padding-top:2.5rem;padding-bottom:2.5rem;} .py-2{padding-top:0.5rem;padding-bottom:0.5rem;} -.py-8{padding-top:2rem;padding-bottom:2rem;} .pl-3{padding-left:0.75rem;} .pr-10{padding-right:2.5rem;} +.text-2xl{font-size:1.5rem;line-height:2rem;} .text-base{font-size:1rem;line-height:1.5rem;} .text-sm{font-size:0.875rem;line-height:1.25rem;} +.text-blue-600{--un-text-opacity:1;color:rgb(37 99 235 / var(--un-text-opacity));} +.text-gray-900{--un-text-opacity:1;color:rgb(17 24 39 / var(--un-text-opacity));} .text-neutral-500{--un-text-opacity:1;color:rgb(115 115 115 / var(--un-text-opacity));} +.text-pink-600{--un-text-opacity:1;color:rgb(219 39 119 / var(--un-text-opacity));} +.text-purple-600{--un-text-opacity:1;color:rgb(147 51 234 / var(--un-text-opacity));} .text-slate-900{--un-text-opacity:1;color:rgb(15 23 42 / var(--un-text-opacity));} +.text-teal-600{--un-text-opacity:1;color:rgb(13 148 136 / var(--un-text-opacity));} +.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));} .font-bold{font-weight:700;} -.font-lato{font-family:"Lato";} +.font-semibold{font-weight:600;} +.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";} +.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} .shadow-md{--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} -.outline{outline-style:solid;} \ No newline at end of file +.hover\:shadow-xl:hover{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);} +.outline{outline-style:solid;} +.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;} +.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;} \ No newline at end of file diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 6327285..4c6f0f7 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -1,10 +1,10 @@ -type Props = { +export type LayoutProps = { title: string; currentPath?: string; children: any; }; -export default function Layout({ title, children }: Props) { +export default function Layout({ title, children }: LayoutProps) { return ( @@ -21,9 +21,10 @@ export default function Layout({ title, children }: Props) { - - {children} + + {children} + ); } diff --git a/src/server.tsx b/src/server.tsx index 926e5dd..dcdc81a 100644 --- a/src/server.tsx +++ b/src/server.tsx @@ -1,6 +1,7 @@ import { Hono } from "hono"; import { serveStatic } from "hono/bun"; import { logger } from "hono/logger"; +import Button from "./components/Button.tsx"; import Layout from "./components/Layout.tsx"; const app = new Hono(); @@ -8,25 +9,86 @@ const app = new Hono(); app.use("/styles/*", serveStatic({ root: "./public/" })); app.use("*", logger()); -app.get("/", (c) => - c.html( - -
-

🌊 welcome to hyperwave

- 
-          ⌨️ edit src/server.tsx
-
- 
-          📚 read the{" "}
-          
-            friendy manual
-          
-          !
-
+app.get("/", async (c) => { + return c.html( + +
+
+
+

+ What is Hyperwave? +

+

+ Hyperwave is a modern server-side framework for building web + applications. It combines the best of both worlds from traditional + server-rendered apps and modern client-side frameworks. +

+
    +
  • + Speed: Minimal payloads mean fast load times + without heavy client-side rendering. +
    • +
  • + Productivity: Build quickly with HTMX, + Tailwind, TSX, and Hyperscript. +
    • +
  • + Ergonomics: Enjoy the best of modern tools with + a solid, maintainable architecture. +
    • +
  • + Portability: Compile to a binary that can be + deployed anywhere. +
    • +
+
+
+

+ Why Choose Hyperwave? +

+

+ Hyperwave drastically reduces the time from idea to live + application. It offers a seamless developer experience with + minimal cognitive load after an initial learning phase. +

+
+
+

+ Getting Started +

+ 
bun dev
+

+ Run the command above, visit port 1234, and start editing{" "} + server.tsx to see your changes live. +

+
+ +
+
, - ), -); + ); +}); + +app.get("/comparison", async (c) => { + return c.html( +
+

Comparison

+ Comparison +
, + ); +}); export default { port: process.env.PORT || 1234,