apunkt/plano
1
0
Fork 0
mirror of https://github.com/katanemo/plano.git synced 2026-06-26 15:39:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(www): improvements to mobile design, layout of diagrams

Browse source
This commit is contained in:
Musa 2025-11-20 17:08:14 -08:00
parent 52c6ccb9a9
commit fa956962f0
15 changed files with 877 additions and 251 deletions
Download patch file Download diff file Expand all files Collapse all files

43
www/src/components/HowItWorksSection.tsx
View file

@ -5,28 +5,49 @@ import Image from "next/image";
export function HowItWorksSection() {
return (
<section className="bg-[#1a1a1a] text-white pb-28 px-6 lg:px-[102px]">
<div className="max-w-324 mx-auto">
<div className="flex flex-col gap-16">
<section className="bg-[#1a1a1a] text-white pb-16 sm:pb-20 lg:pb-28 sm:pt-3 pt-20">
<div className="max-w-324 mx-auto sm:pl-0">
<div className="flex flex-col gap-8 sm:gap-12 lg:gap-16">
{/* Header and Description */}
<div className="max-w-4xl">
<h2 className="font-sans font-normal text-3xl lg:text-4xl tracking-[-2.4px]! text-white leading-[1.03] mb-8">
<div className="max-w-4xl lg:-ml-[102px] lg:pl-[102px] sm:pl-0 pl-4">
<h2 className="font-sans font-normal text-2xl sm:text-3xl lg:text-4xl tracking-[-2px] sm:tracking-[-2.4px]! text-white leading-[1.03] mb-6 sm:mb-8">
A high-level overview of how Plano works
</h2>
<div className="font-mono text-white text-xl lg:text-lg leading-10 tracking-[-1.2px]!">
<div className="font-mono text-white w-100 sm:w-full text-sm sm:text-lg lg:text-lg leading-7 sm:leading-9 lg:leading-10 tracking-[-0.8px] sm:tracking-[-1.2px]!">
<p className="mb-0">
Plano offers a delightful developer experience with a simple configuration file that describes the types of prompts your agentic app supports, a set of APIs that need to be plugged in for agentic scenarios (including retrieval queries) and your choice of LLMs.
</p>
</div>
</div>
{/* Large Diagram */}
<div className="w-full">
<Image
{/* Large Diagram - Scrollable on mobile, normal on desktop */}
{/* Mobile: Full-width scrollable container that extends to viewport edges */}
<div className="mt-5 lg:hidden relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen overflow-x-auto overflow-y-visible" style={{ scrollbarWidth: "none", msOverflowStyle: "none", WebkitOverflowScrolling: "touch" }}>
<style jsx>{`
.diagram-scroll-container::-webkit-scrollbar {
display: none;
}
`}</style>
<div className="diagram-scroll-container inline-block">
<Image
src="/HowItWorks.svg"
alt="How Plano Works Diagram"
width={1200}
height={600}
className="h-auto"
style={{ width: "1200px", maxWidth: "none", display: "block" }}
priority
/>
</div>
</div>
{/* Desktop: Extends to container edges */}
<div className="hidden lg:block -w-[calc(10%+20px)] -mx-[10px]">
<Image
src="/HowItWorks.svg"
alt="How Plano Works Diagram"
width={1200}
height={600}
width={10}
height={10}
className="w-full h-auto"
priority
/>