mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
update landing page
just messing around, if you know any good design please send a pr :(
This commit is contained in:
Aman Varshney
@@ -1,12 +1,12 @@
|
||||
"use client";
|
||||
import ShinyText from "@/app/(home)/_components/shiny-text";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { TECH_OPTIONS } from "@/lib/constant";
|
||||
import { motion } from "motion/react";
|
||||
import Link from "next/link";
|
||||
import FeatureCard from "./_components/FeatureCard";
|
||||
import CodeContainer from "./_components/code-container";
|
||||
import CustomizableSection from "./_components/customizable-section";
|
||||
import Footer from "./_components/footer";
|
||||
import Navbar from "./_components/navbar";
|
||||
import NpmPackage from "./_components/npm-package";
|
||||
import SponsorsSection from "./_components/sponsors-section";
|
||||
import Testimonials from "./_components/testimonials";
|
||||
|
||||
@@ -45,108 +45,100 @@ export default function HomePage() {
|
||||
},
|
||||
};
|
||||
|
||||
const frontendOptions = TECH_OPTIONS.webFrontend.filter(
|
||||
(option) => option.id !== "none",
|
||||
);
|
||||
const backendOptions = TECH_OPTIONS.backend.filter(
|
||||
(option) => option.id !== "none",
|
||||
);
|
||||
const runtimeOptions = TECH_OPTIONS.runtime.filter(
|
||||
(option) => option.id !== "none",
|
||||
);
|
||||
const apiLayerOptions = TECH_OPTIONS.api.filter(
|
||||
(option) => option.id !== "none",
|
||||
);
|
||||
const databaseOptions = TECH_OPTIONS.database.filter(
|
||||
(option) => option.id !== "none",
|
||||
);
|
||||
const ormOptions = TECH_OPTIONS.orm.filter((option) => option.id !== "none");
|
||||
const dbSetupOptions = TECH_OPTIONS.dbSetup.filter(
|
||||
(option) => option.id !== "none",
|
||||
);
|
||||
const addonsOptions = TECH_OPTIONS.addons.filter(
|
||||
(option) => option.id !== "none",
|
||||
);
|
||||
const examplesOptions = TECH_OPTIONS.examples.filter(
|
||||
(option) => option.id !== "none",
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<main className="flex min-h-screen flex-col items-center justify-start overflow-x-hidden bg-background px-0 pt-24 pb-10 sm:px-4 sm:pb-16 md:px-8 md:pt-28 lg:pt-32">
|
||||
<main className="flex min-h-screen flex-col items-center justify-center overflow-x-hidden bg-background px-4 pt-24 pb-10 sm:px-6 md:px-8 md:pt-28 lg:pt-32">
|
||||
<motion.div
|
||||
className="relative z-10 mx-auto mb-16 max-w-5xl text-center sm:mb-20"
|
||||
className="relative z-10 mx-auto mb-12 w-full max-w-6xl sm:mb-16"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={containerVariants}
|
||||
>
|
||||
<div className="px-1 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col items-center justify-center space-y-4 text-center sm:space-y-5">
|
||||
<div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-2 lg:gap-16">
|
||||
<motion.div
|
||||
className="mt-10 text-center lg:text-left"
|
||||
variants={itemVariants}
|
||||
>
|
||||
<motion.h1
|
||||
className="font-bold font-mono text-4xl xs:text-5xl tracking-tight sm:text-6xl md:text-7xl"
|
||||
className="font-bold font-mono text-5xl xs:text-6xl tracking-tight sm:text-7xl md:text-8xl lg:text-7xl xl:text-8xl"
|
||||
variants={itemVariants}
|
||||
>
|
||||
<span className="border-primary border-b-2 pb-1 text-foreground dark:text-primary">
|
||||
Better-T Stack
|
||||
<span className="text-foreground dark:text-primary">
|
||||
Roll Your Own Stack
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.div className="mb-1 sm:mb-2" variants={itemVariants}>
|
||||
<NpmPackage />
|
||||
</motion.div>
|
||||
|
||||
<motion.p
|
||||
className="max-w-2xl px-1 font-mono text-lg text-muted-foreground sm:text-xl"
|
||||
className="mx-auto mt-6 max-w-xl font-mono text-lg text-muted-foreground sm:text-xl lg:mx-0"
|
||||
variants={itemVariants}
|
||||
>
|
||||
A modern CLI tool for scaffolding end-to-end type-safe
|
||||
TypeScript projects with best practices and customizable
|
||||
configurations
|
||||
configurations.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
className="mx-auto mt-2 w-full max-w-3xl sm:mt-3"
|
||||
variants={itemVariants}
|
||||
className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row lg:justify-start"
|
||||
>
|
||||
<CodeContainer />
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={itemVariants}>
|
||||
<ShinyText
|
||||
<Link href="/new">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="default"
|
||||
className="w-full font-mono sm:w-auto"
|
||||
>
|
||||
Go to Stack Builder
|
||||
</Button>
|
||||
</Link>
|
||||
{/* <ShinyText
|
||||
text="Type-safe. Modern. Minimal. Fast."
|
||||
speed={3}
|
||||
className="font-mono text-muted-foreground text-xs xs:text-sm sm:text-base"
|
||||
/>
|
||||
/> */}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="w-full"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
variants={sectionVariants}
|
||||
>
|
||||
<CustomizableSection />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="relative w-full pt-10 sm:pt-16"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.5 }}
|
||||
variants={sectionVariants}
|
||||
>
|
||||
<div className="relative mx-auto max-w-5xl">
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="hidden w-1/3 items-center sm:flex">
|
||||
<div className="h-px flex-grow bg-gradient-to-r from-transparent via-primary/30 to-primary/50" />
|
||||
<div className="h-2 w-2 rounded-full bg-primary/60" />
|
||||
<motion.div className="mx-auto w-full" variants={itemVariants}>
|
||||
<CodeContainer />
|
||||
<div className="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3">
|
||||
<FeatureCard title="Frontend" options={frontendOptions} />
|
||||
<FeatureCard title="Backend" options={backendOptions} />
|
||||
<FeatureCard title="Runtime" options={runtimeOptions} />
|
||||
<FeatureCard title="API Layer" options={apiLayerOptions} />
|
||||
<FeatureCard title="Database" options={databaseOptions} />
|
||||
<FeatureCard title="ORM" options={ormOptions} />
|
||||
<FeatureCard title="Database Setup" options={dbSetupOptions} />
|
||||
<FeatureCard title="Addons" options={addonsOptions} />
|
||||
<FeatureCard title="Examples" options={examplesOptions} />
|
||||
</div>
|
||||
<div className="px-4 sm:px-6">
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-8 w-8 items-center justify-center rounded-full border border-primary/80 bg-card sm:h-9 sm:w-9",
|
||||
)}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-4 w-4 text-primary sm:h-5 sm:w-5"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<title>Code Icon</title>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden w-1/3 items-center sm:flex">
|
||||
<div className="h-2 w-2 rounded-full bg-primary/60" />
|
||||
<div className="h-px flex-grow bg-gradient-to-l from-transparent via-primary/30 to-primary/50" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 h-px w-full bg-gradient-to-r from-transparent via-primary/30 to-transparent sm:hidden" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user