Skip to content

fix(web): pin dashboard sidebar and use real devinbox screenshot #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Rowee13 merged 1 commit into from
Apr 17, 2026
Merged

fix(web): pin dashboard sidebar and use real devinbox screenshot #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions apps/web/components/landing/BrowserFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
interface Props {
children: React.ReactNode;
url?: string;
children: React.ReactNode;
url?: string;
}

export function BrowserFrame({ children, url = 'devinbox.mydevdeck.com' }: Props) {
return (
<div className="rounded-xl overflow-hidden shadow-2xl ring-1 ring-black/5 bg-white">
<div className="flex items-center gap-2 px-4 py-3 bg-gray-100 border-b border-gray-200">
<div className="flex gap-1.5">
<div className="w-3 h-3 rounded-full bg-red-400" />
<div className="w-3 h-3 rounded-full bg-yellow-400" />
<div className="w-3 h-3 rounded-full bg-green-400" />
export function BrowserFrame({ children, url = "devinbox.mydevdeck.com" }: Props) {
return (
<div className="rounded-xl overflow-hidden shadow-lg ring-1 ring-black/5 bg-white">
<div className="flex items-center gap-2 px-4 py-3 bg-gray-100 border-b border-gray-200">
<div className="flex gap-1.5">
<div className="w-3 h-3 rounded-full bg-red-400" />
<div className="w-3 h-3 rounded-full bg-yellow-400" />
<div className="w-3 h-3 rounded-full bg-green-400" />
</div>
<div className="flex-1 mx-4">
<div className="px-3 py-1 bg-white rounded text-xs text-gray-500 text-center max-w-sm mx-auto">
{url}
</div>
</div>
</div>
<div>{children}</div>
</div>
<div className="flex-1 mx-4">
<div className="px-3 py-1 bg-white rounded text-xs text-gray-500 text-center max-w-sm mx-auto">
{url}
</div>
</div>
</div>
<div>{children}</div>
</div>
);
);
}
111 changes: 56 additions & 55 deletions apps/web/components/landing/FeatureWishlistSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,65 @@
import { fetchFeatureIdeas } from '../../lib/github';
import { FeatureWishlistItem } from './FeatureWishlistItem';
import { fetchFeatureIdeas } from "../../lib/github";
import { FeatureWishlistItem } from "./FeatureWishlistItem";

function getRepoUrl(): string {
const owner = process.env.GITHUB_REPO_OWNER || 'Rowee13';
const name = process.env.GITHUB_REPO_NAME || 'my-dev-deck';
return `https://github.com/${owner}/${name}`;
const owner = process.env.GITHUB_REPO_OWNER || "Rowee13";
const name = process.env.GITHUB_REPO_NAME || "my-dev-deck";
return `https://github.com/${owner}/${name}`;
}

export async function FeatureWishlistSection() {
const ideas = await fetchFeatureIdeas();
const repoUrl = getRepoUrl();
const submitUrl = `${repoUrl}/discussions/new?category=feature-ideas`;
const allUrl = `${repoUrl}/discussions`;
const ideas = await fetchFeatureIdeas();
const repoUrl = getRepoUrl();
const submitUrl = `${repoUrl}/discussions/new?category=feature-ideas`;
const allUrl = `${repoUrl}/discussions`;

return (
<section className="py-24 px-6 bg-white">
<div className="max-w-5xl mx-auto">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
What&apos;s next?
</h2>
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
A community-driven wishlist. Upvote the ideas you want, or submit your own on GitHub.
</p>
</div>
return (
<section className="py-24 px-6 bg-white">
<div className="max-w-5xl mx-auto">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
What&apos;s next?
</h2>
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
A community-driven wishlist. Upvote the ideas you want, or submit your own
on GitHub.
</p>
</div>

{ideas.length > 0 ? (
<div className="grid md:grid-cols-2 gap-4 mb-10">
{ideas.map((idea) => (
<FeatureWishlistItem key={idea.id} idea={idea} />
))}
</div>
) : (
<div className="text-center py-12 mb-10 bg-slate-50 rounded-xl border border-gray-200">
<p className="text-gray-600 mb-2">No ideas yet.</p>
<p className="text-sm text-gray-500">
Be the first to share what you&apos;d like to see added to the deck.
</p>
</div>
)}
{ideas.length > 0 ? (
<div className="grid md:grid-cols-2 gap-4 mb-10">
{ideas.map((idea) => (
<FeatureWishlistItem key={idea.id} idea={idea} />
))}
</div>
) : (
<div className="text-center py-12 mb-10 bg-slate-50 rounded-xl border border-gray-200">
<p className="text-gray-600 mb-2">No ideas yet.</p>
<p className="text-sm text-gray-500">
Be the first to share what you&apos;d like to see added to the deck.
</p>
</div>
)}

<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<a
href={submitUrl}
target="_blank"
rel="noopener noreferrer"
className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 hover:scale-105 transition-all"
>
Submit an idea
</a>
<a
href={allUrl}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-gray-600 hover:text-blue-600 transition-colors"
>
See all ideas on GitHub →
</a>
</div>
</div>
</section>
);
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<a
href={submitUrl}
target="_blank"
rel="noopener noreferrer"
className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 hover:scale-105 transition-all"
>
Submit an idea
</a>
<a
href={allUrl}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-gray-600 hover:text-blue-600 transition-colors"
>
See all ideas on GitHub →
</a>
</div>
</div>
</section>
);
}
124 changes: 63 additions & 61 deletions apps/web/components/landing/ToolShowcaseSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,70 @@
'use client';
"use client";

import { motion } from 'framer-motion';
import Image from 'next/image';
import Link from 'next/link';
import { BrowserFrame } from './BrowserFrame';
import { motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { BrowserFrame } from "./BrowserFrame";

export function ToolShowcaseSection() {
return (
<section className="py-24 px-6 bg-white">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.5 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
Tools in the deck
</h2>
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
A growing collection of utilities for everyday development work.
</p>
</motion.div>
return (
<section className="py-24 px-6 bg-white">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.5 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
Tools in the deck
</h2>
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
A growing collection of utilities for everyday development work.
</p>
</motion.div>

<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.5 }}
className="grid md:grid-cols-2 gap-12 items-center bg-slate-50 rounded-2xl p-8 md:p-12 hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
>
<div>
<div className="inline-block px-3 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full mb-4">
Tool #1
</div>
<h3 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">
DevInbox
</h3>
<p className="text-gray-600 mb-6 leading-relaxed">
A self-hosted email testing inbox. Route your app&apos;s transactional emails to DevInbox during development, inspect message content, headers, and attachments, and verify user signup flows without spamming real mailboxes.
</p>
<Link
href="/login"
className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 font-medium"
>
Try DevInbox
<span aria-hidden="true">→</span>
</Link>
</div>
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.5 }}
className="grid md:grid-cols-2 gap-12 items-center bg-slate-50 rounded-2xl p-8 md:p-12 hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
>
<div>
<div className="inline-block px-3 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full mb-4">
Tool #1
</div>
<h3 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">
DevInbox
</h3>
<p className="text-gray-600 mb-6 leading-relaxed">
A self-hosted email testing inbox. Route your app&apos;s transactional
emails to DevInbox during development, inspect message content, headers,
and attachments, and verify user signup flows without spamming real
mailboxes.
</p>
<Link
href="/login"
className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 font-medium"
>
Try DevInbox
<span aria-hidden="true">→</span>
</Link>
</div>

<BrowserFrame>
<div className="relative aspect-[16/10]">
<Image
src="/landing/devinbox-preview.png"
alt="DevInbox dashboard showing a list of received emails"
fill
className="object-cover"
sizes="(max-width: 768px) 100vw, 50vw"
/>
<BrowserFrame>
<Image
src="/landing/demo-screenshot.png"
alt="DevInbox dashboard showing a list of received emails"
width={1881}
height={935}
className="w-full h-auto"
sizes="(max-width: 768px) 100vw, 50vw"
/>
</BrowserFrame>
</motion.div>
</div>
</BrowserFrame>
</motion.div>
</div>
</section>
);
</section>
);
}
2 changes: 1 addition & 1 deletion apps/web/components/layout/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export function Sidebar() {
};

return (
<div className="flex flex-col w-64 bg-gray-900 min-h-screen">
<div className="sticky top-0 flex flex-col w-64 bg-gray-900 h-screen overflow-y-auto">
{/* Logo/Brand */}
<div className="flex items-center h-16 px-6 border-b border-gray-800">
<h1 className="text-xl font-bold text-white">DevDeck</h1>
Expand Down
Binary file added apps/web/public/landing/demo-screenshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed apps/web/public/landing/devinbox-preview.png
View file
Open in desktop
Binary file not shown.
Loading