mirror of
https://github.com/lukevella/rallly.git
synced 2025-06-30 00:07:19 +02:00
Use prettier to order tailwind classes
This commit is contained in:
Luke Vella
parent
c5c2816c3d
commit
eee23c1bb5
52 changed files with 268 additions and 262 deletions
|
|
@ -8,7 +8,7 @@ import Ban from "./ban-ads.svg";
|
|||
|
||||
const Bonus: React.VoidFunctionComponent = () => {
|
||||
return (
|
||||
<div className="pt-8 pb-24 max-w-7xl mx-auto px-8">
|
||||
<div className="mx-auto max-w-7xl px-8 pt-8 pb-24">
|
||||
<h2 className="heading">Principles</h2>
|
||||
<p className="subheading">We're not like the others</p>
|
||||
<div className="grid grid-cols-4 gap-16">
|
||||
|
|
|
|||
|
|
@ -7,17 +7,17 @@ import DeviceMobile from "@/components/icons/device-mobile.svg";
|
|||
|
||||
const Features: React.VoidFunctionComponent = () => {
|
||||
return (
|
||||
<div className="py-16 px-8 max-w-7xl mx-auto">
|
||||
<div className="mx-auto max-w-7xl py-16 px-8">
|
||||
<h2 className="heading">Features</h2>
|
||||
<p className="subheading">Everything you need to get the job done</p>
|
||||
<div className="grid grid-cols-2 gap-12">
|
||||
<div className="col-span-2 md:col-span-1">
|
||||
<div className="p-3 bg-green-100/50 text-green-400 inline-block rounded-2xl mb-4">
|
||||
<Clock className="w-8 h-8" />
|
||||
<div className="mb-4 inline-block rounded-2xl bg-green-100/50 p-3 text-green-400">
|
||||
<Clock className="h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="heading-sm flex items-center">
|
||||
Time slots
|
||||
<span className="ml-2 font-normal text-sm bg-green-500 text-white rounded-full px-2 py-1">
|
||||
<span className="ml-2 rounded-full bg-green-500 px-2 py-1 text-sm font-normal text-white">
|
||||
New
|
||||
</span>
|
||||
</h3>
|
||||
|
|
@ -28,8 +28,8 @@ const Features: React.VoidFunctionComponent = () => {
|
|||
</p>
|
||||
</div>
|
||||
<div className="col-span-2 md:col-span-1">
|
||||
<div className="p-3 bg-cyan-100/50 text-cyan-400 inline-block rounded-2xl mb-4">
|
||||
<DeviceMobile className="w-8 h-8" />
|
||||
<div className="mb-4 inline-block rounded-2xl bg-cyan-100/50 p-3 text-cyan-400">
|
||||
<DeviceMobile className="h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="heading-sm">Mobile friendly design</h3>
|
||||
<p className="text">
|
||||
|
|
@ -38,8 +38,8 @@ const Features: React.VoidFunctionComponent = () => {
|
|||
</p>
|
||||
</div>
|
||||
<div className="col-span-2 md:col-span-1">
|
||||
<div className="p-3 bg-rose-100/50 text-rose-400 inline-block rounded-2xl mb-4">
|
||||
<Bell className="w-8 h-8" />
|
||||
<div className="mb-4 inline-block rounded-2xl bg-rose-100/50 p-3 text-rose-400">
|
||||
<Bell className="h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="heading-sm">Notifications</h3>
|
||||
<p className="text">
|
||||
|
|
@ -48,8 +48,8 @@ const Features: React.VoidFunctionComponent = () => {
|
|||
</p>
|
||||
</div>
|
||||
<div className="col-span-2 md:col-span-1">
|
||||
<div className="p-3 bg-yellow-100/50 text-yellow-400 inline-block rounded-2xl mb-4">
|
||||
<Chat className="w-8 h-8" />
|
||||
<div className="mb-4 inline-block rounded-2xl bg-yellow-100/50 p-3 text-yellow-400">
|
||||
<Chat className="h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="heading-sm">Comments</h3>
|
||||
<p className="text">
|
||||
|
|
|
|||
|
|
@ -12,27 +12,27 @@ const Hero: React.VoidFunctionComponent = () => {
|
|||
const names = ["Peter", "Christine", "Samantha", "Joseph"];
|
||||
|
||||
return (
|
||||
<div className="lg:flex lg:justify-between p-8 items-end max-w-7xl mx-auto">
|
||||
<div className="mx-auto max-w-7xl items-end p-8 lg:flex lg:justify-between">
|
||||
<div className="my-8 text-center lg:text-left">
|
||||
<h1 className="text-4xl sm:text-5xl font-bold">
|
||||
<h1 className="text-4xl font-bold sm:text-5xl">
|
||||
Schedule
|
||||
<br />
|
||||
<span className="text-indigo-500">group meetings</span>
|
||||
<br />
|
||||
with ease
|
||||
</h1>
|
||||
<div className="text-xl text-gray-400 mb-12">
|
||||
<div className="mb-12 text-xl text-gray-400">
|
||||
Find the right date without the back and forth.
|
||||
</div>
|
||||
<div className="space-x-3">
|
||||
<Link href="/new">
|
||||
<a className="focus:ring-2 focus:ring-indigo-200 transition-all text-white bg-indigo-500 hover:bg-indigo-500/90 active:bg-indigo-600/90 px-5 py-3 font-semibold hover:text-white hover:no-underline shadow-sm hover:shadow-md rounded-lg">
|
||||
<a className="rounded-lg bg-indigo-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-indigo-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2 focus:ring-indigo-200 active:bg-indigo-600/90">
|
||||
{t("getStarted")}
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/demo">
|
||||
<a
|
||||
className="text-white focus:ring-2 focus:ring-indigo-200 transition-all bg-slate-500 hover:bg-slate-500/90 active:bg-slate-600/90 px-5 py-3 font-semibold hover:text-white hover:no-underline shadow-sm hover:shadow-md rounded-lg"
|
||||
className="rounded-lg bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2 focus:ring-indigo-200 active:bg-slate-600/90"
|
||||
rel="nofollow"
|
||||
>
|
||||
{t("viewDemo")}
|
||||
|
|
@ -40,17 +40,17 @@ const Hero: React.VoidFunctionComponent = () => {
|
|||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden mt-16 lg:mt-0 lg:ml-24 pointer-events-none select-none h-[380px] md:flex items-end justify-center">
|
||||
<div className="pointer-events-none mt-16 hidden h-[380px] select-none items-end justify-center md:flex lg:mt-0 lg:ml-24">
|
||||
<UserAvatarProvider seed="mock" names={names}>
|
||||
<div className="inline-block relative">
|
||||
<div className="relative inline-block">
|
||||
<motion.div
|
||||
className="absolute z-20 border-4 shadow-md bg-indigo-200/10 rounded-2xl border-indigo-500 h-full"
|
||||
className="absolute z-20 h-full rounded-2xl border-4 border-indigo-500 bg-indigo-200/10 shadow-md"
|
||||
initial={{ opacity: 0, width: 100, scale: 1.2, translateX: 384 }}
|
||||
animate={{ opacity: 1, scale: 1.1 }}
|
||||
transition={{ type: "spring", delay: 1 }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bg-indigo-500 text-slate-100 py-1 px-3 rounded-full z-20 text-sm"
|
||||
className="absolute z-20 rounded-full bg-indigo-500 py-1 px-3 text-sm text-slate-100"
|
||||
initial={{
|
||||
opacity: 0,
|
||||
right: 190,
|
||||
|
|
@ -61,10 +61,10 @@ const Hero: React.VoidFunctionComponent = () => {
|
|||
transition={{ type: "spring", delay: 2 }}
|
||||
>
|
||||
Perfect! 🤩
|
||||
<ScribbleArrow className="absolute text-slate-400 -right-8 top-3" />
|
||||
<ScribbleArrow className="absolute -right-8 top-3 text-slate-400" />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className="shadow-lg rounded-lg"
|
||||
className="rounded-lg shadow-lg"
|
||||
transition={{ type: "spring", delay: 0.5 }}
|
||||
initial={{ opacity: 0, translateY: -100 }}
|
||||
animate={{ opacity: 1, translateY: 0 }}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import * as React from "react";
|
|||
const HowItWorks: React.VoidFunctionComponent = () => {
|
||||
return (
|
||||
<div className="bg-gradient-to-b from-transparent via-white to-white">
|
||||
<div className="py-16 px-8 mx-auto max-w-7xl">
|
||||
<div className="mx-auto max-w-7xl py-16 px-8">
|
||||
<h2 className="heading text-center">How it works</h2>
|
||||
<p className="subheading text-center">It's simple!</p>
|
||||
<div className="grid grid-cols-3 gap-16">
|
||||
|
|
|
|||
|
|
@ -43,15 +43,15 @@ const PollDemo: React.VoidFunctionComponent = () => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className="rounded-lg bg-white border shadow-md"
|
||||
className="rounded-lg border bg-white shadow-md"
|
||||
style={{ width: 600 }}
|
||||
>
|
||||
<div className="flex border-b shadow-sm">
|
||||
<div
|
||||
className="flex items-center pl-4 pr-2 py-4 shrink-0 font-medium"
|
||||
className="flex shrink-0 items-center py-4 pl-4 pr-2 font-medium"
|
||||
style={{ width: sidebarWidth }}
|
||||
>
|
||||
<div className="grow h-full flex items-end">
|
||||
<div className="flex h-full grow items-end">
|
||||
{t("participantCount", { count: participants.length })}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -66,7 +66,7 @@ const PollDemo: React.VoidFunctionComponent = () => {
|
|||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="py-4 text-center shrink-0 transition-colors"
|
||||
className="shrink-0 py-4 text-center transition-colors"
|
||||
style={{ width: 100 }}
|
||||
>
|
||||
<DateCard
|
||||
|
|
@ -84,7 +84,7 @@ const PollDemo: React.VoidFunctionComponent = () => {
|
|||
{participants.map((participant, i) => (
|
||||
<div className="flex h-14" key={i}>
|
||||
<div
|
||||
className="flex items-center px-4 shrink-0"
|
||||
className="flex shrink-0 items-center px-4"
|
||||
style={{ width: sidebarWidth }}
|
||||
>
|
||||
<UserAvater
|
||||
|
|
@ -101,7 +101,7 @@ const PollDemo: React.VoidFunctionComponent = () => {
|
|||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="justify-center items-center flex shrink-0"
|
||||
className="flex shrink-0 items-center justify-center"
|
||||
style={{ width: 100 }}
|
||||
>
|
||||
{participant.votes.some((vote) => vote === i) ? (
|
||||
|
|
|
|||
|
|
@ -8,15 +8,15 @@ const Stats: React.VoidFunctionComponent = () => {
|
|||
<div className="py-16">
|
||||
<h2 className="heading text-center">Stats</h2>
|
||||
<p className="subheading text-center">100,000+ polls created</p>
|
||||
<div className="flex space-x-3 justify-center">
|
||||
<div className="flex justify-center space-x-3">
|
||||
<Link href="/new">
|
||||
<a className="focus:ring-2 focus:ring-indigo-200 transition-all text-white bg-indigo-500 hover:bg-indigo-500/90 active:bg-indigo-600/90 px-5 py-3 font-semibold hover:text-white hover:no-underline shadow-sm hover:shadow-md rounded-lg">
|
||||
<a className="rounded-lg bg-indigo-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-indigo-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2 focus:ring-indigo-200 active:bg-indigo-600/90">
|
||||
{t("getStarted")}
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/demo">
|
||||
<a
|
||||
className="text-white focus:ring-2 focus:ring-indigo-200 transition-all bg-slate-500 hover:bg-slate-500/90 active:bg-slate-600/90 px-5 py-3 font-semibold hover:text-white hover:no-underline shadow-sm hover:shadow-md rounded-lg"
|
||||
className="rounded-lg bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2 focus:ring-indigo-200 active:bg-slate-600/90"
|
||||
rel="nofollow"
|
||||
>
|
||||
{t("viewDemo")}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue