Skip to content

Commit 65b5252

Browse files
ShamalLakshanShamalLakshan
committed
homepage refactor
1 parent 2e211cf commit 65b5252

27 files changed

+1098
-168
lines changed

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎App.tsx‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import React from 'react';
2+
import MangaPanel from './components/MangaPanel';
3+
import SakuraPetals from './components/SakuraPetals';
4+
import LoadingScreen from './components/LoadingScreen';
5+
import { PANEL_IMAGES } from './constants';
6+
7+
const App: React.FC = () => (
8+
<>
9+
<LoadingScreen />
10+
<div className="manga-grid">
11+
<SakuraPetals />
12+
{/* Panel 1: The Title & Official Branding */}
13+
<MangaPanel
14+
gridArea="1 / 1 / 5 / 4"
15+
mobileGridArea="1 / 1 / 4 / 3"
16+
staticSrc={PANEL_IMAGES['cherry-tree']}
17+
isThick
18+
>
19+
<div className="h-full flex flex-col justify-between">
20+
<div className="flex flex-col gap-1">
21+
<div className="bg-[#9200ff] text-white px-4 py-2 flex items-center gap-2 font-black text-xl tracking-tighter self-start shadow-lg">
22+
<img src="./public/images/logo.png" alt="Logo" className="w-6 h-6 object-contain" />
23+
BLOSSOM
24+
</div>
25+
<div className="text-[10px] tracking-[0.3em] font-black text-[#9200ff] uppercase ml-1">Open Source Creative</div>
26+
</div>
27+
28+
<div className="bg-white border-4 border-[#9200ff] p-4 rotate-[-4deg] shadow-xl relative mt-4">
29+
<div className="absolute -top-6 -right-6 w-12 h-12 md:w-16 md:h-16">
30+
<img src="./public/images/logo.png" alt="Stamp" className="w-full h-full object-contain rotate-12 opacity-80" />
31+
</div>
32+
<h1 className="font-manga text-3xl md:text-5xl leading-none text-[#9200ff]">
33+
CODE IN <br /><span className="text-[#ff058d] text-5xl md:text-7xl">BLOOM!</span>
34+
</h1>
35+
</div>
36+
</div>
37+
</MangaPanel>
38+
39+
{/* Panel 2: The Mascot & Atmosphere */}
40+
<MangaPanel
41+
gridArea="1 / 4 / 9 / 10"
42+
mobileGridArea="1 / 3 / 8 / 5"
43+
staticSrc={PANEL_IMAGES['mascot']}
44+
type="mascot"
45+
isThick
46+
className="bg-[#f9f7f2]"
47+
>
48+
<div className="h-full flex flex-col items-end justify-between p-4">
49+
<div className="vertical-text font-black text-[#9200ff] text-[10px] md:text-xs tracking-[1em] bg-white/50 backdrop-blur-sm p-2 border-2 border-[#9200ff]">
50+
CREATIVE • OPEN SOURCE • SERENE
51+
</div>
52+
<div className="w-24 h-24 md:w-32 md:h-32 opacity-20 pointer-events-none self-start">
53+
<img src="./images/main-mascot/mainmian.png" alt="Watermark" className="w-full h-full object-contain grayscale brightness-0" />
54+
</div>
55+
</div>
56+
</MangaPanel>
57+
58+
{/* Panel 3: Navigation - Documentation */}
59+
<MangaPanel
60+
gridArea="1 / 10 / 5 / 13"
61+
mobileGridArea="4 / 1 / 8 / 3"
62+
staticSrc={PANEL_IMAGES['data-patterns']}
63+
>
64+
<div className="h-full flex items-center justify-center">
65+
<a
66+
href="https://blossomtheme.github.io/Docs/"
67+
className="group relative"
68+
>
69+
<div className="speech-bubble font-manga text-xl md:text-3xl text-[#9200ff] group-hover:scale-110 group-hover:bg-[#ff058d] group-hover:text-white transition-all text-center">
70+
READ THE <br/> DOCS!
71+
</div>
72+
</a>
73+
</div>
74+
</MangaPanel>
75+
76+
{/* Panel 4: Navigation - Projects Hub */}
77+
<MangaPanel
78+
gridArea="5 / 1 / 13 / 4"
79+
mobileGridArea="8 / 1 / 13 / 3"
80+
staticSrc={PANEL_IMAGES['studio-interior']}
81+
isSlanted
82+
>
83+
<div className="bg-white/95 p-4 md:p-6 border-l-8 border-[#ff058d] h-full flex flex-col shadow-inner justify-between">
84+
<div>
85+
<div className="flex items-center gap-2 mb-6">
86+
<span className="action-tag">PORTFOLIO</span>
87+
<h2 className="font-manga text-2xl md:text-4xl text-[#9200ff]">OUR WORKS</h2>
88+
</div>
89+
<p className="text-sm md:text-base font-bold text-[#6AB0FF] leading-relaxed italic">
90+
"Every line of code is a stroke of ink on the canvas of the digital world."
91+
</p>
92+
</div>
93+
94+
<div className="flex-1 flex flex-col items-center justify-center">
95+
<a
96+
href="https://blossomtheme.github.io/pages/projects.html"
97+
className="group relative inline-block scale-90 md:scale-100"
98+
>
99+
<div className="absolute -inset-4 bg-[#ff058d] rotate-3 scale-95 group-hover:rotate-0 group-hover:scale-105 transition-all duration-300 -z-10"></div>
100+
<div className="bg-[#9200ff] text-white px-6 py-8 font-manga text-4xl lg:text-5xl text-center shadow-2xl border-4 border-white group-hover:-translate-y-2 group-hover:translate-x-2 transition-transform">
101+
EXPLORE<br/>PROJECTS
102+
</div>
103+
<div className="absolute -bottom-4 -right-4 font-manga text-[#9200ff] text-2xl bg-[#FF92DF] px-2 py-1 transform -rotate-12 group-hover:rotate-0 transition-transform flex items-center gap-1 shadow-sm">
104+
<img src="./public/images/logo.png" className="w-4 h-4" /> CLICK!
105+
</div>
106+
</a>
107+
</div>
108+
109+
<div className="mt-4 pt-4 border-t-2 border-[#9200ff] flex justify-between items-center">
110+
<span className="font-manga text-xl text-[#ff058d]">ACT 01</span>
111+
<div className="flex gap-1">
112+
{[1,2,3].map(d => <div key={d} className="w-2 h-2 rounded-full bg-[#9200ff]"></div>)}
113+
</div>
114+
</div>
115+
</div>
116+
</MangaPanel>
117+
118+
{/* Panel 5: Navigation - Palette */}
119+
<MangaPanel
120+
gridArea="9 / 4 / 13 / 7"
121+
mobileGridArea="8 / 3 / 11 / 5"
122+
staticSrc={PANEL_IMAGES['ink-jars']}
123+
>
124+
<div className="h-full flex flex-col justify-end p-2 md:p-4">
125+
<a
126+
href="https://github.com/BlossomTheme/BlossomTheme/tree/master/Palette"
127+
className="group relative"
128+
>
129+
<div className="bg-[#9200ff] text-white p-2 md:p-4 font-manga text-lg md:text-2xl text-center transform skew-x-[-10deg] shadow-lg group-hover:bg-[#ff058d] transition-colors">
130+
THE COLORS
131+
</div>
132+
<div className="absolute -top-6 -right-2 font-manga text-[#ff058d] text-3xl opacity-0 group-hover:opacity-100 transition-all group-hover:-translate-y-2">
133+
BAM!
134+
</div>
135+
</a>
136+
</div>
137+
</MangaPanel>
138+
139+
{/* Panel 6: Navigation - Socials/GitHub */}
140+
<MangaPanel
141+
gridArea="9 / 7 / 13 / 10"
142+
mobileGridArea="11 / 3 / 13 / 5"
143+
staticSrc={PANEL_IMAGES['kitsune-fox']}
144+
>
145+
<div className="h-full flex items-center justify-center">
146+
<a
147+
href="https://github.com/BlossomTheme"
148+
className="w-16 h-16 md:w-20 md:h-20 bg-white border-4 border-[#9200ff] rounded-full flex items-center justify-center hover:scale-125 hover:rotate-[360deg] transition-all duration-700 shadow-2xl relative group overflow-hidden"
149+
>
150+
<div className="absolute inset-0 bg-[#ff058d] rounded-full scale-0 group-hover:scale-110 transition-transform -z-10"></div>
151+
<div className="group-hover:hidden">
152+
<svg className="w-8 h-8 md:w-10 md:h-10 fill-[#9200ff]" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
153+
</div>
154+
<div className="hidden group-hover:block w-10 h-10 md:w-12 md:h-12 animate-pulse">
155+
<img src="./public/images/logo.png" alt="Logo" className="w-full h-full object-contain brightness-0 invert" />
156+
</div>
157+
</a>
158+
</div>
159+
</MangaPanel>
160+
161+
{/* Panel 7: Footer Detail */}
162+
<MangaPanel
163+
gridArea="5 / 10 / 13 / 13"
164+
mobileGridArea="13 / 1 / 13 / 5"
165+
staticSrc={PANEL_IMAGES['mountain-shrine']}
166+
isThick
167+
>
168+
<div className="h-full flex flex-col justify-end">
169+
<div className="bg-[#9200ff] text-white p-4 shadow-2xl relative">
170+
<div className="absolute top-4 right-4 w-12 h-12 opacity-40">
171+
<img src="./public/images/logo.png" alt="Stamp" className="w-full h-full object-contain" />
172+
</div>
173+
<div className="action-tag mb-2 !bg-[#ff058d]">EPILOGUE</div>
174+
<p className="text-[10px] md:text-xs font-black tracking-[0.2em] leading-tight uppercase mb-4">
175+
BLOSSOM ORG • EST. 2023<br/>
176+
REIMAGINING WORKSPACES<br/>
177+
THROUGH THE LENS OF ART
178+
</p>
179+
</div>
180+
</div>
181+
</MangaPanel>
182+
183+
{/* Dynamic Background Effect */}
184+
<div className="fixed top-0 left-0 w-full h-full pointer-events-none -z-20 overflow-hidden">
185+
<div className="absolute top-[-10%] left-[-10%] w-[120%] h-[120%] bg-gradient-to-br from-white via-[#f9f7f2] to-[#FF92DF] opacity-30"></div>
186+
<div className="absolute top-0 right-0 p-20 font-serif text-[30vw] opacity-5 select-none leading-none flex flex-col items-center">
187+
<span>夢</span>
188+
<img src="./public/images/logo.png" className="w-[10vw] opacity-20 grayscale" alt="Logo background" />
189+
</div>
190+
</div>
191+
</div>
192+
</>
193+
);
194+
195+
export default App;

‎components/AboutSection.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
2+
import React from 'react';
3+
4+
const AboutSection: React.FC = () => {
5+
return (
6+
<section className="relative py-48 bg-white overflow-hidden">
7+
{/* Background Japanese Watermark */}
8+
<div className="absolute top-1/2 left-0 -translate-y-1/2 text-[40vw] font-black text-[#FFF5F7] select-none pointer-events-none -z-0">精神</div>
9+
10+
<div className="max-w-[1200px] mx-auto px-8 relative z-10">
11+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
12+
<div className="reveal">
13+
<h2 className="text-[#FF85A2] font-black text-sm tracking-[0.4em] mb-8 uppercase">The Philosophy</h2>
14+
<h3 className="text-6xl font-serif font-black text-[#4A148C] leading-tight mb-12">
15+
Quietly <br /> Reimagining <br /> the Workspace
16+
</h3>
17+
<div className="w-24 h-1 bg-[#FF85A2] mb-12"></div>
18+
<p className="text-2xl text-[#6A4D8B] font-light leading-relaxed">
19+
We believe that the aesthetics of your environment are directly linked to the quality of your output.
20+
Blossom isn't just about color; it's about creating a mental space where focus is natural and stress is minimized.
21+
</p>
22+
</div>
23+
24+
<div className="grid grid-cols-2 gap-4 reveal">
25+
<div className="aspect-[3/4] rounded-[40px] bg-[#FFF5F7] p-10 flex flex-col justify-end gap-4 shadow-inner border border-pink-50 hover:-translate-y-4 transition-transform duration-500">
26+
<div className="text-4xl">🧘</div>
27+
<h5 className="font-black text-[#4A148C]">Zen Driven</h5>
28+
<p className="text-sm text-[#6A4D8B]">Eliminating visual noise for ultimate clarity.</p>
29+
</div>
30+
<div className="aspect-[3/4] rounded-[40px] bg-[#FFF5F7] p-10 flex flex-col justify-end gap-4 shadow-inner border border-pink-50 hover:-translate-y-4 transition-transform duration-500 mt-12">
31+
<div className="text-4xl">🎨</div>
32+
<h5 className="font-black text-[#4A148C]">Chromatic</h5>
33+
<p className="text-sm text-[#6A4D8B]">Scientifically picked palettes for long-term comfort.</p>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
39+
{/* Floating Lantern Placeholder */}
40+
<div className="absolute -bottom-10 right-20 w-32 h-64 opacity-10 pointer-events-none hidden lg:block">
41+
<svg viewBox="0 0 100 200" className="w-full h-full fill-[#FF85A2]">
42+
<rect x="30" y="0" width="40" height="20" />
43+
<rect x="10" y="20" width="80" height="150" rx="10" />
44+
<rect x="30" y="170" width="40" height="30" />
45+
</svg>
46+
</div>
47+
</section>
48+
);
49+
};
50+
51+
export default AboutSection;

‎components/Footer.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
2+
import React from 'react';
3+
// import { NAV_ITEMS } from '../constants';
4+
5+
const Footer: React.FC = () => {
6+
return (
7+
<footer className="bg-[#f9f7f2] pt-48 pb-12 px-8 overflow-hidden">
8+
<div className="max-w-[1800px] mx-auto">
9+
<div className="flex flex-col md:flex-row justify-between items-start gap-20 mb-32">
10+
<div className="max-w-xl">
11+
<h2 className="text-7xl md:text-[8vw] font-serif font-black text-[#9200ff] leading-none mb-12">
12+
Stay in <br /><span className="text-[#ff058d]">Blossom.</span>
13+
</h2>
14+
<div className="flex gap-12 text-sm font-black tracking-widest text-[#9200ff]">
15+
<a href="#" className="hover:text-[#ff058d] transition-colors">TWITTER</a>
16+
<a href="#" className="hover:text-[#ff058d] transition-colors">DISCORD</a>
17+
<a href="#" className="hover:text-[#ff058d] transition-colors">GITHUB</a>
18+
</div>
19+
</div>
20+
21+
<div className="grid grid-cols-2 gap-20">
22+
<div className="flex flex-col gap-6">
23+
<span className="text-xs font-black text-[#ff058d] tracking-widest uppercase\">Company</span>
24+
<a href=\"#\" className=\"text-xl font-serif hover:text-[#ff058d] transition-colors\">Home</a>
25+
<a href=\"https://blossomtheme.github.io/pages/projects.html\" className=\"text-xl font-serif hover:text-[#ff058d] transition-colors\">Projects</a>
26+
</div>
27+
<div className=\"flex flex-col gap-6\">
28+
<span className=\"text-xs font-black text-[#ff058d] tracking-widest uppercase\">Resources</span>
29+
<a href=\"https://blossomtheme.github.io/Docs/\" className=\"text-xl font-serif hover:text-[#ff058d] transition-colors\">Docs</a>
30+
<a href=\"https://github.com/BlossomTheme/BlossomTheme/tree/master/Palette\" className=\"text-xl font-serif hover:text-[#ff058d] transition-colors\">Palette</a>
31+
</div>
32+
</div>
33+
</div>
34+
35+
<div className="flex flex-col md:flex-row justify-between items-center pt-12 border-t border-pink-100 gap-8">
36+
<div className="text-xs font-bold text-[#6AB0FF] tracking-[0.2em] uppercase">
37+
© {new Date().getFullYear()} BLOSSOM THEME • MADE WITH PURPOSE
38+
</div>
39+
<div className="flex items-center gap-4 text-xs font-bold text-[#6AB0FF]">
40+
<span className="w-12 h-px bg-pink-200"></span>
41+
BACK TO TOP
42+
</div>
43+
</div>
44+
</div>
45+
</footer>
46+
);
47+
};
48+
49+
export default Footer;

‎components/GeneratedImage.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
2+
import React, { useState, useEffect } from 'react';
3+
// Corrected import to use the available generateMangaPanel function
4+
import { generateMangaPanel } from '../lib/gemini';
5+
6+
interface GeneratedImageProps {
7+
subject: string;
8+
className?: string;
9+
placeholderIcon?: string;
10+
}
11+
12+
const GeneratedImage: React.FC<GeneratedImageProps> = ({ subject, className, placeholderIcon }) => {
13+
const [imageUrl, setImageUrl] = useState<string | null>(null);
14+
const [loading, setLoading] = useState(true);
15+
16+
useEffect(() => {
17+
let isMounted = true;
18+
const fetchImage = async () => {
19+
setLoading(true);
20+
// Changed generateBlossomImage call to generateMangaPanel
21+
const url = await generateMangaPanel(subject);
22+
if (isMounted) {
23+
setImageUrl(url);
24+
setLoading(false);
25+
}
26+
};
27+
28+
fetchImage();
29+
return () => { isMounted = false; };
30+
}, [subject]);
31+
32+
if (loading) {
33+
return (
34+
<div className={`${className} bg-pink-50 animate-pulse flex items-center justify-center`}>
35+
<div className="text-4xl opacity-20">{placeholderIcon || '🌸'}</div>
36+
</div>
37+
);
38+
}
39+
40+
return (
41+
<div className={`${className} overflow-hidden bg-white`}>
42+
{imageUrl ? (
43+
<img
44+
src={imageUrl}
45+
alt={subject}
46+
className="w-full h-full object-cover transition-opacity duration-1000 opacity-100"
47+
/>
48+
) : (
49+
<div className="w-full h-full flex items-center justify-center text-[#FF85A2]">
50+
{placeholderIcon || '🌸'}
51+
</div>
52+
)}
53+
</div>
54+
);
55+
};
56+
57+
export default GeneratedImage;

0 commit comments

Comments
 (0)