+ Embed generator +
+ ++ Paste a Shopify product URL — we return a 3D embed snippet. Trilingual output. +
+diff --git a/apps/shoploop-studio-site/.gitignore b/apps/shoploop-studio-site/.gitignore new file mode 100644 index 0000000..1c4d467 --- /dev/null +++ b/apps/shoploop-studio-site/.gitignore @@ -0,0 +1,3 @@ +node_modules +.next +qa*.png diff --git a/apps/shoploop-studio-site/README.md b/apps/shoploop-studio-site/README.md new file mode 100644 index 0000000..40577fa --- /dev/null +++ b/apps/shoploop-studio-site/README.md @@ -0,0 +1,59 @@ +# shoploop.studio (v0 landing) + +The OSS marketing site — first of three reference sites (see `POSITIONING.md` at repo root). + +## Positioning + +**Full-funnel positionless AI marketing for tabletop pharma products — Ayurveda-first.** + +The moat (verbatim, matches POSITIONING.md): + +> Vagon.io + grip.tools + Postiz + PostHog + Google Ads feedback + NVIDIA Omniverse + Blender with materials — Hindi/Marathi/English support — targeting Ayurvedic tabletop category. + +## Stack + +- Next.js 15 (static export) · TypeScript · Tailwind CSS +- React Three Fiber + drei for the 9-component moat orbit + molecular atlas +- Framer Motion for scroll reveals +- Google Fonts `` (Noto Serif Devanagari + IBM Plex Serif + IBM Plex Sans). `next/font/google` was intentionally not used — it breaks under the relative `assetPrefix` we need for nested-path hosting. +- Trilingual hi/en/mr toggle on the H1 + primary CTA only; other sections default English for v0. + +## Local dev + +```bash +pnpm install +pnpm dev +``` + +## Build (static export) + +```bash +pnpm build +# Output in ./out +``` + +## A2UI ships + +- `public/llms.txt` +- `public/sitemap.xml` +- `public/robots.txt` +- `public/.well-known/a2ui.json` +- JSON-LD WebPage + Product + 3 Offer schema in `
` +- `data-a2ui-action` on every interactive element + +## Known deviations (documented for the record) + +1. **Wishlist is in-memory only.** Preview iframes block `localStorage`; a marked swap point exists to switch back once we're on a proper domain. +2. **Fonts via `` not `next/font/google`.** Reason above; same three families load. +3. **No real Nango / Postiz / PostHog wiring.** Mocks only; buttons show toasts. Real integration lands with `apps/studio` and `apps/ashwagandha` (separate PRs). + +## Deploy target + +Static export lives at `./out`. Deployable to: +- Vercel (primary; requires domain configured separately) +- Cloudflare Pages +- Any static host + +## Design-partner boundary + +No references to Sandu Pharmaceuticals anywhere. This is Shoploop's own reference implementation, not any partner's site. diff --git a/apps/shoploop-studio-site/app/globals.css b/apps/shoploop-studio-site/app/globals.css new file mode 100644 index 0000000..f7004e8 --- /dev/null +++ b/apps/shoploop-studio-site/app/globals.css @@ -0,0 +1,78 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --font-deva: 'Noto Serif Devanagari', serif; + --font-display: 'IBM Plex Serif', Georgia, serif; + --font-body: 'IBM Plex Sans', system-ui, sans-serif; + --ease: cubic-bezier(0.22, 1, 0.36, 1); +} + +html { + scroll-behavior: smooth; + background: #0b2523; +} + +body { + background: #0b2523; + color: #f7f2e7; + font-family: var(--font-body); + -webkit-font-smoothing: antialiased; + overflow-x: hidden; +} + +::selection { + background: #e8a33d; + color: #0b2523; +} + +*:focus-visible { + outline: 2px solid #e8a33d; + outline-offset: 3px; + border-radius: 2px; +} + +.sec-label { + font-family: ui-monospace, SFMono-Regular, monospace; + font-size: 0.7rem; + letter-spacing: 0.22em; + text-transform: uppercase; + color: #e8a33d; +} + +.grain::before { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + opacity: 0.05; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); +} + +.hairline { + border-color: rgba(247, 242, 231, 0.12); +} + +@keyframes marquee { + from { transform: translateX(0); } + to { transform: translateX(-50%); } +} +.marquee-track { + animation: marquee 38s linear infinite; +} +.marquee-track:hover { animation-play-state: paused; } + +@keyframes dashflow { + to { stroke-dashoffset: -1000; } +} + +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + .marquee-track { animation: none; } + *, *::before, *::after { + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + } +} diff --git a/apps/shoploop-studio-site/app/layout.tsx b/apps/shoploop-studio-site/app/layout.tsx new file mode 100644 index 0000000..43c2c45 --- /dev/null +++ b/apps/shoploop-studio-site/app/layout.tsx @@ -0,0 +1,111 @@ +import type { Metadata } from 'next'; +import './globals.css'; + + +export const metadata: Metadata = { + title: 'Shoploop — Full-funnel positionless AI marketing for tabletop pharma', + description: + 'Full-funnel positionless AI marketing for tabletop pharma products — Ayurveda-first. $0 OSS forever, $0 trial 30 days, $299/mo managed. AGPL-3.0.', + metadataBase: new URL('https://shoploop.studio'), + openGraph: { + title: 'Shoploop', + description: + 'Full-funnel positionless AI marketing for tabletop pharma products — Ayurveda-first.', + type: 'website', + }, +}; + +const jsonLd = { + '@context': 'https://schema.org', + '@graph': [ + { + '@type': 'WebPage', + '@id': 'https://shoploop.studio/#webpage', + name: 'Shoploop — Full-funnel positionless AI marketing for tabletop pharma', + description: + 'Full-funnel positionless AI marketing for tabletop pharma products — Ayurveda-first.', + inLanguage: ['en', 'hi', 'mr'], + mainEntity: { '@id': 'https://shoploop.studio/#product' }, + potentialAction: [ + { + '@type': 'Action', + name: 'preview-embed', + target: 'https://shoploop.studio/#hero', + }, + { + '@type': 'Action', + name: 'join-wishlist', + target: 'https://shoploop.studio/#wishlist', + }, + ], + }, + { + '@type': 'Product', + '@id': 'https://shoploop.studio/#product', + name: 'Shoploop', + description: + 'Positionless AI marketing loop for tabletop pharma: connect, read, mutate, render, publish, update, measure, compound.', + brand: { '@type': 'Brand', name: 'Shoploop' }, + license: 'https://www.gnu.org/licenses/agpl-3.0.html', + offers: [ + { + '@type': 'Offer', + '@id': 'https://shoploop.studio/#offer-oss', + name: 'OSS', + price: '0', + priceCurrency: 'USD', + description: 'Self-host AGPL-3.0. Everything above, in your infra.', + availability: 'https://schema.org/InStock', + url: 'https://github.com/ninan-versioning/shoploop', + }, + { + '@type': 'Offer', + '@id': 'https://shoploop.studio/#offer-trial', + name: 'Trial', + price: '0', + priceCurrency: 'USD', + description: 'Managed hosting for 30 days. No card required. Full features.', + availability: 'https://schema.org/PreOrder', + }, + { + '@type': 'Offer', + '@id': 'https://shoploop.studio/#offer-managed', + name: 'Managed', + price: '299', + priceCurrency: 'USD', + description: + 'Hosted embed CDN + Nango + Studio + Postiz + 10 loops on your data.', + availability: 'https://schema.org/InStock', + priceSpecification: { + '@type': 'UnitPriceSpecification', + price: '299', + priceCurrency: 'USD', + billingDuration: 1, + billingIncrement: 1, + unitCode: 'MON', + }, + }, + ], + }, + ], +}; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + + + + + + + {children} + + ); +} diff --git a/apps/shoploop-studio-site/app/page.tsx b/apps/shoploop-studio-site/app/page.tsx new file mode 100644 index 0000000..6787a3a --- /dev/null +++ b/apps/shoploop-studio-site/app/page.tsx @@ -0,0 +1,680 @@ +'use client'; + +import dynamic from 'next/dynamic'; +import { useState } from 'react'; +import { COPY, LangProvider, LangToggle, useLang } from '@/components/lang'; +import { ToastProvider, useToast } from '@/components/toast'; +import { useDeviceTier } from '@/components/useDevice'; +import { JarPoster, Logo, Reveal, SectionLabel } from '@/components/bits'; +import LoopDiagram from '@/components/LoopDiagram'; +import StackStrip from '@/components/StackStrip'; + +const JarScene = dynamic(() => import('@/components/three/JarScene'), { ssr: false }); +const MoatOrbit = dynamic(() => import('@/components/three/MoatOrbit'), { ssr: false }); +const MoleculeAtlas = dynamic(() => import('@/components/three/MoleculeAtlas'), { ssr: false }); +const ParticleField = dynamic(() => import('@/components/three/ParticleField'), { ssr: false }); + +const GH = 'https://github.com/ninan-versioning/shoploop'; +/** In-memory wishlist store for v0. */ +const WISHLIST: { email: string; at: string }[] = []; + +const MOAT_SENTENCE = + 'Vagon.io + grip.tools + Postiz + PostHog + Google Ads feedback + NVIDIA Omniverse + Blender with materials — Hindi/Marathi/English support — targeting Ayurvedic tabletop category.'; + +function GitHubIcon({ className = 'h-5 w-5' }: { className?: string }) { + return ( + + ); +} + +function Header() { + return ( +Ayurveda-first · AGPL-3.0 · Seattle
++ grip.tools serves LVMH. We serve every Ayurvedic, nutraceutical, and OTC wellness + brand who cannot afford $500k/yr. +
+ ++ Paste a Shopify product URL — we return a 3D embed snippet. Trilingual output. +
++ Curcumin · rendered, not stock +
++ {MOAT_SENTENCE} +
++ No single piece is defensible. The assembly is. +
+ + See how it compounds → + ++ From ad impression to reorder — nightly compounding. +
++ Curcumin, withaferin A, piperine, bacoside A, ashwagandha, brahmi, tulsi, and more. +
++ {m} +
++ Drag to reorient · sphere-and-stick v0 · PDB via MolecularNodes next +
++ Checkout via Web Payments + AP2 mandate · BYOK Stripe adapter, open code +
++ + {t.price} + + {t.unit} +
+{t.body}
+ {t.href ? ( + + {t.cta} + + ) : ( + + )} ++ If you're a founder or CMO at one — reach out. If you want the OSS, everything is + on GitHub. +
+{s.n}
+{s.d}
+
+
+ {NODES[hover].name}
+
+
+ {NODES[hover].what}
+