franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

make navbar and hero section responsive

Browse Source
This commit is contained in:
fgrreloaded
2025-02-18 14:55:49 +05:30
parent 37825fa73a
commit 77406361eb
9 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app/(home)/_components/BackgroundGradients.tsx
View File

@@ -16,8 +16,6 @@ const BackgroundGradients = () => {
</div> </div>
<div className="absolute inset-0 bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#1f2937_1px,transparent_1px),linear-gradient(to_bottom,#1f2937_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-[0.15]" /> <div className="absolute inset-0 bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#1f2937_1px,transparent_1px),linear-gradient(to_bottom,#1f2937_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-[0.15]" />
{/* <div className="absolute inset-0 bg-noise opacity-[0.035] dark:opacity-[0.07] mix-blend-overlay" /> */}
</div> </div>
); );
}; };

2
apps/web/src/app/(home)/_components/CodeContainer.tsx
View File

@@ -43,7 +43,7 @@ const CodeContainer = () => {
<div className="relative group"> <div className="relative group">
<div className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg backdrop-blur-lg opacity-25 transition duration-1000 group-hover:duration-200" /> <div className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg backdrop-blur-lg opacity-25 transition duration-1000 group-hover:duration-200" />
<div className="relative rounded-lg p-1 bg-slate-900/30 backdrop-blur-xl"> <div className="relative rounded-lg p-1 bg-slate-900/30 backdrop-blur-xl">
<div className="p-4 font-mono text-gray-300 text-sm bg-black/20 rounded-lg flex items-center justify-between"> <div className="sm:p-4 p-2 font-mono text-gray-300 text-sm bg-black/20 rounded-lg flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ChevronRight /> <ChevronRight />
<span className="text-base bg-clip-text text-transparent bg-gradient-to-br from-purple-400 via-pink-400 to-yellow-400"> <span className="text-base bg-clip-text text-transparent bg-gradient-to-br from-purple-400 via-pink-400 to-yellow-400">

2
apps/web/src/app/(home)/_components/CustomizableSection.tsx
View File

@@ -3,7 +3,7 @@ import CustomizableStack from "./CustomizableStack";
export default function CustomizableSection() { export default function CustomizableSection() {
return ( return (
<section className="w-full max-w-6xl mx-auto space-y-12 mt-24 relative"> <section className="w-full max-w-6xl mx-auto space-y-12 mt-24 relative z-50">
<div className="text-center space-y-6 relative z-10"> <div className="text-center space-y-6 relative z-10">
<motion.h2 <motion.h2
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}

6
apps/web/src/app/(home)/_components/CustomizableStack.tsx
View File

@@ -265,14 +265,14 @@ const CustomizableStack = () => {
<div className="absolute -top-16 left-1/2 -translate-x-1/2 z-50 w-96"> <div className="absolute -top-16 left-1/2 -translate-x-1/2 z-50 w-96">
<CommandDisplay command={generateCommand()} /> <CommandDisplay command={generateCommand()} />
</div> </div>
<div className="bg-gray-950/10 p-4 absolute top-4 right-4 z-50 w-80 rounded-xl border border-gray-800 backdrop-blur-3xl"> <div className="bg-gray-950/10 lg:p-4 p-1 absolute lg:top-4 top-2 lg:right-4 right-2 z-50 w-80 rounded-xl border border-gray-800 backdrop-blur-3xl">
<div className="text-sm text-gray-300 text-center"> <div className="lg:text-sm text-xs text-gray-300 text-center">
Select technologies from the left panel to customize your stack. The Select technologies from the left panel to customize your stack. The
graph will automatically update connections. graph will automatically update connections.
</div> </div>
</div> </div>
<div className="absolute inset-0 backdrop-blur-3xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 rounded-xl" /> <div className="absolute inset-0 backdrop-blur-3xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 rounded-xl" />
<div className="h-[600px] pl-28 relative backdrop-blur-sm bg-gray-950/50 rounded-xl overflow-hidden border border-gray-800"> <div className="h-[600px] lg:pl-28 relative backdrop-blur-sm bg-gray-950/50 rounded-xl overflow-hidden border border-gray-800">
<ReactFlow <ReactFlow
nodes={nodes} nodes={nodes}
edges={edges} edges={edges}

22
apps/web/src/app/(home)/_components/Navbar.tsx
View File

@@ -41,14 +41,14 @@ const Navbar = () => {
return ( return (
<nav <nav
className={`fixed top-0 left-0 z-[100] w-screen px-8 py-5 flex items-center justify-between transition-all duration-300 ${ className={`fixed top-0 left-0 z-[100] w-screen px-8 py-5 flex items-center sm:justify-between justify-center transition-all duration-300 ${
scrolled scrolled
? "bg-transparent border-transparent" ? "bg-transparent border-transparent"
: "bg-black/10 backdrop-blur-xl border-b border-white/10" : "sm:bg-black/10 sm:backdrop-blur-xl sm:border-b border-white/10"
}`} }`}
> >
<div <div
className={`flex items-center space-x-2 transition-opacity duration-300 ${scrolled ? "opacity-0" : "opacity-100"}`} className={`max-md:hidden flex items-center space-x-2 transition-opacity duration-300 ${scrolled ? "opacity-0" : "opacity-100"}`}
> >
<div className="bg-gradient-to-br from-purple-500 via-pink-400 to-yellow-200 w-8 h-8 rounded-lg flex items-center justify-center"> <div className="bg-gradient-to-br from-purple-500 via-pink-400 to-yellow-200 w-8 h-8 rounded-lg flex items-center justify-center">
<div className="bg-white w-4 h-4 rounded-sm" /> <div className="bg-white w-4 h-4 rounded-sm" />
@@ -58,7 +58,7 @@ const Navbar = () => {
<div <div
className={`flex items-center backdrop-blur-md bg-white/5 rounded-full border border-white/10 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${ className={`flex items-center backdrop-blur-md bg-white/5 rounded-full border border-white/10 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
scrolled ? "w-[420px]" : "w-[280px]" scrolled ? "w-[420px]" : "sm:w-[280px] w-[350px]"
}`} }`}
> >
<div <div
@@ -85,7 +85,8 @@ const Navbar = () => {
onMouseLeave={() => setActiveLink("home")} onMouseLeave={() => setActiveLink("home")}
className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative flex gap-2 items-center" className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative flex gap-2 items-center"
> >
<PackageIcon pm="github" className="w-4 h-4" /> Github <PackageIcon pm="github" className="w-4 h-4" />{" "}
<span className="max-sm:hidden">Github</span>
</Link> </Link>
<Link <Link
href="https://www.npmjs.com/package/create-better-t-stack" href="https://www.npmjs.com/package/create-better-t-stack"
@@ -97,7 +98,8 @@ const Navbar = () => {
onMouseLeave={() => setActiveLink("home")} onMouseLeave={() => setActiveLink("home")}
className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative flex gap-2 items-center" className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative flex gap-2 items-center"
> >
<PackageIcon pm="npm" className="w-4 h-4 rounded-full" /> Npm <PackageIcon pm="npm" className="w-4 h-4 rounded-full" />{" "}
<span className="max-sm:hidden">Npm</span>
</Link> </Link>
<span <span
className="text-gray-500 transition-all duration-300" className="text-gray-500 transition-all duration-300"
@@ -116,12 +118,12 @@ const Navbar = () => {
onMouseOver={() => setActiveLink("documentation")} onMouseOver={() => setActiveLink("documentation")}
onMouseLeave={() => setActiveLink("home")} onMouseLeave={() => setActiveLink("home")}
style={{ style={{
transform: scrolled ? "translateY(0)" : "translateY(-8px)", transform: scrolled ? "translateY(0)" : "sm:translateY(-8px)",
}} }}
className={` hover:text-white transition-all duration-300 py-2 px-4 rounded-full ${ className={` hover:text-white transition-all duration-300 py-2 px-4 rounded-full ${
scrolled scrolled
? "opacity-100 translate-y-0" ? "sm:opacity-100 sm:translate-y-0"
: "opacity-0 pointer-events-none" : "sm:opacity-0 sm:pointer-events-none"
}`} }`}
> >
Documentation Documentation
@@ -135,7 +137,7 @@ const Navbar = () => {
> >
<button <button
type="button" type="button"
className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50" className="relative max-sm:hidden inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
> >
<span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" /> <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
<span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-6 py-px text-sm font-medium text-white backdrop-blur-3xl"> <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-6 py-px text-sm font-medium text-white backdrop-blur-3xl">

2
apps/web/src/app/(home)/_components/TechConstellation.tsx
View File

@@ -153,7 +153,7 @@ const TechConstellation = () => {
return ( return (
<div <div
ref={containerRef} ref={containerRef}
className="relative w-full h-[90vh] bg-gradient-to-b from-transparent mt-8 via-gray-950 to-transparent overflow-hidden flex items-center justify-center" className="relative z-50 w-full h-[90vh] bg-gradient-to-b from-transparent mt-8 via-gray-950 to-transparent overflow-hidden flex items-center justify-center"
> >
<div <div
ref={centerRef} ref={centerRef}

12
apps/web/src/app/(home)/_components/TechNodeComponent.tsx
View File

@@ -20,7 +20,7 @@ interface TechNodeData {
export function TechNodeComponent({ data }: { data: TechNodeData }) { export function TechNodeComponent({ data }: { data: TechNodeData }) {
const baseStyles = ` const baseStyles = `
relative px-5 py-4 rounded-lg relative lg:px-5 lg:py-4 px-3 py-1 rounded-lg
transition-all duration-300 transition-all duration-300
border border-white/20 border border-white/20
before:content-[''] before:absolute before:left-0 before:top-0 before:w-1.5 before:h-full before:content-[''] before:absolute before:left-0 before:top-0 before:w-1.5 before:h-full
@@ -37,19 +37,19 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
<Handle <Handle
type="target" type="target"
position={Position.Top} position={Position.Top}
className="!w-1.5 !h-1.5 !bg-indigo-400/70" className="!w-2 !h-2 !bg-indigo-400/70"
/> />
)} )}
<div className={`${baseStyles} ${activeStyles} backdrop-blur-3xl`}> <div className={`${baseStyles} ${activeStyles} backdrop-blur-3xl`}>
<div className="text-white font-medium text-sm tracking-wide mb-1.5"> <div className="text-white font-medium lg:text-sm text-xs tracking-wide lg:mb-1.5 mb-1">
{data.label} {data.label}
</div> </div>
<div className="text-[11px] leading-relaxed text-white/80"> <div className="lg:text-[11px] text-[9px] leading-relaxed text-white/80">
{data.description} {data.description}
</div> </div>
{!data.isDefault && !data.isStatic && ( {!data.isDefault && !data.isStatic && (
<div className="text-[10px] text-indigo-200/70 mt-2 italic"> <div className="lg:text-[10px] text-[8px] text-indigo-200/70 mt-2 italic">
Alternative Option Alternative Option
</div> </div>
)} )}
@@ -58,7 +58,7 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
<Handle <Handle
type="source" type="source"
position={Position.Bottom} position={Position.Bottom}
className="!w-1.5 !h-1.5 !bg-indigo-400/70" className="!w-2 !h-2 !bg-indigo-400/70"
/> />
</div> </div>
); );

2
apps/web/src/app/(home)/_components/Terminal.tsx
View File

@@ -22,7 +22,7 @@ const TerminalDisplay = () => {
`; `;
return ( return (
<div className="max-w-6xl mx-auto p-6 mt-12"> <div className="max-w-6xl mx-auto p-6 mt-12 relative z-50">
<div className="bg-gray-900/30 backdrop-blur-3xl rounded-lg shadow-xl overflow-hidden"> <div className="bg-gray-900/30 backdrop-blur-3xl rounded-lg shadow-xl overflow-hidden">
<div className="bg-gray-800/30 backdrop-blur-3xl px-4 py-2 flex items-center"> <div className="bg-gray-800/30 backdrop-blur-3xl px-4 py-2 flex items-center">
<div className="flex space-x-2"> <div className="flex space-x-2">

8
apps/web/src/app/(home)/page.tsx
View File

@@ -31,7 +31,7 @@ export default function HomePage() {
<div className="flex flex-col items-center justify-center space-y-4 text-center"> <div className="flex flex-col items-center justify-center space-y-4 text-center">
<NpmPackage /> <NpmPackage />
<h1 className="text-6xl font-extrabold text-white"> <h1 className="text-6xl font-extrabold text-white">
<span className="block text-7xl bg-clip-text text-transparent bg-gradient-to-r from-purple-500 via-pink-400 to-yellow-200"> <span className="block sm:text-7xl text-6xl bg-clip-text text-transparent bg-gradient-to-r from-purple-500 via-pink-400 to-yellow-200">
Better-T Stack Better-T Stack
</span> </span>
<span className="relative"> <span className="relative">
@@ -39,7 +39,7 @@ export default function HomePage() {
</span> </span>
</h1> </h1>
<p className="text-2xl font-medium text-gray-300 max-w-2xl"> <p className="sm:text-2xl text-xl font-medium text-gray-300 max-w-2xl">
<span className="inline-block transform hover:scale-105 transition-transform duration-200"> <span className="inline-block transform hover:scale-105 transition-transform duration-200">
Scaffold Scaffold
</span>{" "} </span>{" "}
@@ -54,7 +54,7 @@ export default function HomePage() {
<ShinyText <ShinyText
text="Be the safest developer with typesafe Typescript" text="Be the safest developer with typesafe Typescript"
speed={3} speed={3}
className="text-lg" className="sm:text-lg text-md"
/> />
</div> </div>
</div> </div>
@@ -64,7 +64,7 @@ export default function HomePage() {
</div> </div>
<TerminalDisplay /> <TerminalDisplay />
<div className="w-full max-w-6xl mx-auto space-y-12 mt-12"> <div className="w-full max-w-6xl mx-auto space-y-12 mt-12 relative z-50">
<div className="text-center space-y-6 relative z-10"> <div className="text-center space-y-6 relative z-10">
<h2 className="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-slate-700 via-gray-100 to-stone-600 pb-2"> <h2 className="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-slate-700 via-gray-100 to-stone-600 pb-2">
A Symphony of Modern Tech A Symphony of Modern Tech