chore landing page

2025-03-25 22:29:31 +08:00
parent cb5e10ac6b
commit 3fa1ccf793
6 changed files with 190 additions and 14 deletions
@@ -1,11 +1,12 @@
 import HeroLanding, { LandingImages } from "@/components/sections/hero-landing";
-import PreviewLanding from "@/components/sections/preview-landing";
+
+// import PreviewLanding from "@/components/sections/preview-landing";

 export default function IndexPage() {
  return (
    <>
      <HeroLanding />
-      <PreviewLanding />
+      {/* <PreviewLanding /> */}
      <LandingImages />
    </>
  );
@@ -8,7 +8,9 @@ import { cn, nFormatter } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
 import { Icons } from "@/components/shared/icons";

+import { Doc } from "../../.contentlayer/generated/types";
 import GitHubStarsWithSuspense from "../shared/github-star-wrapper";
+import UrlShortener from "./url-shortener";

 export default async function HeroLanding() {
  const user = await getCurrentUser();
@@ -16,14 +18,14 @@ export default async function HeroLanding() {
    <section className="space-y-6 py-12 sm:py-20 lg:py-24">
      <div className="container flex max-w-screen-md flex-col items-center gap-5 text-center">
        <Link
-          href="/docs/open-api/screenshot"
+          href="/dashboard"
          target="_blank"
          className={cn(
            buttonVariants({ variant: "outline", size: "sm", rounded: "xl" }),
            "px-4",
          )}
        >
-          <span className="mr-3">🎉</span>Screenshot API&nbsp;
+          <span className="mr-3">🎉</span>Short link analytics&nbsp;
          <span className="font-bold" style={{ fontFamily: "Bahamas Bold" }}>
            available
          </span>
@@ -31,9 +33,9 @@ export default async function HeroLanding() {
        </Link>

        <h1 className="text-balance font-satoshi text-[40px] font-black leading-[1.15] tracking-tight sm:text-5xl md:text-6xl md:leading-[1.15]">
-          One Platform Powers{" "}
+          Short Links With{" "}
          <span className="bg-gradient-to-r from-violet-600 via-blue-600 to-cyan-500 bg-clip-text text-transparent">
-            Endless Solutions
+            Powerful Solutions
          </span>
        </h1>

@@ -42,24 +44,37 @@ export default async function HeroLanding() {
          you need to build better.
        </p>

-        <div className="flex flex-col items-center justify-center gap-2 md:flex-row">
-          <GitHubStarsWithSuspense
+        <div className="flex items-center justify-center gap-4">
+          {/* <GitHubStarsWithSuspense
            owner="oiov"
            repo="wr.do"
            className="shadow-sm"
-          />
+          /> */}
+          <Link
+            href="/docs"
+            prefetch={true}
+            className={cn(
+              buttonVariants({ rounded: "xl", size: "lg", variant: "outline" }),
+              "gap-2 bg-primary-foreground px-4 text-[15px] font-semibold text-primary hover:bg-slate-100",
+            )}
+          >
+            <span>Documents</span>
+            <Icons.bookOpen className="size-4" />
+          </Link>
          <Link
            href="/dashboard"
            prefetch={true}
            className={cn(
              buttonVariants({ rounded: "xl", size: "lg" }),
-              "gap-2 px-5 text-[15px] font-semibold",
+              "px-4 text-[15px] font-semibold",
            )}
          >
            <span>{user?.id ? "Dashboard" : "Sign in for free"}</span>
-            <Icons.arrowRight className="size-4" />
+            {/* <Icons.arrowRight className="size-4" /> */}
          </Link>
        </div>
+
+        <UrlShortener />
      </div>
    </section>
  );
@@ -68,7 +83,7 @@ export default async function HeroLanding() {
 export function LandingImages() {
  return (
    <>
-      <div className="mt-12 w-full max-w-6xl px-6">
+      <div className="mt-10 w-full max-w-6xl px-6">
        <div className="my-14 flex flex-col items-center justify-around gap-10 md:flex-row-reverse">
          <Image
            className="rounded-lg shadow-lg transition-all hover:opacity-90 hover:shadow-xl"
@@ -0,0 +1,156 @@
+import Link from "next/link";
+
+import { Icons } from "../shared/icons";
+
+export default function UrlShotenerExp() {
+  return (
+    <main className="mx-auto mt-10 flex w-full max-w-[561.5px] flex-col items-center justify-center rounded-xl border border-neutral-900/[0.05] bg-neutral-500/5 px-4 py-5 backdrop-blur">
+      <div className="absolute left-1/2 top-0 flex -translate-x-1/2 -translate-y-1/2 items-center gap-1.5 rounded-full border border-neutral-300 bg-[#eff9fa] px-2 py-0.5 text-xs text-neutral-600">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="lucide lucide-link2 size-3.5 text-neutral-800"
+        >
+          <path d="M9 17H7A5 5 0 0 1 7 7h2"></path>
+          <path d="M15 7h2a5 5 0 1 1 0 10h-2"></path>
+          <line x1="8" x2="16" y1="12" y2="12"></line>
+        </svg>
+        Try it out
+      </div>
+      <div className="w-full">
+        <div className="space-y-3">
+          <div className="relative">
+            <div className="flex items-center">
+              <input
+                type="text"
+                placeholder="Shorten any link..."
+                className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-600 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
+                readOnly
+              />
+              <Link
+                href={"/dashboard/urls"}
+                className="absolute right-2 rounded-lg bg-blue-500 p-1 text-white"
+              >
+                <Icons.arrowDown className="size-5" />
+              </Link>
+            </div>
+          </div>
+
+          <div className="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
+            <div className="flex items-center justify-between gap-2">
+              <div className="flex items-center gap-4">
+                <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-black">
+                  <svg
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+                      fill="white"
+                    />
+                    <path
+                      d="M16.5 12C16.5 14.4853 14.4853 16.5 12 16.5C9.51472 16.5 7.5 14.4853 7.5 12C7.5 9.51472 9.51472 7.5 12 7.5C14.4853 7.5 16.5 9.51472 16.5 12Z"
+                      fill="black"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <div className="flex items-center gap-2">
+                    <p className="text-base font-bold text-gray-700">
+                      wr.do/s/try
+                    </p>
+                    <div className="flex gap-1">
+                      <button className="rounded-full border p-1.5 transition-colors hover:bg-gray-100">
+                        <Icons.copy className="size-3 text-gray-500" />
+                      </button>
+                      <button className="rounded-full border p-1.5 transition-colors hover:bg-gray-100">
+                        <Icons.qrcode className="size-3 text-gray-500" />
+                      </button>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-1 text-sm font-semibold text-gray-400">
+                    <svg
+                      viewBox="0 0 18 18"
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-4 w-4 shrink-0 text-gray-400"
+                    >
+                      <g fill="currentColor">
+                        <path
+                          d="M15.25,9.75H4.75c-1.105,0-2-.895-2-2V3.75"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="1.5"
+                        ></path>
+                        <polyline
+                          fill="none"
+                          points="11 5.5 15.25 9.75 11 14"
+                          stroke="currentColor"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="1.5"
+                        ></polyline>
+                      </g>
+                    </svg>
+                    wr.do/login
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="flex items-center gap-1 rounded-lg border bg-gray-50 px-3 py-1">
+                  <Icons.mousePointerClick className="size-4" />
+                  <p className="text-sm font-medium text-gray-700">
+                    12.6K <span className="hidden sm:inline">clicks</span>
+                  </p>
+                </div>
+                <button className="rounded-lg p-2 transition-colors hover:bg-gray-100">
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="text-gray-500"
+                  >
+                    <path
+                      d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                    <path
+                      d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                    <path
+                      d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
@@ -1,5 +1,6 @@
 import {
  AlertTriangle,
+  ArrowDown,
  ArrowRight,
  ArrowUpRight,
  BadgeHelp,
@@ -33,6 +34,7 @@ import {
  MessagesSquare,
  Moon,
  MoreVertical,
+  MousePointerClick,
  Package,
  Paintbrush,
  Plus,
@@ -54,6 +56,7 @@ export const Icons = {
  add: Plus,
  arrowRight: ArrowRight,
  arrowUpRight: ArrowUpRight,
+  arrowDown: ArrowDown,
  chevronLeft: ChevronLeft,
  chevronRight: ChevronRight,
  bookOpen: BookOpen,
@@ -66,6 +69,7 @@ export const Icons = {
  download: Download,
  ellipsis: MoreVertical,
  paintbrush: Paintbrush,
+  mousePointerClick: MousePointerClick,
  github: ({ ...props }: LucideProps) => (
    <svg
      aria-hidden="true"
@@ -39,7 +39,7 @@ export const footerLinks: SidebarNavItem[] = [
    items: [
      { title: "Vmail", href: "https://vmail.dev" },
      { title: "Moise", href: "https://moise.oiov.dev" },
-      { title: "Inke", href: "https://inke.wr.do" },
+      // { title: "Inke", href: "https://inke.wr.do" },
      { title: "Iconce", href: "https://iconce.com" },
    ],
  },