Public
Script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsxImportSource https://esm.sh/hono@latest/jsx */
import RootLayout from "https://esm.town/v/iamseeley/RootLayout";
type LandingPageProps = {
title: string;
description: string;
};
export default function LandingPage({ title, description }) {
const nowPages = [
{
id: 1,
name: "John Doe",
bio: "Software Engineer | Reading: Clean Code",
location: "San Francisco, CA",
currentlyListening: "5gIyj56oo81reKzOLvXjWH?utm_source=generator",
currentlyReading: {
title: "Clean Code",
author: "Robert C. Martin",
coverImage: "https://m.media-amazon.com/images/I/51E2055ZGUL._AC_UF1000,1000_QL80_.jpg",
},
currentlyWatching: {
title: "Stranger Things",
platform: "Netflix",
posterImage: "https://example.com/stranger-things-poster.jpg",
},
avatar: "https://i.redd.it/ajsifk35nr2b1.jpg",
style: "bg-blue-100 text-blue-800",
profession: "software-engineer",
company: "Vandelay Industries",
},
{
id: 2,
name: "Jane Smith",
bio: "Graphic Designer | Learning: UI/UX Design",
location: "New York, NY",
currentlyListening: "5gIyj56oo81reKzOLvXjWH?utm_source=generator",
currentlyReading: {
title: "Don't Make Me Think",
author: "Steve Krug",
coverImage: "https://m.media-amazon.com/images/I/617rPny7-LL._AC_UF1000,1000_QL80_.jpg",
},
currentlyWatching: {
title: "The Queen's Gambit",
platform: "Netflix",
posterImage: "https://example.com/queens-gambit-poster.jpg",
},
avatar: "https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9939a343-952b-4cbf-af92-5254aa19b0d4/deinlz7-d80109f6-ee70-47ff-84ae-a33ef4371ae5.png/v1/fill/w_1280,h_900,q_80,strp/edward_from_cowboy_bebop_by_adequality_deinlz7-fullview.jpg?token=
style: "bg-green-100 text-green-800",
profession: "graphic-designer",
company: "Pinterest"
},
{
id: 3,
name: "Mike Johnson",
bio: "Product Manager | Reading: The Lean Startup",
location: "London, UK",
currentlyListening: "5gIyj56oo81reKzOLvXjWH?utm_source=generator",
currentlyReading: {
title: "The Lean Startup",
author: "Eric Ries",
coverImage: "https://m.media-amazon.com/images/I/61BFOf9Ap-L._AC_UF1000,1000_QL80_.jpg",
},
currentlyWatching: {
title: "The Mandalorian",
platform: "Disney+",
posterImage: "https://example.com/mandalorian-poster.jpg",
},
avatar: "https://i.pinimg.com/originals/8d/21/4a/8d214a719c9610afbc7843e10609d0e4.jpg",
style: "bg-yellow-100 text-yellow-800",
profession: "product-manager",
company: "Meta",
},
];
return (
<RootLayout title={title}>
<section className="flex flex-col mb-8 gap-4">
<h2 className="text-2xl font-bold text-neutral-800 md:m-auto max-w-md md:text-center">
a web page for whatever you've got going on {" "}
<a
className="text-yellow-600 hover:underline decoration-2"
target="_blank"
rel="noreferrer noopener"
href="https://nownownow.com/about"
>
now
</a>
</h2>
</section>
<section className="my-8">
<div className="">
<div className="pb-4 carousel flex gap-4 overflow-x-scroll md:overflow-visible md:justify-center">
{nowPages.map((page, index) => (
<div
key={page.id}
className={`carousel-item flex-shrink-0 w-84 rounded-lg shadow-md p-4 ${page.style} ${
index === 1 ? '' : ''
}`}
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
May 18, 2024