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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 240 KiB

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>

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'
} }

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
positive mental health for all ages. At The Happy Ape, we believe that cultivating these </h2>
values is essential at every stage of life, and our diverse line of products aims to <p className="my-4">&quot;Where joy meets compassion&quot;</p>
foster a culture of compassion and well-being for both children and adults. <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>
<div className="w-full indent-4 sm:w-1/2"> <div className="basis-3/5">
Immerse your little ones in the enchanting world of The Happy Ape with our delightful <Image src={'/images/banner.png'} width={1000} height={1000} alt="banner"></Image>
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>
Discover the warmth and comfort of The Happy Ape plushy toys adorable companions that <div className="my-8 flex w-full p-4">
serve as reminders of the power of love and compassion. Each plushy is designed with <div className="basis-1/2"></div>
meticulous attention to detail, ensuring they become cherished friends for individuals of <div className="basis-1/2 space-y-6">
all ages. These cuddly companions are not just toys; they are ambassadors of happiness and <h2 className="text-5xl">The Brand</h2>
kindness, encouraging empathy and emotional well-being. <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
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.
</p>
</div> </div>
<div className="w-full indent-4 sm:w-1/2"> </div>
Wrap yourself and loved ones in the embrace of positivity with our thoughtfully designed <div className="my-8 flex w-full p-4">
clothing line. From t-shirts adorned with inspiring messages to cozy hoodies that radiate <div className="basis-1/2 space-y-6">
warmth, The Happy Ape clothing collection not only keeps your children stylish but also <h2 className="text-5xl">Story Books</h2>
spreads the message of love and mental health awareness. Our designs are not just fashion <p>
statements; they are expressions of a culture that values well-being and compassion. Immerse your yourself in the enchanting world of The Happy Ape with our delightful
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>
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 <div className="my-8 flex w-full p-4">
journey of creating a brighter and happier future for all. Let The Happy Ape be your <div className="basis-1/2"></div>
companion in cultivating thoughtful, compassionate, and mentally resilient individuals who <div className="basis-1/2 space-y-6">
contribute to making the world a better place, one person at a time. <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
clothing line. From t-shirts adorned with inspiring messages to cozy hoodies that
radiate warmth, The Happy Ape clothing collection not only keeps your children stylish
but also spreads the message of love and mental health awareness. Our designs are not
just fashion statements; they are expressions of a culture that values well-being and
compassion.
</p>
</div>
<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">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>

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>
// );
} }

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-[30px] w-[30px] rounded-lg': size === 'sm'
'h-[40px] w-[40px] rounded-xl': !size, })}
'h-[30px] w-[30px] rounded-lg': size === 'sm'
}
)}
> >
<LogoIcon <LogoIcon
className={clsx({ className={clsx({

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>

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 MiB

BIN
public/images/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 357 KiB

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>

After

Width:  |  Height:  |  Size: 1.0 KiB

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 },