Skip to content

Commit 3358d25

Browse files
jemzirjemzir
committed
Merge branch 'www' of https://github.com/oslabs-beta/reactime into www
2 parents e7ec702 + b076254 commit 3358d25

File tree

13 files changed

+876
-878
lines changed

13 files changed

+876
-878
lines changed

‎www/next.config.mjs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,13 @@ const config = {
1313
locales: ["en"],
1414
defaultLocale: "en",
1515
},
16+
images: {
17+
remotePatterns: [
18+
{
19+
protocol: 'https',
20+
hostname: 'github.com',
21+
},
22+
],
23+
},
1624
};
1725
export default config;

‎www/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,16 @@
2222
"react": "18.2.0",
2323
"react-dom": "18.2.0",
2424
"superjson": "1.9.1",
25+
"swiper": "^8.4.5",
26+
"tiny-slider": "^2.9.4",
27+
"tiny-slider-react": "^0.5.6",
2528
"zod": "^3.18.0"
2629
},
2730
"devDependencies": {
2831
"@types/node": "^18.0.0",
2932
"@types/react": "^18.0.14",
3033
"@types/react-dom": "^18.0.5",
34+
"@types/tiny-slider-react": "^0.3.4",
3135
"@typescript-eslint/eslint-plugin": "^5.33.0",
3236
"@typescript-eslint/parser": "^5.33.0",
3337
"autoprefixer": "^10.4.7",

‎www/public/new-reactime.gif‎

5.57 MB
Loading

‎www/public/profileFallback.png‎

34.5 KB
Loading

‎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‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { Swiper, SwiperSlide } from 'swiper/react'
2+
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
3+
4+
import 'swiper/css';
5+
import 'swiper/css/navigation';
6+
import 'swiper/css/pagination';
7+
import 'swiper/css/scrollbar';
8+
9+
export default function FeatureSlider() {
10+
const features = [
11+
{
12+
title: "State Snapshot Text Display",
13+
desc: "See your application state in stylized, interactive JSON format",
14+
},
15+
{
16+
title: "Time Travel Live Render",
17+
desc: "Simulate any state change from history in the DOM with a click of a button",
18+
},
19+
{
20+
title: "Save Snapshot Series",
21+
desc: "Save a series of recorded state snapshots for analysis later on",
22+
},
23+
{
24+
title: "Web Metrics",
25+
desc: "Improve user experience with insight into Web Metrics such as LCP, FCP, FID, TTFB",
26+
},
27+
{
28+
title: "Snapshot History Display",
29+
desc: "Monitor history as you time-travel or make new changes to state"
30+
},
31+
{
32+
title: "Components Map Display",
33+
desc: "Visualize relationships between components in a collapsible tree for a given snapshot",
34+
},
35+
{
36+
title: "Atom and Selector Relationships",
37+
desc: "Visualize the mapping of Atoms and Selectors to components in Recoil Apps",
38+
},
39+
{
40+
title: "Components Performance Display",
41+
desc: "Visualize the relative latency trends introduced by re-rendering each component on state change",
42+
},
43+
{
44+
title: "Download, Upload, and Persist",
45+
desc: "Save your state history for future tests",
46+
add1: "Keep your state changes on app reload{' '}"
47+
},
48+
{
49+
title: "Re-render Optimization",
50+
desc: "Improve performance by preventing unnecessary render cycles",
51+
},
52+
{
53+
title: "Gatsby Support",
54+
desc: "Reactime offers full support for Gatsby applications",
55+
},
56+
{
57+
title: "Next.js Support",
58+
desc: "Reactime offers debugging and performance tools for Next.js apps",
59+
},
60+
61+
]
62+
return (
63+
<Swiper
64+
modules = {[Navigation, Pagination, Scrollbar, A11y]}
65+
spaceBetween = {50}
66+
slidesPerView = {3}
67+
onSlideChange = {() => console.log('slide change')}
68+
onSwiper = {(swiper) => console.log(swiper)}
69+
navigation
70+
scrollbar = {{draggable: true }}
71+
pagination = {{ clickable: true }}
72+
>
73+
{features.map((el, index) => {
74+
return (
75+
<SwiperSlide key = {index}>
76+
<div className ="flex justify-center">
77+
<div className ="rounded-lg shadow-lg bg-white max-w-sm min-w-fit">
78+
<div className ="p-6">
79+
<h5 className ="text-gray-900 text-xl font-medium mb-2">
80+
{el.title}
81+
</h5>
82+
<p className ="text-gray-700 text-base mb-4">
83+
{el.desc}
84+
</p>
85+
</div>
86+
</div>
87+
</div>
88+
</SwiperSlide>
89+
);
90+
})}
91+
</Swiper>
92+
)
93+
}

‎www/src/pages/components/FeaturesSection.jsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import {
2+
ArrowPathIcon,
3+
CloudArrowUpIcon,
4+
CogIcon,
5+
LockClosedIcon,
6+
ServerIcon,
7+
ShieldCheckIcon,
8+
} from '@heroicons/react/24/outline'
9+
10+
const features = [
11+
{
12+
name: 'Push to Deploy',
13+
description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
14+
icon: CloudArrowUpIcon,
15+
},
16+
{
17+
name: 'SSL Certificates',
18+
description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
19+
icon: LockClosedIcon,
20+
},
21+
{
22+
name: 'Simple Queues',
23+
description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
24+
icon: ArrowPathIcon,
25+
},
26+
{
27+
name: 'Advanced Security',
28+
description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
29+
icon: ShieldCheckIcon,
30+
},
31+
{
32+
name: 'Powerful API',
33+
description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
34+
icon: CogIcon,
35+
},
36+
{
37+
name: 'Database Backups',
38+
description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
39+
icon: ServerIcon,
40+
},
41+
]
42+
43+
export default function FeaturesSection() {
44+
return (
45+
<div className="relative bg-white py-24 sm:py-32 lg:py-40">
46+
<div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
47+
<h2 className="text-lg font-semibold text-indigo-600">Deploy faster</h2>
48+
<p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
49+
Everything you need to deploy your app
50+
</p>
51+
<p className="mx-auto mt-5 max-w-prose text-xl text-gray-500">
52+
Phasellus lorem quam molestie id quisque diam aenean nulla in. Accumsan in quis quis nunc, ullamcorper
53+
malesuada. Eleifend condimentum id viverra nulla.
54+
</p>
55+
<div className="mt-20">
56+
<div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
57+
{features.map((feature) => (
58+
<div key={feature.name} className="pt-6">
59+
<div className="flow-root rounded-lg bg-gray-50 px-6 pb-8">
60+
<div className="-mt-6">
61+
<div>
62+
<span className="inline-flex items-center justify-center rounded-xl bg-indigo-500 p-3 shadow-lg">
63+
<feature.icon className="h-8 w-8 text-white" aria-hidden="true" />
64+
</span>
65+
</div>
66+
<h3 className="mt-8 text-lg font-semibold leading-8 tracking-tight text-gray-900">
67+
{feature.name}
68+
</h3>
69+
<p className="mt-5 text-base leading-7 text-gray-600">{feature.description}</p>
70+
</div>
71+
</div>
72+
</div>
73+
))}
74+
</div>
75+
</div>
76+
</div>
77+
</div>
78+
)
79+
}

0 commit comments

Comments
 (0)