From 52c6ccb9a9ee3a7931c5f574c60de64378516ed3 Mon Sep 17 00:00:00 2001 From: Musa Date: Thu, 20 Nov 2025 14:14:20 -0800 Subject: [PATCH] feat(www): sections enhanced for clarify & diagrams added --- www/public/BuildWithChoice.svg | 17 +-- www/public/Contextual.svg | 2 +- www/public/IntroDiagram.svg | 71 +++++++++ www/public/Introduction.svg | 77 ++++++++++ www/public/LaunchFaster.svg | 2 +- www/public/OpenSource.svg | 75 ++++++++++ www/public/ShipConfidently.svg | 8 +- www/public/Telemetry.svg | 138 +++++++++--------- www/src/components/HowItWorksSection.tsx | 6 +- www/src/components/IntroSection.tsx | 2 +- .../components/VerticalCarouselSection.tsx | 64 +++++--- 11 files changed, 348 insertions(+), 114 deletions(-) create mode 100644 www/public/IntroDiagram.svg create mode 100644 www/public/Introduction.svg create mode 100644 www/public/OpenSource.svg diff --git a/www/public/BuildWithChoice.svg b/www/public/BuildWithChoice.svg index e048240a..641358b8 100644 --- a/www/public/BuildWithChoice.svg +++ b/www/public/BuildWithChoice.svg @@ -66,21 +66,12 @@ - - - + + - + - - - - - - - - - + diff --git a/www/public/Contextual.svg b/www/public/Contextual.svg index 345096b3..655f95af 100644 --- a/www/public/Contextual.svg +++ b/www/public/Contextual.svg @@ -1,7 +1,7 @@ - + diff --git a/www/public/IntroDiagram.svg b/www/public/IntroDiagram.svg new file mode 100644 index 00000000..94e9c518 --- /dev/null +++ b/www/public/IntroDiagram.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/public/Introduction.svg b/www/public/Introduction.svg new file mode 100644 index 00000000..a050ec1f --- /dev/null +++ b/www/public/Introduction.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/public/LaunchFaster.svg b/www/public/LaunchFaster.svg index 5f699610..9b582c55 100644 --- a/www/public/LaunchFaster.svg +++ b/www/public/LaunchFaster.svg @@ -20,7 +20,7 @@ - + diff --git a/www/public/OpenSource.svg b/www/public/OpenSource.svg new file mode 100644 index 00000000..95e7904e --- /dev/null +++ b/www/public/OpenSource.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/public/ShipConfidently.svg b/www/public/ShipConfidently.svg index 1519b678..5dd89417 100644 --- a/www/public/ShipConfidently.svg +++ b/www/public/ShipConfidently.svg @@ -5,10 +5,10 @@ - - - - + + + + diff --git a/www/public/Telemetry.svg b/www/public/Telemetry.svg index 2c8b7163..0dc931f9 100644 --- a/www/public/Telemetry.svg +++ b/www/public/Telemetry.svg @@ -14,80 +14,80 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/www/src/components/HowItWorksSection.tsx b/www/src/components/HowItWorksSection.tsx index e99c5fa3..1ee42d9a 100644 --- a/www/src/components/HowItWorksSection.tsx +++ b/www/src/components/HowItWorksSection.tsx @@ -5,13 +5,13 @@ import Image from "next/image"; export function HowItWorksSection() { return ( -
+
{/* Header and Description */}
-

- How it works +

+ A high-level overview of how Plano works

diff --git a/www/src/components/IntroSection.tsx b/www/src/components/IntroSection.tsx index 6e29d8a1..1cf1ed31 100644 --- a/www/src/components/IntroSection.tsx +++ b/www/src/components/IntroSection.tsx @@ -35,7 +35,7 @@ export function IntroSection() { {/* Right Diagram */}

Network Path Diagram -
+
{/* Main Heading */}

Basic scenarios to powerful agentic apps in minutes @@ -55,7 +61,7 @@ export function VerticalCarouselSection() { {/* Vertical Carousel Layout */}
{/* Left Sidebar Navigation */} -
+
{/* Sliding Rectangle Indicator */} {/* Right Content Area */} -
+
-
- {/* Title */} -

- {verticalCarouselData[activeSlide].title} -

+
+ {/* Text Content */} +
+ {/* Title */} +

+ {verticalCarouselData[activeSlide].title} +

- {/* Description */} -
-

- {verticalCarouselData[activeSlide].description} -

+ {/* Description */} +
+

+ {verticalCarouselData[activeSlide].description} +

+
+
+ + {/* Diagram - Right Side */} +
+ {verticalCarouselData[activeSlide].title}
-

);