diff --git a/frontend/src/App.js b/frontend/src/App.js index 344f9cb..e7686a9 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -165,53 +165,56 @@ function AppLayout({ theme, onThemeToggle }) {
- } /> - } /> - } /> - } /> - } /> - - - - } - /> - } /> - - - - } - /> - } - /> - } - /> - - - - } - /> - - - - } - /> - } /> + } /> + } /> + } /> + } /> + } + /> + + + + } + /> + } /> + + + + } + /> + } + /> + } + /> + + + + } + /> + + + + } + /> + } />
diff --git a/frontend/src/components/three/HeroExperience.js b/frontend/src/components/three/HeroExperience.js index 5f8a5e3..2c8a294 100644 --- a/frontend/src/components/three/HeroExperience.js +++ b/frontend/src/components/three/HeroExperience.js @@ -143,7 +143,14 @@ function Core({ reduceMotion, radius = 1.05 }) { // A frosted-glass document panel. On capable GPUs MeshPhysicalMaterial // transmission gives a single-pass glass look; on weak hardware we fall back to // a cheap translucent standard material that reads the same but costs nothing. -function Panel({ position, rotation, scale, reduceMotion, floatSeed, lowPower }) { +function Panel({ + position, + rotation, + scale, + reduceMotion, + floatSeed, + lowPower, +}) { return ( { const all = [ - { position: [-2.55, 0.55, -0.6], rotation: [0.18, 0.55, 0.12], scale: 1.05, floatSeed: 0.2 }, - { position: [2.7, -0.1, -0.5], rotation: [-0.2, -0.6, -0.15], scale: 0.95, floatSeed: 0.6 }, - { position: [0.5, 2.0, -1.4], rotation: [0.4, 0.1, 0.3], scale: 0.8, floatSeed: 0.9 }, - { position: [-2.3, -2.7, -0.6], rotation: [0.1, 0.5, -0.18], scale: 0.92, floatSeed: 0.35 }, - { position: [2.5, -4.3, -0.9], rotation: [-0.25, -0.4, 0.2], scale: 1.0, floatSeed: 0.75 }, - { position: [-1.9, -6.1, -0.4], rotation: [0.3, 0.3, 0.1], scale: 0.85, floatSeed: 0.5 }, - { position: [2.0, -7.7, -0.7], rotation: [-0.15, -0.55, -0.12], scale: 0.95, floatSeed: 0.65 }, - { position: [-0.6, -9.3, -1.2], rotation: [0.35, 0.2, 0.28], scale: 0.8, floatSeed: 0.85 }, + { + position: [-2.55, 0.55, -0.6], + rotation: [0.18, 0.55, 0.12], + scale: 1.05, + floatSeed: 0.2, + }, + { + position: [2.7, -0.1, -0.5], + rotation: [-0.2, -0.6, -0.15], + scale: 0.95, + floatSeed: 0.6, + }, + { + position: [0.5, 2.0, -1.4], + rotation: [0.4, 0.1, 0.3], + scale: 0.8, + floatSeed: 0.9, + }, + { + position: [-2.3, -2.7, -0.6], + rotation: [0.1, 0.5, -0.18], + scale: 0.92, + floatSeed: 0.35, + }, + { + position: [2.5, -4.3, -0.9], + rotation: [-0.25, -0.4, 0.2], + scale: 1.0, + floatSeed: 0.75, + }, + { + position: [-1.9, -6.1, -0.4], + rotation: [0.3, 0.3, 0.1], + scale: 0.85, + floatSeed: 0.5, + }, + { + position: [2.0, -7.7, -0.7], + rotation: [-0.15, -0.55, -0.12], + scale: 0.95, + floatSeed: 0.65, + }, + { + position: [-0.6, -9.3, -1.2], + rotation: [0.35, 0.2, 0.28], + scale: 0.8, + floatSeed: 0.85, + }, ]; // Weak hardware: keep every other panel (8 → 4). return lowPower ? all.filter((_, i) => i % 2 === 0) : all; @@ -280,10 +327,30 @@ function Scene({ reduceMotion, lowPower, scrollRef }) { const accents = useMemo(() => { const all = [ - { geometry: , position: [-1.7, -1.4, 0.6], color: PALETTE.core, floatSeed: 0.3 }, - { geometry: , position: [1.7, -3.4, 0.8], color: PALETTE.core, floatSeed: 0.5 }, - { geometry: , position: [-1.5, -5.2, 0.5], color: "#3a2a1c", floatSeed: 0.7 }, - { geometry: , position: [1.4, -8.6, 0.7], color: PALETTE.core, floatSeed: 0.45 }, + { + geometry: , + position: [-1.7, -1.4, 0.6], + color: PALETTE.core, + floatSeed: 0.3, + }, + { + geometry: , + position: [1.7, -3.4, 0.8], + color: PALETTE.core, + floatSeed: 0.5, + }, + { + geometry: , + position: [-1.5, -5.2, 0.5], + color: "#3a2a1c", + floatSeed: 0.7, + }, + { + geometry: , + position: [1.4, -8.6, 0.7], + color: PALETTE.core, + floatSeed: 0.45, + }, ]; return lowPower ? all.filter((_, i) => i % 2 === 0) : all; }, [lowPower]); @@ -303,9 +370,24 @@ function Scene({ reduceMotion, lowPower, scrollRef }) { castShadow={!lowPower} /> {/* Warm core lights at both ends of the journey (hero + CTA). */} - - - + + + @@ -316,7 +398,12 @@ function Scene({ reduceMotion, lowPower, scrollRef }) { {panels.map((p, i) => ( - + ))} {accents.map((a, i) => ( @@ -402,7 +489,11 @@ export default function HeroExperience({ reduceMotion = false, scrollRef }) { ); }} > - + ); diff --git a/frontend/src/pages/LandingPage.js b/frontend/src/pages/LandingPage.js index ece031c..e5ab9cd 100644 --- a/frontend/src/pages/LandingPage.js +++ b/frontend/src/pages/LandingPage.js @@ -324,7 +324,8 @@ const LandingPage = () => { }, { title: "Refine or rewrite", - description: "Refine the summary or rewrite selected text in a new style.", + description: + "Refine the summary or rewrite selected text in a new style.", icon: , }, { @@ -374,7 +375,8 @@ const LandingPage = () => { }, { title: "Refine", - description: "Refine the summary or rewrite selected text in a new style.", + description: + "Refine the summary or rewrite selected text in a new style.", icon: , }, ]; @@ -421,7 +423,8 @@ const LandingPage = () => { }, { title: "Refine and rewrite", - description: "Refine the summary or rewrite selected text to a new style.", + description: + "Refine the summary or rewrite selected text to a new style.", icon: , }, ]; @@ -660,746 +663,759 @@ const LandingPage = () => { }} > {/* Center scrim so the headline reads over the glowing core */} - + + + {/* Slim brand bar (the global navbar is hidden on the landing route) */} + + + + + + DocuThinker + + + + + + + + - {/* Slim brand bar (the global navbar is hidden on the landing route) */} - + {/* Hero content */} - - + } sx={{ - width: 32, - height: 32, - borderRadius: "9px", - background: `linear-gradient(135deg, ${palette.accent}, #ffb066)`, - boxShadow: "0 6px 18px rgba(245,124,0,0.5)", - display: "grid", - placeItems: "center", - color: "#fff", - "& .MuiSvgIcon-root": { fontSize: "1.15rem" }, + mb: 3, + fontWeight: 600, + font: "inherit", + color: "#ffd9a8", + backgroundColor: palette.heroGlass, + border: `1px solid ${palette.heroGlassBorder}`, + backdropFilter: "blur(8px)", + "& .MuiChip-icon": { color: "#ffb066" }, }} - aria-hidden="true" - > - - + /> - DocuThinker + Every document, +
+ instantly{" "} + + understood + + . - - - - - - - - - {/* Hero content */} - - - } - sx={{ - mb: 3, - fontWeight: 600, - font: "inherit", - color: "#ffd9a8", - backgroundColor: palette.heroGlass, - border: `1px solid ${palette.heroGlassBorder}`, - backdropFilter: "blur(8px)", - "& .MuiChip-icon": { color: "#ffb066" }, - }} - /> - - Every document, -
- instantly{" "} - - understood - - . - - - Upload PDFs, Word, Markdown, CSV, JSON, code, and more — then - summarize, analyze, chat, rewrite, translate, and reply by voice, - all in one intelligent workspace. - - - - - {/* Text button that scrolls to the content below — replaces the - old floating arrow that collided with the stats card. */} - - - - - {heroHighlights.map((label) => ( - } sx={{ + backgroundColor: palette.accent, font: "inherit", - color: palette.heroMuted, - backgroundColor: "rgba(255,255,255,0.04)", - border: "1px solid rgba(255,255,255,0.09)", + fontWeight: 600, + textTransform: "none", + fontSize: "1.05rem", + px: 4, + py: 1.3, + borderRadius: "999px", + boxShadow: "0 12px 34px rgba(245,124,0,0.45)", + transition: "transform 0.25s ease, box-shadow 0.25s ease", + "&:hover": { + backgroundColor: palette.accentDark, + transform: "translateY(-2px)", + boxShadow: "0 18px 44px rgba(245,124,0,0.55)", + }, + }} + > + Start for free + + + {/* Text button that scrolls to the content below — replaces the + old floating arrow that collided with the stats card. */} + - - - - - + + + + + + );