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- */
24- import { ChevronRightIcon , StarIcon } from '@heroicons/react/20/solid'
1+ import { ChevronRightIcon , StarIcon } from '@heroicons/react/20/solid' ;
2+ import { string } from 'prop-types' ;
3+ import TeamSection from '../components/TeamSection' ;
4+ import Image from 'next/image' ;
255
26- const stats = [
27- { label : 'Founded' , value : '2021' } ,
28- { label : 'Employees' , value : '5' } ,
29- { label : 'Beta Users' , value : '521' } ,
30- { label : 'Raised' , value : '$25M' } ,
31- ]
32- const logos = [
33- { name : 'Transistor' , url : 'https://tailwindui.com/img/logos/transistor-logo-gray-400.svg' } ,
34- { name : 'Mirage' , url : 'https://tailwindui.com/img/logos/mirage-logo-gray-400.svg' } ,
35- { name : 'Tuple' , url : 'https://tailwindui.com/img/logos/tuple-logo-gray-400.svg' } ,
36- { name : 'Laravel' , url : 'https://tailwindui.com/img/logos/laravel-logo-gray-400.svg' } ,
37- { name : 'StaticKit' , url : 'https://tailwindui.com/img/logos/statickit-logo-gray-400.svg' } ,
38- { name : 'Workcation' , url : 'https://tailwindui.com/img/logos/workcation-logo-gray-400.svg' } ,
39- ]
40- const footerNavigation = {
41- main : [
42- { name : 'About' , href : '#' } ,
43- { name : 'Blog' , href : '#' } ,
44- { name : 'Jobs' , href : '#' } ,
45- { name : 'Press' , href : '#' } ,
46- { name : 'Accessibility' , href : '#' } ,
47- { name : 'Partners' , href : '#' } ,
48- ] ,
49- social : [
50- {
51- name : 'Facebook' ,
52- href : '#' ,
53- icon : ( props ) => (
54- < svg fill = "currentColor" viewBox = "0 0 24 24" { ...props } >
55- < path
56- fillRule = "evenodd"
57- d = "M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
58- clipRule = "evenodd"
59- />
60- </ svg >
61- ) ,
62- } ,
63- {
64- name : 'Instagram' ,
65- href : '#' ,
66- icon : ( props ) => (
67- < svg fill = "currentColor" viewBox = "0 0 24 24" { ...props } >
68- < path
69- fillRule = "evenodd"
70- d = "M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
71- clipRule = "evenodd"
72- />
73- </ svg >
74- ) ,
75- } ,
76- {
77- name : 'Twitter' ,
78- href : '#' ,
79- icon : ( props ) => (
80- < svg fill = "currentColor" viewBox = "0 0 24 24" { ...props } >
81- < path d = "M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
82- </ svg >
83- ) ,
84- } ,
85- {
86- name : 'GitHub' ,
87- href : '#' ,
88- icon : ( props ) => (
89- < svg fill = "currentColor" viewBox = "0 0 24 24" { ...props } >
90- < path
91- fillRule = "evenodd"
92- d = "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
93- clipRule = "evenodd"
94- />
95- </ svg >
96- ) ,
97- } ,
98- {
99- name : 'Dribbble' ,
100- href : '#' ,
101- icon : ( props ) => (
102- < svg fill = "currentColor" viewBox = "0 0 24 24" { ...props } >
103- < path
104- fillRule = "evenodd"
105- d = "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
106- clipRule = "evenodd"
107- />
108- </ svg >
109- ) ,
110- } ,
111- ] ,
112- }
113-
114- export default function LandingPage ( ) {
6+ export default function LandingPage ( ) : JSX . Element {
1157 return (
1168 < div className = "bg-white" >
1179 < main >
11810 { /* Hero section */ }
11911 < 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" >
12+ < 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" >
12113 < div >
12214 < div >
12315 < img
124- className = "pl-52 h-20 w-auto"
16+ className = "pl-60 h-20 w-auto"
12517 src = "https://i.imgur.com/ELBAyVb.png"
126- alt = "Your Company "
18+ alt = "Reactime "
12719 />
12820 </ div >
12921 < div className = "mt-20" >
@@ -133,7 +25,7 @@ export default function LandingPage() {
13325 What's new
13426 </ span >
13527 < span className = "inline-flex items-center space-x-1 text-sm font-medium text-rose-500" >
136- < span > Just shipped version 0.1 .0</ span >
28+ < span > Just shipped version 17.0 .0</ span >
13729 < ChevronRightIcon className = "h-5 w-5" aria-hidden = "true" />
13830 </ span >
13931 </ a >
@@ -143,7 +35,7 @@ export default function LandingPage() {
14335 A time travel debugger for modern react apps
14436 </ h1 >
14537 < 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 .
38+ A Chrome Extension that lets you rewind time and replay previous versions of your stateful React components .
14739 </ p >
14840 </ div >
14941 < form action = "#" className = "mt-12 sm:flex sm:w-full sm:max-w-lg" >
@@ -168,17 +60,15 @@ export default function LandingPage() {
16860 </ div >
16961 </ form >
17062 < 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" />
63+ < div className = "inline-flex items-center" >
64+ < div className = "flex flex-shrink-0" >
65+ { /* <StarIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" /> */ }
17866 </ 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 >
67+ < div className = "min-w-0 inline py-1 text-sm text-gray-500 sm:py-3" >
68+ < StarIcon className = "h-5 w-5 mb-1 mr-2 text-yellow-400 inline" aria-hidden = "true" />
69+ < span className = "font-medium text-gray-900" > Starred on GitHub</ span > by over{ ' ' }
70+ < span className = "font-medium text-rose-500" > 1,700 users</ span >
71+ < StarIcon className = "h-5 w-5 ml-2 mb-1 text-yellow-400 inline" aria-hidden = "true" />
18272 </ div >
18373 </ div >
18474 </ div >
@@ -223,77 +113,12 @@ export default function LandingPage() {
223113 </ div >
224114 </ div >
225115
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 >
116+ < div className = "relative mt-16" >
117+ < TeamSection />
118+ </ div >
287119
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 >
296120
121+ < < << << < HEAD
297122 < div className = "relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0" >
298123 { /* Content area */ }
299124 < div className = "pt-12 sm:pt-16 lg:pt-20" >
@@ -416,30 +241,15 @@ export default function LandingPage() {
416241 </ div >
417242 </ div >
418243 </ div >
244+ === = ===
245+ >>> > >>> master
419246 < / m a i n >
420247
421248 { /* Footer section */ }
422- < footer className = "mt-24 bg-gray-900 sm:mt-12" >
423- < div className = "mx-auto max-w-md overflow-hidden py-12 px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8" >
424- < nav className = "-mx-5 -my-2 flex flex-wrap justify-center" aria-label = "Footer" >
425- { footerNavigation . main . map ( ( item ) => (
426- < div key = { item . name } className = "px-5 py-2" >
427- < a href = { item . href } className = "text-base text-gray-400 hover:text-gray-300" >
428- { item . name }
429- </ a >
430- </ div >
431- ) ) }
432- </ nav >
433- < div className = "mt-8 flex justify-center space-x-6" >
434- { footerNavigation . social . map ( ( item ) => (
435- < a key = { item . name } href = { item . href } className = "text-gray-400 hover:text-gray-300" >
436- < span className = "sr-only" > { item . name } </ span >
437- < item . icon className = "h-6 w-6" aria-hidden = "true" />
438- </ a >
439- ) ) }
440- </ div >
249+ < footer className = "mt-8 bg-[#333333] gray-900 sm:mt-8" >
250+ < div className = "mx-auto max-w-md overflow-hidden py-3 pb-10 px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8" >
441251 < p className = "mt-8 text-center text-base text-gray-400" >
442- © 2020 Your Company, Inc. All rights reserved.
252+ © 2022 Reactime, All rights reserved.
443253 </ p >
444254 </ div >
445255 < / f o o t e r >
0 commit comments