Skip to content

[DRAFT] feat(landing): Playpond link. #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
aidanCQ wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

[DRAFT] feat(landing): Playpond link. #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2b36034
Init.
aidanCQ Apr 2, 2026
b2e828c
Style changes.
aidanCQ Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 154 additions & 0 deletions landing/src/app/_components/GuppyLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
import type { ComponentProps } from 'react'

export const GuppyLogo = (props: ComponentProps<'svg'>) => {
return (
<svg width="1500" height="1500" viewBox="0 0 1500 1500" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<g clipPath="url(#clip0_37_27)">
<path
d="M565.764 404.764C566.47 402.883 567.215 401.079 567.959 399.237C567.215 401.079 566.47 402.922 565.764 404.764Z"
fill="url(#paint0_linear_37_27)"
/>
<path
d="M1416.46 764.916C1409.09 751.666 1399.21 738.572 1387.1 729.752L1386.55 729.36C1346.25 699.684 1308.11 736.103 1282.59 768.17C1226.57 841.4 1156.95 907.26 1066.4 933.408C937.308 969.827 790.109 942.111 681.484 856.376C571.526 762.564 517.86 619.162 544.713 480.072C549.652 454.473 556.316 430.011 564.823 407.195C564.509 408.057 564.156 408.881 563.843 409.743C568.665 388.809 583.992 349.332 599.986 317.382C623.781 269.83 650.947 234.744 684.895 202.206C750.595 139.208 837.621 97.4179 925.587 72.7204C973.765 59.1956 1024.02 53.08 1074.04 54.6873C1090.23 55.197 1106.5 56.7258 1122.65 59.078C1011.2 6.78204 895.598 -10.2318 772.195 5.80198C468.428 40.7313 224.365 304.132 192.299 602.383C186.144 679.22 184.694 752.568 203.314 839.244C270.974 1154.43 551.926 1407.48 880.663 1422.81C966.316 1426.81 1055.62 1428.42 1123.75 1398.23C1242.13 1345.82 1319.28 1277.53 1384.2 1154.86C1449.15 1032.08 1476 876.526 1416.54 764.877L1416.46 764.916ZM1286.08 1091.32C1262.44 1097.27 1238.37 1082.65 1232.29 1058.66C1226.22 1034.63 1240.49 1010.32 1264.09 1004.36C1287.72 998.406 1311.79 1013.03 1317.87 1037.02C1323.94 1061.05 1309.68 1085.36 1286.08 1091.32Z"
fill="url(#paint1_linear_37_27)"
/>
<path
d="M556.591 1439.2C561.216 1405.25 602.808 1398.98 632.875 1388.63C713.982 1360.75 809.71 1287.01 852.36 1244.75C873.685 1223.78 895.481 1197.44 913.317 1174.7C927.9 1156.74 934.564 1149.57 954.047 1160.15C975.999 1172.93 999.245 1190.03 1020.73 1204.77C1057.34 1229.78 1086.47 1261.49 1133.31 1288.03C1166.04 1306.58 1256.44 1318.3 1256.44 1318.3C1187.49 1378.04 1115.24 1416.3 1078.82 1432.65C1019.39 1459.35 932.329 1494.28 777.134 1499.53C704.691 1502 552.396 1496.08 556.591 1439.63V1439.16V1439.2Z"
fill="url(#paint2_linear_37_27)"
/>
<path
d="M600.064 317.382C584.071 349.332 568.743 388.809 563.921 409.743C591.832 332.789 654.161 259.716 748.635 245.211C838.091 231.451 923.157 270.888 969.962 345.922C1000.77 395.317 1010.03 452.983 1082.43 460.275C1147.66 466.861 1229.59 445.535 1285.68 395.356C1326.18 359.133 1376.75 292.685 1367.18 239.213C1359.58 200.52 1300.23 161.71 1265.89 138.11C1219.59 106.278 1173.65 81.8937 1122.73 59.0388C1106.58 56.6866 1090.31 55.1969 1074.12 54.6481C1024.1 53.0408 973.843 59.1564 925.665 72.6812C837.699 97.3787 750.673 139.168 684.973 202.167C651.025 234.705 623.859 269.791 600.064 317.343V317.382Z"
fill="url(#paint3_linear_37_27)"
/>
<path
d="M710.101 1352.01C488.695 1250.28 341.928 1095.82 277.443 862.452C203.667 595.484 264.898 289.627 444.869 145.48C356.706 216.083 284.107 301.388 234.949 424.601C197.003 519.706 191.593 606.696 189.045 639.626C163.839 969.239 380.854 1271.14 660.904 1377.49C677.211 1370.24 693.754 1361.54 710.101 1352.01Z"
fill="url(#paint4_linear_37_27)"
/>
<path
d="M835.386 689.374L835.269 689.922C829.545 730.732 877.056 757.743 904.262 781.617C943.894 813.292 976.979 846.575 1007.36 886.601C1020.22 902.007 1032.06 922.667 1046.64 938.387C1053.26 936.858 1059.85 935.251 1066.4 933.408C1147.58 909.965 1211.91 854.612 1264.71 790.673C1235.08 761.78 1172.63 721.245 1131.59 702.859C1098.5 688.041 1064.87 675.026 1028.88 666.675C963.141 651.426 854.477 632.765 835.425 689.413L835.386 689.374Z"
fill="url(#paint5_linear_37_27)"
/>
<path
d="M197.473 810.744V810.626C189.045 802.551 180.891 793.456 172.738 782.322C135.105 730.614 120.052 661.814 119.425 598.15C118.993 573.491 121.11 545.775 123.541 521.352C124.168 505.475 132.479 456.668 120.405 445.77C118.327 443.888 115.191 443.614 112.604 444.712C106.959 447.103 102.764 453.846 96.9235 461.921C89.2402 473.996 81.596 487.873 77.3624 501.712C4.72345 739.513 75.0887 1045.33 310.371 1239.34C391.83 1306.5 513.196 1368.08 629.151 1389.8H629.23C639.54 1386.39 650.202 1382.24 660.943 1377.45C430.365 1289.88 242.554 1069.75 197.473 810.744Z"
fill="url(#paint6_linear_37_27)"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_37_27"
x1="567.959"
y1="401.981"
x2="565.764"
y2="401.981"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#94C83F" />
<stop offset="0.1" stopColor="#88C86A" />
<stop offset="0.19" stopColor="#7FC88C" />
<stop offset="0.28" stopColor="#78C8A4" />
<stop offset="0.36" stopColor="#74C8B2" />
<stop offset="0.42" stopColor="#73C8B8" />
<stop offset="0.99" stopColor="#146D7A" />
</linearGradient>
<linearGradient
id="paint1_linear_37_27"
x1="1449.54"
y1="712.503"
x2="188.183"
y2="712.503"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#94C83F" />
<stop offset="0.1" stopColor="#88C86A" />
<stop offset="0.19" stopColor="#7FC88C" />
<stop offset="0.28" stopColor="#78C8A4" />
<stop offset="0.36" stopColor="#74C8B2" />
<stop offset="0.42" stopColor="#73C8B8" />
<stop offset="0.99" stopColor="#146D7A" />
</linearGradient>
<linearGradient
id="paint2_linear_37_27"
x1="-18715.4"
y1="-1240.75"
x2="-18651.1"
y2="-885.117"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#73C8B8" />
<stop offset="0.2" stopColor="#73C8B4" />
<stop offset="0.36" stopColor="#76C8AB" />
<stop offset="0.49" stopColor="#7AC89B" />
<stop offset="0.62" stopColor="#81C884" />
<stop offset="0.74" stopColor="#89C866" />
<stop offset="0.86" stopColor="#93C842" />
<stop offset="0.87" stopColor="#95C83D" />
</linearGradient>
<linearGradient
id="paint3_linear_37_27"
x1="768.157"
y1="118.822"
x2="1165.47"
y2="516.161"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#306177" />
<stop offset="0.15" stopColor="#345F75" />
<stop offset="0.31" stopColor="#415A71" />
<stop offset="0.48" stopColor="#56536B" />
<stop offset="0.65" stopColor="#744862" />
<stop offset="0.83" stopColor="#9B3A57" />
<stop offset="1" stopColor="#C92A4A" />
</linearGradient>
<linearGradient
id="paint4_linear_37_27"
x1="300.375"
y1="1179.32"
x2="784.182"
y2="341.392"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.18" stopColor="#306177" />
<stop offset="0.29" stopColor="#51546D" />
<stop offset="0.45" stopColor="#7C4560" />
<stop offset="0.6" stopColor="#9D3956" />
<stop offset="0.75" stopColor="#B5304F" />
<stop offset="0.89" stopColor="#C42B4B" />
<stop offset="1" stopColor="#C92A4A" />
</linearGradient>
<linearGradient
id="paint5_linear_37_27"
x1="1049.74"
y1="651.034"
x2="1049.74"
y2="938.387"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#73C8B8" />
<stop offset="0.27" stopColor="#5BA3A0" />
<stop offset="0.58" stopColor="#437F8A" />
<stop offset="0.84" stopColor="#35697C" />
<stop offset="1" stopColor="#306177" />
</linearGradient>
<linearGradient
id="paint6_linear_37_27"
x1="355.452"
y1="444.084"
x2="355.452"
y2="1389.84"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#C92A4A" />
<stop offset="0.06" stopColor="#BA2F4E" />
<stop offset="0.29" stopColor="#89405C" />
<stop offset="0.5" stopColor="#624E68" />
<stop offset="0.7" stopColor="#465870" />
<stop offset="0.87" stopColor="#355E75" />
<stop offset="1" stopColor="#306177" />
</linearGradient>
<clipPath id="clip0_37_27">
<rect width="1400" height="1500" fill="white" transform="translate(50)" />
</clipPath>
</defs>
</svg>
)
}
121 changes: 38 additions & 83 deletions landing/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { GuppyLogo } from './_components/GuppyLogo'
import { CodeSnippet } from './code_snippet'
import { DocsFooter, DocsNavBar } from '@quantinuum/quantinuum-ui'
import { Button, Separator } from '@quantinuum/quantinuum-ui'
import { Button, DocsFooter, DocsNavBar, Separator } from '@quantinuum/quantinuum-ui'
import { ArrowRight } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
Expand Down Expand Up @@ -28,18 +28,15 @@ const featureConfig = [
},
{
title: 'Classical Compute',
description:
'Perform classical calculations and data manipulation alongside quantum operations seamlessly.',
description: 'Perform classical calculations and data manipulation alongside quantum operations seamlessly.',
},
{
title: 'Data Structures',
description:
'Work with arrays, tuples, and user-defined types in both classical and quantum contexts.',
description: 'Work with arrays, tuples, and user-defined types in both classical and quantum contexts.',
},
{
title: 'First-class Functions',
description:
'Define functions to write structured quantum software, and pass them just like any other value.',
description: 'Define functions to write structured quantum software, and pass them just like any other value.',
},
{
title: 'Legacy Support',
Expand Down Expand Up @@ -83,8 +80,7 @@ export default async function Home() {
},
{
title: 'Post-selection',
description:
'Exit a shot when an error is detected without running any more operations.',
description: 'Exit a shot when an error is detected without running any more operations.',
className: 'bg-gradient-to-b from-[#3F8D82] to-[#699B31]',
image: 'select.svg',
href: '/guppy/guppylang/examples/postselect.html',
Expand All @@ -108,31 +104,28 @@ export default async function Home() {
<div className="flex flex-col items-center md:flex-row md:gap-16 gap-8">
<div className="md:w-1/2 pt-16 md:py-24">
<h1 className="mb-6 flex flex-col items-center md:items-start">
<Image
alt="guppy logo"
src="guppy_logo_type.svg"
width={325}
height={75}
className="hidden md:block"
/>
<Image
alt="guppy logo"
src="guppy_logo_type.svg"
width={255}
height={75}
className="block md:hidden"
/>
<Image alt="guppy logo" src="guppy_logo_type.svg" width={325} height={75} className="hidden md:block" />
<Image alt="guppy logo" src="guppy_logo_type.svg" width={255} height={75} className="block md:hidden" />
</h1>
<h2 className="mb-6 text-xl text-center md:text-left md:text-2xl text-muted-foreground tracking-tight">
Quantum-first programming <br />
language, embedded in Python.
</h2>
<Button
asChild
className="hover:cursor-pointer px-20 py-6 bg-[#30A08E] text-lg tracking-tight font-semibold"
>
<Link href="/guppy/getting_started.html"> Get Started</Link>
</Button>
<div className="flex gap-3 mt-8">
<Button
asChild
variant="outline"
className="hover:cursor-pointer w-[12rem] py-6 text-lg tracking-tight"
>
<Link href="https://playpond.guppylang.org" target="_blank">
<GuppyLogo className="w-32 h-32 flex-shrink-0" style={{ width: '1.3rem', height: '1.3rem' }} />
Playpond
</Link>
</Button>
<Button asChild className="hover:cursor-pointer w-[12rem] bg-[#30A08E] py-6 text-lg tracking-tight">
<Link href="/guppy/getting_started.html">Get Started</Link>
</Button>
</div>
</div>

<Image
Expand All @@ -142,13 +135,7 @@ export default async function Home() {
height={125}
className="hidden md:block -my-24 -mr-6"
/>
<Image
alt="guppy logo"
src="guppy_ring.svg"
width={300}
height={100}
className="-mb-12 block md:hidden "
/>
<Image alt="guppy logo" src="guppy_ring.svg" width={300} height={100} className="-mb-12 block md:hidden " />
</div>
</div>
</header>
Expand All @@ -172,12 +159,8 @@ export default async function Home() {
].map(({ title, description }) => {
return (
<div>
<h3 className="tracking-tight text-3xl font-medium mb-3">
{title}
</h3>
<p className="text-muted-foreground leading-6 tracking-tight text-base">
{description}
</p>
<h3 className="tracking-tight text-3xl font-medium mb-3">{title}</h3>
<p className="text-muted-foreground leading-6 tracking-tight text-base">{description}</p>
</div>
)
})}
Expand All @@ -202,9 +185,7 @@ export default async function Home() {
key={feature.title}
className="bg-background self-stretch lg:w-[calc(33.333%-1.75rem)] shadow-md rounded-2xl border border-border/60 p-6 py-5 pb-6 text-xl"
>
<p className="tracking-tighter font-medium mb-1">
{feature.title}
</p>
<p className="tracking-tighter font-medium mb-1">{feature.title}</p>
<p className="tracking-tight text-muted-foreground font-medium text-sm leading-5">
{feature.description}
</p>
Expand All @@ -225,41 +206,24 @@ export default async function Home() {
<section className="bg-muted/30">
<div className="container flex flex-col items-center py-16 lg:py-24">
<h2 className="text-5xl tracking-tight mb-3 font-medium">Examples</h2>
<p className="tracking-tight font-medium text-muted-foreground">
Some novel use cases with guppy.
</p>
<p className="tracking-tight font-medium text-muted-foreground">Some novel use cases with guppy.</p>
<div className="grid gap-6 lg:gap-8 grid-cols-1 lg:grid-cols-3 my-12">
{examples.map((feature) => {
return (
<div
key={feature.title}
className="border border-border/60 shadow-md flex flex-col rounded-xl bg-background p-5"
>
<div
className={
'flex items-end p-4 rounded-lg h-[8rem] mb-4 ' +
feature.className
}
>
<Image
alt={`${feature.title} icon`}
src={feature.image}
width={50}
height={50}
/>
<div className={'flex items-end p-4 rounded-lg h-[8rem] mb-4 ' + feature.className}>
<Image alt={`${feature.title} icon`} src={feature.image} width={50} height={50} />
</div>
<p className="text-2xl font-medium tracking-tight mb-3">
{feature.title}
</p>
<p className="text-sm text-muted-foreground tracking-tight font-medium mb-6">
{feature.description}
</p>
<p className="text-2xl font-medium tracking-tight mb-3">{feature.title}</p>
<p className="text-sm text-muted-foreground tracking-tight font-medium mb-6">{feature.description}</p>
<Link
className="hover:bg-foreground hover:cursor-pointer transition hover:text-background bg-muted rounded-lg p-3 text-center tracking-tight font-medium mt-auto flex justify-center gap-2 items-center"
href={feature.href}
>
<span className="block"> Open Notebook</span>{' '}
<ArrowRight className="w-4 h-4" />
<span className="block"> Open Notebook</span> <ArrowRight className="w-4 h-4" />
</Link>
</div>
)
Expand All @@ -277,12 +241,10 @@ export default async function Home() {
<section className="">
<div className="container pt-16 lg:pt-24 grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
<div>
<h2 className="text-5xl tracking-tight mb-5 font-medium">
Open Source
</h2>
<h2 className="text-5xl tracking-tight mb-5 font-medium">Open Source</h2>
<p className="tracking-tight text-xl text-muted-foreground leading-7">
The guppylang compiler and the target HUGR intermediate
representation are open source, and welcome contributions!
The guppylang compiler and the target HUGR intermediate representation are open source, and welcome
contributions!
</p>
</div>
<div className="flex flex-col gap-4">
Expand All @@ -297,15 +259,8 @@ export default async function Home() {
target="_blank"
rel="noreferer"
>
<Image
alt={`github icon`}
src="github.svg"
width={35}
height={35}
className="group-hover:invert"
/>
<span className="block text-lg"> {item.title}</span>{' '}
<ArrowRight className="w-6 h-6 ml-auto" />
<Image alt={`github icon`} src="github.svg" width={35} height={35} className="group-hover:invert" />
<span className="block text-lg"> {item.title}</span> <ArrowRight className="w-6 h-6 ml-auto" />
</Link>
)
})}
Expand Down
Loading