feat: implement email sending functionality via Resend service

app/components/ui/checkbox.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+import { Check } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface CheckboxProps {
+  id?: string
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+  className?: string
+  disabled?: boolean
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  id,
+  checked = false,
+  onChange,
+  className,
+  disabled = false
+}) => {
+  const handleChange = () => {
+    if (!disabled && onChange) {
+      onChange(!checked)
+    }
+  }
+
+  return (
+    <div 
+      className={cn(
+        "relative inline-flex items-center justify-center w-5 h-5 rounded border-2 cursor-pointer transition-all duration-200",
+        checked 
+          ? "bg-primary border-primary text-primary-foreground" 
+          : "bg-background border-input hover:border-primary/50",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      )}
+      onClick={handleChange}
+    >
+      <input
+        type="checkbox"
+        id={id}
+        checked={checked}
+        onChange={() => {}} // Controlled by div onClick
+        className="sr-only"
+        disabled={disabled}
+      />
+      {checked && (
+        <Check 
+          className="w-3 h-3 text-current animate-in fade-in-0 scale-in-95 duration-200" 
+        />
+      )}
+    </div>
+  )
+} 

app/components/ui/tabs.tsx

@@ -51,4 +51,83 @@ const TabsContent = React.forwardRef<
 ))
 TabsContent.displayName = TabsPrimitive.Content.displayName
 
-export { Tabs, TabsList, TabsTrigger, TabsContent } 
+const SlidingTabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, children, ...props }, ref) => {
+  const [activeIndex, setActiveIndex] = React.useState(0)
+  
+  const combinedRef = React.useCallback((node: HTMLDivElement | null) => {
+    if (node) {
+      const updateActiveIndex = () => {
+        const triggers = node.querySelectorAll('[data-state="active"]')
+        if (triggers.length > 0) {
+          const allTriggers = node.querySelectorAll('[role="tab"]')
+          const activeElement = triggers[0]
+          const index = Array.from(allTriggers).indexOf(activeElement)
+          if (index >= 0) {
+            setActiveIndex(index)
+          }
+        }
+      }
+
+      setTimeout(updateActiveIndex, 0)
+      
+      const observer = new MutationObserver(updateActiveIndex)
+      observer.observe(node, {
+        attributes: true,
+        attributeFilter: ['data-state'],
+        subtree: true
+      })
+      
+      return () => observer.disconnect()
+    }
+    
+    if (typeof ref === 'function') {
+      ref(node)
+    }
+  }, [ref])
+  
+  const childrenArray = React.Children.toArray(children)
+  const tabCount = childrenArray.length
+  const tabWidth = `calc(${100 / tabCount}% - ${2 * (tabCount - 1) / tabCount}px)`
+  const slidePosition = `calc(${(100 / tabCount) * activeIndex}% + ${activeIndex}px)`
+  
+  return (
+    <TabsPrimitive.List
+      ref={combinedRef}
+      className={cn(
+        "relative flex w-full bg-muted rounded-lg p-1 h-auto",
+        className
+      )}
+      {...props}
+    >
+      <div 
+        className="absolute top-1 bottom-1 bg-primary rounded-md shadow-sm transition-all duration-300 ease-in-out"
+        style={{
+          width: tabWidth,
+          left: slidePosition
+        }}
+      />
+      {children}
+    </TabsPrimitive.List>
+  )
+})
+SlidingTabsList.displayName = "SlidingTabsList"
+
+const SlidingTabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "relative z-10 flex-1 h-8 gap-2 flex items-center justify-center text-sm font-medium transition-colors duration-200 rounded-md px-3 py-2 data-[state=active]:text-primary-foreground data-[state=active]:bg-transparent data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:text-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+SlidingTabsTrigger.displayName = "SlidingTabsTrigger"
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, SlidingTabsList, SlidingTabsTrigger } 

app/components/ui/textarea.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    className?: string
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }