Skip to content

Commit 73e2825

Browse files
ericsngyunericsngyun
committed
working on carousel finished blog layout beta
1 parent fc300d6 commit 73e2825

File tree

6 files changed

+125
-34
lines changed

6 files changed

+125
-34
lines changed

‎www/package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
},
1212
"dependencies": {
1313
"@headlessui/react": "^1.7.5",
14+
"@heroicons/react": "^2.0.13",
1415
"@prisma/client": "^4.5.0",
1516
"@tanstack/react-query": "^4.16.0",
1617
"@trpc/client": "^10.0.0",
@@ -21,12 +22,15 @@
2122
"react": "18.2.0",
2223
"react-dom": "18.2.0",
2324
"superjson": "1.9.1",
25+
"tiny-slider": "^2.9.4",
26+
"tiny-slider-react": "^0.5.6",
2427
"zod": "^3.18.0"
2528
},
2629
"devDependencies": {
2730
"@types/node": "^18.0.0",
2831
"@types/react": "^18.0.14",
2932
"@types/react-dom": "^18.0.5",
33+
"@types/tiny-slider-react": "^0.3.4",
3034
"@typescript-eslint/eslint-plugin": "^5.33.0",
3135
"@typescript-eslint/parser": "^5.33.0",
3236
"autoprefixer": "^10.4.7",

‎www/src/pages/components/Blogs.tsx

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
const posts = [
2+
{
3+
title: 'Our Legendary Article here',
4+
href: '#',
5+
category: { name: 'Greatness', href: '#' },
6+
description:
7+
'Reactime v17, we have come a long way from beta. Now introducing full Context API support and CustomHooks support: thereby allowing developers to better visualize the states and ... ',
8+
date: 'Dec 14, 2022',
9+
datetime: '2022-12-14',
10+
imageUrl:
11+
'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
12+
readingTime: '6 min',
13+
author: {
14+
name: 'James Nghiem',
15+
href: '#',
16+
imageUrl:
17+
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
18+
},
19+
},
20+
{
21+
title: 'Time-Traveling Through React State',
22+
href: 'https://rxlina.medium.com/time-traveling-through-react-state-with-reactime-9-0-371dbdc99319',
23+
category: { name: 'React', href: '#' },
24+
description:
25+
'Reactime is a Chrome extension and time-travel debugger for React that allows developers to record, track, and visualize state changes. Reactime leverages React’s core reconciliation... ',
26+
date: 'Oct 7, 2021',
27+
datetime: '2020-10-07',
28+
imageUrl:
29+
'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
30+
readingTime: '4 min',
31+
author: {
32+
name: 'Lina Shin',
33+
href: 'https://rxlina.medium.com/',
34+
imageUrl:
35+
'https://media-exp1.licdn.com/dms/image/C5603AQHQGFvRHt25WQ/profile-displayphoto-shrink_200_200/0/1623865299399?e=1676505600&v=beta&t=yDqgIaJOhO3oOWLROIH9rHPBHdVzDSV3VlB2axWqXr4',
36+
},
37+
},
38+
{
39+
title: 'Open Source DeBugging Tool for React',
40+
href: 'https://betterprogramming.pub/time-traveling-state-with-reactime-6-0-53fdc3ae2a20',
41+
category: { name: 'Better Programming', href: '#' },
42+
description:
43+
'State management is a crucial part of developing efficient and performant React applications. Developers know that managing state can become unmanageable as an application scales... ',
44+
date: 'Oct 21, 2020',
45+
datetime: '2020-10-21',
46+
imageUrl:
47+
'https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
48+
readingTime: '11 min',
49+
author: {
50+
name: 'Vincent Nguyen',
51+
href: 'https://medium.com/@CSVince',
52+
imageUrl:
53+
'https://media-exp1.licdn.com/dms/image/C5603AQEsAdcE-e7kZg/profile-displayphoto-shrink_200_200/0/1604336802983?e=1676505600&v=beta&t=yK3edcZkpG4Yhvr4iavafRs1SBEQgza-4IRJncRV0X4',
54+
},
55+
},
56+
]
57+
58+
export default function Blogs() {
59+
return (
60+
<div className="relative bg-gray-50 px-4 pt-16 pb-20 sm:px-6 lg:px-8 lg:pt-24 lg:pb-28">
61+
<div className="absolute inset-0">
62+
<div className="h-1/3 bg-white sm:h-2/3" />
63+
</div>
64+
<div className="relative mx-auto max-w-7xl">
65+
<div className="text-center">
66+
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">From the blog</h2>
67+
<p className="mx-auto mt-3 max-w-2xl text-xl text-gray-500 sm:mt-4">
68+
See the blogs from the most recent updates and to the past years!
69+
</p>
70+
</div>
71+
<div className="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
72+
{posts.map((post) => (
73+
<div key={post.title} className="flex flex-col overflow-hidden rounded-lg shadow-lg">
74+
<div className="flex-shrink-0">
75+
<img className="h-48 w-full object-cover" src={post.imageUrl} alt="" />
76+
</div>
77+
<div className="flex flex-1 flex-col justify-between bg-white p-6">
78+
<div className="flex-1">
79+
<p className="text-sm font-medium text-indigo-600">
80+
<a href={post.category.href} className="hover:underline">
81+
{post.category.name}
82+
</a>
83+
</p>
84+
<a href={post.href} className="mt-2 block">
85+
<p className="text-xl font-semibold text-gray-900">{post.title}</p>
86+
<p className="mt-3 text-base text-gray-500">{post.description}</p>
87+
</a>
88+
</div>
89+
<div className="mt-6 flex items-center">
90+
<div className="flex-shrink-0">
91+
<a href={post.author.href}>
92+
<span className="sr-only">{post.author.name}</span>
93+
<img className="h-10 w-10 rounded-full" src={post.author.imageUrl} alt="" />
94+
</a>
95+
</div>
96+
<div className="ml-3">
97+
<p className="text-sm font-medium text-gray-900">
98+
<a href={post.author.href} className="hover:underline">
99+
{post.author.name}
100+
</a>
101+
</p>
102+
<div className="flex space-x-1 text-sm text-gray-500">
103+
<time dateTime={post.datetime}>{post.date}</time>
104+
<span aria-hidden="true">&middot;</span>
105+
<span>{post.readingTime} read</span>
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
</div>
111+
))}
112+
</div>
113+
</div>
114+
</div>
115+
)
116+
}

‎www/src/pages/components/FeatureSlider.tsx

Whitespace-only changes.

‎www/src/pages/components/FeatureSliderCard.tsx

Whitespace-only changes.

‎www/src/pages/components/LandingPage.tsx

Lines changed: 3 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -297,45 +297,14 @@ export default function LandingPage() {
297297
<div className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0">
298298
{/* Content area */}
299299
<div className="pt-12 sm:pt-16 lg:pt-20">
300-
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
301-
On a mission to empower teams
302-
</h2>
300+
303301
<div className="mt-6 space-y-6 text-gray-500">
304-
<p className="text-lg">
305-
Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque
306-
tristique pellentesque. Blandit amet, sed aenean erat arcu morbi. Cursus faucibus nunc nisl netus
307-
morbi vel porttitor vitae ut. Amet vitae fames senectus vitae.
308-
</p>
309-
<p className="text-base leading-7">
310-
Sollicitudin tristique eros erat odio sed vitae, consequat turpis elementum. Lorem nibh vel, eget
311-
pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna. Sollicitudin
312-
tristique eros erat odio sed vitae, consequat turpis elementum. Lorem nibh vel, eget pretium arcu
313-
vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna.
314-
</p>
315-
<p className="text-base leading-7">
316-
Rhoncus nisl, libero egestas diam fermentum dui. At quis tincidunt vel ultricies. Vulputate aliquet
317-
velit faucibus semper. Pellentesque in venenatis vestibulum consectetur nibh id. In id ut tempus
318-
egestas. Enim sit aliquam nec, a. Morbi enim fermentum lacus in. Viverra.
319-
</p>
302+
320303
</div>
321304
</div>
322305

323306
{/* Stats section */}
324-
<div className="mt-10">
325-
<dl className="grid grid-cols-2 gap-x-4 gap-y-8">
326-
{stats.map((stat) => (
327-
<div key={stat.label} className="border-t-2 border-gray-100 pt-6">
328-
<dt className="text-base font-medium text-gray-500">{stat.label}</dt>
329-
<dd className="text-3xl font-bold tracking-tight text-gray-900">{stat.value}</dd>
330-
</div>
331-
))}
332-
</dl>
333-
<div className="mt-10">
334-
<a href="#" className="text-base font-medium text-rose-500">
335-
Learn more about how we're changing the world&nbsp&rarr;
336-
</a>
337-
</div>
338-
</div>
307+
339308
</div>
340309
</div>
341310
</div>

‎www/src/pages/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Head from "next/head";
33
import Link from "next/link";
44
import LandingPage from "./components/LandingPage";
55
import NavBar from "./components/NavBar";
6+
import Blogs from "./components/Blogs";
67

78
import { trpc } from "../utils/trpc";
89

@@ -13,6 +14,7 @@ const Home: NextPage = () => {
1314
<>
1415
<NavBar />
1516
<LandingPage />
17+
<Blogs />
1618
</>
1719
);
1820
};

0 commit comments

Comments
 (0)