Update success.tsx

pages/welcome/success.tsx

@@ -158,7 +158,7 @@ const WelcomeSuccessPage = () => {
 
  const renderGloPromoCard = () => {
  return (
- <Card className="min-w-max bg-background text-foreground">
+ <Card className="bg-background text-foreground">
  <CardHeader className="pb-0">
  <CardTitle className="text-lg font-semibold">
  <img
@@ -170,9 +170,9 @@ const WelcomeSuccessPage = () => {
  </CardHeader>
  <CardContent className="p-6">
  <CardDescription className="text-lg text-card-foreground">
- Create a saved search and schedule a cast with herocast to get 2 USDGLO. <br />
- Glo Dollar is a fiat-backed stablecoin that funds public goods. This is a limited time offer until Dec 12,
- 2024 or until our budget is depleted.
+ Create a saved search and schedule a cast to get 2 USDGLO. <br />
+ Glo Dollar is a fiat-backed stablecoin that funds public goods. <br />
+ This is a limited time offer until Dec 12, 2024 or until our budget is depleted.
  <br />
  <br />
  <a
@@ -193,42 +193,39 @@ const WelcomeSuccessPage = () => {
  <div className="w-full flex flex-col mt-24 items-center">
  <div className="space-y-6 p-10 pb-16 block text-center">
  <h2 className="text-4xl font-bold tracking-tight">Welcome to herocast ✨</h2>
- <div className="max-w-xl mx-auto">
- <Card className="min-w-max bg-background text-foreground">
- <CardContent className="p-4">
+ <div className="max-w-max mx-auto">
+ <Card className="bg-background text-foreground">
+ <CardContent className="max-w-2xl p-4">
  <div className="flex flex-col gap-y-4 text-left">
  <div>
  <span className="text-md font-semibold">
- {isCompleted
- ? 'Enjoy the full herocast experience'
- : 'Complete these tasks to get the full herocast experience'}
+ {isCompleted ? 'Enjoy herocast' : 'Complete these tasks to get the most out of herocast'}
  </span>
  </div>
  <div className="space-y-4 py-4 block">{renderOnboardingSteps()}</div>
  <Progress
  value={progressPercent}
  indicatorClassName="bg-gradient-to-r from-green-400 to-green-600 animate-pulse"
  />
- <div className="gap-x-4 mt-2 flex">
+ <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-2">
  <Link href="/search">
- <Button size="lg" type="button" variant="default">
+ <Button size="lg" type="button" variant="default" className="min-w-full px-2">
  <MagnifyingGlassIcon className="mr-1.5 mt-0.5 h-4 w-4" aria-hidden="true" />
  Create keyword alerts
  </Button>
  </Link>
  <Link href="/channels">
- <Button size="lg" type="button" variant="outline">
+ <Button size="lg" type="button" variant="outline" className="min-w-full px-2">
  <RectangleGroupIcon className="mr-1.5 mt-0.5 h-4 w-4" aria-hidden="true" />
  Pin channels
  </Button>
  </Link>
  <Button
- onClick={() => {
- onStartCasting();
- }}
+ onClick={() => onStartCasting()}
  type="button"
  variant="outline"
  size="lg"
+ className="min-w-full px-2"
  >
  <PencilSquareIcon className="mr-1.5 mt-0.5 h-4 w-4" aria-hidden="true" />
  Schedule casts