zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add tailwind prettier and some clean up

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-03-26 22:03:08 +01:00
parent d0079c8dc3
commit 44c66dbed4
118 changed files with 355 additions and 2045 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/public/src/app/(static)/layout.tsx
View File

@@ -9,7 +9,7 @@ export default function Layout({ children }: Props) {
<>
<Navbar darkText />
<div
className="opacity-50 w-full h-screen text-blue-950 bg-[radial-gradient(circle_at_2px_2px,#D9DEF6_2px,transparent_0)] absolute top-0 left-0 right-0 z-0"
className="absolute left-0 right-0 top-0 z-0 h-screen w-full bg-[radial-gradient(circle_at_2px_2px,#D9DEF6_2px,transparent_0)] text-blue-950 opacity-50"
style={{
backgroundSize: '70px 70px',
}}

12
apps/public/src/app/copy.tsx
View File

@@ -7,7 +7,7 @@ interface Props {
export function Lead({ children, className }: Props) {
return (
<p className={cn('text-xl md:text-2xl font-light', className)}>
<p className={cn('text-xl font-light md:text-2xl', className)}>
{children}
</p>
);
@@ -15,7 +15,7 @@ export function Lead({ children, className }: Props) {
export function Lead2({ children, className }: Props) {
return (
<p className={cn('text-lg md:text-xl font-light', className)}>{children}</p>
<p className={cn('text-lg font-light md:text-xl', className)}>{children}</p>
);
}
@@ -27,7 +27,7 @@ export function Heading1({ children, className }: Props) {
return (
<h1
className={cn(
'text-4xl md:text-5xl font-bold text-slate-900 !leading-tight font-serif',
'font-serif text-4xl font-bold !leading-tight text-slate-900 md:text-5xl',
className
)}
>
@@ -40,7 +40,7 @@ export function Heading2({ children, className }: Props) {
return (
<h2
className={cn(
'text-4xl md:text-5xl font-bold text-slate-900 font-serif',
'font-serif text-4xl font-bold text-slate-900 md:text-5xl',
className
)}
>
@@ -53,7 +53,7 @@ export function Heading3({ children, className }: Props) {
return (
<h3
className={cn(
'text-2xl md:text-3xl font-bold text-slate-900 font-serif',
'font-serif text-2xl font-bold text-slate-900 md:text-3xl',
className
)}
>
@@ -66,7 +66,7 @@ export function Heading4({ children, className }: Props) {
return (
<h3
className={cn(
'text-xl md:text-2xl font-bold text-slate-900 font-serif',
'font-serif text-xl font-bold text-slate-900 md:text-2xl',
className
)}
>

26
apps/public/src/app/features.tsx
View File

@@ -59,21 +59,21 @@ const features: FeatureItem[] = [
Create beautiful charts and graphs to visualize your data and share
them with your team.
</p>
<div className="flex gap-2 flex-wrap">
<div className="border border-border px-3 py-1 rounded">
<div className="flex flex-wrap gap-2">
<div className="rounded border border-border px-3 py-1">
✅ Linear
</div>
<div className="border border-border px-3 py-1 rounded">✅ Area</div>
<div className="border border-border px-3 py-1 rounded">✅ Bar</div>
<div className="border border-border px-3 py-1 rounded">✅ Map</div>
<div className="border border-border px-3 py-1 rounded">✅ Pie</div>
<div className="border border-border px-3 py-1 rounded">
<div className="rounded border border-border px-3 py-1">✅ Area</div>
<div className="rounded border border-border px-3 py-1">✅ Bar</div>
<div className="rounded border border-border px-3 py-1">✅ Map</div>
<div className="rounded border border-border px-3 py-1">✅ Pie</div>
<div className="rounded border border-border px-3 py-1">
✅ Funnels
</div>
<div className="border border-border px-3 py-1 rounded">
<div className="rounded border border-border px-3 py-1">
✅ Histogram
</div>
<div className="border border-border px-3 py-1 rounded">
<div className="rounded border border-border px-3 py-1">
✅ Metrics
</div>
</div>
@@ -119,14 +119,14 @@ export function Feature({
even,
}: FeatureItem & { even: boolean; children: React.ReactNode }) {
return (
<section className={cn('py-16 group', className)}>
<section className={cn('group py-16', className)}>
<div
className={cn(
'container flex min-h-[300px] items-center gap-16 justify-between max-md:flex-col-reverse',
'container flex min-h-[300px] items-center justify-between gap-16 max-md:flex-col-reverse',
!even && 'md:flex-row-reverse'
)}
>
<div className="flex flex-col w-full">
<div className="flex w-full flex-col">
<Heading3 className="mb-2">{title}</Heading3>
<div className="prose-xl">{children}</div>
</div>
@@ -136,7 +136,7 @@ export function Feature({
alt={title}
width={600}
height={400}
className="border-8 border-black/5 rounded-xl w-full max-w-xl group-hover:rotate-1 group-hover:scale-[101%] transition-transform duration-500"
className="w-full max-w-xl rounded-xl border-8 border-black/5 transition-transform duration-500 group-hover:rotate-1 group-hover:scale-[101%]"
/>
</div>
</div>

20
apps/public/src/app/footer.tsx
View File

@@ -7,20 +7,20 @@ import { JoinWaitlist } from './join-waitlist';
export default function Footer() {
return (
<footer className="bg-blue-darker text-white relative mt-40 relative">
<div className="inset-0 absolute h-full w-full bg-[radial-gradient(circle,rgba(255,255,255,0.2)_0%,rgba(255,255,255,0)_100%)]"></div>
<div className="relative container flex flex-col items-center text-center">
<footer className="bg-blue-darker relative relative mt-40 text-white">
<div className="absolute inset-0 h-full w-full bg-[radial-gradient(circle,rgba(255,255,255,0.2)_0%,rgba(255,255,255,0)_100%)]"></div>
<div className="container relative flex flex-col items-center text-center">
<div className="my-24">
<Heading2 className="text-white mb-2">Get early access</Heading2>
<Heading2 className="mb-2 text-white">Get early access</Heading2>
<Lead2>Ready to set your analytics free? Get on our waitlist.</Lead2>
<div className="mt-8">
<JoinWaitlist className="text-white bg-white/20 border-white/30 focus:ring-white" />
<JoinWaitlist className="border-white/30 bg-white/20 text-white focus:ring-white" />
</div>
</div>
<div className="overflow-hidden rounded-xl">
<div className="p-2 bg-white/20">
<div className="bg-white/20 p-2">
<Image
src="/demo-2/1.png"
width={1080}
@@ -31,13 +31,13 @@ export default function Footer() {
</div>
</div>
</div>
<div className="-mt-8 relative z-10">
<div className="relative z-10 -mt-8">
<div className="h-px w-full bg-[radial-gradient(circle,rgba(255,255,255,0.7)_0%,rgba(255,255,255,0.7)_50%,rgba(255,255,255,0)_100%)]"></div>
<div className="p-4 bg-blue-darker">
<div className="bg-blue-darker p-4">
<div className="container">
<div className="flex flex-col gap-4 md:flex-row md:justify-between md:items-center text-sm">
<div className="flex flex-col gap-4 text-sm md:flex-row md:items-center md:justify-between">
<Logo />
<div className="flex flex-col md:flex-row gap-4">
<div className="flex flex-col gap-4 md:flex-row">
<Link className="hover:underline" href="/terms">
Terms and Conditions
</Link>

10
apps/public/src/app/hero.tsx
View File

@@ -6,8 +6,8 @@ export function Hero() {
return (
<div className="relative overflow-hidden">
{/* <div className="bg-blue-50 w-2/5 h-full absolute top-0 right-0"></div> */}
<div className="container md:h-screen min-h-[700px] flex flex-col md:flex-row items-center relative max-md:pt-32 gap-4 md:gap-8">
<div className="flex-1 lg:min-w-[400px] sm:min-w-[350px] max-md:text-center">
<div className="container relative flex min-h-[700px] flex-col items-center gap-4 max-md:pt-32 md:h-screen md:flex-row md:gap-8">
<div className="flex-1 max-md:text-center sm:min-w-[350px] lg:min-w-[400px]">
<Heading1 className="mb-4 text-slate-950">
An open-source
<br />
@@ -20,11 +20,11 @@ export function Hero() {
<JoinWaitlistHero />
<SocialProofServer className="mt-6" />
</div>
<div className="mt-16 md:pt-16 w-full">
<div className="bg-black/5 md:p-2 rounded-2xl h-[max(90vh,650px)] flex">
<div className="mt-16 w-full md:pt-16">
<div className="flex h-[max(90vh,650px)] rounded-2xl bg-black/5 md:p-2">
<iframe
src="https://dashboard.openpanel.dev/share/overview/ZQsEhG"
className="w-full h-full rounded-xl h-[max(90vh,650px)]"
className="h-[max(90vh,650px)] h-full w-full rounded-xl"
title="Openpanel Dashboard"
scrolling="no"
/>

2
apps/public/src/app/join-waitlist-hero.tsx
View File

@@ -65,7 +65,7 @@ export function JoinWaitlistHero({ className }: JoinWaitlistProps) {
<input
placeholder="Enter your email"
className={cn(
'border border-slate-100 rounded-md shadow-sm bg-white h-12 w-full px-4 outline-none focus:ring-1 ring-black text-blue-darker',
'text-blue-darker h-12 w-full rounded-md border border-slate-100 bg-white px-4 shadow-sm outline-none ring-black focus:ring-1',
className
)}
value={value}

2
apps/public/src/app/join-waitlist.tsx
View File

@@ -65,7 +65,7 @@ export function JoinWaitlist({ className }: JoinWaitlistProps) {
<input
placeholder="Enter your email"
className={cn(
'border border-slate-100 rounded-md shadow-sm bg-white h-12 w-full px-4 outline-none focus:ring-1 ring-black text-blue-darker',
'text-blue-darker h-12 w-full rounded-md border border-slate-100 bg-white px-4 shadow-sm outline-none ring-black focus:ring-1',
className
)}
value={value}

2
apps/public/src/app/layout.tsx
View File

@@ -40,7 +40,7 @@ export default function RootLayout({
<html lang="en" className="light">
<body
className={cn(
'min-h-screen antialiased grainy text-slate-900 font-sans',
'grainy min-h-screen font-sans text-slate-900 antialiased',
head.variable,
body.variable
)}

4
apps/public/src/app/navbar.tsx
View File

@@ -15,9 +15,9 @@ export function Navbar({ darkText = false, className }: Props) {
const textColor = darkText ? 'text-blue-dark' : 'text-white';
return (
<div
className={cn('absolute top-0 left-0 right-0 z-10', textColor, className)}
className={cn('absolute left-0 right-0 top-0 z-10', textColor, className)}
>
<div className="container flex justify-between items-center py-4">
<div className="container flex items-center justify-between py-4">
<Logo className="max-sm:[&_span]:hidden" />
<nav className="flex gap-4">
{pathname !== '/' && <Link href="/">Home</Link>}

16
apps/public/src/app/page.tsx
View File

@@ -14,9 +14,9 @@ export default function Page() {
return (
<div>
<Hero />
<div className="py-24 bg-gradient-to-bl from-blue-600 to-blue-800">
<div className="bg-gradient-to-bl from-blue-600 to-blue-800 py-24">
<div className="container">
<Heading2 className="md:text-5xl mb-2 leading-none text-white">
<Heading2 className="mb-2 leading-none text-white md:text-5xl">
Analytics should be easy
<br />
and powerful
@@ -32,7 +32,7 @@ export default function Page() {
variant={'outline'}
>
Check out the demo
<ExternalLinkIcon className="w-4 h-4 ml-2" />
<ExternalLinkIcon className="ml-2 h-4 w-4" />
</ALink>
</div>
</div>
@@ -44,8 +44,8 @@ export default function Page() {
<Pricing />
<div className="container mt-40">
<div className="flex flex-col md:flex-row gap-8">
<div className="mb-4 md:w-1/2 flex-shrink-0 relative">
<div className="flex flex-col gap-8 md:flex-row">
<div className="relative mb-4 flex-shrink-0 md:w-1/2">
<Heading2>Another analytic tool? Really?</Heading2>
{/* <SirenIcon
strokeWidth={0.5}
@@ -53,8 +53,8 @@ export default function Page() {
className="opacity-10 absolute -rotate-12 -left-20 -top-10"
/> */}
</div>
<div className="flex flex-col gap-4 max-w-3xl">
<h3 className="text-lg font-bold text-blue-dark">TL;DR</h3>
<div className="flex max-w-3xl flex-col gap-4">
<h3 className="text-blue-dark text-lg font-bold">TL;DR</h3>
<Paragraph>
Our open-source analytic library fills a crucial gap by combining
the strengths of Mixpanel's powerful features with Plausible's
@@ -67,7 +67,7 @@ export default function Page() {
and transparency for users of all project sizes.
</Paragraph>
<h3 className="text-lg font-bold text-blue-dark mt-12">The why</h3>
<h3 className="text-blue-dark mt-12 text-lg font-bold">The why</h3>
<Paragraph>
Our open-source analytic library emerged from a clear need within
the analytics community. While platforms like Mixpanel offer

10
apps/public/src/app/pricing.tsx
View File

@@ -16,7 +16,7 @@ const pricing = [
export function Pricing() {
return (
<div className="bg-slate-100 py-32" id="pricing">
<div className="sm:max-w-xl md:max-w-3xl mx-auto px-4">
<div className="mx-auto px-4 sm:max-w-xl md:max-w-3xl">
<section className="flex flex-col gap-6">
<div className="flex w-full flex-col gap-4 md:max-w-[58rem]">
<Heading2>Simple, transparent pricing</Heading2>
@@ -45,20 +45,20 @@ export function Pricing() {
<CheckIcon className="mr-2 h-4 w-4" /> Yes, its that simple
</li>
</ul>
<div className="grid md:grid-cols-2 gap-6">
<div className="grid gap-6 md:grid-cols-2">
{pricing.map((item) => (
<div
key={item.price}
className="relative bg-white rounded-lg border border-blue-dark p-6 flex flex-col gap-1"
className="border-blue-dark relative flex flex-col gap-1 rounded-lg border bg-white p-6"
>
{item.hint && (
<div className="absolute top-2 right-2 bg-blue-600 text-white text-xs px-2 py-1 rounded flex gap-2 items-center">
<div className="absolute right-2 top-2 flex items-center gap-2 rounded bg-blue-600 px-2 py-1 text-xs text-white">
<StarIcon size={12} />
{item.hint}
</div>
)}
<div className="text-3xl font-bold">{item.price}</div>
<div className="text-lg flex justify-between">
<div className="flex justify-between text-lg">
<span>
{new Intl.NumberFormat('en').format(item.events)} events
</span>

12
apps/public/src/app/punch-lines.tsx
View File

@@ -128,24 +128,24 @@ const items = [
export function PunchLines() {
return (
<div className="bg-blue-darker py-32 relative">
<div className="inset-0 absolute h-full w-full bg-[radial-gradient(circle,rgba(255,255,255,0.2)_0%,rgba(255,255,255,0)_100%)]"></div>
<div className="bg-blue-darker relative py-32">
<div className="absolute inset-0 h-full w-full bg-[radial-gradient(circle,rgba(255,255,255,0.2)_0%,rgba(255,255,255,0)_100%)]"></div>
<div className="relative">
<Heading2 className="text-white text-center mb-16">
<Heading2 className="mb-16 text-center text-white">
Not convinced?
</Heading2>
<div className="container">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
{items.map((item) => {
const Icon = item.icon;
return (
<div
className="border border-border p-6 rounded-xl bg-white"
className="rounded-xl border border-border bg-white p-6"
key={item.title}
>
<div
className={cn(
'h-14 w-14 rounded-full flex items-center justify-center mb-4',
'mb-4 flex h-14 w-14 items-center justify-center rounded-full',
item.color
)}
style={{ background: item.color }}

2
apps/public/src/components/Logo.tsx
View File

@@ -10,7 +10,7 @@ export function Logo({ className }: LogoProps) {
return (
<Link
href="/"
className={cn('text-xl font-medium flex gap-2 items-center', className)}
className={cn('flex items-center gap-2 text-xl font-medium', className)}
>
<Image
src="/logo.svg"

4
apps/public/src/components/ui/button.tsx
View File

@@ -9,7 +9,7 @@ import type { LucideIcon } from 'lucide-react';
import { Loader2 } from 'lucide-react';
const buttonVariants = cva(
'flex-shrink-0 inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
'inline-flex flex-shrink-0 items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
@@ -71,7 +71,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{...props}
>
{Icon && (
<Icon className={cn('h-4 w-4 mr-2', loading && 'animate-spin')} />
<Icon className={cn('mr-2 h-4 w-4', loading && 'animate-spin')} />
)}
{children}
</Comp>

2
apps/public/src/components/ui/dialog.tsx
View File

@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-100%] md:translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-100%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full md:translate-y-[-50%]',
className
)}
{...props}