<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BrowseFlow | Productivity Layer</title>
<style>
:root {
--bg-color: #050505;
--text-main: #ffffff;
--text-dim: #888888;
--glass: rgba(255, 255, 255, 0.02);
--border: rgba(255, 255, 255, 0.08);
--accent: #ffae42;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background-color: var(--bg-color);
color: var(--text-main);
font-family: 'Inter', -apple-system, system-ui, sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
#glCanvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
pointer-events: none;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 5%;
position: relative;
z-index: 10;
}
.logo { font-weight: 600; font-size: 1.1rem; letter-spacing: -0.5px; display: flex; align-items: center; gap: 8px;}
.nav-links { display: flex; gap: 2rem; }
.nav-links a { color: #aaa; text-decoration: none; font-size: 0.85rem; }
.hero {
padding: 8rem 5% 2rem;
max-width: 1200px;
}
h1 {
font-size: clamp(3rem, 7vw, 5.5rem);
font-weight: 500;
letter-spacing: -3px;
line-height: 1;
margin-bottom: 2rem;
background: linear-gradient(180deg, #fff 40%, #555 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p.subheadline {
color: var(--text-dim);
font-size: 1.2rem;
max-width: 480px;
line-height: 1.6;
margin-bottom: 2.5rem;
}
.cta-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 6rem; }
.btn-white { background: white; color: black; padding: 0.8rem 1.6rem; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 0.95rem; }
.btn-link { color: white; text-decoration: none; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
/* Bottom Section Grid */
.bottom-layout {
display: grid;
grid-template-columns: 1fr 2fr; /* Testimonials left, Cards right */
gap: 4rem;
padding: 0 5% 5rem;
align-items: flex-end;
}
/* Testimonials Section */
.testimonials {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding-bottom: 2rem;
}
.avatar-stack { display: flex; align-items: center; }
.avatar {
width: 34px; height: 34px;
border-radius: 50%;
border: 2px solid var(--bg-color);
margin-right: -10px;
background: #222;
}
.testimonial-text {
color: var(--text-dim);
font-size: 0.85rem;
max-width: 260px;
line-height: 1.5;
}
/* Right Side Cards */
.cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.card {
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid var(--border);
border-radius: 20px;
padding: 2rem;
height: 280px;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
overflow: hidden;
}
/* Mockup Visuals inside cards */
.card-visual {
position: absolute;
top: 1.5rem;
left: 1.5rem;
right: 1.5rem;
height: 100px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: 10px;
}
.card-visual::before {
content: '';
position: absolute;
top: 10px; left: 10px;
width: 30px; height: 4px;
background: var(--border);
border-radius: 2px;
box-shadow: 0 8px 0 var(--border), 0 16px 0 var(--border);
}
.card h3 { font-size: 1.1rem; font-weight: 400; color: #ccc; letter-spacing: -0.2px; }
@media (max-width: 1024px) {
.bottom-layout { grid-template-columns: 1fr; gap: 2rem; }
.hero { padding-top: 5rem; }
h1 { font-size: 3.5rem; }
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<nav>
<div class="logo">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 0 20Z"/></svg>
BrowseFlow
</div>
<div class="nav-links">
<a href="#">Features</a>
<a href="#">About Us</a>
<a href="#">Benefits</a>
</div>
<a href="#" class="btn-white" style="padding: 0.5rem 1.2rem; border-radius: 6px;">Log In</a>
</nav>
<main>
<section class="hero">
<h1>A Handy Tool For<br>Faster Browsing!</h1>
<p class="subheadline">Check out this cool system for today's web productivity! It makes handling tabs, bookmarks, and sessions a breeze.</p>
<div class="cta-row">
<a href="#" class="btn-white">Get Started</a>
<a href="#" class="btn-link">Customer requests ></a>
</div>
</section>
<div class="bottom-layout">
<section class="testimonials">
<div class="avatar-stack">
<img class="avatar" src="https://api.dicebear.com/7.x/avataaars/svg?seed=1">
<img class="avatar" src="https://api.dicebear.com/7.x/avataaars/svg?seed=2">
<img class="avatar" src="https://api.dicebear.com/7.x/avataaars/svg?seed=3">
<img class="avatar" src="https://api.dicebear.com/7.x/avataaars/svg?seed=4">
</div>
<p class="testimonial-text">Loved by over 100 businesses and customers around the globe, we've built a solid reputation!</p>
</section>
<section class="cards-grid">
<div class="card">
<div class="card-visual" style="background: linear-gradient(135deg, rgba(255,174,66,0.1), transparent);"></div>
<h3>Crafted To Perfection</h3>
</div>
<div class="card">
<div class="card-visual"></div>
<h3>Designed To Be Fast</h3>
</div>
</section>
</div>
</main>
<script id="vs" type="x-shader/x-vertex">
attribute vec2 position;
void main() { gl_Position = vec4(position, 0.0, 1.0); }
</script>
<script id="fs" type="x-shader/x-fragment">
precision mediump float;
uniform vec2 u_res;
uniform float u_time;
uniform vec2 u_mouse;
float noise(vec2 p) {
return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
}
void main() {
vec2 uv = gl_FragCoord.xy / u_res;
// The light source is at the top center-right
vec2 center = vec2(0.68 + (u_mouse.x - 0.5) * 0.03, 1.15);
vec2 p = uv - center;
// Sharp, intense vertical beam source
float beamWidth = 0.1 + uv.y * 0.5;
float beam = pow(max(0.0, 1.0 - abs(p.x) / beamWidth), 18.0);
// Top hotspot glow (The "Sun" effect)
float hotspot = smoothstep(1.0, 0.75, uv.y) * exp(-abs(p.x) * 12.0) * 4.0;
// Wide atmospheric glow
float glow = exp(-length(p * vec2(1.0, 0.3)) * 4.0) * 0.8;
vec3 color = vec3(1.0, 0.7, 0.35) * (beam + hotspot + glow);
// Grain Texture
float n = (noise(uv + u_time * 0.01) - 0.5) * 0.2;
color += n * (beam + hotspot + 0.1);
// Strong falloff towards the bottom
color *= smoothstep(-0.2, 0.8, uv.y);
gl_FragColor = vec4(color * 0.8, 1.0);
}
</script>
<script>
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
let mX = 0.5, mY = 0.5;
window.addEventListener('mousemove', (e) => {
mX = e.clientX / window.innerWidth;
mY = 1.0 - (e.clientY / window.innerHeight);
});
function createShader(gl, type, id) {
const s = gl.createShader(type);
gl.shaderSource(s, document.getElementById(id).text);
gl.compileShader(s);
return s;
}
const prog = gl.createProgram();
gl.attachShader(prog, createShader(gl, gl.VERTEX_SHADER, 'vs'));
gl.attachShader(prog, createShader(gl, gl.FRAGMENT_SHADER, 'fs'));
gl.linkProgram(prog);
gl.useProgram(prog);
const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, -1,1, 1,-1, 1,1]), gl.STATIC_DRAW);
const pos = gl.getAttribLocation(prog, "position");
gl.enableVertexAttribArray(pos);
gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
const uRes = gl.getUniformLocation(prog, "u_res");
const uTime = gl.getUniformLocation(prog, "u_time");
const uMouse = gl.getUniformLocation(prog, "u_mouse");
function loop(t) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, canvas.width, canvas.height);
gl.uniform2f(uRes, canvas.width, canvas.height);
gl.uniform1f(uTime, t * 0.001);
gl.uniform2f(uMouse, mX, mY);
gl.drawArrays(gl.TRIANGLES, 0, 6);
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script>
</body>
</html>“Create a "BrowseFlow | Productivity Layer" component. Implement custom GLSL shaders for visual effects. Apply gradients, layered shadows. Color palette: #050505, #ffffff, #888888, #ffae42. Layout: CSS Grid, Flexbox, full-screen fixed canvas background, full-viewport sizing. Interactivity: mouse tracking, continuous animation loop. Use procedural noise for organic visual effects.”