mirror of
https://github.com/SrIzan10/echospace.git
synced 2026-06-06 00:56:54 +00:00
feat: landing page
This commit is contained in:
@@ -11,13 +11,10 @@ export default async function Page() {
|
||||
},
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<h1>Dashboard</h1>
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4">
|
||||
{db.map((d) => (
|
||||
<ProjectCard key={d.id} {...d} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4">
|
||||
{db.map((d) => (
|
||||
<ProjectCard key={d.id} {...d} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,104 +1,86 @@
|
||||
// https://v0.dev/r/DxCSk58T8pM
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import LandingStepper from '@/components/app/LandingStepper/LandingStepper';
|
||||
import Video from '@/components/app/Video/Video';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<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">
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
|
||||
The modern tech stack for your next(.js) project
|
||||
</h1>
|
||||
<p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
|
||||
stack is a comprehensive tech stack that includes everything you need to build and deploy your next
|
||||
web application.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-x-4">
|
||||
<Link href="https://github.com/SrIzan10/stack">
|
||||
<Button>Start right NOW!</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<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">
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
|
||||
User feedback for developers
|
||||
</h1>
|
||||
<p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
|
||||
Save time and build better products with headless but streamlined feedback
|
||||
collection
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-5">
|
||||
<Link href="/auth">
|
||||
<Button>Get started</Button>
|
||||
</Link>
|
||||
<Button variant="secondary">Learn more</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-900" id="features">
|
||||
<div className="container px-4 md:px-6">
|
||||
<div className="flex flex-col items-center justify-center space-y-4 text-center">
|
||||
<div className="space-y-2">
|
||||
<div className="inline-block rounded-lg bg-gray-100 px-3 py-1 text-sm dark:bg-gray-800">
|
||||
Key Features
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
|
||||
Everything you need to build and deploy
|
||||
</h2>
|
||||
<p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
|
||||
Stack is a comprehensive tech stack that includes everything you need to build and deploy your next
|
||||
web application.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-auto max-w-5xl items-center gap-6 py-12 lg:grid-cols-2 lg:gap-12">
|
||||
<div className="flex flex-col justify-center items-center text-center space-y-4">
|
||||
<ul className="grid gap-6">
|
||||
<li>
|
||||
<div className="grid gap-1">
|
||||
<h3 className="text-xl font-bold">Next.js</h3>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
Build server-rendered React applications with Next.js.
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-900"
|
||||
id="features"
|
||||
>
|
||||
<div className="container px-4 md:px-6">
|
||||
<div className="flex flex-col items-center justify-center space-y-4 text-center">
|
||||
<LandingStepper
|
||||
steps={[
|
||||
{
|
||||
title: 'Create a project',
|
||||
description:
|
||||
'Create a project and invite your team members (soon) to start collecting feedback',
|
||||
html: (
|
||||
<Video
|
||||
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"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Collect feedback',
|
||||
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-9x06b7lfe-hack-club-bot.vercel.app/0carbon_2_.png"
|
||||
alt="Code example"
|
||||
className="w-full rounded-lg"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Improve your product',
|
||||
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">
|
||||
No example here, but Github integrations are on the way!
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="grid gap-1">
|
||||
<h3 className="text-xl font-bold">Prisma</h3>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
Access your database with Prisma, the best way to work with databases in Ethan's opinion
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="grid gap-1">
|
||||
<h3 className="text-xl font-bold">Tailwind CSS</h3>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
Style your application with Tailwind CSS, the utility-first CSS framework.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="grid gap-1">
|
||||
<h3 className="text-xl font-bold">shadcn/ui</h3>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
The customizability of the components makes it one of the best UI libraries out there.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="grid gap-1">
|
||||
<h3 className="text-xl font-bold">Vercel</h3>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
Deploy your application to the cloud with Vercel, the serverless platform.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="grid gap-1">
|
||||
<h3 className="text-xl font-bold">Lucia</h3>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
Manage authentication with Lucia auth, the best selfhosted authentication library.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
70
src/components/app/LandingStepper/LandingStepper.tsx
Normal file
70
src/components/app/LandingStepper/LandingStepper.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
"use client"
|
||||
|
||||
import { type ReactNode, useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
interface Step {
|
||||
title: string;
|
||||
description: string;
|
||||
html: ReactNode;
|
||||
}
|
||||
|
||||
export default function LandingStepper({ steps }: { steps: Step[] }) {
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
|
||||
const nextStep = () => {
|
||||
if (currentStep < steps.length - 1) {
|
||||
setCurrentStep(currentStep + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
if (currentStep > 0) {
|
||||
setCurrentStep(currentStep - 1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<div className="flex flex-col lg:flex-row items-center lg:items-start gap-8">
|
||||
<div className="w-full lg:w-1/2 space-y-8">
|
||||
<h2 className="text-3xl font-bold">How It Works</h2>
|
||||
<div className="space-y-6">
|
||||
{steps.map((step, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center gap-4 ${
|
||||
index === currentStep ? 'opacity-100' : 'opacity-50'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center ${
|
||||
index === currentStep ? 'bg-primary text-primary-foreground' : 'bg-muted'
|
||||
}`}
|
||||
>
|
||||
{index + 1}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold">{step.title}</h3>
|
||||
<p className="text-muted-foreground">{step.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<Button onClick={prevStep} disabled={currentStep === 0} variant="outline">
|
||||
<ChevronLeft className="mr-2 h-4 w-4" /> Previous
|
||||
</Button>
|
||||
<Button onClick={nextStep} disabled={currentStep === steps.length - 1}>
|
||||
Next <ChevronRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full lg:w-1/2">
|
||||
{steps[currentStep].html}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -17,7 +17,6 @@ import MobileNavbarLinks from "../MobileNavbarLinks/MobileNavbarLinks"
|
||||
import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher"
|
||||
|
||||
export const links = [
|
||||
{ href: '/', name: 'Home' },
|
||||
{ href: '/dashboard', name: 'Dashboard' },
|
||||
{ href: '/create', name: 'Create' },
|
||||
]
|
||||
@@ -41,7 +40,7 @@ export default function Navbar() {
|
||||
<>
|
||||
<nav className="flex items-center h-16 px-4 border-b gap-3 shrink-0">
|
||||
<Link href="/" className="hidden md:flex">
|
||||
<Button>stack</Button>
|
||||
<Button>echospace</Button>
|
||||
</Link>
|
||||
<MobileNavbarLinks />
|
||||
<div className="hidden md:flex">
|
||||
|
||||
@@ -147,8 +147,6 @@ export default function ProjectSettings(project: Project) {
|
||||
<h3 className="text-sm font-medium">Example Request (cURL)</h3>
|
||||
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm block whitespace-pre overflow-x-auto">
|
||||
{stripIndents`curl -X POST \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-H "Authorization: Bearer YOUR_API_KEY" \\
|
||||
-d '${bodyGenNoIdent(project.customData)}' \\
|
||||
${url}`}
|
||||
</code>
|
||||
|
||||
35
src/components/app/Video/Video.tsx
Normal file
35
src/components/app/Video/Video.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
|
||||
interface VideoProps {
|
||||
src: string;
|
||||
autoPlay?: boolean;
|
||||
controls?: boolean;
|
||||
width?: string | number;
|
||||
height?: string | number;
|
||||
className?: string;
|
||||
muted?: boolean;
|
||||
}
|
||||
|
||||
export default function Video({
|
||||
src,
|
||||
autoPlay = false,
|
||||
controls = true,
|
||||
width = '100%',
|
||||
height = 'auto',
|
||||
className = '',
|
||||
muted = false,
|
||||
}: VideoProps) {
|
||||
return (
|
||||
<video
|
||||
src={src}
|
||||
autoPlay={autoPlay}
|
||||
controls={controls}
|
||||
width={width}
|
||||
height={height}
|
||||
className={className}
|
||||
muted={muted}
|
||||
>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user