me/pi-ku
1
0
Fork 0
Code Issues Pull Requests 1 Actions Projects Releases Wiki Activity

refactor: add image logo variant and subtle texts on home

Browse Source
This commit is contained in:
me
2026-05-07 05:52:52 +05:30
parent 167b1d2875
commit 06f5c2d119
2 changed files with 425 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Logo.tsx
+14 -7
View File
@@ -3,10 +3,11 @@ import "@fontsource/knewave/400.css";
interface LogoProps { interface LogoProps {
scale?: number; scale?: number;
type?: "inline" | "mono" | "logo"; type?: "inline" | "mono" | "logo" | null;
ul?: boolean;
} }
export default function Logo({ scale = 1, type = "logo" }: LogoProps) { export default function Logo({ scale = 1, type = null, ul = false }: LogoProps) {
if (type === "inline") { if (type === "inline") {
return ( return (
<span className={"text-accent font-display italic "}> <span className={"text-accent font-display italic "}>
@@ -24,24 +25,30 @@ export default function Logo({ scale = 1, type = "logo" }: LogoProps) {
); );
} }
if (type === "logo") {
return (
<img src="/android-chrome-512x512.png" alt="Pi. Ku. logo" className="mx-auto" width={scale * 100} />
);
}
return ( return (
<div <div
role="img" role="img"
aria-label="Pi. Ku. logo" aria-label="Pi. Ku. logo"
className="inline-flex items-baseline justify-center leading-none select-none" className={`inline-flex items-baseline justify-center leading-none select-none ${ul ? "ul-wavy" : ""}`}
style={{ fontFamily: "'Knewave', serif", scale }} style={{ fontFamily: "'Knewave', serif", scale }}
> >
<span className={`text-3xl font-light text-accent`}>Pi</span> <span className="text-3xl font-light text-accent">Pi</span>
<DotIcon <DotIcon
weight="fill" weight="fill"
size={12} size={12}
className={`text-primary translate-y-1 -mx-px`} className="text-primary translate-y-1 -mx-px"
/> />
<span className={`text-3xl font-light text-accent`}>&nbsp;Ku</span> <span className="text-3xl font-light text-accent">&nbsp;Ku</span>
<DotIcon <DotIcon
weight="fill" weight="fill"
size={12} size={12}
className={`text-primary translate-y-1 -mx-px`} className="text-primary translate-y-1 -mx-px"
/> />
</div> </div>
); );
frontend/src/pages/Home.tsx
+16 -13
View File
@@ -14,6 +14,9 @@ import Saajan from "../components/ui/Saajan.tsx";
import { ROUTES } from "../config/routes.ts"; import { ROUTES } from "../config/routes.ts";
import { formatDate } from "../utils/dateFormat.ts"; import { formatDate } from "../utils/dateFormat.ts";
import "@fontsource/space-mono/index.css";
import "@fontsource/architects-daughter/index.css";
export default function Home() { export default function Home() {
const sectionContainer1 = useRef<HTMLDivElement>(null); const sectionContainer1 = useRef<HTMLDivElement>(null);
const { scrollYProgress } = useScroll({ const { scrollYProgress } = useScroll({
@@ -64,12 +67,12 @@ export default function Home() {
scale: useTransform(scrollYProgress, [0, 0.12], [1, 10]), scale: useTransform(scrollYProgress, [0, 0.12], [1, 10]),
}} }}
> >
<h1 className="text-neutral-content/40 text-4xl md:text-6xl text-center px-6"> <h1 className="text-neutral text-4xl md:text-6xl text-center px-6">
You've been carrying something You've been carrying something
</h1> </h1>
<h2 className="text-primary text-5xl md:text-7xl font-extralight mt-4 italic font-display animate-pulse"> <motion.h2 className="text-primary text-5xl md:text-7xl mt-4 italic font-display font-light">
unsaid unsaid
</h2> </motion.h2>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -97,9 +100,9 @@ export default function Home() {
}} }}
transition={{ delay: 4 }} transition={{ delay: 4 }}
> >
<Logo scale={2} /> <Logo type="logo" scale={1.5} ul={true} />
<motion.div <motion.div
className="mt-6 text-4xl md:text-6xl text-base-content/60 " className="font-serif font-extralight mt-6 text-4xl md:text-6xl text-neutral "
style={{ style={{
opacity: useTransform( opacity: useTransform(
scrollYProgress, scrollYProgress,
@@ -119,8 +122,8 @@ export default function Home() {
</span> </span>
,<br /> ,<br />
<motion.span <motion.span
className="opacity-0 text-3xl md:text-5xl" className="opacity-0 text-2xl md:text-4xl font-hand tracking-[0.4em] text-neutral"
transition={{ delay: 3 }} transition={{ delay: 5 }}
whileInView={{ opacity: 1 }} whileInView={{ opacity: 1 }}
viewport={{ once: false, amount: 0.3 }} viewport={{ once: false, amount: 0.3 }}
> >
@@ -168,11 +171,11 @@ export default function Home() {
className="absolute text-4xl md:text-6xl text-center px-10 leading-tight" className="absolute text-4xl md:text-6xl text-center px-10 leading-tight"
> >
seal it{" "} seal it{" "}
<span className="text-secondary font-display italic font-extralight"> <span className="text-success font-mono tracking-tighter font-extrabold">
secure secure
</span>{" "} </span>{" "}
and{" "} and{" "}
<span className="text-secondary font-display font-extralight italic"> <span className="text-info font-mono tracking-tighter">
private private
</span> </span>
. .
@@ -252,7 +255,7 @@ export default function Home() {
{/* Outro */} {/* Outro */}
<motion.h2 <motion.h2
className={ className={
"italic absolute text-4xl md:text-6xl text-center px-10 leading-tight" "italic absolute text-4xl md:text-6xl text-center px-10 leading-tight text-neutral-content/50"
} }
style={{ style={{
opacity: useTransform(scrollYProgress, [0.9, 1], [0, 1]), opacity: useTransform(scrollYProgress, [0.9, 1], [0, 1]),
@@ -264,7 +267,7 @@ export default function Home() {
{/* CTA */} {/* CTA */}
<motion.div <motion.div
className={ className={
"z-100 absolute -bottom-12 md:bottom-0 font-display flex flex-wrap md:flex-nowrap gap-4 md:gap-12 justify-center" "z-100 absolute -bottom-12 md:bottom-0 font-hand flex flex-wrap md:flex-nowrap gap-4 md:gap-12 justify-center"
} }
style={{ style={{
opacity: useTransform(scrollYProgress, [0.98, 1], [0, 1]), opacity: useTransform(scrollYProgress, [0.98, 1], [0, 1]),
@@ -288,7 +291,7 @@ export default function Home() {
</button> </button>
<button <button
className={ className={
"md:opacity-50 hover:opacity-100 btn rounded-full btn-primary btn-wide md:btn-xl md:grayscale hover:grayscale-0 hover:-translate-y-1 transition-all duration-1000" "md:opacity-50 hover:opacity-100 btn rounded-full btn-primary btn-wide md:btn-xl md:grayscale-50 hover:grayscale-0 focus:grayscale-0 active:grayscale-0 hover:-translate-y-1 transition-all duration-1000"
} }
type={"button"} type={"button"}
onClick={() => navigate(ROUTES.ONBOARD, { replace: true })} onClick={() => navigate(ROUTES.ONBOARD, { replace: true })}
@@ -343,7 +346,7 @@ export default function Home() {
ignite={ignite} ignite={ignite}
recipient={recipient} recipient={recipient}
date={formatDate(new Date().toISOString())} date={formatDate(new Date().toISOString())}
onRevealComplete={() => {}} onRevealComplete={() => { }}
isFlip={isEnvelopeFlipped} isFlip={isEnvelopeFlipped}
openFlap={flapOpen} openFlap={flapOpen}
/> />