mirror of
https://github.com/katanemo/plano.git
synced 2026-07-23 16:51:04 +02:00
feat: redesign archgw -> plano + website
This commit is contained in:
Musa
parent
126b029345
commit
2a50b02d03
56 changed files with 4959 additions and 264 deletions
BIN
www/src/app/favicon.ico
Normal file
BIN
www/src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
217
www/src/app/globals.css
Normal file
217
www/src/app/globals.css
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* Font Face Declarations */
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url("/fonts/IBMPlexSans-VariableFont_wdth,wght.ttf") format("truetype-variations");
|
||||
font-weight: 100 700; /* Variable font weight range */
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("/fonts/jetbrains-mono-bold.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Base colors */
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
|
||||
/* Brand colors from Figma */
|
||||
--primary: #7780d9;
|
||||
--primary-dark: #4141b2;
|
||||
--primary-darker: #2a3178;
|
||||
--secondary: #9797ea;
|
||||
|
||||
/* Purple shades */
|
||||
--purple-50: #edefff;
|
||||
--purple-100: #b9bfff;
|
||||
--purple-200: #b0b7ff;
|
||||
--purple-300: #abb2fa;
|
||||
--purple-400: #969ff4;
|
||||
--purple-500: #acb3fe;
|
||||
|
||||
/* Neutral colors */
|
||||
--muted: #787878;
|
||||
--muted-foreground: #494949;
|
||||
--border: #d1d1d1;
|
||||
|
||||
/* Dark section */
|
||||
--dark-bg: #1a1a1a;
|
||||
--dark-foreground: #ffffff;
|
||||
--radius: 0.625rem;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #171717;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #171717;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary-foreground: #171717;
|
||||
--accent: #edefff;
|
||||
--accent-foreground: #171717;
|
||||
--destructive: #ef4444;
|
||||
--input: #d1d1d1;
|
||||
--ring: #7780d9;
|
||||
--chart-1: #7780d9;
|
||||
--chart-2: #9797ea;
|
||||
--chart-3: #abb2fa;
|
||||
--chart-4: #969ff4;
|
||||
--chart-5: #acb3fe;
|
||||
--sidebar: #ffffff;
|
||||
--sidebar-foreground: #171717;
|
||||
--sidebar-primary: #7780d9;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #edefff;
|
||||
--sidebar-accent-foreground: #171717;
|
||||
--sidebar-border: #d1d1d1;
|
||||
--sidebar-ring: #7780d9;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-dark: var(--primary-dark);
|
||||
--color-primary-darker: var(--primary-darker);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-purple-50: var(--purple-50);
|
||||
--color-purple-100: var(--purple-100);
|
||||
--color-purple-200: var(--purple-200);
|
||||
--color-purple-300: var(--purple-300);
|
||||
--color-purple-400: var(--purple-400);
|
||||
--color-purple-500: var(--purple-500);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-dark-bg: var(--dark-bg);
|
||||
--color-dark-foreground: var(--dark-foreground);
|
||||
|
||||
/* Font families for Tailwind */
|
||||
--font-sans: "IBM Plex Sans", system-ui, sans-serif;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
|
||||
/* Font weights - variable font supports 100-700 */
|
||||
--font-weight-thin: 100;
|
||||
--font-weight-extralight: 200;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
/* Global letter-spacing for fonts */
|
||||
.font-sans,
|
||||
[class*="font-sans"] {
|
||||
letter-spacing: -4.56px;
|
||||
}
|
||||
|
||||
.font-mono,
|
||||
[class*="font-mono"] {
|
||||
letter-spacing: -0.96px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
html {
|
||||
background: linear-gradient(to top right, #ffffff, #dcdfff);
|
||||
min-height: 100%;
|
||||
}
|
||||
body {
|
||||
@apply text-foreground;
|
||||
background: linear-gradient(to top right, #ffffff, #dcdfff);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
21
www/src/app/layout.tsx
Normal file
21
www/src/app/layout.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import type { Metadata } from "next";
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Plano - The AI-native network for agents",
|
||||
description: "Build and scale AI agents without handling the low-level plumbing.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className="antialiased">
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
32
www/src/app/page.tsx
Normal file
32
www/src/app/page.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { Hero } from "@/components/Hero";
|
||||
import { IntroSection } from "@/components/IntroSection";
|
||||
import { IdeaToAgentSection } from "@/components/IdeaToAgentSection";
|
||||
import { UseCasesSection } from "@/components/UseCasesSection";
|
||||
import { VerticalCarouselSection } from "@/components/VerticalCarouselSection";
|
||||
import { UnlockPotentialSection } from "@/components/UnlockPotentialSection";
|
||||
import { Footer } from "@/components/Footer";
|
||||
import { LogoCloud } from "@/components/LogoCloud";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar />
|
||||
<main className="pt-20">
|
||||
<Hero />
|
||||
<LogoCloud />
|
||||
<IntroSection />
|
||||
<IdeaToAgentSection />
|
||||
<UseCasesSection />
|
||||
<VerticalCarouselSection />
|
||||
<UnlockPotentialSection variant="black" />
|
||||
|
||||
{/* Rest of the sections will be refactored next */}
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue