[V0_FILE]typescript:file="app/actions/waitlist.ts" isMerged="true" 'use server' import { z } from 'zod' import { Resend } from 'resend' import { EmailTemplate } from '../components/email-template' import { redis } from '../lib/redis' const schema = z.object({ email: z.string().email('Invalid email address'), }) export async function joinWaitlist(prevState: any, formData: FormData) { try { const resend = new Resend(process.env.RESEND_API_KEY) const email = formData.get('email') if (!email) { return { success: false, message: 'Email is required' } } const result = schema.safeParse({ email }) if (!result.success) { return { success: false, message: result.error.errors[0].message } } // Store email in Upstash Redis await redis.sadd('waitlist_emails', email.toString()) // Send welcome email using Resend const { data, error } = await resend.emails.send({ from: 'Acme ', to: email.toString(), subject: 'Welcome to Our Waitlist!', html: EmailTemplate({ email: email.toString() }), }) if (error) { console.error('Error sending email:', error) return { success: false, message: 'Failed to join waitlist. Please try again.' } } const count = await getWaitlistCount() return { success: true, message: 'You have been added to the waitlist! Check your email for confirmation.', count } } catch (error) { console.error('Error:', error) return { success: false, message: 'An unexpected error occurred. Please try again.' } } } export async function getWaitlistCount() { try { const count = await redis.scard('waitlist_emails') return count } catch (error) { return 0 } } [V0_FILE]typescriptreact:file="app/components/email-template.tsx" isMerged="true" interface EmailTemplateProps { email: string } export function EmailTemplate({ email }: EmailTemplateProps) { return ` Welcome to Our Waitlist

Welcome to Our Waitlist!

Thank you for joining our waitlist. We've received your email address (${email}) and will keep you updated on our progress.

We're working hard to create something amazing and can't wait to share it with you!

Best regards,

The Team

` } [V0_FILE]typescript:file="app/lib/redis.ts" isMerged="true" import { Redis } from '@upstash/redis' export const redis = new Redis({ url: process.env.UPSTASH_REDIS_REST_URL!, token: process.env.UPSTASH_REDIS_REST_TOKEN!, }) [V0_FILE]typescriptreact:file="app/components/ui/toast.tsx" isMerged="true" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from 'lucide-react' import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-xl border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, } ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return ( ) }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="app/components/icons/instagram-icon.tsx" isMoved="true" isMovedFrom="app/components/instagram-icon.tsx" isMerged="true" export function InstagramIcon(props: React.SVGProps) { return ( ) } [V0_FILE]typescriptreact:file="app/components/icons/discord-icon.tsx" isMoved="true" isMovedFrom="app/components/discord-icon.tsx" isMerged="true" export function DiscordIcon(props: React.SVGProps) { return ( ) } [V0_FILE]typescriptreact:file="app/components/icons/facebook-icon.tsx" isMoved="true" isMovedFrom="app/components/facebook-icon.tsx" isMerged="true" export function FacebookIcon(props: React.SVGProps) { return ( ) } [V0_FILE]typescriptreact:file="app/components/icons/linkedin-icon.tsx" isMoved="true" isMovedFrom="app/components/linkedin-icon.tsx" isMerged="true" export function LinkedInIcon(props: React.SVGProps) { return ( ) } [V0_FILE]typescriptreact:file="app/components/waitlist-form.tsx" isMerged="true" 'use client' import { useState, useEffect } from 'react' import { useActionState } from 'react' import { joinWaitlist } from '../actions/waitlist' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Loader2 } from 'lucide-react' import { useToast } from "@/components/ui/use-toast" interface WaitlistFormProps { onSuccess: (count: number) => void; } export function WaitlistForm({ onSuccess }: WaitlistFormProps) { const [state, formAction, isPending] = useActionState(joinWaitlist, null) const [email, setEmail] = useState('') const { toast } = useToast() useEffect(() => { if (state?.success) { toast({ title: "Success!", description: state.message, duration: 5000, }) if (state.count) { onSuccess(state.count) } setEmail('') } else if (state?.success === false) { toast({ title: "Error", description: state.message, variant: "destructive", duration: 5000, }) } }, [state, toast, onSuccess]) const handleSubmit = async (formData: FormData) => { await formAction(formData) } return ( ) } [V0_FILE]typescriptreact:file="app/components/avatar.tsx" isMerged="true" interface AvatarProps { initials: string; index: number; } export function Avatar({ initials, index }: AvatarProps) { const colors = [ 'bg-purple-600', // First avatar 'bg-blue-600', // Second avatar 'bg-blue-700', // Third avatar ]; return (

{initials}

) } [V0_FILE]typescriptreact:file="app/components/icons/x-icon.tsx" isMerged="true" export function XIcon(props: React.SVGProps) { return ( ) } [V0_FILE]typescriptreact:file="app/components/waitlist-signup.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { getWaitlistCount } from "../actions/waitlist" import { XIcon } from "./icons/x-icon" import { InstagramIcon } from "./icons/instagram-icon" import { DiscordIcon } from "./icons/discord-icon" import { FacebookIcon } from "./icons/facebook-icon" import { LinkedInIcon } from "./icons/linkedin-icon" import { Avatar } from "./avatar" import { SocialIcon } from "./social-icon" import { WaitlistForm } from "./waitlist-form" export function WaitlistSignup() { const [waitlistCount, setWaitlistCount] = useState(0) useEffect(() => { getWaitlistCount().then((count) => setWaitlistCount(count + 100)) }, []) const handleSuccess = (count: number) => { setWaitlistCount(count + 100) } return (

Join Our Product Launch Waitlist

Be part of something truly extraordinary. Join thousands of others already gaining early access to our revolutionary new product.

{waitlistCount}+ people on the waitlist

} /> } /> } /> } /> } />

) } [V0_FILE]typescriptreact:file="app/components/social-icon.tsx" isEdit="true" isQuickEdit="true" import type React from "react" interface SocialIconProps { href: string "aria-label": string icon: React.ReactNode target?: string rel?: string } export function SocialIcon({ href, "aria-label": ariaLabel, icon, target, rel }: SocialIconProps) { return ( {icon} ) } [V0_FILE]typescriptreact:file="app/components/animated-element.tsx" isDeleted="true" isEdit="true" ...deleted... [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { WaitlistSignup } from "./components/waitlist-signup" import { Toaster } from "@/components/ui/toaster" const backgroundStyle = ` .bg-pattern { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; z-index: 1; } .content { position: relative; z-index: 2; } ` export default function Home() { return (

) }

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This