Skip to content

Commit

Permalink
Tidy up the room
Browse files Browse the repository at this point in the history
  • Loading branch information
@neilh-cogapp
neilh-cogapp committed Mar 22, 2024
1 parent e406bba commit 3e44f82
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 56 deletions.
6 changes: 3 additions & 3 deletions src/app/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ export default function Header({ children }) {
return (
<div className="flex items-center justify-between py-8">
<div className="min-w-0 flex-1">
<h2 className="text-2xl font-bold leading-7 text-black sm:truncate sm:text-3xl sm:tracking-tight">
Make a Scene
</h2>
<h1 className="text-2xl font-bold leading-7 text-black sm:truncate sm:text-3xl sm:tracking-tight">
Decorate your room
</h1>
</div>
{children}
</div>
Expand Down
160 changes: 111 additions & 49 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,125 @@
/* eslint-disable @next/next/no-img-element */
import { PhotoIcon, ExclamationTriangleIcon, CameraIcon, PencilIcon } from '@heroicons/react/20/solid';
import Link from 'next/link';
import {
PhotoIcon,
ExclamationTriangleIcon,
CameraIcon,
PencilIcon,
} from "@heroicons/react/20/solid";
import Link from "next/link";

export default function Page() {
return (
<>
<section className="w-full py-12 md:py-24 lg:py-32">
<div className="mx-auto grid max-w-2xl gap-x-8 gap-y-16">

<div className="max-w-xl text-base leading-7 text-gray-700 lg:max-w-lg">
<header className="bg-blue flex flex-row items-center justify-between p-4 text-white">
<a
className="decoration text-white underline underline-offset-2"
href="https://medium.com/p/e5560728dc02"
target="_blank"
>
read the blog post
</a>{" "}
<a
className="decoration text-white underline underline-offset-2"
href="https://www.cogapp.com"
target="_blank"
>
{" "}
find out more about Cogapp
</a>
</header>
<section className="w-full p-8 md:p-12 lg:p-20">
<div className="mx-auto grid grid-cols-2 gap-x-8 gap-y-16">
<div className="max-w-xl text-base leading-7 text-gray-700 lg:max-w-lg flex flex-col gap-8">
<h1 className="text-3xl font-bold sm:text-4xl md:text-5xl lg:text-6xl">
Make a Scene
</h1>
<ul role="list" className="mt-8 space-y-8 text-gray-600">
<li className="flex gap-x-3">
<PhotoIcon className="mt-1 h-5 w-5 flex-none text-blue-600" aria-hidden="true" />
<span>
<strong className="block font-semibold text-gray-900">Create Your Scene</strong> Choose a room, then search for objects from the Index of American Design and add them to your scene.
<p>
Each room is a blank canvas for you to work with.
</p>
</span>
</li>
<li className="flex gap-x-3">
<PencilIcon className="mt-1 h-5 w-5 flex-none text-blue-600" aria-hidden="true" />
<span>
<strong className="block font-semibold text-gray-900">Customize</strong> Resize and rearrange - there are no rules!
</span>
</li>
<li className="flex gap-x-3">
<CameraIcon className="mt-1 h-5 w-5 flex-none text-blue-600" aria-hidden="true" />
<span>
<strong className="block font-semibold text-gray-900">Share</strong> Once you are happy with your scene, hit save to download a copy of your creation.
</span>
</li>
<li className="flex gap-x-3">
<ExclamationTriangleIcon className="mt-1 h-5 w-5 flex-none text-blue-600" aria-hidden="true" />
<span>
<strong className="block font-semibold text-gray-900">Disclaimer...</strong>Please note that &quot;Make a Scene&quot; is a prototype thrown together in a few hours as part of a Cogapp Hackday, so it probably contains a few rough edges and bugs!
</span>
</li>
</ul>
<div>
<ul role="list" className="space-y-8 text-gray-600">
<li className="flex gap-x-3">
<PhotoIcon
className="mt-1 h-5 w-5 flex-none text-blue-600"
aria-hidden="true"
/>
<span>
<strong className="block font-semibold text-gray-900">
Create Your Scene
</strong>{" "}
Choose a room, then search for objects from the Index of
American Design and add them to your scene.
<p>Each room is a blank canvas for you to work with.</p>
</span>
</li>
<li className="flex gap-x-3">
<PencilIcon
className="mt-1 h-5 w-5 flex-none text-blue-600"
aria-hidden="true"
/>
<span>
<strong className="block font-semibold text-gray-900">
Customize
</strong>{" "}
Resize and rearrange - there are no rules!
</span>
</li>
<li className="flex gap-x-3">
<CameraIcon
className="mt-1 h-5 w-5 flex-none text-blue-600"
aria-hidden="true"
/>
<span>
<strong className="block font-semibold text-gray-900">
Share
</strong>{" "}
Once you are happy with your scene, hit save to download a
copy of your creation.
</span>
</li>
<li className="flex gap-x-3">
<ExclamationTriangleIcon
className="mt-1 h-5 w-5 flex-none text-blue-600"
aria-hidden="true"
/>
<span>
<strong className="block font-semibold text-gray-900">
Disclaimer...
</strong>
Please note that &quot;Make a Scene&quot; is a prototype
thrown together in a few hours as part of a Cogapp Hackday, so
it contains rough edges and bugs!
</span>
</li>
</ul>
</div>
<Link
className="block bg-green hover:bg-green rounded-md p-4 text-center font-bold text-white shadow-md hover:text-black hover:shadow-lg"
href="/rooms"
>
Play!
</Link>
</div>
<div>
<div className="py-4">
<img className="rounded-lg" src="/images/room-1.jpeg" alt="" />
</div>
<div className="py-4">
<img className="rounded-lg" src="/images/room-2.jpeg" alt="" />
</div>
</div>
{/* <div className="flex justify-center mt-4"> */}
<Link
className="text-white text-center rounded-md bg-green p-4 font-bold shadow-md hover:bg-green hover:text-black hover:shadow-lg"
href="/rooms"
>
Get Started
</Link>
{/* </div> */}
<p className="mt-8">
<a className="underline underline-offset-2 decoration-black" href="https://medium.com/p/e5560728dc02" target="_blank">Read the accompanying blog post</a>, or <a className="underline underline-offset-2 decoration-black" href="https://www.cogapp.com" target="_blank">find out more about Cogapp</a>.
</p>
<p>
Made with <img className="inline" width="20" height="20" alt="Cat typing really fast emoji" src="https://emojis.slackmojis.com/emojis/images/1643514285/2559/cattyping.gif?1643514285" /> by neilh
</p>
</div>
</section>
<footer className="bg-blue flex flex-row items-center justify-end p-4 text-white">
<p>
Made with{" "}
<img
className="inline"
width="20"
height="20"
alt="Cat typing really fast emoji"
src="https://emojis.slackmojis.com/emojis/images/1643514285/2559/cattyping.gif?1643514285"
/>{" "}
by neilh
</p>
</footer>
</>
);
}
14 changes: 10 additions & 4 deletions src/app/rooms/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,14 @@ const backgroundImages = [

export default function Page() {
return (
<div className="">
<p className="text-xl py-8">Choose a room to decorate</p>
<>
<div className="flex items-center justify-between py-8">
<div className="min-w-0 flex-1">
<h1 className="text-2xl font-bold leading-7 text-black sm:truncate sm:text-3xl sm:tracking-tight">
Choose a room to decorate
</h1>
</div>
</div>
<div className="grid grid-cols-1 gap-y-6 sm:grid-cols-2 gap-x-6">
{backgroundImages.map((bgImage, i) => (
<div className="group" key={i}>
Expand All @@ -31,12 +37,12 @@ export default function Page() {
/>
<span className="inline-flex items-center p-4">
<PaperAirplaneIcon className="-ml-0.5 mr-1.5 h-5 w-5" aria-hidden="true" />
{`Choose Room ${i + 1}`}
<span className="sr-only">{`Decorate room ${i + 1}`}</span>
</span>
</Link>
</div>
))}
</div>
</div>
</>
);
}

0 comments on commit 3e44f82

Please sign in to comment.