feat: landing page redesign

2026-06-06 00:56:54 +00:00 · 2025-03-08 22:13:54 +01:00
parent 47cb9a1ab5
commit 4a2afad7d9
4 changed files with 193 additions and 38 deletions
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
    "@radix-ui/react-dropdown-menu": "^2.1.2",
    "@radix-ui/react-label": "^2.1.1",
    "@radix-ui/react-popover": "^1.1.4",
-    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.2",
    "@radix-ui/react-tabs": "^1.1.2",
    "@radix-ui/react-tooltip": "^1.1.6",
    "arctic": "^2.3.1",
--- a/src/app/(public)/page.tsx
+++ b/src/app/(public)/page.tsx
@@ -2,8 +2,10 @@ import CloseTabNotice from '@/components/app/CloseTabNotice/CloseTabNotice';
 import LandingStepper from '@/components/app/LandingStepper/LandingStepper';
 import Video from '@/components/app/Video/Video';
 import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
 import { validateRequest } from '@/lib/auth';
-import { ArrowRight, Github } from 'lucide-react';
+import { ArrowRight, Github, Sparkles, MessageCircle, TrendingUp, Zap } from 'lucide-react';
 import Link from 'next/link';
 import React from 'react';

@@ -13,38 +15,48 @@ export default async function Home() {
    <>
      <CloseTabNotice />
      <main className="flex-1">
-        <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
-          <div className="container px-4 md:px-6">
-            <div className="flex flex-col items-center space-y-4 text-center">
-              <Link
-                href="https://cloud-jblc9ujpj-hack-club-bot.vercel.app/0kooha-2024-12-22-23-23-29.mp4"
-                target="_blank"
-              >
-                <div className="flex items-center rounded-lg px-3 py-1 text-sm bg-mantle">
-                  Now you can add team members! <ArrowRight className="ml-2 w-4 h-4" />
-                </div>
-              </Link>
-              <div className="space-y-2">
-                <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
+        {/* Hero Section */}
+        <section className="w-full py-20 md:py-32 lg:py-40 bg-gradient-to-b from-background to-muted/50 relative overflow-hidden">
+          <div className="absolute inset-0 bg-grid-white/10 [mask-image:radial-gradient(white,transparent_70%)]" />
+          <div className="container px-4 md:px-6 relative z-10">
+            <div className="flex flex-col items-center space-y-6 text-center">
+              <Badge className="px-3 py-1 text-sm bg-primary/10 text-primary hover:bg-primary/20 transition-colors">
+                <Link
+                  href="https://cloud-jblc9ujpj-hack-club-bot.vercel.app/0kooha-2024-12-22-23-23-29.mp4"
+                  target="_blank"
+                  className="flex items-center"
+                >
+                  <Sparkles className="mr-1 w-4 h-4" /> 
+                  Now you can add team members! <ArrowRight className="ml-1 w-4 h-4" />
+                </Link>
+              </Badge>
+              <div className="space-y-4 max-w-3xl">
+                <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl/none bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/60">
                  User feedback for developers
                </h1>
-                <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
+                <p className="mx-auto max-w-[700px] text-lg text-muted-foreground md:text-xl">
                  Save time and build better products with headless but streamlined feedback
-                  collection
+                  collection that transforms how you understand your users.
                </p>
              </div>
-              <div className="flex gap-5">
+              <div className="flex flex-wrap gap-4 justify-center">
                {user ? (
                  <Link href="/dashboard">
-                    <Button>Dashboard</Button>
+                    <Button size="lg" className="group">
+                      Dashboard
+                      <ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
+                    </Button>
                  </Link>
                ) : (
                  <Link href="/auth">
-                    <Button>Get started</Button>
+                    <Button size="lg" className="group">
+                      Get started
+                      <ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
+                    </Button>
                  </Link>
                )}
                <Link href="https://github.com/SrIzan10/echospace" target="_blank">
-                  <Button variant="secondary" className="flex">
+                  <Button variant="outline" size="lg" className="flex">
                    <Github className="w-4 h-4 mr-2" />
                    Open source!
                  </Button>
@@ -52,9 +64,73 @@ export default async function Home() {
              </div>
            </div>
          </div>
+          
+          {/* Abstract Decoration */}
+          <div className="absolute -bottom-48 left-0 right-0 h-96 bg-gradient-to-r from-primary/20 via-secondary/20 to-primary/20 blur-3xl opacity-50" />
        </section>
-        <section className="w-full py-12 md:py-24 lg:py-32 bg-mantle" id="features">
+
+        {/* Features Cards */}
+        <section className="w-full py-12 md:py-24">
          <div className="container px-4 md:px-6">
+            <div className="flex flex-col items-center gap-4 text-center mb-12">
+              <Badge variant="outline" className="px-3 py-1">Why choose us?</Badge>
+              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">
+                Features designed for developers
+              </h2>
+              <p className="text-muted-foreground md:text-lg max-w-[700px]">
+                Everything you need to collect, analyze and act on user feedback
+              </p>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <Card className="transition-all hover:-translate-y-1 hover:shadow-lg">
+                <CardContent className="p-6 flex flex-col items-center text-center gap-3">
+                  <div className="rounded-full bg-primary/10 p-3">
+                    <MessageCircle className="h-6 w-6 text-primary" />
+                  </div>
+                  <h3 className="font-semibold text-xl">Seamless Collection</h3>
+                  <p className="text-muted-foreground">
+                    Simple API integration lets you collect feedback without disrupting user experience
+                  </p>
+                </CardContent>
+              </Card>
+              
+              <Card className="transition-all hover:-translate-y-1 hover:shadow-lg">
+                <CardContent className="p-6 flex flex-col items-center text-center gap-3">
+                  <div className="rounded-full bg-primary/10 p-3">
+                    <TrendingUp className="h-6 w-6 text-primary" />
+                  </div>
+                  <h3 className="font-semibold text-xl">Powerful Analytics</h3>
+                  <p className="text-muted-foreground">
+                    Turn feedback into actionable insights with our intuitive analysis tools
+                  </p>
+                </CardContent>
+              </Card>
+              
+              <Card className="transition-all hover:-translate-y-1 hover:shadow-lg">
+                <CardContent className="p-6 flex flex-col items-center text-center gap-3">
+                  <div className="rounded-full bg-primary/10 p-3">
+                    <Zap className="h-6 w-6 text-primary" />
+                  </div>
+                  <h3 className="font-semibold text-xl">GitHub Integration</h3>
+                  <p className="text-muted-foreground">
+                    Automatically create issues from feedback to streamline your development workflow
+                  </p>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </section>
+
+        {/* How It Works Steps */}
+        <section className="w-full py-12 md:py-24 lg:py-32 bg-muted/50" id="features">
+          <div className="container px-4 md:px-6">
+            <div className="flex flex-col items-center gap-4 text-center mb-12">
+              <Badge className="px-3 py-1">How it works</Badge>
+              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">
+                Three simple steps to better products
+              </h2>
+            </div>
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <LandingStepper
                steps={[
@@ -67,7 +143,7 @@ export default async function Home() {
                        src="https://cloud-flt5r19p6-hack-club-bot.vercel.app/0kooha-2024-12-15-21-37-18.mp4"
                        autoPlay
                        muted
-                        className="w-full bg-gray-200 dark:bg-gray-800 rounded-lg"
+                        className="w-full bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl"
                      />
                    ),
                  },
@@ -76,12 +152,14 @@ export default async function Home() {
                    description:
                      'Make a query to the API and create your own UI to collect user feedback',
                    html: (
-                      // eslint-disable-next-line @next/next/no-img-element
-                      <img
-                        src="https://cloud-81pelcjv5-hack-club-bot.vercel.app/0carbon_3_.png"
-                        alt="Code example"
-                        className="w-full rounded-lg"
-                      />
+                      <div className="rounded-lg shadow-xl overflow-hidden">
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img
+                          src="https://cloud-81pelcjv5-hack-club-bot.vercel.app/0carbon_3_.png"
+                          alt="Code example"
+                          className="w-full rounded-lg"
+                        />
+                      </div>
                    ),
                  },
                  {
@@ -89,13 +167,18 @@ export default async function Home() {
                    description:
                      'Use the tools provided to analyze feedback and improve your product!',
                    html: (
-                      <div className="w-full h-64">
-                        <p className="flex justify-center items-center text-center">
-                          The new github integration will help you out with creating issues to
-                          improve your project. It is as simple as installing an app and selecting a
-                          repo!
-                        </p>
-                      </div>
+                      <Card className="w-full h-64 flex items-center justify-center shadow-xl">
+                        <CardContent>
+                          <div className="flex flex-col items-center gap-4">
+                            <Github className="h-10 w-10 text-primary" />
+                            <p className="text-center">
+                              The new GitHub integration will help you out with creating issues to
+                              improve your project. It is as simple as installing an app and selecting a
+                              repo!
+                            </p>
+                          </div>
+                        </CardContent>
+                      </Card>
                    ),
                  },
                ]}
@@ -103,7 +186,36 @@ export default async function Home() {
            </div>
          </div>
        </section>
+        
+        {/* CTA Section */}
+        <section className="w-full py-12 md:py-24">
+          <div className="container px-4 md:px-6">
+            <div className="flex flex-col items-center justify-center space-y-4 text-center bg-gradient-to-r from-primary/5 to-secondary/5 p-8 rounded-xl">
+              <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">Ready to get started?</h2>
+              <p className="text-muted-foreground md:text-lg max-w-[600px]">
+                Join developers who are building better products with user feedback
+              </p>
+              <div className="flex flex-wrap gap-4 justify-center">
+                {user ? (
+                  <Link href="/dashboard">
+                    <Button size="lg" className="group">
+                      Go to dashboard
+                      <ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
+                    </Button>
+                  </Link>
+                ) : (
+                  <Link href="/auth">
+                    <Button size="lg" className="group">
+                      Get started for free
+                      <ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
+                    </Button>
+                  </Link>
+                )}
+              </div>
+            </div>
+          </div>
+        </section>
      </main>
    </>
  );
-}
+}
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
--- a/yarn.lock
+++ b/yarn.lock
@@ -1639,13 +1639,20 @@
  dependencies:
    "@radix-ui/react-compose-refs" "1.1.0"

-"@radix-ui/react-slot@1.1.1", "@radix-ui/react-slot@^1.1.1":
+"@radix-ui/react-slot@1.1.1":
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.1.tgz#ab9a0ffae4027db7dc2af503c223c978706affc3"
  integrity sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==
  dependencies:
    "@radix-ui/react-compose-refs" "1.1.1"

+"@radix-ui/react-slot@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.2.tgz#daffff7b2bfe99ade63b5168407680b93c00e1c6"
+  integrity sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.1"
+
 "@radix-ui/react-tabs@^1.1.2":
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.1.2.tgz#a72da059593cba30fccb30a226d63af686b32854"