Skip to content

Commit 09336d0

Browse files
benmargbenmarg
committed
initial nav bar, LandingPage, and TeamSection added
1 parent 960755b commit 09336d0

File tree

6 files changed

+150
-353
lines changed

6 files changed

+150
-353
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/public/profileFallback.png

34.5 KB
Loading

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

Lines changed: 16 additions & 259 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,5 @@
1-
/*
2-
This example requires some changes to your config:
3-
4-
```
5-
// tailwind.config.js
6-
const colors = require('tailwindcss/colors')
7-
8-
module.exports = {
9-
// ...
10-
theme: {
11-
extend: {
12-
colors: {
13-
rose: colors.rose,
14-
},
15-
},
16-
},
17-
plugins: [
18-
// ...
19-
require('@tailwindcss/forms'),
20-
],
21-
}
22-
```
23-
*/
241
import { ChevronRightIcon, StarIcon } from '@heroicons/react/20/solid'
2+
import TeamSection from '../components/TeamSection'
253

264
const stats = [
275
{ label: 'Founded', value: '2021' },
@@ -117,13 +95,13 @@ export default function LandingPage() {
11795
<main>
11896
{/* Hero section */}
11997
<div className="overflow-hidden pt-8 sm:pt-12 lg:relative lg:py-48">
120-
<div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-2 lg:gap-24 lg:px-8">
98+
<div className="mx-32 max-w-md px-4 sm:max-w-3xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-2 lg:gap-24 lg:px-8">
12199
<div>
122100
<div>
123101
<img
124-
className="pl-52 h-20 w-auto"
102+
className="pl-60 h-20 w-auto"
125103
src="https://i.imgur.com/ELBAyVb.png"
126-
alt="Your Company"
104+
alt="Reactime"
127105
/>
128106
</div>
129107
<div className="mt-20">
@@ -143,7 +121,7 @@ export default function LandingPage() {
143121
A time travel debugger for modern react apps
144122
</h1>
145123
<p className="mt-6 text-xl text-gray-500">
146-
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.
124+
A Chrome Extension that lets you rewind time and replay previous versions of your stateful React components.
147125
</p>
148126
</div>
149127
<form action="#" className="mt-12 sm:flex sm:w-full sm:max-w-lg">
@@ -168,17 +146,15 @@ export default function LandingPage() {
168146
</div>
169147
</form>
170148
<div className="mt-6">
171-
<div className="inline-flex items-center divide-x divide-gray-300">
172-
<div className="flex flex-shrink-0 pr-5">
173-
<StarIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
174-
<StarIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
175-
<StarIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
176-
<StarIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
177-
<StarIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
149+
<div className="inline-flex items-center">
150+
<div className="flex flex-shrink-0">
151+
{/* <StarIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" /> */}
178152
</div>
179-
<div className="min-w-0 flex-1 py-1 pl-5 text-sm text-gray-500 sm:py-3">
180-
<span className="font-medium text-gray-900">Rated 5 stars</span> by over{' '}
181-
<span className="font-medium text-rose-500">500 beta users</span>
153+
<div className="min-w-0 inline py-1 text-sm text-gray-500 sm:py-3">
154+
<StarIcon className="h-5 w-5 mb-1 mr-2 text-yellow-400 inline" aria-hidden="true" />
155+
<span className="font-medium text-gray-900"> Starred on GitHub</span> by over{' '}
156+
<span className="font-medium text-rose-500">1,700 users</span>
157+
<StarIcon className="h-5 w-5 ml-2 mb-1 text-yellow-400 inline" aria-hidden="true" />
182158
</div>
183159
</div>
184160
</div>
@@ -223,230 +199,11 @@ export default function LandingPage() {
223199
</div>
224200
</div>
225201

226-
{/* Testimonial/stats section */}
227-
<div className="relative mt-20">
228-
<div className="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:items-start lg:gap-24 lg:px-8">
229-
<div className="relative sm:py-16 lg:py-0">
230-
<div aria-hidden="true" className="hidden sm:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-screen">
231-
<div className="absolute inset-y-0 right-1/2 w-full rounded-r-3xl bg-gray-50 lg:right-72" />
232-
<svg
233-
className="absolute top-8 left-1/2 -ml-3 lg:-right-8 lg:left-auto lg:top-12"
234-
width={404}
235-
height={392}
236-
fill="none"
237-
viewBox="0 0 404 392"
238-
>
239-
<defs>
240-
<pattern
241-
id="02f20b47-fd69-4224-a62a-4c9de5c763f7"
242-
x={0}
243-
y={0}
244-
width={20}
245-
height={20}
246-
patternUnits="userSpaceOnUse"
247-
>
248-
<rect x={0} y={0} width={4} height={4} className="text-gray-200" fill="currentColor" />
249-
</pattern>
250-
</defs>
251-
<rect width={404} height={392} fill="url(#02f20b47-fd69-4224-a62a-4c9de5c763f7)" />
252-
</svg>
253-
</div>
254-
<div className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:px-0 lg:py-20">
255-
{/* Testimonial card*/}
256-
<div className="relative overflow-hidden rounded-2xl pt-64 pb-10 shadow-xl">
257-
<img
258-
className="absolute inset-0 h-full w-full object-cover"
259-
src="https://images.unsplash.com/photo-1521510895919-46920266ddb3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&fp-x=0.5&fp-y=0.6&fp-z=3&width=1440&height=1440&sat=-100"
260-
alt=""
261-
/>
262-
<div className="absolute inset-0 bg-rose-500 mix-blend-multiply" />
263-
<div className="absolute inset-0 bg-gradient-to-t from-rose-600 via-rose-600 opacity-90" />
264-
<div className="relative px-8">
265-
<div>
266-
<img
267-
className="h-12"
268-
src="https://tailwindui.com/img/logos/workcation.svg?color=white"
269-
alt="Workcation"
270-
/>
271-
</div>
272-
<blockquote className="mt-8">
273-
<div className="relative text-lg font-medium text-white md:flex-grow">
274-
<svg
275-
className="absolute top-0 left-0 h-8 w-8 -translate-x-3 -translate-y-2 transform text-rose-400"
276-
fill="currentColor"
277-
viewBox="0 0 32 32"
278-
aria-hidden="true"
279-
>
280-
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
281-
</svg>
282-
<p className="relative">
283-
Tincidunt integer commodo, cursus etiam aliquam neque, et. Consectetur pretium in volutpat,
284-
diam. Montes, magna cursus nulla feugiat dignissim id lobortis amet.
285-
</p>
286-
</div>
287-
288-
<footer className="mt-4">
289-
<p className="text-base font-semibold text-rose-200">Sarah Williams, CEO at Workcation</p>
290-
</footer>
291-
</blockquote>
292-
</div>
293-
</div>
294-
</div>
295-
</div>
296-
297-
<div className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0">
298-
{/* Content area */}
299-
<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>
303-
<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>
320-
</div>
321-
</div>
202+
<div className="relative mt-20">
203+
<TeamSection />
204+
</div>
322205

323-
{/* 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>
339-
</div>
340-
</div>
341-
</div>
342206

343-
{/* Logo cloud section */}
344-
<div className="mt-32">
345-
<div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
346-
<div className="lg:grid lg:grid-cols-2 lg:items-center lg:gap-24">
347-
<div>
348-
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
349-
Backed by world-renowned investors
350-
</h2>
351-
<p className="mt-6 max-w-3xl text-lg leading-7 text-gray-500">
352-
Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque
353-
tristique pellentesque. Blandit amet, sed aenean erat arcu morbi. Cursus faucibus nunc nisl netus
354-
morbi vel porttitor vitae ut. Amet vitae fames senectus vitae.
355-
</p>
356-
<div className="mt-6">
357-
<a href="#" className="text-base font-medium text-rose-500">
358-
Meet our investors and advisors&nbsp&rarr;
359-
</a>
360-
</div>
361-
</div>
362-
<div className="mt-12 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-0 lg:grid-cols-2">
363-
{logos.map((logo) => (
364-
<div key={logo.name} className="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
365-
<img className="max-h-12" src={logo.url} alt={logo.name} />
366-
</div>
367-
))}
368-
</div>
369-
</div>
370-
</div>
371-
</div>
372-
373-
{/* CTA section */}
374-
<div className="relative mt-24 sm:mt-32 sm:py-16">
375-
<div aria-hidden="true" className="hidden sm:block">
376-
<div className="absolute inset-y-0 left-0 w-1/2 rounded-r-3xl bg-gray-50" />
377-
<svg className="absolute top-8 left-1/2 -ml-3" width={404} height={392} fill="none" viewBox="0 0 404 392">
378-
<defs>
379-
<pattern
380-
id="8228f071-bcee-4ec8-905a-2a059a2cc4fb"
381-
x={0}
382-
y={0}
383-
width={20}
384-
height={20}
385-
patternUnits="userSpaceOnUse"
386-
>
387-
<rect x={0} y={0} width={4} height={4} className="text-gray-200" fill="currentColor" />
388-
</pattern>
389-
</defs>
390-
<rect width={404} height={392} fill="url(#8228f071-bcee-4ec8-905a-2a059a2cc4fb)" />
391-
</svg>
392-
</div>
393-
<div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
394-
<div className="relative overflow-hidden rounded-2xl bg-rose-500 px-6 py-10 shadow-xl sm:px-12 sm:py-20">
395-
<div aria-hidden="true" className="absolute inset-0 -mt-72 sm:-mt-32 md:mt-0">
396-
<svg
397-
className="absolute inset-0 h-full w-full"
398-
preserveAspectRatio="xMidYMid slice"
399-
xmlns="http://www.w3.org/2000/svg"
400-
fill="none"
401-
viewBox="0 0 1463 360"
402-
>
403-
<path
404-
className="text-rose-400 text-opacity-40"
405-
fill="currentColor"
406-
d="M-82.673 72l1761.849 472.086-134.327 501.315-1761.85-472.086z"
407-
/>
408-
<path
409-
className="text-rose-600 text-opacity-40"
410-
fill="currentColor"
411-
d="M-217.088 544.086L1544.761 72l134.327 501.316-1761.849 472.086z"
412-
/>
413-
</svg>
414-
</div>
415-
<div className="relative">
416-
<div className="sm:text-center">
417-
<h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
418-
Get notified when we&rsquo;re launching.
419-
</h2>
420-
<p className="mx-auto mt-6 max-w-2xl text-lg text-rose-100">
421-
Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque
422-
tristique pellentesque.
423-
</p>
424-
</div>
425-
<form action="#" className="mt-12 sm:mx-auto sm:flex sm:max-w-lg">
426-
<div className="min-w-0 flex-1">
427-
<label htmlFor="cta-email" className="sr-only">
428-
Email address
429-
</label>
430-
<input
431-
id="cta-email"
432-
type="email"
433-
className="block w-full rounded-md border border-transparent px-5 py-3 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500"
434-
placeholder="Enter your email"
435-
/>
436-
</div>
437-
<div className="mt-4 sm:mt-0 sm:ml-3">
438-
<button
439-
type="submit"
440-
className="block w-full rounded-md border border-transparent bg-gray-900 px-5 py-3 text-base font-medium text-white shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500 sm:px-10"
441-
>
442-
Notify me
443-
</button>
444-
</div>
445-
</form>
446-
</div>
447-
</div>
448-
</div>
449-
</div>
450207
</main>
451208

452209
{/* Footer section */}

‎www/src/pages/components/Merge.js

Whitespace-only changes.

0 commit comments

Comments
 (0)