Skip to content

Comprehensive Responsive Design Improvements #59

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

Open
bethwel3001 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Comprehensive Responsive Design Improvements #59

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
1 change: 1 addition & 0 deletions apps/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-icons": "^5.5.0",
"react-is": "^19.2.5",
"recharts": "^3.6.0",
"sonner": "^2.0.7",
"tailwindcss": "^4.1.18",
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/landing/Landing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { LocalAccess } from "./local-access";
export const Landing = () => {
return (
<>
<div className="min-h-screen bg-black text-white selection:bg-accent/30">
<div className="min-h-screen bg-black text-white selection:bg-accent/30 overflow-x-hidden">
<Navbar />

<Hero />
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/landing/Terminal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export function Terminal() {
{logs.map((log, i) => (
<div key={i} className="flex gap-3 text-xs md:text-sm">
<span className="text-white/50 w-16">{log.method}</span>
<span className="text-white/80 flex-1">{log.path}</span>
<span className="text-white/80 flex-1 truncate">{log.path}</span>
<span
className={
log.status >= 400
Expand Down
42 changes: 21 additions & 21 deletions apps/web/src/components/landing/bring-your-own-domain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,40 @@ import { Check, Globe } from "lucide-react";
export const BringYourOwnDomain = () => (
<div className="py-24 bg-black relative overflow-hidden">
<div className="max-w-7xl mx-auto px-6">
<div className="grid lg:grid-cols-2 gap-16 items-center">
<div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
<div>
<h2 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
<h2 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-6 tracking-tight">
Bring your <br />
own domain
</h2>
<p className="text-xl text-white/40 mb-8">
<p className="text-lg sm:text-xl text-white/40 mb-8">
Don't want to use our random subdomains? No problem. Connect your
own domain in seconds and get automatic SSL certificates.
</p>

<div className="space-y-4">
<div className="flex items-center gap-4 text-white/60">
<div className="w-8 h-8 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center">
<div className="w-8 h-8 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center shrink-0">
<Check size={16} className="text-accent" />
</div>
<span>Automatic SSL/TLS certificates</span>
<span className="text-sm sm:text-base">Automatic SSL/TLS certificates</span>
</div>
<div className="flex items-center gap-4 text-white/60">
<div className="w-8 h-8 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center">
<div className="w-8 h-8 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center shrink-0">
<Check size={16} className="text-accent" />
</div>
<span>Simple CNAME configuration</span>
<span className="text-sm sm:text-base">Simple CNAME configuration</span>
</div>
<div className="flex items-center gap-4 text-white/60">
<div className="w-8 h-8 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center">
<div className="w-8 h-8 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center shrink-0">
<Check size={16} className="text-accent" />
</div>
<span>Zero-downtime reconfiguration</span>
<span className="text-sm sm:text-base">Zero-downtime reconfiguration</span>
</div>
</div>
</div>

<div className="relative group">
<div className="relative group mt-8 lg:mt-0">
<div className="absolute inset-0 bg-accent/20 blur-3xl rounded-full group-hover:bg-accent/30 transition-colors duration-500" />

<div className="relative bg-white/2 border border-white/5 rounded-3xl p-6 hover:border-white/10 transition-all backdrop-blur-sm">
Expand All @@ -45,36 +45,36 @@ export const BringYourOwnDomain = () => (
<div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center shrink-0">
<Globe className="w-5 h-5 text-accent" />
</div>
<div>
<div className="flex items-center gap-3">
<h3 className="text-lg font-medium text-white">
<div className="min-w-0">
<div className="flex flex-wrap items-center gap-x-3 gap-y-1">
<h3 className="text-base sm:text-lg font-medium text-white truncate">
api.yourcompany.com
</h3>
<span className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-accent/10 border border-accent/20 text-xs font-medium text-accent">
<span className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-accent/10 border border-accent/20 text-[10px] font-medium text-accent">
Active
</span>
</div>
<p className="text-sm text-white/40 mt-1">
<p className="text-xs sm:text-sm text-white/40 mt-1">
Added on {new Date().toLocaleDateString()}
</p>
</div>
</div>
</div>

<div className="bg-black/40 rounded-2xl border border-white/5 overflow-hidden font-mono text-sm">
<div className="p-4 border-b border-white/5 flex items-center justify-between">
<div className="bg-black/40 rounded-2xl border border-white/5 overflow-hidden font-mono text-xs sm:text-sm">
<div className="p-4 border-b border-white/5 flex items-center justify-between gap-4">
<span className="text-white/40">Type</span>
<span className="text-white/80">CNAME</span>
</div>
<div className="p-4 border-b border-white/5 flex items-center justify-between">
<div className="p-4 border-b border-white/5 flex items-center justify-between gap-4">
<span className="text-white/40">Name</span>
<span className="text-white/80">api</span>
</div>
<div className="p-4 border-b border-white/5 flex items-center justify-between">
<div className="p-4 border-b border-white/5 flex items-center justify-between gap-4">
<span className="text-white/40">Value</span>
<span className="text-accent">edge.outray.app</span>
<span className="text-accent truncate">edge.outray.app</span>
</div>
<div className="p-4 flex items-center justify-between">
<div className="p-4 flex items-center justify-between gap-4">
<span className="text-white/40">TTL</span>
<span className="text-white/80">Auto</span>
</div>
Expand Down
74 changes: 37 additions & 37 deletions apps/web/src/components/landing/developer-experience.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,54 +9,54 @@ const PluginTabs = () => {

return (
<div className="mt-auto">
<div className="flex gap-2 mb-3">
<div className="flex flex-wrap gap-2 mb-4">
<button
onClick={() => setActiveTab("vite")}
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all ${
activeTab === "vite"
? "bg-white/10 text-white"
: "text-white/40 hover:text-white/60"
}`}
>
<SiVite className={`w-4 h-4 ${activeTab === "vite" ? "text-[#646CFF]" : ""}`} />
<SiVite className={`w-3.5 h-3.5 sm:w-4 sm:h-4 ${activeTab === "vite" ? "text-[#646CFF]" : ""}`} />
Vite
</button>
<button
onClick={() => setActiveTab("next")}
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all ${
activeTab === "next"
? "bg-white/10 text-white"
: "text-white/40 hover:text-white/60"
}`}
>
<SiNextdotjs className="w-4 h-4" />
<SiNextdotjs className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
Next.js
</button>
<button
onClick={() => setActiveTab("express")}
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all ${
activeTab === "express"
? "bg-white/10 text-white"
: "text-white/40 hover:text-white/60"
}`}
>
<SiExpress className="w-4 h-4" />
<SiExpress className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
Express
</button>
</div>

<div className="bg-black/40 rounded-2xl border border-white/5 overflow-hidden">
<div className="bg-white/5 border-b border-white/5 px-4 py-2 flex items-center gap-2">
<div className="bg-white/5 border-b border-white/5 px-4 py-2.5 flex items-center gap-2">
<div className="flex gap-1.5">
<div className="w-2.5 h-2.5 rounded-full bg-white/20" />
<div className="w-2.5 h-2.5 rounded-full bg-white/20" />
<div className="w-2.5 h-2.5 rounded-full bg-white/20" />
<div className="w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-white/20" />
<div className="w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-white/20" />
<div className="w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-white/20" />
</div>
<span className="text-xs text-white/40 ml-2">
<span className="text-[10px] sm:text-xs text-white/40 ml-2 truncate">
{activeTab === "vite" ? "vite.config.ts" : activeTab === "next" ? "next.config.ts" : "index.js"}
</span>
</div>
<div className="p-4 font-mono text-sm overflow-x-auto">
<div className="p-4 font-mono text-[11px] sm:text-sm overflow-x-auto scrollbar-hide">
{activeTab === "vite" ? (
<pre className="text-white/70">
<code>
Expand Down Expand Up @@ -101,7 +101,7 @@ const PluginTabs = () => {

<Link
to={activeTab === "vite" ? "/vite" : activeTab === "next" ? "/nextjs" : "/express"}
className="mt-3 text-sm text-accent hover:underline inline-block"
className="mt-4 text-xs sm:text-sm text-accent hover:underline inline-block font-medium"
>
Learn more →
</Link>
Expand Down Expand Up @@ -186,65 +186,65 @@ export const DeveloperExperience = () => {

return (
<div className="max-w-7xl mx-auto px-6 py-10">
<div className="mb-16">
<h2 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight text-white">
<div className="mb-12 sm:mb-16">
<h2 className="text-3xl sm:text-5xl md:text-6xl font-bold mb-6 tracking-tight text-white leading-[1.1]">
First-class <br />
developer experience
</h2>
</div>

<div className="grid lg:grid-cols-2 gap-8">
<div className="grid gap-8">
<div className="bg-white/2 border border-white/5 rounded-3xl p-8 hover:border-white/10 transition-colors group flex flex-col">
<div className="grid lg:grid-cols-2 gap-6 sm:gap-8">
<div className="grid gap-6 sm:gap-8">
<div className="bg-white/2 border border-white/5 rounded-3xl p-6 sm:p-8 hover:border-white/10 transition-colors group flex flex-col">
<div className="flex items-center gap-4 mb-6">
<div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors">
<div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors shrink-0">
<TerminalIcon size={20} className="text-accent" />
</div>
<h3 className="text-xl font-bold text-white">
<h3 className="text-lg sm:text-xl font-bold text-white">
Online in one line
</h3>
</div>
<p className="text-white/40 mb-6">
<p className="text-sm sm:text-base text-white/40 mb-6">
One command, you're online. Seriously, try for yourself.
</p>
<div className="bg-black/40 rounded-2xl border border-white/5 p-4 font-mono text-sm mt-auto">
<div className="bg-black/40 rounded-2xl border border-white/5 p-4 font-mono text-xs sm:text-sm mt-auto">
<span className="text-accent">$</span> outray 3000
</div>
</div>

<div className="bg-white/2 border border-white/5 rounded-3xl p-8 hover:border-white/10 transition-colors group flex flex-col">
<div className="bg-white/2 border border-white/5 rounded-3xl p-6 sm:p-8 hover:border-white/10 transition-colors group flex flex-col">
<div className="flex items-center gap-4 mb-6">
<div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors">
<div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors shrink-0">
<Code size={20} className="text-accent" />
</div>
<h3 className="text-xl font-bold text-white">Don't fw CLI?</h3>
<h3 className="text-lg sm:text-xl font-bold text-white">Don't fw CLI?</h3>
</div>
<p className="text-white/40 mb-6">
<p className="text-sm sm:text-base text-white/40 mb-6">
Use our plugins to embed OutRay directly into your build tool.
</p>
<PluginTabs />
</div>
</div>

<div className="bg-white/2 border border-white/5 rounded-3xl p-8 flex flex-col relative overflow-hidden group h-full">
<div className="bg-white/2 border border-white/5 rounded-3xl p-6 sm:p-8 flex flex-col relative overflow-hidden group h-full">
<div className="absolute top-0 right-0 w-64 h-64 bg-accent/10 rounded-full blur-3xl -mr-32 -mt-32 pointer-events-none group-hover:bg-accent/20 transition-colors" />

<div>
<div className="flex items-center gap-4 mb-6">
<div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors">
<div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors shrink-0">
<Activity size={20} className="text-accent" />
</div>
<h3 className="text-xl font-bold text-white">
<h3 className="text-lg sm:text-xl font-bold text-white">
Instant Observability
</h3>
</div>
<p className="text-white/40">
<p className="text-sm sm:text-base text-white/40">
View live traffic happening on your APIs in real-time the second
it goes online.
</p>
</div>

<div className="mt-6 space-y-3 font-mono text-xs flex-1 flex flex-col justify-end">
<div className="mt-8 space-y-3 font-mono text-[10px] sm:text-xs flex-1 flex flex-col justify-end">
<AnimatePresence mode="popLayout" initial={false}>
{visibleLogs.map((log) => (
<motion.div
Expand All @@ -258,12 +258,12 @@ export const DeveloperExperience = () => {
transition: { duration: 0.2 },
}}
transition={{ duration: 0.4, type: "spring", bounce: 0 }}
className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5"
className="flex items-center gap-2 sm:gap-3 p-2.5 sm:p-3 rounded-xl bg-white/5 border border-white/5"
>
<span className={log.color}>{log.status}</span>
<span className="text-white/40">{log.method}</span>
<span className="text-white/60">{log.path}</span>
<span className="ml-auto text-white/20">{log.time}</span>
<span className={`${log.color} shrink-0 w-[60px] sm:w-auto`}>{log.status}</span>
<span className="text-white/40 shrink-0">{log.method}</span>
<span className="text-white/60 truncate flex-1">{log.path}</span>
<span className="ml-auto text-white/20 shrink-0">{log.time}</span>
</motion.div>
))}
</AnimatePresence>
Expand Down
Loading