mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
redesign landing page (fifth time :)
This commit is contained in:
Aman Varshney
@@ -4,7 +4,7 @@ import Link from "next/link";
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="relative w-full border-border border-t font-mono">
|
||||
<div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
|
||||
<div className="px-4 py-12 sm:px-6">
|
||||
<div className="mb-12 grid gap-8 md:grid-cols-3">
|
||||
<div>
|
||||
<h3 className="mb-4 flex items-center gap-2 font-semibold text-base text-foreground">
|
||||
|
||||
@@ -94,7 +94,7 @@ export default function Navbar() {
|
||||
: "border-transparent border-b bg-transparent",
|
||||
)}
|
||||
>
|
||||
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
|
||||
<Link href="/" className="flex flex-shrink-0 items-center gap-2">
|
||||
<Image
|
||||
src="/logo.svg"
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { Sponsor } from "@/lib/types";
|
||||
import { Github, Globe, Heart, Terminal } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
@@ -24,109 +25,192 @@ export default function SponsorsSection() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="relative z-10 mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
|
||||
<div className="mb-12 text-center">
|
||||
<h2 className="font-bold font-mono text-3xl text-foreground tracking-tight sm:text-4xl lg:text-5xl">
|
||||
<span className="text-primary">Our Sponsors</span>
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-xl text-lg text-muted-foreground">
|
||||
Supported by amazing organizations and individuals.
|
||||
</p>
|
||||
<div className="mb-12">
|
||||
<div className="mb-6 flex items-center gap-2">
|
||||
<Terminal className="terminal-glow h-4 w-4 text-primary" />
|
||||
<span className="terminal-glow font-bold font-mono text-lg">
|
||||
SPONSORS_DATABASE.JSON
|
||||
</span>
|
||||
<div className="h-px flex-1 bg-border" />
|
||||
<span className="font-mono text-muted-foreground text-xs">
|
||||
[{loadingSponsors ? "LOADING..." : sponsors.length} RECORDS]
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="terminal-glow text-primary">$</span>
|
||||
<span className="font-mono text-foreground">
|
||||
# Amazing organizations and individuals supporting this project
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center gap-2 text-sm">
|
||||
<span className="terminal-glow text-primary">$</span>
|
||||
<span className="font-mono text-muted-foreground">
|
||||
# Your support helps maintain and improve Better-T-Stack
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loadingSponsors ? (
|
||||
<div className="flex animate-pulse items-center justify-center py-12 text-base text-muted-foreground">
|
||||
Loading sponsors...
|
||||
<div className="terminal-block-hover rounded border border-border bg-muted/20 p-8">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="h-2 w-2 animate-pulse rounded-full bg-primary" />
|
||||
<span className="font-mono text-muted-foreground">
|
||||
LOADING_SPONSORS.EXE
|
||||
</span>
|
||||
<div className="h-2 w-2 animate-pulse rounded-full bg-primary" />
|
||||
</div>
|
||||
</div>
|
||||
) : sponsorError ? (
|
||||
<div className="flex items-center justify-center py-12 text-base text-destructive">
|
||||
{sponsorError}
|
||||
<div className="terminal-block-hover rounded border border-border bg-destructive/10 p-8">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<span className="text-destructive">✗</span>
|
||||
<span className="font-mono text-destructive">
|
||||
ERROR: {sponsorError}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : sponsors.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-base text-muted-foreground">
|
||||
No sponsors yet.
|
||||
<a
|
||||
href="https://github.com/sponsors/AmanVarshney01"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-4 inline-flex items-center gap-2 rounded-lg border border-primary bg-transparent px-4 py-2 font-mono text-primary text-sm shadow-sm transition-all hover:bg-primary hover:text-primary-foreground focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
|
||||
>
|
||||
<svg
|
||||
className="h-4 w-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
<div className="space-y-4">
|
||||
<div className="terminal-block-hover rounded border border-border bg-muted/20 p-8">
|
||||
<div className="text-center">
|
||||
<div className="mb-4 flex items-center justify-center gap-2">
|
||||
<span className="font-mono text-muted-foreground">
|
||||
NO_SPONSORS_FOUND.NULL
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 text-sm">
|
||||
<span className="terminal-glow text-primary">$</span>
|
||||
<span className="font-mono text-muted-foreground">
|
||||
# Be the first to support this project!
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="terminal-block-hover rounded border border-border bg-background p-4">
|
||||
<a
|
||||
href="https://github.com/sponsors/AmanVarshney01"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2 font-mono text-primary transition-colors hover:text-accent"
|
||||
>
|
||||
<title>Heart Icon</title>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
|
||||
/>
|
||||
</svg>
|
||||
Become a Sponsor
|
||||
</a>
|
||||
<Heart className="h-4 w-4" />
|
||||
<span>BECOME_SPONSOR.EXE</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 items-center justify-center gap-8 sm:grid-cols-3 lg:grid-cols-4 lg:gap-12">
|
||||
{sponsors.map((entry) => {
|
||||
const since = new Date(entry.createdAt).toLocaleDateString(
|
||||
undefined,
|
||||
{ year: "numeric", month: "short" },
|
||||
);
|
||||
const title = `@${entry.sponsor.login} - ${entry.sponsor.type}${
|
||||
entry.isOneTime ? " (One-time)" : " (Monthly)"
|
||||
}\nTier: ${entry.tierName || "N/A"}\nSince: ${since}`;
|
||||
return (
|
||||
<a
|
||||
key={entry.sponsor.login}
|
||||
href={entry.sponsor.websiteUrl || entry.sponsor.linkUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group flex flex-col items-center gap-2 text-center transition-opacity hover:opacity-80"
|
||||
title={title}
|
||||
>
|
||||
<Image
|
||||
src={entry.sponsor.avatarUrl}
|
||||
alt={entry.sponsor.name || entry.sponsor.login}
|
||||
width={170}
|
||||
height={170}
|
||||
className="rounded-full border-2 border-border bg-background transition-colors duration-300 group-hover:border-primary"
|
||||
unoptimized
|
||||
/>
|
||||
<span className="truncate font-medium font-mono text-foreground text-sm group-hover:text-primary">
|
||||
{entry.sponsor.name || entry.sponsor.login}
|
||||
</span>
|
||||
{entry.tierName && (
|
||||
<span className="text-muted-foreground text-xs group-hover:text-primary/80">
|
||||
{entry.tierName}
|
||||
</span>
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{sponsors.map((entry, index) => {
|
||||
const since = new Date(entry.createdAt).toLocaleDateString(
|
||||
undefined,
|
||||
{ year: "numeric", month: "short" },
|
||||
);
|
||||
return (
|
||||
<div
|
||||
key={entry.sponsor.login}
|
||||
className="terminal-block-hover rounded border border-border bg-background"
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
<div className="border-border border-b bg-muted/20 px-3 py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-primary text-xs">▶</span>
|
||||
<span className="truncate font-mono font-semibold text-xs">
|
||||
[SPONSOR_{String(index + 1).padStart(3, "0")}]
|
||||
</span>
|
||||
<div className="ml-auto flex items-center gap-2 text-muted-foreground text-xs">
|
||||
<span>{entry.isOneTime ? "ONE-TIME" : "MONTHLY"}</span>
|
||||
<span>•</span>
|
||||
<span>SINCE {since.toUpperCase()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<Image
|
||||
src={entry.sponsor.avatarUrl}
|
||||
alt={entry.sponsor.name || entry.sponsor.login}
|
||||
width={100}
|
||||
height={100}
|
||||
className="rounded border border-border bg-background transition-colors duration-300"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 space-y-2">
|
||||
<div>
|
||||
<h3 className="truncate font-mono font-semibold text-foreground text-sm">
|
||||
{entry.sponsor.name || entry.sponsor.login}
|
||||
</h3>
|
||||
{entry.tierName && (
|
||||
<p className="font-mono text-primary text-xs">
|
||||
{entry.tierName}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<a
|
||||
href={`https://github.com/${entry.sponsor.login}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group flex items-center gap-2 font-mono text-muted-foreground text-xs transition-colors hover:text-primary"
|
||||
>
|
||||
<Github className="h-4 w-4" />
|
||||
<span className="truncate">
|
||||
github.com/{entry.sponsor.login}
|
||||
</span>
|
||||
</a>
|
||||
{(entry.sponsor.websiteUrl ||
|
||||
entry.sponsor.linkUrl) && (
|
||||
<a
|
||||
href={
|
||||
entry.sponsor.websiteUrl ||
|
||||
entry.sponsor.linkUrl
|
||||
}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group flex items-center gap-2 font-mono text-muted-foreground text-xs transition-colors hover:text-primary"
|
||||
>
|
||||
<Globe className="h-4 w-4" />
|
||||
<span className="truncate">
|
||||
{(
|
||||
entry.sponsor.websiteUrl ||
|
||||
entry.sponsor.linkUrl
|
||||
)
|
||||
?.replace(/^https?:\/\//, "")
|
||||
?.replace(/\/$/, "")}
|
||||
</span>
|
||||
</a>
|
||||
)}
|
||||
|
||||
{/* <div className="flex items-center gap-2 font-mono text-muted-foreground text-xs">
|
||||
<span className="text-xs">👤</span>
|
||||
<span>{entry.sponsor.type.toUpperCase()}</span>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="terminal-block-hover rounded border border-border bg-background p-4">
|
||||
<a
|
||||
href="https://github.com/sponsors/AmanVarshney01"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2 font-mono text-primary transition-colors hover:text-accent"
|
||||
>
|
||||
<Heart className="h-4 w-4" />
|
||||
<span>SUPPORT_PROJECT.EXE</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{sponsors.length > 0 && (
|
||||
<div className="mt-16 text-center">
|
||||
<a
|
||||
href="https://github.com/sponsors/AmanVarshney01"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-primary bg-transparent px-5 py-2.5 font-mono font-semibold text-base text-primary shadow-sm transition-all duration-300 ease-in-out hover:bg-primary hover:text-primary-foreground focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<title>Heart Icon</title>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
Support Our Project!
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { ChevronLeft, ChevronRight, Terminal } from "lucide-react";
|
||||
import { motion } from "motion/react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Tweet } from "react-tweet";
|
||||
@@ -113,105 +113,130 @@ export default function Testimonials() {
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.section className="relative z-10 mx-auto w-full max-w-7xl space-y-12 px-4 py-16 sm:px-6 sm:py-24 lg:space-y-16 lg:px-8">
|
||||
<div className="text-center">
|
||||
<h2 className="font-bold font-mono text-3xl text-foreground tracking-tight sm:text-4xl lg:text-5xl">
|
||||
Loved by <span className="text-primary">Developers</span>
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-2xl font-mono text-lg text-muted-foreground leading-relaxed">
|
||||
See what people are saying about Better-T-Stack on X.
|
||||
</p>
|
||||
<div className="mb-12">
|
||||
<div className="mb-6 flex items-center gap-2">
|
||||
<Terminal className="terminal-glow h-4 w-4 text-primary" />
|
||||
<span className="terminal-glow font-bold font-mono text-lg">
|
||||
DEVELOPER_TESTIMONIALS.LOG
|
||||
</span>
|
||||
<div className="h-px flex-1 bg-border" />
|
||||
<span className="font-mono text-muted-foreground text-xs">
|
||||
[{TWEET_IDS.length} ENTRIES]
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="terminal-glow text-primary">$</span>
|
||||
<span className="font-mono text-foreground">
|
||||
# Community feedback from X (Twitter)
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center gap-2 text-sm">
|
||||
<span className="terminal-glow text-primary">$</span>
|
||||
<span className="font-mono text-muted-foreground">
|
||||
# Real developers sharing their experience
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className={cn("grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3")}
|
||||
className={cn("grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3")}
|
||||
variants={gridVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{visibleTweetIndices.map((index) => (
|
||||
<div
|
||||
{visibleTweetIndices.map((index, i) => (
|
||||
<motion.div
|
||||
key={TWEET_IDS[index]}
|
||||
className="overflow-hidden rounded-lg border border-border"
|
||||
className="terminal-block-hover overflow-hidden rounded border border-border bg-background"
|
||||
style={{ animationDelay: `${i * 50}ms` }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
>
|
||||
<Tweet id={TWEET_IDS[index]} />
|
||||
</div>
|
||||
<div className="border-border border-b bg-muted/20 px-3 py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-primary text-xs">▶</span>
|
||||
<span className="font-mono font-semibold text-xs">
|
||||
[TWEET_{String(index + 1).padStart(3, "0")}]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-0">
|
||||
<Tweet id={TWEET_IDS[index]} />
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<motion.div
|
||||
className="mt-10 flex items-center justify-between sm:mt-12"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.5, duration: 0.5 }}
|
||||
>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={handlePrev}
|
||||
disabled={currentPage === 1}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50",
|
||||
)}
|
||||
aria-label="Previous page"
|
||||
>
|
||||
<ChevronLeft className="size-4" />
|
||||
Prev
|
||||
</motion.button>
|
||||
<div className="terminal-block-hover mt-8 rounded border border-border bg-muted/20 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handlePrev}
|
||||
disabled={currentPage === 1}
|
||||
className={cn(
|
||||
"terminal-block-hover flex items-center gap-1.5 rounded border border-border bg-background px-3 py-1.5 font-mono text-xs transition-colors",
|
||||
currentPage === 1
|
||||
? "cursor-not-allowed opacity-50"
|
||||
: "hover:bg-muted/50",
|
||||
)}
|
||||
>
|
||||
<ChevronLeft className="h-3 w-3" />
|
||||
PREV
|
||||
</button>
|
||||
|
||||
<div className="hidden items-center gap-1 sm:flex">
|
||||
{paginationDots.map((page, index) =>
|
||||
typeof page === "number" ? (
|
||||
<button
|
||||
type="button"
|
||||
key={`${page}-${
|
||||
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
|
||||
index
|
||||
}`}
|
||||
onClick={() => goToPage(page)}
|
||||
className={cn(
|
||||
"flex h-8 w-8 items-center justify-center rounded-md font-medium text-sm transition-colors",
|
||||
currentPage === page
|
||||
? "bg-primary/10 text-primary"
|
||||
: "text-muted-foreground hover:bg-muted",
|
||||
)}
|
||||
aria-label={`Go to page ${page}`}
|
||||
aria-current={currentPage === page ? "page" : undefined}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
) : (
|
||||
<span
|
||||
key={`ellipsis-${
|
||||
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
|
||||
index
|
||||
}`}
|
||||
className="flex h-8 w-8 items-center justify-center text-muted-foreground text-sm"
|
||||
aria-hidden="true"
|
||||
>
|
||||
...
|
||||
</span>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
<div className="text-muted-foreground text-sm sm:hidden">
|
||||
Page {currentPage} of {totalPages}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="font-mono text-muted-foreground text-xs">
|
||||
PAGE:
|
||||
</span>
|
||||
{paginationDots.map((page, index) =>
|
||||
typeof page === "number" ? (
|
||||
<button
|
||||
type="button"
|
||||
key={`page-${page}`}
|
||||
onClick={() => goToPage(page)}
|
||||
className={cn(
|
||||
"terminal-block-hover flex h-6 w-6 items-center justify-center rounded border border-border font-mono text-xs transition-colors",
|
||||
currentPage === page
|
||||
? "terminal-glow bg-primary/20 text-primary"
|
||||
: "bg-background text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
) : (
|
||||
<span
|
||||
key={`ellipsis-${
|
||||
index < paginationDots.length / 2 ? "start" : "end"
|
||||
}`}
|
||||
className="flex h-6 w-6 items-center justify-center font-mono text-muted-foreground text-xs"
|
||||
>
|
||||
...
|
||||
</span>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={handleNext}
|
||||
disabled={currentPage === totalPages}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50",
|
||||
)}
|
||||
aria-label="Next page"
|
||||
>
|
||||
Next
|
||||
<ChevronRight className="size-4" />
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleNext}
|
||||
disabled={currentPage === totalPages}
|
||||
className={cn(
|
||||
"terminal-block-hover flex items-center gap-1.5 rounded border border-border bg-background px-3 py-1.5 font-mono text-xs transition-colors",
|
||||
currentPage === totalPages
|
||||
? "cursor-not-allowed opacity-50"
|
||||
: "hover:bg-muted/50",
|
||||
)}
|
||||
>
|
||||
NEXT
|
||||
<ChevronRight className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,20 @@
|
||||
"use client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { TECH_OPTIONS } from "@/lib/constant";
|
||||
import { cn } from "@/lib/utils";
|
||||
import discordLogo from "@/public/icon/discord.svg";
|
||||
import { Github, Star, Terminal } from "lucide-react";
|
||||
import {
|
||||
Check,
|
||||
ChevronRight,
|
||||
Copy,
|
||||
Github,
|
||||
Star,
|
||||
Terminal,
|
||||
} from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import CodeContainer from "./_components/code-container";
|
||||
import Footer from "./_components/footer";
|
||||
import PackageIcon from "./_components/icons";
|
||||
import Navbar from "./_components/navbar";
|
||||
import NpmPackage from "./_components/npm-package";
|
||||
import SponsorsSection from "./_components/sponsors-section";
|
||||
@@ -16,6 +23,14 @@ import Testimonials from "./_components/testimonials";
|
||||
export default function HomePage() {
|
||||
const [stars, setStars] = useState<number | null>(null);
|
||||
const [isLoadingStars, setIsLoadingStars] = useState(true);
|
||||
const [copiedCommand, setCopiedCommand] = useState<string | null>(null);
|
||||
const [selectedPM, setSelectedPM] = useState<"npm" | "pnpm" | "bun">("bun");
|
||||
|
||||
const commands = {
|
||||
npm: "npx create-better-t-stack@latest my-app",
|
||||
pnpm: "pnpm create better-t-stack@latest my-app",
|
||||
bun: "bun create better-t-stack@latest my-app",
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchStars() {
|
||||
@@ -38,6 +53,12 @@ export default function HomePage() {
|
||||
fetchStars();
|
||||
}, []);
|
||||
|
||||
const copyCommand = (command: string, packageManager: string) => {
|
||||
navigator.clipboard.writeText(command);
|
||||
setCopiedCommand(packageManager);
|
||||
setTimeout(() => setCopiedCommand(null), 2000);
|
||||
};
|
||||
|
||||
const frontendOptions = [
|
||||
...TECH_OPTIONS.webFrontend.filter((option) => option.id !== "none"),
|
||||
...TECH_OPTIONS.nativeFrontend.filter((option) => option.id !== "none"),
|
||||
@@ -110,150 +131,288 @@ export default function HomePage() {
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="terminal-scanlines min-h-screen bg-background font-mono">
|
||||
<Navbar />
|
||||
<main className="min-h-svh bg-background">
|
||||
<div className="min-h-svh">
|
||||
<div className="relative px-4 pt-32 pb-16 sm:px-6 md:px-8">
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<div>
|
||||
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-border/50 bg-muted/50 px-3 py-1">
|
||||
<Terminal className="h-4 w-4 text-primary" />
|
||||
<span className="font-medium text-sm">
|
||||
CLI Tool for Developers
|
||||
<main className="terminal-matrix-bg p-6 pt-28">
|
||||
<div className="mb-8 flex items-center justify-center">
|
||||
<div className="flex flex-wrap items-center justify-center gap-2 sm:gap-4 md:gap-6">
|
||||
<pre className="ascii-art terminal-glow text-primary text-xs leading-tight sm:text-sm">
|
||||
{`
|
||||
██████╗ ██████╗ ██╗ ██╗
|
||||
██╔══██╗██╔═══██╗██║ ██║
|
||||
██████╔╝██║ ██║██║ ██║
|
||||
██╔══██╗██║ ██║██║ ██║
|
||||
██║ ██║╚██████╔╝███████╗███████╗
|
||||
╚═╝ ╚═╝ ╚═════╝ ╚══════╝╚══════╝`}
|
||||
</pre>
|
||||
|
||||
<pre className="ascii-art terminal-glow text-primary text-xs leading-tight sm:text-sm">
|
||||
{`
|
||||
██╗ ██╗ ██████╗ ██╗ ██╗██████╗
|
||||
╚██╗ ██╔╝██╔═══██╗██║ ██║██╔══██╗
|
||||
╚████╔╝ ██║ ██║██║ ██║██████╔╝
|
||||
╚██╔╝ ██║ ██║██║ ██║██╔══██╗
|
||||
██║ ╚██████╔╝╚██████╔╝██║ ██║
|
||||
╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝`}
|
||||
</pre>
|
||||
|
||||
<pre className="ascii-art terminal-glow text-primary text-xs leading-tight sm:text-sm">
|
||||
{`
|
||||
██████╗ ██╗ ██╗███╗ ██╗
|
||||
██╔═══██╗██║ ██║████╗ ██║
|
||||
██║ ██║██║ █╗ ██║██╔██╗ ██║
|
||||
██║ ██║██║███╗██║██║╚██╗██║
|
||||
╚██████╔╝╚███╔███╔╝██║ ╚████║
|
||||
╚═════╝ ╚══╝╚══╝ ╚═╝ ╚═══╝`}
|
||||
</pre>
|
||||
|
||||
<pre className="ascii-art terminal-glow text-primary text-xs leading-tight sm:text-sm">
|
||||
{`
|
||||
███████╗████████╗ █████╗ ██████╗██╗ ██╗
|
||||
██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
|
||||
███████╗ ██║ ███████║██║ █████╔╝
|
||||
╚════██║ ██║ ██╔══██║██║ ██╔═██╗
|
||||
███████║ ██║ ██║ ██║╚██████╗██║ ██╗
|
||||
╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 text-center">
|
||||
<p className="mx-auto max-w-2xl font-mono text-lg text-muted-foreground">
|
||||
# Modern CLI for scaffolding end-to-end type-safe TypeScript
|
||||
projects
|
||||
</p>
|
||||
<p className="mx-auto mt-2 max-w-2xl font-mono text-muted-foreground text-sm">
|
||||
# Production-ready • Customizable • Best practices included
|
||||
</p>
|
||||
<NpmPackage />
|
||||
</div>
|
||||
|
||||
<div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Terminal className="terminal-glow h-4 w-4 text-primary" />
|
||||
<span className="terminal-glow font-semibold text-sm">
|
||||
QUICK_START
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center rounded border border-border bg-background p-0.5">
|
||||
{(["bun", "pnpm", "npm"] as const).map((pm) => (
|
||||
<button
|
||||
type="button"
|
||||
key={pm}
|
||||
onClick={() => setSelectedPM(pm)}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded px-2 py-1 font-mono text-xs transition-colors duration-150",
|
||||
selectedPM === pm
|
||||
? "terminal-glow bg-primary/20 text-primary"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
<PackageIcon pm={pm} className="h-3 w-3" />
|
||||
{pm.toUpperCase()}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between rounded border border-border bg-background p-3">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="terminal-glow text-primary">$</span>
|
||||
<span className="font-mono text-foreground">
|
||||
{commands[selectedPM]}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => copyCommand(commands[selectedPM], selectedPM)}
|
||||
className="terminal-block-hover flex items-center gap-1 rounded border border-border bg-muted/20 px-2 py-1 text-xs hover:bg-muted/50"
|
||||
>
|
||||
{copiedCommand === selectedPM ? (
|
||||
<Check className="h-3 w-3 text-primary" />
|
||||
) : (
|
||||
<Copy className="h-3 w-3" />
|
||||
)}
|
||||
{copiedCommand === selectedPM ? "COPIED!" : "COPY"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-12 grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<Link href="/new">
|
||||
<div className="group terminal-block-hover cursor-pointer rounded border border-border bg-background p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<ChevronRight className="terminal-glow h-4 w-4 text-primary" />
|
||||
<span className="font-mono font-semibold">
|
||||
STACK_BUILDER.EXE
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-2 font-mono text-muted-foreground text-sm">
|
||||
[EXEC] Interactive configuration wizard
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="https://github.com/amanvarshney01/create-better-t-stack"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className="group terminal-block-hover cursor-pointer rounded border border-border bg-background p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Github className="terminal-glow h-4 w-4 text-primary" />
|
||||
<span className="font-mono font-semibold">
|
||||
GITHUB_REPO.GIT
|
||||
</span>
|
||||
</div>
|
||||
{stars !== null && !isLoadingStars && (
|
||||
<div className="flex items-center gap-1 rounded border border-border bg-muted/30 px-2 py-1 font-mono text-xs">
|
||||
<Star className="h-3 w-3 text-accent" />
|
||||
{stars}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h1 className="font-bold text-5xl tracking-tight sm:text-6xl md:text-7xl lg:text-8xl">
|
||||
<span className="text-foreground">Roll Your Own</span>
|
||||
<br />
|
||||
<span className="text-primary">Stack</span>
|
||||
</h1>
|
||||
|
||||
<p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground sm:text-xl">
|
||||
A modern CLI tool for scaffolding end-to-end type-safe
|
||||
TypeScript projects with best practices and customizable
|
||||
configurations.
|
||||
<p className="mt-2 font-mono text-muted-foreground text-sm">
|
||||
[LINK] Star the repository on GitHub
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<NpmPackage />
|
||||
<Link
|
||||
href="https://discord.com/invite/tMunxM5R"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className="group terminal-block-hover cursor-pointer rounded border border-border bg-background p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Image src={discordLogo} alt="discord" className="h-4 w-4" />
|
||||
<span className="font-mono font-semibold">
|
||||
DISCORD_CHAT.IRC
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-2 font-mono text-muted-foreground text-sm">
|
||||
[JOIN] Connect to developer community
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex flex-col items-center justify-center gap-4">
|
||||
<div className="flex flex-col items-center gap-3 sm:flex-row">
|
||||
<Link href="/new">
|
||||
<Button size="lg" className="w-full sm:w-auto">
|
||||
Stack Builder
|
||||
</Button>
|
||||
</Link>
|
||||
<Link
|
||||
href="https://github.com/amanvarshney01/create-better-t-stack"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="w-full hover:bg-muted/50 hover:text-foreground sm:w-auto dark:hover:text-foreground"
|
||||
disabled={isLoadingStars}
|
||||
>
|
||||
<Github className="mr-2 h-4 w-4" />
|
||||
Star on GitHub
|
||||
{stars !== null && !isLoadingStars && (
|
||||
<span className="ml-2 flex items-center gap-1 rounded bg-muted/30 px-1.5 py-0.5 text-xs">
|
||||
<Star className="h-3 w-3 text-yellow-400" />
|
||||
{stars}
|
||||
<div className="mb-12">
|
||||
<div className="mb-6 flex items-center gap-2">
|
||||
<span className="terminal-glow font-bold font-mono text-lg">
|
||||
TECH_STACK_MATRIX.DB
|
||||
</span>
|
||||
<div className="h-px flex-1 bg-border" />
|
||||
<span className="font-mono text-muted-foreground text-xs">
|
||||
[
|
||||
{techStackCategories.reduce(
|
||||
(acc, cat) => acc + cat.options.length,
|
||||
0,
|
||||
)}{" "}
|
||||
PACKAGES]
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="terminal-block-hover rounded border border-border bg-background">
|
||||
<div className="border-border border-b bg-muted/20 px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Terminal className="terminal-glow h-4 w-4 text-primary" />
|
||||
<span className="font-mono font-semibold text-sm">
|
||||
/tech-stack/packages/
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 p-4">
|
||||
{techStackCategories.map((category, categoryIndex) => (
|
||||
<div key={category.category} className="space-y-2">
|
||||
<div className="directory-header flex items-center gap-2 rounded px-2 py-2 transition-colors">
|
||||
<span className="font-mono font-semibold text-foreground text-sm">
|
||||
{category.category.toLowerCase().replace(/\s+/g, "-")}/
|
||||
</span>
|
||||
<span className="font-mono text-muted-foreground text-xs">
|
||||
({category.options.length} items)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="ml-6 grid grid-cols-1 gap-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{category.options.map((option, optionIndex) => (
|
||||
<div
|
||||
key={option.id}
|
||||
className="file-browser-item file-load-animation flex items-center gap-3 rounded border border-border bg-muted/10 px-3 py-2"
|
||||
style={{
|
||||
animationDelay: `${
|
||||
categoryIndex * 100 + optionIndex * 30
|
||||
}ms`,
|
||||
}}
|
||||
>
|
||||
{option.icon !== "" && (
|
||||
<Image
|
||||
src={option.icon}
|
||||
alt={option.name}
|
||||
height={16}
|
||||
width={16}
|
||||
unoptimized
|
||||
className="file-icon h-4 w-4 flex-shrink-0"
|
||||
/>
|
||||
)}
|
||||
<span className="flex-1 truncate font-mono text-xs">
|
||||
{option.name.toLowerCase().replace(/\s+/g, "-")}.pkg
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</Link>
|
||||
<Link
|
||||
href="https://discord.com/invite/tMunxM5R"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="w-full hover:bg-muted/50 hover:text-foreground sm:w-auto dark:hover:text-foreground"
|
||||
>
|
||||
<Image
|
||||
src={discordLogo}
|
||||
alt="discord"
|
||||
className="size-4"
|
||||
/>
|
||||
Join Discord
|
||||
</Button>
|
||||
</Link>
|
||||
<span className="font-mono text-muted-foreground text-xs opacity-0 transition-opacity group-hover:opacity-100">
|
||||
-rw-r--r--
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<CodeContainer />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="border-border border-t bg-muted/20 px-4 py-2">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="font-mono text-muted-foreground">
|
||||
$ ls -la /tech-stack/packages/
|
||||
</span>
|
||||
<span className="font-mono text-muted-foreground">
|
||||
{techStackCategories.length} directories,{" "}
|
||||
{techStackCategories.reduce(
|
||||
(acc, cat) => acc + cat.options.length,
|
||||
0,
|
||||
)}{" "}
|
||||
files
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-16 sm:px-6 md:px-8">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="mb-12 text-center">
|
||||
<h2 className="font-bold text-3xl tracking-tight sm:text-4xl">
|
||||
Tech Stack Options
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-muted-foreground">
|
||||
Choose from modern, production-ready technologies
|
||||
</p>
|
||||
<div className="terminal-block-hover mb-8 rounded border border-border bg-muted/20 p-4">
|
||||
<div className="terminal-glow mb-2 font-mono font-semibold text-sm">
|
||||
SYSTEM_INFO.LOG
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-2 font-mono text-xs md:grid-cols-3">
|
||||
<div>
|
||||
<span className="text-primary">OS:</span> TypeScript_Runtime_v5.x
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-lg border">
|
||||
<table className="w-full">
|
||||
<thead className="bg-muted/50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left font-medium text-muted-foreground text-sm">
|
||||
Category
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left font-medium text-muted-foreground text-sm">
|
||||
Options
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{techStackCategories.map((category) => (
|
||||
<tr key={category.category} className="hover:bg-muted/30">
|
||||
<td className="px-6 py-4">
|
||||
<div className="font-medium">{category.category}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{category.options.map((option) => (
|
||||
<div
|
||||
key={option.id}
|
||||
className="flex items-center gap-2 rounded border bg-background px-2 py-1"
|
||||
>
|
||||
{option.icon !== "" && (
|
||||
<Image
|
||||
src={option.icon}
|
||||
alt={option.name}
|
||||
height={50}
|
||||
width={50}
|
||||
unoptimized
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
)}
|
||||
<span className="text-sm">{option.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div>
|
||||
<span className="text-primary">ARCH:</span> Full_Stack_Framework
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-primary">STATUS:</span>{" "}
|
||||
<span className="terminal-glow text-accent">READY</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Testimonials />
|
||||
<SponsorsSection />
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
.bg-noise {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
|
||||
}
|
||||
/* .bg-noise {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
|
||||
} */
|
||||
|
||||
.react-tweet-theme {
|
||||
--tweet-container-margin: 0 !important;
|
||||
@@ -274,3 +274,115 @@
|
||||
letter-spacing: var(--tracking-normal);
|
||||
}
|
||||
}
|
||||
|
||||
/* Terminal-style animations and effects */
|
||||
.terminal-cursor {
|
||||
animation: blink 1s infinite;
|
||||
border-right: 2px solid currentColor;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%,
|
||||
50% {
|
||||
border-color: transparent;
|
||||
}
|
||||
51%,
|
||||
100% {
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.terminal-glow {
|
||||
text-shadow: 0 0 5px currentColor;
|
||||
}
|
||||
|
||||
.terminal-scanlines {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.terminal-scanlines::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(255, 255, 255, 0.03) 2px,
|
||||
rgba(255, 255, 255, 0.03) 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.terminal-block-hover {
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.terminal-block-hover:hover {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 10px rgba(136, 57, 239, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* .terminal-matrix-bg {
|
||||
background: linear-gradient(90deg, transparent 98%, var(--border) 100%),
|
||||
linear-gradient(0deg, transparent 98%, var(--border) 100%);
|
||||
background-size: 20px 20px;
|
||||
} */
|
||||
|
||||
.ascii-art {
|
||||
font-family: "Courier New", monospace;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.terminal-prompt::before {
|
||||
content: "> ";
|
||||
color: var(--primary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* File browser specific styles */
|
||||
.file-browser-item {
|
||||
transition: all 0.15s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-browser-item:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-foreground);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.file-browser-item:hover .file-icon {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
.directory-header {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.directory-header:hover {
|
||||
background-color: var(--muted);
|
||||
}
|
||||
|
||||
@keyframes file-load {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.file-load-animation {
|
||||
animation: file-load 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user