crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 23:46:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
0xBoredDev 2024-03-13 15:37:27 -04:00
parent 4b72a16321
commit 3ba434c2ab
13 changed files with 123 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 240 KiB

9
app/layout.tsx
View File

@ -1,9 +1,14 @@
import Navbar from 'components/layout/navbar'; import Navbar from 'components/layout/navbar';
import { GeistSans } from 'geist/font';
import { ensureStartsWith } from 'lib/utils'; import { ensureStartsWith } from 'lib/utils';
import { Happy_Monkey } from 'next/font/google';
import { ReactNode, Suspense } from 'react'; import { ReactNode, Suspense } from 'react';
import './globals.css'; import './globals.css';
const happymonkey = Happy_Monkey({
weight: '400',
subsets: ['latin']
});
const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env; const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}` ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
@ -33,7 +38,7 @@ export const metadata = {
export default async function RootLayout({ children }: { children: ReactNode }) { export default async function RootLayout({ children }: { children: ReactNode }) {
return ( return (
<html lang="en" className={GeistSans.variable}> <html lang="en" className={happymonkey.className}>
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white"> <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<Navbar /> <Navbar />
<Suspense> <Suspense>

2
app/page.tsx
View File

@ -8,7 +8,7 @@ import { Suspense } from 'react';
export const runtime = 'edge'; export const runtime = 'edge';
export const metadata = { export const metadata = {
description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.', description: 'Welcome to The Happy Ape, where joy meets compassion!',
openGraph: { openGraph: {
type: 'website' type: 'website'
} }

108
components/grid/coming-soon.tsx
View File

@ -1,3 +1,5 @@
import Image from 'next/image';
export async function ComingSoon() { export async function ComingSoon() {
// Collections that start with `hidden-*` are hidden from the search page. // Collections that start with `hidden-*` are hidden from the search page.
// const homepageItems = await getCollectionProducts({ // const homepageItems = await getCollectionProducts({
@ -10,42 +12,92 @@ export async function ComingSoon() {
return ( return (
<section className="container mx-auto mb-12"> <section className="container mx-auto mb-12">
<p className="my-4 text-center text-4xl">Coming Soon...</p> <div className="mb-8 mt-2 flex w-full">
<div className="my-8 flex w-full flex-col items-center gap-y-4"> <div className="basis-2/5 space-y-6 px-4">
<div className="w-full indent-4 sm:w-1/2"> <h2 className="text-5xl">
<span className="text-xl">Welcome to The Happy Ape</span>, where joy meets compassion! We Welcome to <br />
are a unique company dedicated to creating a world filled with kindness, love, and The Happy Ape
</h2>
<p className="my-4">&quot;Where joy meets compassion&quot;</p>
<p>
My name is Kevin, and I am a husabnd, father of 3, and have worked in the IT space over
10 years. I have spent the last few years in what many refer to as web3. I`ve always had
a passion for helping others. I was raised to treat others with kindness and compassion.
</p>
{/* tooltip:You the stuff about blockchains and crypto and those expensive jpeg images people are buying. */}
<p>
There are two goals I want to achieve. Improve mental health awareness for all ages, and
help culture a world filled with more kindness and compassion.
</p>
</div>
<div className="basis-3/5">
<Image src={'/images/banner.png'} width={1000} height={1000} alt="banner"></Image>
</div>
</div>
<div className="my-8 flex w-full p-4">
<div className="basis-1/2"></div>
<div className="basis-1/2 space-y-6">
<h2 className="text-5xl">The Brand</h2>
<p>
We are a unique company dedicated to creating a world filled with kindness, love, and
positive mental health for all ages. At The Happy Ape, we believe that cultivating these positive mental health for all ages. At The Happy Ape, we believe that cultivating these
values is essential at every stage of life, and our diverse line of products aims to values is essential at every stage of life, and our diverse line of products aims to
foster a culture of compassion and well-being for both children and adults. foster a culture of compassion and well-being for both children and adults.
</p>
</div> </div>
<div className="w-full indent-4 sm:w-1/2">
Immerse your little ones in the enchanting world of The Happy Ape with our delightful
collection of kids` books. Each story is carefully crafted to not only entertain but also
instill essential values of kindness, empathy, and understanding. Our authors and
illustrators work collaboratively to create captivating narratives that captivate young
minds and encourage positive behavior.
</div> </div>
<div className="w-full indent-4 sm:w-1/2"> <div className="my-8 flex w-full p-4">
Discover the warmth and comfort of The Happy Ape plushy toys – adorable companions that <div className="basis-1/2 space-y-6">
serve as reminders of the power of love and compassion. Each plushy is designed with <h2 className="text-5xl">Story Books</h2>
meticulous attention to detail, ensuring they become cherished friends for individuals of <p>
all ages. These cuddly companions are not just toys; they are ambassadors of happiness and Immerse your yourself in the enchanting world of The Happy Ape with our delightful
kindness, encouraging empathy and emotional well-being. collection of story books. Each story is carefully crafted to not only entertain but
also instill essential values of kindness, empathy, and understanding. Our authors and
illustrators work collaboratively to create captivating narratives that encourage and
inspire.
</p>
</div> </div>
<div className="w-full indent-4 sm:w-1/2"> <div className="basis-1/2"></div>
</div>
<div className="my-8 flex w-full p-4">
<div className="basis-1/2"></div>
<div className="basis-1/2 space-y-6">
<h2 className="text-5xl">Plushies</h2>
<p>
Discover the warmth and comfort of The Happy Ape plushie, an adorable companion that
serves as a reminder of the power of love and compassion. Each plushie is designed with
meticulous attention to detail, ensuring they become cherished friends for individuals
of all ages. These cuddly companions are not just toys; they are ambassadors of
happiness and kindness, encouraging empathy and emotional well-being.
</p>
</div>
</div>
<div className="my-8 flex w-full p-4">
<div className="basis-1/2 space-y-6">
<h2 className="text-5xl">Clothing Line</h2>
<p>
Wrap yourself and loved ones in the embrace of positivity with our thoughtfully designed Wrap yourself and loved ones in the embrace of positivity with our thoughtfully designed
clothing line. From t-shirts adorned with inspiring messages to cozy hoodies that radiate clothing line. From t-shirts adorned with inspiring messages to cozy hoodies that
warmth, The Happy Ape clothing collection not only keeps your children stylish but also radiate warmth, The Happy Ape clothing collection not only keeps your children stylish
spreads the message of love and mental health awareness. Our designs are not just fashion but also spreads the message of love and mental health awareness. Our designs are not
statements; they are expressions of a culture that values well-being and compassion. just fashion statements; they are expressions of a culture that values well-being and
compassion.
</p>
</div> </div>
<div className="w-full indent-4 sm:w-1/2"> <div className="basis-1/2"></div>
At The Happy Ape, our commitment is to positively impact the world by nurturing people of </div>
all ages with love, kindness, and a solid foundation in mental health. Join us on this
journey of creating a brighter and happier future for all. Let The Happy Ape be your <div className="my-8 flex w-full p-4">
companion in cultivating thoughtful, compassionate, and mentally resilient individuals who <div className="basis-1/2"></div>
contribute to making the world a better place, one person at a time. <div className="basis-1/2 space-y-6">
<h2 className="text-5xl">Our Commitment</h2>
<p>
At The Happy Ape, our commitment is to positively impact the world by nurturing people
of all ages with love, kindness, and a solid foundation in mental health. Join us on
this journey of creating a brighter and happier future for all. Let The Happy Ape be
your companion in cultivating thoughtful, compassionate, and mentally resilient
individuals who contribute to making the world a better place, one person at a time.
</p>
</div> </div>
</div> </div>
</section> </section>

29
components/icons/logo.tsx
View File

@ -1,16 +1,17 @@
import clsx from 'clsx'; import Image from 'next/image';
export default function LogoIcon(props: React.ComponentProps<'svg'>) { export default function LogoIcon() {
return ( return <Image src={'/images/logo.png'} width={64} height={58} alt="logo"></Image>;
<svg // return (
xmlns="http://www.w3.org/2000/svg" // <svg
aria-label={`${process.env.SITE_NAME} logo`} // xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 28" // aria-label={`${process.env.SITE_NAME} logo`}
{...props} // viewBox="0 0 32 28"
className={clsx('h-4 w-4 fill-black dark:fill-white', props.className)} // {...props}
> // className={clsx('h-4 w-4 fill-black dark:fill-white', props.className)}
<path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z" /> // >
<path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z" /> // <path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z" />
</svg> // <path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z" />
); // </svg>
// );
} }

7
components/logo-square.tsx
View File

@ -4,13 +4,10 @@ import LogoIcon from './icons/logo';
export default function LogoSquare({ size }: { size?: 'sm' | undefined }) { export default function LogoSquare({ size }: { size?: 'sm' | undefined }) {
return ( return (
<div <div
className={clsx( className={clsx('flex flex-none items-center justify-center', {
'flex flex-none items-center justify-center border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-black',
{
'h-[40px] w-[40px] rounded-xl': !size, 'h-[40px] w-[40px] rounded-xl': !size,
'h-[30px] w-[30px] rounded-lg': size === 'sm' 'h-[30px] w-[30px] rounded-lg': size === 'sm'
} })}
)}
> >
<LogoIcon <LogoIcon
className={clsx({ className={clsx({

6
components/opengraph-image.tsx
View File

@ -15,9 +15,9 @@ export default async function OpengraphImage(props?: Props): Promise<ImageRespon
return new ImageResponse( return new ImageResponse(
( (
<div tw="flex h-full w-full flex-col items-center justify-center bg-black"> <div tw="flex h-full w-full flex-col items-center justify-center">
<div tw="flex flex-none items-center justify-center border border-neutral-700 h-[160px] w-[160px] rounded-3xl"> <div tw="flex flex-none items-center justify-center h-[160px] w-[160px] border-none">
<LogoIcon width="64" height="58" fill="white" /> <LogoIcon />
</div> </div>
<p tw="mt-12 text-6xl font-bold text-white">{title}</p> <p tw="mt-12 text-6xl font-bold text-white">{title}</p>
</div> </div>

1
package.json
View File

@ -27,7 +27,6 @@
"@headlessui/react": "^1.7.17", "@headlessui/react": "^1.7.17",
"@heroicons/react": "^2.0.18", "@heroicons/react": "^2.0.18",
"clsx": "^2.0.0", "clsx": "^2.0.0",
"geist": "^1.0.0",
"next": "14.1.0", "next": "14.1.0",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0" "react-dom": "18.2.0"

13
pnpm-lock.yaml generated
View File

@ -10,9 +10,6 @@ dependencies:
clsx: clsx:
specifier: ^2.0.0 specifier: ^2.0.0
version: 2.0.0 version: 2.0.0
geist:
specifier: ^1.0.0
version: 1.0.0
next: next:
specifier: 14.1.0 specifier: 14.1.0
version: 14.1.0(react-dom@18.2.0)(react@18.2.0) version: 14.1.0(react-dom@18.2.0)(react@18.2.0)
@ -234,10 +231,6 @@ packages:
glob: 7.1.7 glob: 7.1.7
dev: true dev: true
/@next/font@13.5.6:
resolution: {integrity: sha512-urmUq05uCVJsBqAAJEV+xK5OTTodrSxdiG+351SOSjlWctywdBM6qX+K9pIe3K48RxjfnxlBbXjGyOJAji+pfw==}
dev: false
/@next/swc-darwin-arm64@14.1.0: /@next/swc-darwin-arm64@14.1.0:
resolution: {integrity: sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==} resolution: {integrity: sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
@ -1536,12 +1529,6 @@ packages:
resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==} resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
dev: true dev: true
/geist@1.0.0:
resolution: {integrity: sha512-7hqXZqIdSiFbXjlMZ8Ag0fBAW8RzUjIXPkh160rT4m4ECMtsKdFX+06e0mK28oRCpU+lOB1C5Es8qxzvv7H2Hg==}
dependencies:
'@next/font': 13.5.6
dev: false
/get-intrinsic@1.2.2: /get-intrinsic@1.2.2:
resolution: {integrity: sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==} resolution: {integrity: sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==}
dependencies: dependencies:

BIN
public/images/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 MiB

BIN
public/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 357 KiB

9
public/images/rainbow.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="62" height="61">
<path d="M0 0 C20.46 0 40.92 0 62 0 C62 20.13 62 40.26 62 61 C41.54 61 21.08 61 0 61 C0 40.87 0 20.74 0 0 Z " fill="#EF6925" transform="translate(0,0)"/>
<path d="M0 0 C10.23 0 20.46 0 31 0 C31 20.13 31 40.26 31 61 C10 61 10 61 0 60 C0 40.2 0 20.4 0 0 Z " fill="#20409A" transform="translate(31,0)"/>
<path d="M0 0 C3.63 0 7.26 0 11 0 C11 20.13 11 40.26 11 61 C4.07 61 -2.86 61 -10 61 C-10 60.67 -10 60.34 -10 60 C-6.7 60 -3.4 60 0 60 C0 40.2 0 20.4 0 0 Z " fill="#844794" transform="translate(51,0)"/>
<path d="M0 0 C3.63 0 7.26 0 11 0 C11 20.13 11 40.26 11 61 C7.37 61 3.74 61 0 61 C0 40.87 0 20.74 0 0 Z " fill="#E62829" transform="translate(0,0)"/>
<path d="M0 0 C3.3 0 6.6 0 10 0 C10 19.8 10 39.6 10 60 C6.7 60 3.4 60 0 60 C0 40.2 0 20.4 0 0 Z " fill="#2BA14A" transform="translate(31,0)"/>
<path d="M0 0 C3.3 0 6.6 0 10 0 C10 19.8 10 39.6 10 60 C6.7 60 3.4 60 0 60 C0 40.2 0 20.4 0 0 Z " fill="#FFDE16" transform="translate(21,0)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

3
tailwind.config.js
View File

@ -5,9 +5,6 @@ module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: { theme: {
extend: { extend: {
fontFamily: {
sans: ['var(--font-geist-sans)']
},
keyframes: { keyframes: {
fadeIn: { fadeIn: {
from: { opacity: 0 }, from: { opacity: 0 },