Skip to content

Commit 22b2bc4

Browse files
CodeCraftsmaniacCodeCraftsmaniac
committed
fix: PDF backgrounds, sizing, slide layouts
- Fix PDF black background: changed AnimatedBackground + GeometricShapes from fixed to absolute positioning (no longer hidden by PDF generator) - Switch PDF from PNG to JPEG (quality 95, scale 3.8x) = 37.69MB with rich backgrounds - Slide07: equal-height boxes via grid-rows-2 - Slide14: scaled up icons, text sizes, card content - Slide16: redesigned centered vertical flow with arrows
1 parent 0f52a96 commit 22b2bc4

9 files changed

Lines changed: 65 additions & 68 deletions

‎public/Fishcake_Universal_Deck.pdf‎

6.3 MB
Binary file not shown.

‎scripts/generate-pdf.mjs‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { createServer } from "vite";
55

66
const WIDTH = 1920;
77
const HEIGHT = 1080;
8-
const SCALE = 3.5;
8+
const SCALE = 3.8;
9+
const JPEG_QUALITY = 95;
910
const TEMP_DIR = ".pdf-tmp";
1011
const OUTPUT = "public/Fishcake_Universal_Deck.pdf";
1112

@@ -34,7 +35,7 @@ async function main() {
3435
const totalSlides = await page.evaluate(() => window.__getSlideCount());
3536
console.log(`Detected ${totalSlides} slides`);
3637

37-
// Disable animations and hide fixed UI (nav dots, arrows, export button)
38+
// Disable CSS animations and hide UI overlays (nav dots, arrows, export button)
3839
await page.addStyleTag({
3940
content: `
4041
*, *::before, *::after {
@@ -46,7 +47,7 @@ async function main() {
4647
.fixed { display: none !important; }
4748
`,
4849
});
49-
await new Promise((r) => setTimeout(r, 500));
50+
await new Promise((r) => setTimeout(r, 1000));
5051

5152
// Capture each slide using direct navigation (no keyboard — 100% reliable)
5253
for (let i = 0; i < totalSlides; i++) {
@@ -66,8 +67,9 @@ async function main() {
6667

6768
console.log(`Capturing slide ${i + 1}/${totalSlides}...`);
6869
await page.screenshot({
69-
path: `${TEMP_DIR}/slide-${String(i).padStart(2, "0")}.png`,
70-
type: "png",
70+
path: `${TEMP_DIR}/slide-${String(i).padStart(2, "0")}.jpg`,
71+
type: "jpeg",
72+
quality: JPEG_QUALITY,
7173
fullPage: false,
7274
clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT },
7375
});
@@ -82,8 +84,8 @@ async function main() {
8284
pdf.setSubject("Fishcake EventFi — Leading Real-World Web3 Solution (RWS)");
8385

8486
for (let i = 0; i < totalSlides; i++) {
85-
const imgBytes = readFileSync(`${TEMP_DIR}/slide-${String(i).padStart(2, "0")}.png`);
86-
const img = await pdf.embedPng(imgBytes);
87+
const imgBytes = readFileSync(`${TEMP_DIR}/slide-${String(i).padStart(2, "0")}.jpg`);
88+
const img = await pdf.embedJpg(imgBytes);
8789
const pdfPage = pdf.addPage([WIDTH, HEIGHT]);
8890
pdfPage.drawImage(img, { x: 0, y: 0, width: WIDTH, height: HEIGHT });
8991
}

‎src/components/presentation/AnimatedBackground.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ export const AnimatedBackground = () => {
131131
return (
132132
<canvas
133133
ref={canvasRef}
134-
className="fixed inset-0 pointer-events-none z-0"
134+
className="absolute inset-0 pointer-events-none z-0"
135135
style={{ opacity: 0.8 }}
136136
/>
137137
);

‎src/components/presentation/FloatingElements.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const FloatingElements = () => {
22
return (
3-
<div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
3+
<div className="absolute inset-0 pointer-events-none z-0 overflow-hidden">
44
{/* Floating geometric shapes */}
55
{Array.from({ length: 6 }).map((_, i) => (
66
<div

‎src/components/presentation/GeometricShapes.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ export const GeometricShapes = () => {
121121
return (
122122
<canvas
123123
ref={canvasRef}
124-
className="fixed inset-0 pointer-events-none z-0"
124+
className="absolute inset-0 pointer-events-none z-0"
125125
/>
126126
);
127127
};

‎src/components/presentation/GridBackground.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const GridBackground = () => {
22
return (
3-
<div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
3+
<div className="absolute inset-0 pointer-events-none z-0 overflow-hidden">
44
{/* Radial gradient overlay */}
55
<div
66
className="absolute inset-0"

‎src/components/slides/Slide07WhatFishcakeIs.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,18 +46,18 @@ export const Slide07WhatFishcakeIs = () => {
4646
</div>
4747

4848
{/* Principles Grid */}
49-
<div className="grid md:grid-cols-2 gap-5 mb-8 max-w-6xl mx-auto">
49+
<div className="grid md:grid-cols-2 md:grid-rows-2 gap-5 mb-8 max-w-6xl mx-auto">
5050
{principles.map((p, i) => {
5151
const IconComponent = p.icon;
5252
return (
5353
<div
5454
key={i}
55-
className="relative rounded-xl overflow-hidden animate-scale-in"
55+
className="relative rounded-xl overflow-hidden animate-scale-in h-full"
5656
style={{ animationDelay: `${i * 100}ms` }}
5757
>
5858
{/* Card with dark glass effect */}
5959
<div
60-
className="relative p-6 rounded-xl"
60+
className="relative p-6 rounded-xl h-full"
6161
style={{
6262
background: 'linear-gradient(135deg, rgba(15,15,20,0.95) 0%, rgba(25,25,35,0.85) 100%)',
6363
border: '1px solid rgba(255,140,0,0.15)',

‎src/components/slides/Slide14TokenDistribution.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const Slide14TokenDistribution = () => {
3737
return (
3838
<div
3939
key={i}
40-
className="relative rounded-2xl p-4 group hover:bg-white/5 transition-colors overflow-hidden"
40+
className="relative rounded-2xl p-6 group hover:bg-white/5 transition-colors overflow-hidden"
4141
style={{
4242
background: 'linear-gradient(135deg, rgba(20,20,25,0.9) 0%, rgba(30,30,35,0.8) 100%)',
4343
border: '1px solid rgba(255,140,0,0.2)',
@@ -51,16 +51,16 @@ export const Slide14TokenDistribution = () => {
5151
/>
5252

5353
<div className="relative z-10 flex flex-col items-center text-center h-full">
54-
<div className="w-9 h-9 mb-2 rounded-lg bg-primary/10 flex items-center justify-center border border-primary/20">
55-
<IconComponent className="w-4 h-4 text-primary" />
54+
<div className="w-14 h-14 mb-3 rounded-lg bg-primary/10 flex items-center justify-center border border-primary/20">
55+
<IconComponent className="w-7 h-7 text-primary" />
5656
</div>
5757

58-
<h4 className="font-display font-medium text-muted-foreground uppercase tracking-wider text-xs mb-1">{a.name}</h4>
59-
<div className="text-4xl font-bold text-white mb-2 tracking-tight drop-shadow-lg">
60-
{a.percent}<span className="text-xl text-primary/80">%</span>
58+
<h4 className="font-display font-medium text-muted-foreground uppercase tracking-wider text-base mb-2">{a.name}</h4>
59+
<div className="text-6xl font-bold text-white mb-3 tracking-tight drop-shadow-lg">
60+
{a.percent}<span className="text-3xl text-primary/80">%</span>
6161
</div>
6262

63-
<p className="text-xs text-muted-foreground/90 leading-tight mt-auto">{a.purpose}</p>
63+
<p className="text-base text-muted-foreground/90 leading-relaxed mt-auto">{a.purpose}</p>
6464
</div>
6565
</div>
6666
);
@@ -76,17 +76,17 @@ export const Slide14TokenDistribution = () => {
7676
key={i}
7777
className="flex items-center gap-1.5 bg-white/5 border border-white/10 rounded-full px-3 py-1.5 hover:border-primary/40 transition-colors whitespace-nowrap"
7878
>
79-
<IconComponent className="w-3 h-3 text-muted-foreground" />
80-
<span className="text-[10px] sm:text-xs text-muted-foreground font-medium">{a.name}</span>
81-
<span className="text-xs font-bold text-primary pl-1 border-l border-white/10">{a.percent}%</span>
79+
<IconComponent className="w-5 h-5 text-muted-foreground" />
80+
<span className="text-sm sm:text-base text-muted-foreground font-medium">{a.name}</span>
81+
<span className="text-base font-bold text-primary pl-2 border-l border-white/10">{a.percent}%</span>
8282
</div>
8383
);
8484
})}
8585
</div>
8686

8787
{/* Cake Power System */}
8888
<div
89-
className="relative max-w-3xl mx-auto rounded-xl p-5 mb-8 animate-fade-in text-center"
89+
className="relative max-w-4xl mx-auto rounded-xl p-6 mb-8 animate-fade-in text-center"
9090
style={{
9191
animationDelay: "300ms",
9292
background: 'linear-gradient(135deg, rgba(255,140,0,0.1) 0%, rgba(20,20,30,0.95) 100%)',
@@ -96,25 +96,25 @@ export const Slide14TokenDistribution = () => {
9696
>
9797
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-40 h-[1px] bg-gradient-to-r from-transparent via-primary to-transparent" />
9898

99-
<h3 className="font-display text-sm font-bold text-primary mb-3 uppercase tracking-widest flex items-center justify-center gap-2">
100-
<Zap className="w-4 h-4" /> Cake Power System
99+
<h3 className="font-display text-lg font-bold text-primary mb-4 uppercase tracking-widest flex items-center justify-center gap-2">
100+
<Zap className="w-6 h-6" /> Cake Power System
101101
</h3>
102-
<div className="text-sm text-foreground/80 space-y-1.5 font-medium">
102+
<div className="text-lg text-foreground/80 space-y-2 font-medium">
103103
<p>NFT Pass = PoW Mining + <span className="text-white font-bold">Boosted Cake Power</span></p>
104104
<p>More Cake Power = <span className="text-white font-bold">Boost FCC Staking APR</span></p>
105-
<p className="text-muted-foreground text-xs mt-2 italic">Composable: Stake FCC with booster NFTs for <span className="text-primary not-italic font-bold">exponential gains</span></p>
105+
<p className="text-muted-foreground text-base mt-2 italic">Composable: Stake FCC with booster NFTs for <span className="text-primary not-italic font-bold">exponential gains</span></p>
106106
</div>
107107
</div>
108108

109109
{/* Philosophy */}
110110
<div className="text-center animate-fade-in" style={{ animationDelay: "400ms" }}>
111-
<p className="text-xs text-muted-foreground mb-3 font-mono uppercase tracking-widest">The Philosophy</p>
112-
<div className="inline-flex flex-wrap items-center justify-center gap-8 text-lg font-display">
111+
<p className="text-base text-muted-foreground mb-3 font-mono uppercase tracking-widest">The Philosophy</p>
112+
<div className="inline-flex flex-wrap items-center justify-center gap-8 text-2xl font-display">
113113
<span className="text-muted-foreground">Contribute → <span className="text-primary font-bold">Earn</span></span>
114114
<span className="text-muted-foreground">Build → <span className="text-primary font-bold">Own</span></span>
115115
<span className="text-muted-foreground">Participate → <span className="text-primary font-bold">Benefit</span></span>
116116
</div>
117-
<p className="text-muted-foreground/50 text-xs mt-3">No free rides. No speculation-first design.</p>
117+
<p className="text-muted-foreground/50 text-sm mt-3">No free rides. No speculation-first design.</p>
118118
</div>
119119
</SlideContainer>
120120
);

‎src/components/slides/Slide16WhyFishcakeWins.tsx‎

Lines changed: 31 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { SlideContainer } from "../presentation/SlideContainer";
22
import { SlideTitle } from "../presentation/SlideTitle";
3-
import { Eye, Globe, Wrench, Smartphone, RotateCcw, Coins, Users, ArrowRight } from "lucide-react";
3+
import { Eye, Globe, Wrench, Smartphone, RotateCcw, Coins, Users, ArrowDown } from "lucide-react";
44

55
const valueChain = [
66
{ label: "Vision", desc: "Gateway app — make token value real", icon: Eye },
@@ -17,45 +17,40 @@ export const Slide16WhyFishcakeWins = () => {
1717
<SlideContainer>
1818
<SlideTitle gradient>Why Fishcake Wins</SlideTitle>
1919

20-
{/* Value Chain Narrative */}
21-
<div className="max-w-6xl mx-auto">
22-
<div className="flex flex-col items-center">
23-
{valueChain.map((item, i) => {
24-
const IconComponent = item.icon;
25-
return (
26-
<div key={i} className="w-full">
20+
{/* Value Chain - Centered vertical flow */}
21+
<div className="flex flex-col items-center max-w-3xl mx-auto">
22+
{valueChain.map((item, i) => {
23+
const IconComponent = item.icon;
24+
return (
25+
<div key={i} className="flex flex-col items-center w-full">
26+
{/* Row: icon + label + desc — all centered */}
27+
<div
28+
className="flex items-center justify-center gap-4 w-full py-2 px-6 rounded-xl animate-fade-in hover:bg-white/5 transition-colors"
29+
style={{ animationDelay: `${i * 80}ms` }}
30+
>
2731
<div
28-
className="flex items-center gap-4 p-4 rounded-xl animate-fade-in group hover:bg-white/5 transition-colors"
29-
style={{ animationDelay: `${i * 80}ms` }}
32+
className="w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0"
33+
style={{
34+
background: 'linear-gradient(135deg, rgba(255,140,0,0.2) 0%, rgba(255,140,0,0.05) 100%)',
35+
border: '1px solid rgba(255,140,0,0.3)',
36+
}}
3037
>
31-
{/* Number + Icon */}
32-
<div
33-
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
34-
style={{
35-
background: 'linear-gradient(135deg, rgba(255,140,0,0.2) 0%, rgba(255,140,0,0.05) 100%)',
36-
border: '1px solid rgba(255,140,0,0.3)',
37-
}}
38-
>
39-
<IconComponent className="w-6 h-6 text-primary" />
40-
</div>
41-
42-
{/* Label + Description */}
43-
<div className="flex-1">
44-
<h4 className="text-primary font-display font-bold text-xl">{item.label}</h4>
45-
<p className="text-foreground/80 text-base">{item.desc}</p>
46-
</div>
38+
<IconComponent className="w-5 h-5 text-primary" />
4739
</div>
48-
49-
{/* Connector arrow between items */}
50-
{i < valueChain.length - 1 && (
51-
<div className="flex justify-center py-1">
52-
<ArrowRight className="w-4 h-4 text-primary/40 rotate-90" />
53-
</div>
54-
)}
40+
<span className="text-primary font-display font-bold text-xl min-w-[130px]">{item.label}</span>
41+
<span className="text-foreground/40">—</span>
42+
<span className="text-foreground/80 text-base flex-1">{item.desc}</span>
5543
</div>
56-
);
57-
})}
58-
</div>
44+
45+
{/* Arrow centered between items */}
46+
{i < valueChain.length - 1 && (
47+
<div className="py-1">
48+
<ArrowDown className="w-5 h-5 text-primary/40" />
49+
</div>
50+
)}
51+
</div>
52+
);
53+
})}
5954
</div>
6055
</SlideContainer>
6156
);

0 commit comments

Comments
 (0)