Feature Manyangles in the product showcase
This commit is contained in:
+105
-2
@@ -361,14 +361,33 @@ const hristudioFeatures = [
|
||||
},
|
||||
];
|
||||
|
||||
const manyanglesFeatures = [
|
||||
{
|
||||
title: "One link for everyone",
|
||||
body: "Guests upload from any phone, without an account or app to install.",
|
||||
},
|
||||
{
|
||||
title: "Review before sharing",
|
||||
body: "Hosts approve photos before they appear in the shared gallery.",
|
||||
},
|
||||
{
|
||||
title: "Full-quality originals",
|
||||
body: "Keep the original files while optimized previews make browsing fast.",
|
||||
},
|
||||
{
|
||||
title: "Albums for any gathering",
|
||||
body: "Bring everyone's photos together for weddings, parties, and events.",
|
||||
},
|
||||
];
|
||||
|
||||
function Projects() {
|
||||
return (
|
||||
<section id="projects" className="scroll-mt-20">
|
||||
<div className="mx-auto max-w-6xl px-6 py-24">
|
||||
<SectionHeading
|
||||
eyebrow="Projects"
|
||||
title="Four products, built end to end."
|
||||
description="Racetix sells tickets for short tracks. beenvoice invoices for freelancers and small businesses. RaceHub runs the official Riverhead Raceway site. HRIStudio makes human-robot interaction research reproducible. All four run in production, operated end to end."
|
||||
title="Five products, built end to end."
|
||||
description="Racetix sells tickets for short tracks. beenvoice invoices for freelancers and small businesses. RaceHub runs the official Riverhead Raceway site. HRIStudio makes human-robot interaction research reproducible. Manyangles brings event photos together in shared albums."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -516,6 +535,90 @@ function Projects() {
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
id="manyangles"
|
||||
href="https://ma.hadlock.tech"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="manyangles-showcase group border-border relative isolate block scroll-mt-20 overflow-hidden border-y"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="manyangles-backdrop absolute inset-0 -z-10"
|
||||
/>
|
||||
<div className="relative mx-auto grid max-w-6xl gap-10 px-6 py-16 md:grid-cols-[1.1fr_0.9fr] md:py-24">
|
||||
<div>
|
||||
<div
|
||||
className="text-text flex items-center gap-2.5 text-2xl font-bold tracking-tight"
|
||||
translate="no"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
className="text-manyangles-blue h-8 w-8 shrink-0"
|
||||
>
|
||||
<path
|
||||
d="M14 4H8a4 4 0 0 0-4 4v6M18 4h6a4 4 0 0 1 4 4v6M28 18v6a4 4 0 0 1-4 4h-6M14 28H8a4 4 0 0 1-4-4v-6"
|
||||
stroke="currentColor"
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<circle cx="21" cy="11" r="2.25" fill="currentColor" />
|
||||
<path
|
||||
d="m8.5 22 5-6.2a1.7 1.7 0 0 1 2.6-.1l2.6 2.9 1.7-1.8a1.7 1.7 0 0 1 2.5 0l1.6 1.8"
|
||||
stroke="currentColor"
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Manyangles
|
||||
</div>
|
||||
<h3 className="text-text mt-6 max-w-xl text-3xl font-semibold tracking-tight sm:text-4xl">
|
||||
Every angle.
|
||||
<br />
|
||||
<span className="text-manyangles-blue">One shared album.</span>
|
||||
</h3>
|
||||
<p className="text-text-secondary mt-4 max-w-xl text-base leading-relaxed">
|
||||
Manyangles collects the moments guests capture at weddings,
|
||||
parties, and gatherings. Share one upload link, review what comes
|
||||
in, and bring everyone's photos together in a shared gallery.
|
||||
</p>
|
||||
<span className="text-manyangles-blue mt-8 inline-flex items-center gap-2 text-sm font-bold tracking-widest uppercase transition group-hover:opacity-70">
|
||||
Explore Manyangles
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4 transition-transform group-hover:translate-x-1"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid content-center gap-4 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2">
|
||||
{manyanglesFeatures.map((f) => (
|
||||
<div key={f.title} className="flex items-start gap-3">
|
||||
<span className="text-manyangles-blue mt-0.5 shrink-0">
|
||||
<CheckIcon className="h-4 w-4" />
|
||||
</span>
|
||||
<div>
|
||||
<h4 className="text-text text-sm font-semibold">{f.title}</h4>
|
||||
<p className="text-text-secondary/80 mt-1 text-xs leading-relaxed">
|
||||
{f.body}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://riverheadraceway.com"
|
||||
target="_blank"
|
||||
|
||||
@@ -53,6 +53,7 @@
|
||||
--color-racetix-overlay-mid: var(--racetix-overlay-mid);
|
||||
--color-racetix-overlay-end: var(--racetix-overlay-end);
|
||||
--color-racehub-red: var(--racehub-red);
|
||||
--color-manyangles-blue: light-dark(#3156c8, #7f9cff);
|
||||
--color-hristudio-teal: var(--hristudio-teal);
|
||||
}
|
||||
|
||||
@@ -289,3 +290,22 @@ body {
|
||||
:root.light .theme-logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Manyangles: album-paper tones and a soft blue wash in both themes. */
|
||||
.manyangles-showcase {
|
||||
background-color: light-dark(#f4f1ea, #0d1018);
|
||||
}
|
||||
|
||||
.manyangles-backdrop {
|
||||
background-image:
|
||||
radial-gradient(
|
||||
ellipse at 85% 25%,
|
||||
light-dark(#3156c81a, #7f9cff1a),
|
||||
transparent 65%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
-12deg,
|
||||
transparent 0 80px,
|
||||
light-dark(#3156c808, #7f9cff08) 80px 81px
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user