Create Right to Trial Act components

Add components for displaying the Right to Trial Act, including headers, navigation, cards, and sections for overview, platform, access, and incentives. Implement petition signing and GitHub edit features to allow user interaction and contributions.

Took 39 seconds

Author: mikepsinn

app/dfda/right-to-trial-act/components/FloatingPetitionButton.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { SignPetitionButton } from './SignPetitionButton'
+
+export function FloatingPetitionButton() {
+  return (
+    <div className="fixed bottom-8 right-8 z-50">
+      <SignPetitionButton />
+    </div>
+  )
+} 

app/dfda/right-to-trial-act/components/GitHubEditButton.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { FaGithub } from 'react-icons/fa'
+
+export function GitHubEditButton() {
+  return (
+    <a
+      href="https://github.com/wishonia/wishonia/edit/main/content/globalSolutions/dfda/right-to-trial-act-1.md"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex items-center gap-2 px-6 py-3 text-lg font-bold
+                 bg-[#f0ebea] text-black rounded-none
+                 border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]
+                 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none
+                 transition-all duration-200
+                 focus:outline-none"
+    >
+      <FaGithub className="text-2xl" />
+      <span className="font-mono uppercase tracking-wider">
+        Make Improvements
+      </span>
+    </a>
+  )
+}

app/dfda/right-to-trial-act/components/PetitionSection.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { SignPetitionButton } from './SignPetitionButton'
+
+export function PetitionSection() {
+  return (
+    <div className="mb-16 text-center">
+      <h2 className="text-4xl font-black mb-6 font-mono text-black">Show Your Support</h2>
+      <p className="text-xl mb-8 text-black">
+        Sign the petition to support the Right to Trial Act and help end the suffering of billions of people.
+      </p>
+      <SignPetitionButton />
+    </div>
+  )
+} 

app/dfda/right-to-trial-act/components/SignPetitionButton.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { useSession, signIn } from 'next-auth/react'
+import { Button } from '@/components/ui/button'
+
+export function SignPetitionButton() {
+  const { data: session } = useSession()
+
+  const handleClick = async () => {
+    if (!session) {
+      signIn()
+      return
+    }
+    // TODO: Implement petition signing
+    console.log('Signing petition...')
+  }
+
+  return (
+    <Button 
+      onClick={handleClick}
+      className="bg-black hover:bg-gray-800 text-white font-bold py-4 px-8 text-xl
+                border-[4px] border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]
+                hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none 
+                transition-all duration-200"
+    >
+      {session ? 'Sign the Petition' : 'Sign in to Sign Petition'}
+    </Button>
+  )
+}