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

more home page

Browse Source
This commit is contained in:
Zubair Mughal 2024-03-24 14:04:45 -05:00
parent cfdc043a5f
commit 937eb00f56
5 changed files with 46 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/layout.tsx
View File

@ -1,16 +1,20 @@
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 { Open_Sans } from 'next/font/google';
import { ReactNode, Suspense } from 'react'; import { ReactNode, Suspense } from 'react';
import './globals.css'; import './globals.css';
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}`
: 'http://localhost:3000'; : 'http://localhost:3000';
const twitterCreator = TWITTER_CREATOR ? ensureStartsWith(TWITTER_CREATOR, '@') : undefined; const twitterCreator = TWITTER_CREATOR ? ensureStartsWith(TWITTER_CREATOR, '@') : undefined;
const twitterSite = TWITTER_SITE ? ensureStartsWith(TWITTER_SITE, 'https://') : undefined; const twitterSite = TWITTER_SITE ? ensureStartsWith(TWITTER_SITE, 'https://') : undefined;
const openSans = Open_Sans({
weight: ['400', '600', '700'],
subsets: ['latin'],
style: 'normal',
display: 'swap'
});
export const metadata = { export const metadata = {
metadataBase: new URL(baseUrl), metadataBase: new URL(baseUrl),
title: { title: {
@ -33,7 +37,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={openSans.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>

39
app/page.tsx
View File

@ -1,8 +1,8 @@
import { Carousel } from 'components/carousel';
import { ThreeItemGrid } from 'components/grid/three-items';
import Footer from 'components/layout/footer'; import Footer from 'components/layout/footer';
import Image from 'next/image';
import { Suspense } from 'react'; import { Suspense } from 'react';
import HomePageBlob from '../media/homePage_blob.svg';
import littlePerson from '../media/little_person_homePage.png';
export const runtime = 'edge'; export const runtime = 'edge';
export const metadata = { export const metadata = {
@ -15,9 +15,38 @@ export const metadata = {
export default async function HomePage() { export default async function HomePage() {
return ( return (
<> <>
<ThreeItemGrid /> {/* <ThreeItemGrid /> */}
<Suspense> <Suspense>
<Carousel /> {/* <Carousel /> */}
<div className="flex flex-col items-center bg-[#F8FCFD] px-4 py-12 lg:flex-row lg:items-start lg:px-12">
<div className="space-y-6 p-4 text-left lg:flex-1">
<h2 className="text-color-body text-4xl font-semibold">
Simplify Back to School Shopping
</h2>
<p className="text-color-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<button className="rounded-[6.25rem] bg-custom-blue px-6 py-2 font-bold text-white">
Shop by school
</button>
</div>
<div className="relative self-end lg:flex-1 lg:self-auto">
{/* Blob SVG */}
<div className="absolute -bottom-16 -right-16 z-0 max-w-xs lg:-right-10 lg:-top-10 lg:max-w-none">
<Image src={HomePageBlob} alt="blob" className="h-full w-full" />
</div>
<div className="relative z-10 w-60 lg:w-auto">
<Image
src={littlePerson}
alt="Happy kid with a backpack"
width={500} // Adjust width as necessary
height={750}
/>
</div>
</div>
</div>
<Suspense> <Suspense>
<Footer /> <Footer />
</Suspense> </Suspense>

3
media/homePage_blob.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="819" height="690" viewBox="0 0 819 690" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.1507 124.371C-20.3997 46.7863 6.1714 -110.939 25.1507 -180.104L791.277 -294L864 12.1664L820.592 689.905C731.896 691.033 534.098 682.575 452.468 639.723C350.43 586.158 396.657 499.89 312.096 454.783C227.534 409.675 276.016 290.705 246.702 245.597C217.387 200.49 82.0888 221.352 25.1507 124.371Z" fill="#A9DDED"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 432 B

BIN
media/little_person_homePage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 184 KiB

2
tailwind.config.js
View File

@ -12,7 +12,7 @@ module.exports = {
'custom-blue': '#0B80A7' 'custom-blue': '#0B80A7'
}, },
fontFamily: { fontFamily: {
'open-sans': ['Open Sans', 'sans-serif'], // add this line if not already present sans: ['Open Sans', 'sans-serif'], // add this line if not already present
futura: ['Futura', 'sans-serif'] futura: ['Futura', 'sans-serif']
}, },
fontSize: { fontSize: {