updating invoicing

packages/design-system/components/auth/auth-layout.tsx

@@ -19,9 +19,9 @@ export default function AuthLayout({
       >
         Login
       </Link>
-      <div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r">
+      <div className="relative hidden h-full flex-col bg-muted p-10 text-background lg:flex dark:border-r">
         <div className="absolute inset-0 bg-primary" />
-        <Logo className="text-white z-50" />
+        <Logo className="text-background z-50 fill-background" />
         <div className="relative z-20 mt-auto">
           <blockquote className="space-y-2">
             <p className="text-lg">

packages/design-system/components/auth/verify/verify-email.tsx

@@ -1,6 +1,5 @@
 import { ArrowRight } from 'lucide-react'
 import { Button } from '@remio/design-system/components/ui/button'
-import { VerificationFeatures } from './verification-features'
 import Link from 'next/link'
 
 export function VerifyEmail() {
@@ -22,7 +21,6 @@ export function VerifyEmail() {
             <ArrowRight className="ml-2 h-6 w-6" />
           </Link>
         </Button>
-        <VerificationFeatures />
       </div>
     </div>
   )

packages/design-system/components/dashboard/invoices/invoices-table-dropdown.tsx

@@ -6,12 +6,11 @@ import {
   DropdownMenuTrigger,
 } from '@remio/design-system/components/ui/dropdown-menu'
 import { Button } from '@remio/design-system/components/ui/button'
-import { Download, Link, MoreHorizontal, Pencil } from 'lucide-react'
+import { Download, MoreHorizontal, Pencil } from 'lucide-react'
 import InvoiceEditDialog from './invoice-edit-dialog'
 import { InvoiceWithClient } from '@remio/database'
 import getInvoice from '@remio/design-system/lib/pdf/get-invoice'
 import useUser from '@remio/design-system/hooks/use-user'
-import getInvoicePaymentLink from '@remio/design-system/lib/dashboard/invoice/get-invoice-payment-link'
 
 export default function InvoicesTableDropdown({
   invoice,
@@ -54,18 +53,6 @@ export default function InvoicesTableDropdown({
           <Download className="mr-2 h-4 w-4" />
           <span className="text-base">Download</span>
         </div>
-        <DropdownMenuSeparator className="bg-border m-0" />
-        <div
-          className="flex items-center gap-2 p-2 cursor-pointer hover:bg-border transition-colors"
-          onClick={async (e) => {
-            e.stopPropagation()
-            const url = await getInvoicePaymentLink(invoice)
-            window.open(url, '_blank')
-          }}
-        >
-          <Link className="mr-2 h-4 w-4" />
-          <span className="text-base">Payment Link</span>
-        </div>
       </DropdownMenuContent>
     </DropdownMenu>
   )

packages/design-system/components/dashboard/mediation/mediation-form.tsx

@@ -38,7 +38,6 @@ export default function MediationForm({
   onSuccess?: () => void
   setIsOpen?: (isOpen: boolean) => void
 }) {
-  console.log(mediation)
   const [attemptSubmitted, setAttemptSubmitted] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const router = useRouter()

packages/design-system/components/dashboard/settings/account/dashboard-settings-account-email-verification.tsx

@@ -10,7 +10,14 @@ export default function DashboardSettingsAccountEmailVerification() {
   const user = useUser()
   const [sent, setSent] = useState(false)
   if (!user) return null
-  return user?.emailVerified ? null : (
+  return user?.emailVerified ? (
+    <Button
+      variant="outline"
+      className="font-heading after:bg-emerald-400 px-0 text-emerald-400 w-full cursor-default"
+    >
+      Email verified
+    </Button>
+  ) : (
     <Button
       variant="outline"
       className="font-heading after:bg-red-400 px-0 text-red-400 w-full"

packages/design-system/components/site/footer/footer-data.ts

@@ -9,45 +9,18 @@ export type FooterSection = {
 }
 
 export const footerSections: FooterSection[] = [
-  {
-    title: 'Product',
-    links: [
-      { label: 'Features', href: '#' },
-      { label: 'Integrations', href: '#' },
-      { label: 'Pricing', href: '#' },
-      { label: 'Changelog', href: '#' },
-      { label: 'Docs', href: '#' },
-      { label: 'Download', href: '#' },
-    ],
-  },
   {
     title: 'Company',
     links: [
-      { label: 'About us', href: '#' },
-      { label: 'Blog', href: '#' },
-      { label: 'Careers', href: '#' },
-      { label: 'Customers', href: '#' },
-      { label: 'Brand', href: '#' },
-    ],
-  },
-  {
-    title: 'Resources',
-    links: [
-      { label: 'Startup Program', href: '#' },
-      { label: 'Community', href: '#' },
-      { label: 'Contact', href: '#' },
-      { label: 'DPA', href: '#' },
-      { label: 'Privacy Policy', href: '#' },
-      { label: 'Terms of service', href: '#' },
+      { label: 'Pricing', href: '/pricing' },
+      { label: 'Contact', href: 'mailto:[email protected]' },
     ],
   },
   {
-    title: 'Developers',
+    title: 'Policy',
     links: [
-      { label: 'API', href: '#' },
-      { label: 'Status', href: '#' },
-      { label: 'GitHub', href: '#' },
-      { label: 'Docs', href: '#' },
+      { label: 'Privacy Policy', href: '/policy' },
+      { label: 'Terms and Conditions', href: '/terms' },
     ],
   },
 ]

packages/design-system/components/site/footer/footer-social.tsx

@@ -1,34 +1,16 @@
-type SocialIconProps = {
-  href: string
-  children: React.ReactNode
-}
-
-function SocialIcon({ href, children }: SocialIconProps) {
-  return (
-    <a href={href} className="text-muted-foreground hover:text-foreground">
-      {children}
-    </a>
-  )
-}
+import { InstagramLogoIcon } from '@radix-ui/react-icons'
+import { RiFacebookBoxFill } from '@remixicon/react'
+import Link from 'next/link'
 
 export function FooterSocial() {
   return (
-    <div className="flex items-center gap-5">
-      <SocialIcon href="#">
-        <svg viewBox="0 0 438.549 438.549" className="size-5">
-          {/* GitHub icon path */}
-        </svg>
-      </SocialIcon>
-      <SocialIcon href="#">
-        <svg viewBox="0 0 248 204" className="size-5">
-          {/* Twitter icon path */}
-        </svg>
-      </SocialIcon>
-      <SocialIcon href="#">
-        <svg viewBox="0 0 28.57 20" className="size-5">
-          {/* YouTube icon path */}
-        </svg>
-      </SocialIcon>
+    <div className="flex items-center gap-4">
+      <Link href="#">
+        <InstagramLogoIcon className="size-8" />
+      </Link>
+      <Link href="#">
+        <RiFacebookBoxFill className="size-8" />
+      </Link>
     </div>
   )
 }

packages/design-system/components/site/footer/footer.tsx

@@ -1,13 +1,13 @@
 import { footerSections } from './footer-data'
-import { FooterLogo } from './footer-logo'
 import { FooterSocial } from './footer-social'
 import { FooterLinks } from './footer-links'
+import { Logo } from '../header/logo'
 
 export function Footer() {
   return (
-    <footer className="container flex flex-wrap justify-between pt-10 pb-16 mt-10 bg-background">
+    <footer className="container relative flex flex-wrap justify-between pt-10 pb-16 mt-10 bg-background overflow-hidden">
       <div className="basis-full md:basis-auto md:flex-col md:justify-start flex justify-between gap-8">
-        <FooterLogo />
+        <Logo />
         <FooterSocial />
       </div>
 

packages/design-system/components/site/header/logo-svg.tsx

@@ -0,0 +1,23 @@
+export function LogoSvg({ className }: { className?: string }) {
+  return (
+    <svg
+      enable-background="new 0 0 512.549 512.549"
+      height="512"
+      viewBox="0 0 512.549 512.549"
+      width="512"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g>
+        <path d="m100.158 425.317c-9.15 0-18.07-.95-26.69-2.75 3.56 23.47 5.37 47.23 5.4 70.97 28.29-9.41 57.12-16.29 86.23-20.59-14.73-14.46-25.86-32.26-32.37-51.74-10.54 2.72-21.46 4.11-32.57 4.11z" />
+        <path d="m379.628 421.187c-6.63 19.93-17.88 37.56-32.4 51.76 29.12 4.29 57.96 11.18 86.26 20.59.03-23.74 1.84-47.49 5.4-70.97-19.204 4.061-40.189 3.624-59.26-1.38z" />
+        <path d="m491.258 233.777c-25.13 40.73-67.95 69.43-117.67 75.3-39.105 42.641-101.925 60.987-157.84 45.95-12.053 23.435-31.533 43.025-55 55.35 31.864 97.842 173.24 90.133 193.71-11.242 0 .002 3.45-17.878 3.45-17.878l16.89 6.81c93.333 37.764 178.826-73.488 116.46-154.29z" />
+        <path d="m100.158 395.317c35.397.369 69.911-19.829 87.11-50.7-18.192-8.667-34.685-20.827-48.37-35.52-48.086-5.358-92.542-33.82-117.84-75.26-51.143 66.052-3.067 161.637 79.1 161.48z" />
+        <path d="m61.968 238.327c14.29 15.44 31.85 27.04 51.19 34.05-50.048-95.027 12.465-215.429 117.17-230.95-130.72-82.466-270.148 80.649-168.36 196.9z" />
+        <path d="m388.078 101.527c46.245 65.192 13.435 154.445-62.041 169.97-9.019 1.94-18.107 3.114-27.069 3.75 18.876 3.706 43.628 5.867 66.07 4.54 67.687-5.359 120.165-62.46 120.02-130.01.912-102.833-117.472-166.282-202.44-108.74 44.73 5.85 81.59 26.82 105.46 60.49z" />
+        <path d="m125.758 199.767c.58 103.81 114.682 165.195 201.38 109.4-54.53-3.677-120.534-24.902-136.81-81.01-.01-.02-.01-.04-.02-.05-10.903-31.1 3.107-66.956 31.55-82.73 63.296-34.998 131.088 36.365 92.97 97.76 57.877-8.79 83.601-73.952 48.779-124.26-29.029-40.94-74.449-49.53-107.429-49.53-70.851-.347-130.706 58.334-130.42 130.42z" />
+        <path d="m216.648 205.377c-.385 21.47 17.391 40.076 39.53 39.98 21.8 0 39.53-17.73 39.53-39.53-2.13-52.182-76.364-52.545-79.06-.45z" />
+      </g>
+    </svg>
+  )
+}

packages/design-system/components/site/header/logo.tsx

@@ -1,14 +1,17 @@
 import Link from 'next/link'
 import { cn } from '@remio/design-system/lib/utils'
-import { Flower } from 'lucide-react'
+import { LogoSvg } from './logo-svg'
 
 export function Logo({ className }: { className?: string }) {
   return (
     <Link
       href="/"
-      className={cn('flex items-center gap-2 text-foreground', className)}
+      className={cn(
+        'flex items-center gap-2 text-foreground fill-foreground',
+        className
+      )}
     >
-      <Flower />
+      <LogoSvg className="w-8 h-8" />
       <span className="font-heading text-xl font-bold mb-0.5">remio</span>
     </Link>
   )

packages/design-system/components/site/index/Index.tsx

@@ -2,8 +2,9 @@ import { Hero } from './hero/hero'
 import { SocialProof } from './social-proof/social-proof-section'
 import { Features } from './features/features-section'
 import { Testimonials } from './testimonials/testimonials'
-import { CtaSection } from './cta-section'
 import { Faq } from './faq/faq-section'
+import CtaSection from './cta-section'
+
 export default function Index() {
   return (
     <>

packages/design-system/components/site/index/cta-section.tsx

@@ -1,25 +1,26 @@
 import Link from 'next/link'
-
 import { Button } from '@remio/design-system/components/ui/button'
 
-export function CtaSection() {
+export default function CtaSection() {
   return (
-    <section className="container flex flex-col items-center gap-6 py-24 sm:gap-10">
-      <h2 className="font-heading text-3xl font-semibold tracking-tight sm:text-4xl text-balance max-w-xl sm:leading-tight text-center text-foreground">
-        Code at the speed of no-code
-      </h2>
-      <p className="text-lg text-muted-foreground text-balance max-w-lg text-center">
-        Build at the speed of no-code. Export to Next.js and Tailwind code.
-        Customize without limits.
+    <section className="container flex flex-col items-center gap-6 py-16 sm:gap-8">
+      <div className="flex flex-col gap-3">
+        <span className="text-primary font-bold text-center uppercase">
+          Get started
+        </span>
+        <h2 className="font-heading text-3xl font-semibold tracking-tight sm:text-4xl text-balance max-w-xl sm:leading-tight text-center text-foreground">
+          Streamline Your Mediation Process
+        </h2>
+      </div>
+      <p className="text-lg text-muted-foreground text-balance max-w-xl text-center">
+        Schedule mediations, manage client communications, and handle invoicing
+        all in one place.
       </p>
-      <Button
-        size="lg"
-        asChild
-        variant="gooeyLeft"
-        className="cursor-pointer border-border"
-      >
-        <Link href="#">Get Started</Link>
-      </Button>
+      <div className="flex gap-4 mt-2">
+        <Button size="lg" asChild variant="shine" className="cursor-pointer">
+          <Link href="/dashboard/mediation/new">Start today</Link>
+        </Button>
+      </div>
     </section>
   )
 }

packages/design-system/components/site/index/faq/faq-data.tsx

@@ -1,32 +1,38 @@
 export const faqData = [
   {
     value: 'item-0',
-    question: 'How is remio different than tools like Framer or Webflow?',
+    question: 'How secure is my client data?',
     answer:
-      "remio is focused on developers and it's built on top of Next.js, Tailwind CSS and Shadcn UI, the most popular tech stack for building landing pages in the React ecosystem. This means that you can export your remio website to a Next.js project and continue building your app with the same tech stack.",
+      'We take data security seriously. All data is encrypted both in transit and at rest, and we comply with industry-standard security protocols. Our platform is designed with privacy in mind, ensuring your client information remains confidential and secure.',
   },
   {
     value: 'item-1',
-    question: 'What is the learning curve for remio?',
+    question: 'Can I handle multiple parties in a single mediation case?',
     answer:
-      "remio is built on top of popular technologies that most frontend developers are familiar with. You don't have to learn new mental models or frameworks. If you're familiar with HTML, React & Tailwind, building with remio will feel like writing code but visually.",
+      'Yes! Our platform is designed to handle complex mediation cases with multiple parties. You can add multiple clients to a single case, manage their individual information, send separate communications, and generate individual invoices while keeping everything organized.',
   },
   {
     value: 'item-2',
-    question: 'Is the generated code high quality?',
+    question: 'How does the scheduling system work?',
     answer:
-      "Yes, we care a lot about giving you code that you can easily mantain and customize. If you're familiar with Next.js and Tailwind, the code will be very familiar and you'll be able to customize it with no issues.",
+      'Our smart scheduling system allows you to set your availability, send invitations to all parties, and receive confirmations automatically. It includes conflict checking, automatic time zone conversion, and integration with popular calendar apps like Google Calendar and Outlook.',
   },
   {
     value: 'item-3',
-    question: 'Do you plan to add more sections and templates?',
+    question: 'What payment methods are supported?',
     answer:
-      "Yes! We're planning to add a lot more sections and templates for landing pages & marketing websites. If you have specific requests, feel free to ask in our Discord.",
+      'We support all major credit cards through our secure Stripe integration. You can set up automatic invoicing, recurring payments, and even split billing between multiple parties. All payments are processed securely and automatically reconciled in your dashboard.',
   },
   {
     value: 'item-4',
-    question: 'Will the exported website look exactly like the preview?',
+    question: 'Can I customize documents and forms?',
     answer:
-      'Yes, the exported website will look exactly like you see in the editor and in the preview.',
+      'Absolutely! You can customize all documents, including agreement templates, intake forms, and invoices. Add your branding, modify the content to match your practice needs, and save templates for future use.',
+  },
+  {
+    value: 'item-5',
+    question: 'Is training provided for new users?',
+    answer:
+      'Yes, we provide comprehensive onboarding support including video tutorials, documentation, and live training sessions. Our support team is also available to help you get the most out of the platform.',
   },
 ] as const