Skip to content

Instantly share code, notes, and snippets.

@gluck

gluck/Index.tsx

Created July 15, 2025 10:25
Show Gist options
  • Save gluck/c1410b873f7d0e26c4b85d805f85d21b to your computer and use it in GitHub Desktop.
Save gluck/c1410b873f7d0e26c4b85d805f85d21b to your computer and use it in GitHub Desktop.
Download ZIP
test
Raw
Index.tsx
const Index = () => {
return (
<div className="text-black text-[16px] leading-[normal]">
<div className="overflow-auto bg-[rgb(13,_18,_19)] text-[rgb(215,_215,_219)] leading-[24px]">
<div className="flex relative bg-[rgb(13,_18,_19)]">
<div className="grow w-full basis-[0%] min-h-[877px]">
<a
href="https://shopify.dev/docs#Main"
className="block size-px overflow-hidden absolute left-1 top-0 bg-[rgb(13,_18,_19)] text-[rgb(181,_201,_250)] leading-[48px] z-[999]"
style={{ clip: "rect(1px, 1px, 1px, 1px)" }}
></a>{" "}
<header className="sticky h-12 top-0 bg-[rgb(13,_18,_19)] z-[998]">
<nav className="flex justify-between relative h-12 bg-[rgb(13,_18,_19)]">
<div className="items-center flex h-6 mt-[12px] ml-[16px] mb-[12px]">
<a
href="https://shopify.dev/docs"
className="block text-[rgb(181,_201,_250)]"
>
<img
alt="shopify.dev"
src="https://cdn.shopify.com/shopifycloud/shopify_dev/bundles/efa618d59374a42f55bd44afeb2179a73637242a37a5be94c3b03733daa15386.svg"
className="max-w-full overflow-clip align-middle"
></img>
</a>
</div>{" "}
<div className="items-center justify-between max-w-[1268px]">
<ul className="flex leading-[48px]">
<li className="list-none text-left">
<a
href="https://shopify.dev/docs/apps/build"
className="items-center flex relative text-left whitespace-nowrap h-12 ml-[8px] mr-[8px] text-[14px] leading-[20px] z-[1]"
>
Apps
</a>
</li>{" "}
<li className="list-none text-left">
<a
href="https://shopify.dev/docs/storefronts"
className="items-center flex relative text-left whitespace-nowrap h-12 ml-[8px] mr-[8px] text-[14px] leading-[20px] z-[1]"
>
Storefronts
</a>
</li>{" "}
<li className="list-none text-left">
<button
aria-haspopup="dialog"
className="items-center flex relative text-center whitespace-nowrap h-12 ml-[8px] mr-[8px] bg-black/0 text-[14px] leading-[20px] z-[1]"
>
APIs and references{" "}
<span className="block text-center mr-[-5px] pt-[2px] pr-0 pb-0 pl-0">
<div className="inline fill-none overflow-hidden text-center w-4 h-4">
<img src="http://127.0.0.1:4443/dev-storytodesign.appspot.com/h2d-ext-asset%2F17525672940960.svg"></img>
</div>
</span>
</button>
</li>
</ul>
</div>{" "}
<ul className="items-center flex justify-center mr-[16px]">
<li className="items-center flex h-full text-left whitespace-nowrap ml-[8px] mr-[8px] text-[rgb(181,_201,_250)] text-[14px] leading-[20px]">
<button
aria-haspopup="dialog"
className="items-center flex text-center h-7 bg-black/0 text-black/0 pt-1 pr-[5px] pb-1 pl-1 rounded-sm"
>
<span className="block relative text-center text-[rgb(215,_215,_219)]">
<div
role="img"
className="fill-none overflow-hidden relative text-center w-5 h-5"
>
<img src="http://127.0.0.1:4443/dev-storytodesign.appspot.com/h2d-ext-asset%2F17525672940961.svg"></img>
</div>
</span>
</button>
</li>{" "}
<li className="items-center flex h-full text-left whitespace-nowrap text-[rgb(181,_201,_250)] text-[14px] leading-[20px]">
<button
aria-label="View light mode"
className="items-center flex h-full justify-center relative text-center w-9 bg-black/0"
>
<span className="block overflow-hidden relative text-center w-5 h-5">
<div
className="overflow-hidden absolute text-center w-5 h-5 left-0 top-0"
style={{ transform: "matrix(1, 0, 0, 1, 0, 20)" }}
>
<img src="http://127.0.0.1:4443/dev-storytodesign.appspot.com/h2d-ext-asset%2F17525672940962.svg"></img>
</div>{" "}
<div className="overflow-hidden absolute text-center w-5 h-5 left-0 top-0">
<img src="http://127.0.0.1:4443/dev-storytodesign.appspot.com/h2d-ext-asset%2F17525672940963.svg"></img>
</div>
</span>
</button>
</li>{" "}
<li className="items-center flex h-full text-left whitespace-nowrap ml-[8px] mr-[8px] text-[rgb(181,_201,_250)] text-[14px] leading-[20px]">
<a
href="https://partners.shopify.com/organizations"
className="block h-full text-left text-[rgb(215,_215,_219)] leading-[48px]"
>
Log in
</a>
</li>{" "}
<li className="items-center flex h-full text-left whitespace-nowrap ml-[8px] mr-[8px] text-[rgb(181,_201,_250)] text-[14px] leading-[20px]">
<a
href="https://partners.shopify.com/signup/developer"
className="block h-full text-left text-[rgb(215,_215,_219)] leading-[48px]"
>
Sign up
</a>
</li>
</ul>
</nav>
</header>{" "}
<div className=""></div>{" "}
<div className="items-stretch flex w-full min-h-[877px]">
<aside className="sticky top-12 ml-[8px] mb-[8px] bg-[rgb(21,_29,_30)] max-h-[869px] z-[4] rounded-lg"></aside>{" "}
<div className="items-center flex flex-col grow w-full basis-[0%]">
<main
role="main"
className="items-center flex flex-col relative w-full bg-[rgb(13,_18,_19)] pt-0 pr-2 pb-0 pl-2"
>
<div className="w-full">
<main className="flow-root relative bg-[rgb(13,_18,_19)]">
<div className="ml-[16px] mr-[16px]">
<section className="ml-auto mr-auto max-w-[640px] pt-14 pr-0 pb-7 pl-0">
<div className="flow-root">
<div className="relative w-full">
<div className="text-left mb-[36px]">
<h1 className="font-extrabold text-left mb-[16px] text-[rgb(238,_241,_241)] text-[48px] tracking-[-1.35px] leading-[60px]">
Shopify developer documentation
</h1>{" "}
<p className="text-left mb-[10.8px] text-[rgb(238,_241,_241)] text-[18px] leading-[28px]">
Learn how to build an app, theme, custom
storefront, or marketplace. Whether you’re
just getting started, deep in the development
process, or ready to distribute and monetize
your work, Shopify’s docs, dev tools and
frameworks make building easy and efficient.
</p>
</div>
</div>
</div>{" "}
<div className="grid-cols-1 grid gap-[20px]">
<div className="grid-cols-2 grid bg-[rgb(26,_39,_63)] gap-[16px] rounded-lg">
<div className="pt-[22px] pr-0 pb-[30px] pl-[30px]">
<h2 className="font-extrabold mb-[12px] text-[rgb(181,_201,_250)] text-[24px] leading-[28px]">
Apps
</h2>{" "}
<p className="mb-[16px]">
Extend Shopify’s core functionality with apps
that integrate into Shopify’s admin, online
store, checkout and more.
</p>{" "}
<a
href="https://shopify.dev/docs/apps/build"
className='border-solid border inline-block relative text-left bg-[rgb(21,_29,_30)] border-[rgb(89,_118,_122)] shadow-[rgb(0,0,0)_0px_-3px_0px_0px_inset,_rgba(255,255,255,0.2)_0px_2px_0px_0px_inset] pt-[3px] pr-3 pb-[5px] pl-3 rounded-sm after:inline after:relative after:text-left after:whitespace-nowrap after:ml-[5px] after:content-["->"]'
>
Build your first app
</a>
</div>{" "}
<div className="self-end pt-[30px] pr-[30px] pb-0 pl-0">
<div
className="bg-bottom bg-no-repeat bg-contain ml-auto mr-auto aspect-[280_/_182] max-h-[182px] max-w-[280px]"
style={{
backgroundImage:
'url("https://cdn.shopify.com/shopifycloud/shopify_dev/assets/marketing/docs/hero/apps/apps-mobile-dark-2x-4c6c25213d2cfdeea0874e9edd1712c6486147048d8d6ac1066dd0a7bf698243.png")',
}}
></div>
</div>
</div>{" "}
<div className="grid-cols-2 grid bg-[rgb(52,_31,_62)] gap-[16px] rounded-lg">
<div className="pt-[22px] pr-0 pb-[30px] pl-[30px]">
<h2 className="font-extrabold mb-[12px] text-[rgb(226,_187,_246)] text-[24px] leading-[28px]">
Themes
</h2>{" "}
<p className="mb-[16px]">
Help merchants express their unique brand in
their storefront by building a custom theme.
</p>{" "}
<a
href="https://shopify.dev/docs/storefronts/themes"
className='border-solid border inline-block relative text-left bg-[rgb(21,_29,_30)] border-[rgb(89,_118,_122)] shadow-[rgb(0,0,0)_0px_-3px_0px_0px_inset,_rgba(255,255,255,0.2)_0px_2px_0px_0px_inset] pt-[3px] pr-3 pb-[5px] pl-3 rounded-sm after:inline after:relative after:text-left after:whitespace-nowrap after:ml-[5px] after:content-["->"]'
>
Create a theme using Liquid
</a>
</div>{" "}
<div className="self-end pt-[30px] pr-[30px] pb-0 pl-0">
<div
className="bg-bottom bg-no-repeat bg-contain ml-auto mr-auto aspect-[280_/_182] max-h-[182px] max-w-[280px]"
style={{
backgroundImage:
'url("https://cdn.shopify.com/shopifycloud/shopify_dev/assets/marketing/docs/hero/themes/themes-mobile-dark-2x-abe599fb5b213297906fa02ecb1d6b531ad29a3ee6352443b43a50e685643335.png")',
}}
></div>
</div>
</div>{" "}
<div className="grid-cols-2 grid bg-[rgb(37,_34,_79)] gap-[16px] rounded-lg">
<div className="pt-[22px] pr-0 pb-[30px] pl-[30px]">
<h2 className="font-extrabold mb-[12px] text-[rgb(198,_196,_255)] text-[24px] leading-[28px]">
Headless
</h2>{" "}
<p className="mb-[16px]">
Take store customization further with{" "}
<a
href="https://shopify.dev/custom-storefronts/hydrogen"
className="underline text-[rgb(181,_201,_250)]"
>
Hydrogen
</a>{" "}
, a React-based framework for headless
commerce.
</p>{" "}
<a
href="https://shopify.dev/docs/storefronts/headless"
className='border-solid border inline-block relative text-left bg-[rgb(21,_29,_30)] border-[rgb(89,_118,_122)] shadow-[rgb(0,0,0)_0px_-3px_0px_0px_inset,_rgba(255,255,255,0.2)_0px_2px_0px_0px_inset] pt-[3px] pr-3 pb-[5px] pl-3 rounded-sm after:inline after:relative after:text-left after:whitespace-nowrap after:ml-[5px] after:content-["->"]'
>
Build a Hydrogen storefront
</a>
</div>{" "}
<div className="self-end pt-[30px] pr-[30px] pb-0 pl-0">
<div
className="bg-bottom bg-no-repeat bg-contain ml-auto mr-auto aspect-[280_/_182] max-h-[182px] max-w-[280px]"
style={{
backgroundImage:
'url("https://cdn.shopify.com/shopifycloud/shopify_dev/assets/marketing/docs/hero/custom-storefronts/custom-storefronts-mobile-dark-2x-49f217a5fd44007608ae500a778105366e061a8124876d317ac4c289b5de75c5.png")',
}}
></div>
</div>
</div>
</div>
</section>{" "}
<section className="ml-auto mr-auto max-w-[640px] pt-7 pr-0 pb-[60px] pl-0">
<div className="text-left mb-[36px]">
<h2 className="font-extrabold text-left mb-[12px] text-[rgb(238,_241,_241)] text-[24px] tracking-[-0.497143px] leading-[28px]">
Accelerate development with Shopify CLI 3.0
</h2>{" "}
<p className="text-left mb-[9.6px] text-[rgb(238,_241,_241)]">
Initialize new{" "}
<a
href="https://shopify.dev/apps/tools/cli"
className="text-left underline text-[rgb(181,_201,_250)]"
>
apps
</a>{" "}
,{" "}
<a
href="https://shopify.dev/docs/storefronts/themes/tools/cli"
className="text-left underline text-[rgb(181,_201,_250)]"
>
themes
</a>{" "}
, and{" "}
<a
href="https://shopify.dev/custom-storefronts/tools/cli"
className="text-left underline text-[rgb(181,_201,_250)]"
>
headless storefronts
</a>{" "}
in an instant with the latest Shopify CLI. A
single command installs all the dependencies you
need, including the CLI itself, so you can dive
straight into development.
</p>
</div>{" "}
<div className="">
<div className="grid-cols-1 grid gap-[32px]">
<div className="">
<div
className="border-t border-[rgb(36,_57,_61)]"
style={{ borderTopStyle: "solid" }}
>
<div
className="border-b border-[rgb(36,_57,_61)]"
style={{ borderBottomStyle: "solid" }}
>
<div className="relative">
<button className="flex justify-between text-left w-full bg-black/0 pt-3 pr-0 pb-3 pl-0">
<div className="grow text-left mr-[12px] text-[rgb(238,_241,_241)] basis-[0%] text-[14px] leading-[20px]">
Apps
</div>{" "}
<div className="items-center flex text-left text-[rgb(109,_113,_117)]"></div>
</button>
</div>{" "}
<div role="region" className="">
<ol className="ml-[16px] mb-[14px] text-[14px] leading-[20px]">
<li className="text-left mb-[12px] list-[auto] pt-0 pr-0 pb-0 pl-2">
• Install Shopify CLI globally.
</li>{" "}
<li className="text-left mb-[12px] list-[auto] pt-0 pr-0 pb-0 pl-2">
• Navigate to the directory where you
want to create your app.
</li>{" "}
<li className="text-left mb-[12px] list-[auto] pt-0 pr-0 pb-0 pl-2">
• Run the second command to create a
new app. Your app will be added as a
new subdirectory.
</li>
</ol>
</div>
</div>{" "}
<div
className="border-b border-[rgb(36,_57,_61)]"
style={{ borderBottomStyle: "solid" }}
>
<div className="relative">
<button className="flex justify-between text-left w-full bg-black/0 pt-3 pr-0 pb-3 pl-0">
<div className="grow text-left mr-[12px] text-[rgb(238,_241,_241)] basis-[0%] text-[14px] leading-[20px]">
Themes
</div>{" "}
<div className="items-center flex text-left text-[rgb(109,_113,_117)]">
<span className="block mb-auto ml-auto mr-auto mt-auto text-left w-2 h-2">
<div className="fill-none size-full overflow-hidden relative text-left">
<img src="http://127.0.0.1:4443/dev-storytodesign.appspot.com/h2d-ext-asset%2F17525672940964.svg"></img>
</div>
</span>
</div>
</button>
</div>
</div>{" "}
<div
className="border-b border-[rgb(36,_57,_61)]"
style={{ borderBottomStyle: "solid" }}
>
<div className="relative">
<button className="flex justify-between text-left w-full bg-black/0 pt-3 pr-0 pb-3 pl-0">
<div className="grow text-left mr-[12px] text-[rgb(238,_241,_241)] basis-[0%] text-[14px] leading-[20px]">
Headless storefronts
</div>{" "}
<div className="items-center flex text-left text-[rgb(109,_113,_117)]">
<span className="block mb-auto ml-auto mr-auto mt-auto text-left w-2 h-2">
<div className="fill-none size-full overflow-hidden relative text-left">
<img src="http://127.0.0.1:4443/dev-storytodesign.appspot.com/h2d-ext-asset%2F17525672940965.svg"></img>
</div>
</span>
</div>
</button>
</div>
</div>
</div>
</div>{" "}
<div className="">
<div className="border-solid border flex flex-col relative bg-[rgb(48,_75,_79)] border-[rgb(53,_99,_105)] shadow-[rgb(0,0,0)_0px_2px_0px_0px] gap-[4px] min-h-10 p-[3px] rounded-lg">
<pre className="overflow-auto text-left whitespace-pre-wrap">
FOO
</pre>{" "}
<code className="block overflow-auto text-left whitespace-pre-wrap">
BAR
</code>{" "}
<div className="items-stretch flex gap-[4px]">
<div className="items-center flex grow max-w-full overflow-hidden bg-[rgb(36,_57,_61)] text-[rgb(168,_225,_234)] basis-[0%] text-[14px] gap-[8px] leading-[20px] min-h-8 pt-0 pr-2 pb-0 pl-2 rounded-sm">
<span className="items-center flex grow truncate basis-[0%] gap-[4px]">
<span className="block">
<span className="">
<div
role="img"
className="fill-none overflow-hidden relative w-5 h-5"
>
<img src="http://127.0.0.1:4443/dev-storytodesign.appspot.com/h2d-ext-asset%2F17525672940966.svg"></img>
</div>
</span>
</span>{" "}
Install Shopify CLI
</span>
</div>{" "}
<div className="items-center flex gap-[4px] shrink-[0]">
<span className="block relative">
<span className="">
<button className="items-center flex justify-center text-center h-8 bg-[rgb(36,_57,_61)] text-[rgb(142,_193,_201)] text-[14px] leading-[20px] min-w-8 rounded-sm">
<span className="block text-center w-5 h-5 m-[6px]">
<div className="size-full overflow-hidden relative text-center fill-[rgb(142,_193,_201)]">
<img src="http://127.0.0.1:4443/dev-storytodesign.appspot.com/h2d-ext-asset%2F17525672940967.svg"></img>
</div>
</span>
</button>
</span>
</span>
</div>
</div>{" "}
<div className="flex flex-col grow overflow-hidden basis-[0%]">
<div className="flex flex-col grow overflow-hidden basis-[0%] gap-[4px]">
<div className="items-stretch flex gap-[4px]">
<div className="grow overflow-hidden basis-[0%]">
<div className="overflow-hidden relative">
<div className="flex overflow-x-auto overflow-y-hidden relative">
<div
role="tablist"
className="flex grow bg-[rgb(36,_57,_61)] basis-[0%] gap-[16px] pt-0 pr-2 pb-0 pl-2 rounded-sm"
>
<button
role="tab"
className="text-center whitespace-nowrap h-8 bg-black/0 text-[rgb(239,_248,_250)] text-[14px] leading-[32px] border-t-[2px] border-b-[2px]"
style={{
borderBottomStyle: "solid",
borderTopStyle: "solid",
borderTopColor:
"rgba(0, 0, 0, 0)",
borderBottomColor:
"rgb(239, 248, 250)",
}}
>
npm
</button>{" "}
<button
role="tab"
className="text-center whitespace-nowrap h-8 bg-black/0 text-[rgb(142,_193,_201)] text-[14px] leading-[32px] border-t-[2px] border-b-[2px]"
style={{
borderBottomStyle: "solid",
borderTopStyle: "solid",
borderTopColor:
"rgba(0, 0, 0, 0)",
borderBottomColor:
"rgba(0, 0, 0, 0)",
}}
>
yarn
</button>{" "}
<button
role="tab"
className="text-center whitespace-nowrap h-8 bg-black/0 text-[rgb(142,_193,_201)] text-[14px] leading-[32px] border-t-[2px] border-b-[2px]"
style={{
borderBottomStyle: "solid",
borderTopStyle: "solid",
borderTopColor:
"rgba(0, 0, 0, 0)",
borderBottomColor:
"rgba(0, 0, 0, 0)",
}}
>
pnpm
</button>
</div>
</div>
</div>
</div>
</div>{" "}
<div
role="tabpanel"
className="flex flex-col grow overflow-hidden basis-[0%] gap-[4px]"
>
<div className="flex flex-col grow justify-center overflow-hidden relative basis-[0%]">
<div className="flex flex-col h-full overflow-hidden relative">
<div className="fixed top-[-10000px]"></div>{" "}
<div className="items-start flex h-full overflow-auto relative text-[14px] leading-[20px] z-[0]">
<div className="flex h-full sticky text-right whitespace-nowrap left-0 bg-[rgb(48,_75,_79)] text-[rgb(102,_137,_143)] min-h-7 z-[200] shrink-[0]">
<div className="flex flex-col min-h-full overflow-hidden text-right shrink-[0]">
<div
className="text-right h-5 mt-[4px] pt-0 pr-1 pb-0 pl-2 border-l-[4px]"
style={{
borderLeftStyle: "solid",
borderLeftColor:
"rgba(0, 0, 0, 0)",
}}
>
$
</div>
</div>
</div>{" "}
<div
role="textbox"
className="min-h-full whitespace-pre pt-1 pr-0 pb-1 pl-0 grow-[2] shrink-[0]"
>
<div className="text-[rgb(163,_223,_253)] pt-0 pr-[2px] pb-0 pl-3">
<span className="text-[rgb(0,_244,_185)]">
npm
</span>{" "}
<span className="text-[rgb(0,_244,_185)]">
i
</span>{" "}
<span className="text-[rgb(238,_241,_241)]">
-
</span>{" "}
<span className="text-[rgb(0,_244,_185)]">
g
</span>{" "}
<span className="text-[rgb(0,_244,_185)]">
@shopify
</span>{" "}
<span className="text-[rgb(238,_241,_241)]">
/
</span>{" "}
<span className="text-[rgb(0,_244,_185)]">
cli
</span>{" "}
<span className="text-[rgb(0,_244,_185)]">
@latest
</span>
</div>
</div>{" "}
<div className="absolute left-0 top-0 z-[150]"></div>{" "}
<div className="absolute left-0 top-0 z-[-2]"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>{" "}
<br />{" "}
<div className="border-solid border flex flex-col relative bg-[rgb(48,_75,_79)] border-[rgb(53,_99,_105)] shadow-[rgb(0,0,0)_0px_2px_0px_0px] gap-[4px] min-h-10 p-[3px] rounded-lg">
<div className="items-stretch flex gap-[4px]">
<div className="items-center flex grow max-w-full overflow-hidden bg-[rgb(36,_57,_61)] text-[rgb(168,_225,_234)] basis-[0%] text-[14px] gap-[8px] leading-[20px] min-h-8 pt-0 pr-2 pb-0 pl-2 rounded-sm">
<span className="items-center flex grow truncate basis-[0%] gap-[4px]">
<span className="block">
<span className="">
<div
role="img"
className="fill-none overflow-hidden relative w-5 h-5"
>
<img src="http://127.0.0.1:4443/dev-storytodesign.appspot.com/h2d-ext-asset%2F17525672940968.svg"></img>
</div>
</span>
</span>{" "}
Initialize your app instance
</span>
</div>{" "}
<div className="items-center flex gap-[4px] shrink-[0]">
<span className="block relative">
<span className="">
<button className="items-center flex justify-center text-center h-8 bg-[rgb(36,_57,_61)] text-[rgb(142,_193,_201)] text-[14px] leading-[20px] min-w-8 rounded-sm">
<span className="block text-center w-5 h-5 m-[6px]">
<div className="size-full overflow-hidden relative text-center fill-[rgb(142,_193,_201)]">
<img src="http://127.0.0.1:4443/dev-storytodesign.appspot.com/h2d-ext-asset%2F17525672940969.svg"></img>
</div>
</span>
</button>
</span>
</span>
</div>
</div>{" "}
<div className="flex flex-col grow justify-center overflow-hidden relative basis-[0%]">
<div className="flex flex-col h-full overflow-hidden relative">
<div className="fixed top-[-10000px]"></div>{" "}
<div className="items-start flex h-full overflow-auto relative text-[14px] leading-[20px] z-[0]">
<div className="flex h-full sticky text-right whitespace-nowrap left-0 bg-[rgb(48,_75,_79)] text-[rgb(102,_137,_143)] min-h-7 z-[200] shrink-[0]">
<div className="flex flex-col min-h-full overflow-hidden text-right shrink-[0]">
<div
className="text-right h-5 mt-[4px] pt-0 pr-1 pb-0 pl-2 border-l-[4px]"
style={{
borderLeftStyle: "solid",
borderLeftColor:
"rgba(0, 0, 0, 0)",
}}
>
$
</div>
</div>
</div>{" "}
<div
role="textbox"
className="min-h-full whitespace-pre pt-1 pr-0 pb-1 pl-0 grow-[2] shrink-[0]"
>
<div className="text-[rgb(163,_223,_253)] pt-0 pr-[2px] pb-0 pl-3">
<span className="text-[rgb(0,_244,_185)]">
shopify
</span>{" "}
<span className="text-[rgb(0,_244,_185)]">
app
</span>{" "}
<span className="text-[rgb(0,_244,_185)]">
init
</span>
</div>
</div>{" "}
<div className="absolute left-0 top-0 z-[150]"></div>{" "}
<div className="absolute left-0 top-0 z-[-2]"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>{" "}
<section
className="bg-no-repeat bg-cover border-solid ml-auto mr-auto overflow-x-hidden overflow-y-auto bg-[rgb(13,_18,_19)] bg-[position:right_-60px_bottom_-130px] border-[rgb(55,_199,_244)] border-[2px] max-w-[800px] pt-10 pr-20 pb-10 pl-20 rounded-2xl"
style={{
backgroundImage:
'url("https://cdn.shopify.com/shopifycloud/shopify_dev/assets/marketing/docs/launch-banner/banner-bg-mobile-2x-dec067a53c4f52402d73c7eef4e01582a2a0c690bcc4e2d00e6950af704dd317.png")',
}}
>
<div className="grid-cols-1 grid gap-[36px] max-w-[640px]">
<div className="max-w-[475px]">
<h2 className="font-semibold mb-[28px] text-[rgb(238,_241,_241)] text-[24px] leading-[28px]">
Launch your app or theme
</h2>{" "}
<div className="mb-[32px]">
<h3 className="font-semibold mb-[12px] text-[rgb(238,_241,_241)] leading-[20px]">
App Store
</h3>{" "}
<p className="mb-[16px] text-[14px] leading-[20px]">
When you’re ready, submit your app to the{" "}
<a
href="https://apps.shopify.com/"
className="underline text-[rgb(181,_201,_250)]"
>
Shopify App Store
</a>{" "}
so merchants can find and buy your app through
search or personalized recommendations.
</p>{" "}
<a
href="https://shopify.dev/apps/store/requirements"
className='border-solid border inline-block relative text-left bg-[rgb(21,_29,_30)] border-[rgb(89,_118,_122)] shadow-[rgb(0,0,0)_0px_-3px_0px_0px_inset,_rgba(255,255,255,0.2)_0px_2px_0px_0px_inset] pt-[3px] pr-3 pb-[5px] pl-3 rounded-sm after:inline after:relative after:text-left after:whitespace-nowrap after:ml-[5px] after:content-["->"]'
>
See App Store requirements
</a>
</div>{" "}
<div className="">
<h3 className="font-semibold mb-[12px] text-[rgb(238,_241,_241)] leading-[20px]">
Theme Store
</h3>{" "}
<p className="mb-[16px] text-[14px] leading-[20px]">
Promote and sell your custom theme to
merchants building their brands on the{" "}
<a
href="https://themes.shopify.com/"
className="underline text-[rgb(181,_201,_250)]"
>
Shopify Theme Store
</a>{" "}
.
</p>{" "}
<a
href="https://shopify.dev/themes/store/requirements"
className='border-solid border inline-block relative text-left bg-[rgb(21,_29,_30)] border-[rgb(89,_118,_122)] shadow-[rgb(0,0,0)_0px_-3px_0px_0px_inset,_rgba(255,255,255,0.2)_0px_2px_0px_0px_inset] pt-[3px] pr-3 pb-[5px] pl-3 rounded-sm after:inline after:relative after:text-left after:whitespace-nowrap after:ml-[5px] after:content-["->"]'
>
See Theme Store requirements
</a>
</div>
</div>{" "}
<div className="relative w-[640px] h-[416px] left-[50%] top-0 ml-[-320px]">
<div
className="bg-center bg-no-repeat bg-contain w-[640px] h-[416px] aspect-[640_/_416]"
style={{
backgroundImage:
'url("https://cdn.shopify.com/shopifycloud/shopify_dev/assets/marketing/docs/launch-banner/launch-banner-tablet-dark-2x-8af936da66b9b554f429adce5f965daa3196349080224c233fc28a15b9f07e31.png")',
}}
></div>
</div>
</div>
</section>{" "}
<section className="ml-auto mr-auto max-w-[640px] pt-[60px] pr-0 pb-[60px] pl-0">
<div className="grid-cols-2 grid gap-[16px]">
<div className="self-end">
<div className="border-solid h-full max-w-full overflow-hidden bg-[rgb(13,_18,_19)] border-[rgb(157,_184,_247)] border-[2px] p-3 rounded-lg">
<div className="items-start flex flex-col pt-0 pr-4 pb-4 pl-0">
<img
src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/home/icons/icon-community-large-4be2381094828c01d2bfaad7a5e950e519c4aee6e20b07bb333dea1bb67c3dc6.png"
className="bg-center bg-no-repeat block max-w-full overflow-clip align-middle mr-[12px] mb-[12px] shrink-[0]"
></img>{" "}
<div className="w-full">
<div className="font-semibold text-[rgb(238,_241,_241)]">
<h2 className="text-[20px]">
Join a community of builders
</h2>
</div>
</div>
</div>
</div>
</div>{" "}
<a
href="https://community.shopify.dev/"
className="block text-[rgb(181,_201,_250)]"
>
<div className="border-solid border h-full max-w-full overflow-hidden bg-[rgb(21,_29,_30)] border-[rgb(36,_57,_61)] shadow-[rgb(0,0,0)_0px_2px_0px_0px] rounded-lg">
<div className="items-start flex flex-col p-3">
<div
className="bg-center bg-no-repeat bg-contain w-12 h-12 mr-[12px] mb-[12px] shrink-[0]"
style={{
backgroundImage:
'url("https://cdn.shopify.com/shopifycloud/shopify_dev/assets/icons/48/forums-dark-2x-98b2e1942edd517e4e055c41c9f7e66f11420777391d1f9e6289502d57910a9a.png")',
}}
></div>{" "}
<div className="w-full text-[rgb(215,_215,_219)]">
<div className="font-semibold mb-[8px] text-[rgb(238,_241,_241)]">
<p className='relative leading-[20px] after:inline after:relative after:whitespace-nowrap after:ml-[5px] after:content-["->"]'>
.dev Community
</p>
</div>{" "}
<p className="text-[14px] leading-[21px]">
Q&amp;A and advice from Shopify community
experts
</p>
</div>
</div>
</div>
</a>{" "}
<a
href="https://twitter.com/shopifydevs"
className="block text-[rgb(181,_201,_250)]"
>
<div className="border-solid border h-full max-w-full overflow-hidden bg-[rgb(21,_29,_30)] border-[rgb(36,_57,_61)] shadow-[rgb(0,0,0)_0px_2px_0px_0px] rounded-lg">
<div className="items-start flex flex-col p-3">
<div
className="bg-center bg-no-repeat bg-contain w-12 h-12 mr-[12px] mb-[12px] shrink-[0]"
style={{
backgroundImage:
'url("https://cdn.shopify.com/shopifycloud/shopify_dev/assets/icons/48/twitter-dark-2x-bb7b1182ad781d7dc5e13f2ec6812253a0981c2dd0f6df99c0efdfac43ba5bc2.png")',
}}
></div>{" "}
<div className="w-full text-[rgb(215,_215,_219)]">
<div className="font-semibold mb-[8px] text-[rgb(238,_241,_241)]">
<p className='relative leading-[20px] after:inline after:relative after:whitespace-nowrap after:ml-[5px] after:content-["->"]'>
@ShopifyDevs on Twitter
</p>
</div>{" "}
<p className="text-[14px] leading-[21px]">
Product announcements, API updates, tips,
and more
</p>
</div>
</div>
</div>
</a>{" "}
<a
href="https://shopify.dev/changelog"
className="block text-[rgb(181,_201,_250)]"
>
<div className="border-solid border h-full max-w-full overflow-hidden bg-[rgb(21,_29,_30)] border-[rgb(36,_57,_61)] shadow-[rgb(0,0,0)_0px_2px_0px_0px] rounded-lg">
<div className="items-start flex flex-col p-3">
<div
className="bg-center bg-no-repeat bg-contain w-12 h-12 mr-[12px] mb-[12px] shrink-[0]"
style={{
backgroundImage:
'url("https://cdn.shopify.com/shopifycloud/shopify_dev/assets/icons/48/changelog-dark-2x-c9272d861625b3066c2ee1008ce7715ae2a75b9afc10a2cabe371487e30eceaf.png")',
}}
></div>{" "}
<div className="w-full text-[rgb(215,_215,_219)]">
<div className="font-semibold mb-[8px] text-[rgb(238,_241,_241)]">
<p className='relative leading-[20px] after:inline after:relative after:whitespace-nowrap after:ml-[5px] after:content-["->"]'>
Developer Changelog
</p>
</div>{" "}
<p className="text-[14px] leading-[21px]">
The latest Shopify ecosystem updates
</p>
</div>
</div>
</div>
</a>{" "}
<a
href="https://www.youtube.com/channel/UCcYsEEKJtpxoO9T-keJZrEw"
className="block text-[rgb(181,_201,_250)]"
>
<div className="border-solid border h-full max-w-full overflow-hidden bg-[rgb(21,_29,_30)] border-[rgb(36,_57,_61)] shadow-[rgb(0,0,0)_0px_2px_0px_0px] rounded-lg">
<div className="items-start flex flex-col p-3">
<div
className="bg-center bg-no-repeat bg-contain w-12 h-12 mr-[12px] mb-[12px] shrink-[0]"
style={{
backgroundImage:
'url("https://cdn.shopify.com/shopifycloud/shopify_dev/assets/icons/48/youtube-dark-2x-d556578eef9faec3f8f7104609cc24eede093b03b7359c3189e0f68fbf00a196.png")',
}}
></div>{" "}
<div className="w-full text-[rgb(215,_215,_219)]">
<div className="font-semibold mb-[8px] text-[rgb(238,_241,_241)]">
<p className='relative leading-[20px] after:inline after:relative after:whitespace-nowrap after:ml-[5px] after:content-["->"]'>
ShopifyDevs YouTube channel
</p>
</div>{" "}
<p className="text-[14px] leading-[21px]">
Tips and insights in dev and design
</p>
</div>
</div>
</div>
</a>{" "}
<a
href="https://www.twitch.tv/shopifydevs"
className="block text-[rgb(181,_201,_250)]"
>
<div className="border-solid border h-full max-w-full overflow-hidden bg-[rgb(21,_29,_30)] border-[rgb(36,_57,_61)] shadow-[rgb(0,0,0)_0px_2px_0px_0px] rounded-lg">
<div className="items-start flex flex-col p-3">
<div
className="bg-center bg-no-repeat bg-contain w-12 h-12 mr-[12px] mb-[12px] shrink-[0]"
style={{
backgroundImage:
'url("https://cdn.shopify.com/shopifycloud/shopify_dev/assets/icons/48/twitch-dark-2x-77c513d3a4706861c3d12a12d66dda25af28e2c63736880cbc683c732e098bff.png")',
}}
></div>{" "}
<div className="w-full text-[rgb(215,_215,_219)]">
<div className="font-semibold mb-[8px] text-[rgb(238,_241,_241)]">
<p className='relative leading-[20px] after:inline after:relative after:whitespace-nowrap after:ml-[5px] after:content-["->"]'>
ShopifyDevs Twitch channel
</p>
</div>{" "}
<p className="text-[14px] leading-[21px]">
Tests and demo streams
</p>
</div>
</div>
</div>
</a>{" "}
<a
href="https://www.shopify.com/partners/blog"
className="block text-[rgb(181,_201,_250)]"
>
<div className="border-solid border h-full max-w-full overflow-hidden bg-[rgb(21,_29,_30)] border-[rgb(36,_57,_61)] shadow-[rgb(0,0,0)_0px_2px_0px_0px] rounded-lg">
<div className="items-start flex flex-col p-3">
<div
className="bg-center bg-no-repeat bg-contain w-12 h-12 mr-[12px] mb-[12px] shrink-[0]"
style={{
backgroundImage:
'url("https://cdn.shopify.com/shopifycloud/shopify_dev/assets/icons/48/shopify-dark-2x-11e6aa39a22c9bb5c96b71457c886458aeb955a57b94d2d3b0e1ffc5059fb3b9.png")',
}}
></div>{" "}
<div className="w-full text-[rgb(215,_215,_219)]">
<div className="font-semibold mb-[8px] text-[rgb(238,_241,_241)]">
<p className='relative leading-[20px] after:inline after:relative after:whitespace-nowrap after:ml-[5px] after:content-["->"]'>
Shopify Partners blog
</p>
</div>{" "}
<p className="text-[14px] leading-[21px]">
Educational resources and product previews
</p>
</div>
</div>
</div>
</a>
</div>
</section>
</div>
</main>
</div>
</main>{" "}
<footer className="w-full p-2">
<div className="flex justify-center w-full bg-[rgb(21,_29,_30)] pt-10 pr-10 pb-8 pl-10 rounded-lg">
<div className="grid-cols-4 grid w-full gap-[20px] max-w-[1228px]">
<div className="">
<h3 className="font-semibold mb-[16px] text-[12px] leading-[16px]">
Updates
</h3>{" "}
<ul className="">
<li className="list-none text-left">
<a
href="https://shopify.dev/changelog"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
Developer changelog
</a>
</li>{" "}
<li className="list-none text-left">
<a
href="https://shopifypartners.slack.com/"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
Shopify Partners Slack
</a>
</li>{" "}
<li className="list-none text-left">
<a
href="https://www.shopify.com/editions"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
Shopify Editions
</a>
</li>
</ul>
</div>{" "}
<div className="">
<h3 className="font-semibold mb-[16px] text-[12px] leading-[16px]">
Business growth
</h3>{" "}
<ul className="">
<li className="list-none text-left">
<a
href="https://www.shopify.com/partners"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
Shopify Partners Program
</a>
</li>{" "}
<li className="list-none text-left">
<a
href="https://apps.shopify.com/"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
Shopify App Store
</a>
</li>{" "}
<li className="list-none text-left">
<a
href="https://academy.shopify.com/page/developers"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
Shopify Academy
</a>
</li>
</ul>
</div>{" "}
<div className="">
<h3 className="font-semibold mb-[16px] text-[12px] leading-[16px]">
Legal
</h3>{" "}
<ul className="">
<li className="list-none text-left">
<a
href="https://www.shopify.com/legal/terms"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
Terms of service
</a>
</li>{" "}
<li className="list-none text-left">
<a
href="https://www.shopify.com/legal/api-terms"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
API terms of use
</a>
</li>{" "}
<li className="list-none text-left">
<a
href="https://www.shopify.com/legal/privacy"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
Privacy policy
</a>
</li>{" "}
<li className="list-none text-left">
<a
href="https://www.shopify.com/partners/terms"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
Partners Program Agreement
</a>
</li>
</ul>
</div>{" "}
<div className="">
<h3 className="font-semibold mb-[16px] text-[12px] leading-[16px]">
Shopify
</h3>{" "}
<ul className="">
<li className="list-none text-left">
<a
href="https://www.shopify.com/about"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
About Shopify
</a>
</li>{" "}
<li className="list-none text-left">
<a
href="https://www.shopify.com/plus"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
Shopify Plus
</a>
</li>{" "}
<li className="list-none text-left">
<a
href="https://www.shopify.com/careers"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
Careers
</a>
</li>{" "}
<li className="list-none text-left">
<a
href="https://investors.shopify.com/home/default.aspx"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
Investors
</a>
</li>{" "}
<li className="list-none text-left">
<a
href="https://shopify.com/news"
className="block text-left mb-[8px] text-[14px] leading-[20px]"
>
Press and media
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>{" "}
<div className="relative w-0 bg-[rgb(12,_17,_21)]">
<div
role="dialog"
className="border-solid border flex flex-col max-w-full overflow-hidden fixed w-[600px] h-[861px] top-14 right-0 mr-[8px] bg-[rgb(10,_29,_38)] border-[rgb(24,_76,_94)] z-[999] rounded-lg"
style={{ transform: "matrix(1, 0, 0, 1, 608, 0)" }}
>
<span
className="block size-px overflow-hidden absolute top-0"
style={{ clip: "rect(1px, 1px, 1px, 1px)" }}
></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Index;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment