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 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>
);
};

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

@@ -43,7 +43,7 @@ const CodeContainer = () => {
<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="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">
<ChevronRight />
<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() {
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">
<motion.h2
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">
<CommandDisplay command={generateCommand()} />
</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="text-sm text-gray-300 text-center">
<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="lg:text-sm text-xs text-gray-300 text-center">
Select technologies from the left panel to customize your stack. The
graph will automatically update connections.
</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="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
nodes={nodes}
edges={edges}

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

@@ -41,14 +41,14 @@ const Navbar = () => {
return (
<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
? "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
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-white w-4 h-4 rounded-sm" />
@@ -58,7 +58,7 @@ const Navbar = () => {
<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 ${
scrolled ? "w-[420px]" : "w-[280px]"
scrolled ? "w-[420px]" : "sm:w-[280px] w-[350px]"
}`}
>
<div
@@ -85,7 +85,8 @@ const Navbar = () => {
onMouseLeave={() => setActiveLink("home")}
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
href="https://www.npmjs.com/package/create-better-t-stack"
@@ -97,7 +98,8 @@ const Navbar = () => {
onMouseLeave={() => setActiveLink("home")}
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>
<span
className="text-gray-500 transition-all duration-300"
@@ -116,12 +118,12 @@ const Navbar = () => {
onMouseOver={() => setActiveLink("documentation")}
onMouseLeave={() => setActiveLink("home")}
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 ${
scrolled
? "opacity-100 translate-y-0"
: "opacity-0 pointer-events-none"
? "sm:opacity-100 sm:translate-y-0"
: "sm:opacity-0 sm:pointer-events-none"
}`}
>
Documentation
@@ -135,7 +137,7 @@ const Navbar = () => {
>
<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="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 (
<div
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
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 }) {
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
border border-white/20
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
type="target"
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="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}
</div>
<div className="text-[11px] leading-relaxed text-white/80">
<div className="lg:text-[11px] text-[9px] leading-relaxed text-white/80">
{data.description}
</div>
{!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
</div>
)}
@@ -58,7 +58,7 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
<Handle
type="source"
position={Position.Bottom}
className="!w-1.5 !h-1.5 !bg-indigo-400/70"
className="!w-2 !h-2 !bg-indigo-400/70"
/>
</div>
);

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

@@ -22,7 +22,7 @@ const TerminalDisplay = () => {
`;
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-800/30 backdrop-blur-3xl px-4 py-2 flex items-center">
<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">
<NpmPackage />
<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
</span>
<span className="relative">
@@ -39,7 +39,7 @@ export default function HomePage() {
</span>
</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">
Scaffold
</span>{" "}
@@ -54,7 +54,7 @@ export default function HomePage() {
<ShinyText
text="Be the safest developer with typesafe Typescript"
speed={3}
className="text-lg"
className="sm:text-lg text-md"
/>
</div>
</div>
@@ -64,7 +64,7 @@ export default function HomePage() {
</div>
<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">
<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