me/pi-ku
1
0
Fork 0
mirror of https://github.com/ramvignesh-b/pi-ku.git synced 2026-05-04 08:56:52 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: apply UI refinements to home page and add saajan

Browse Source
This commit is contained in:
ramvignesh-b
2026-05-01 01:41:02 +05:30
parent a0cacfbc8c
commit a77e88496b
1 changed files with 38 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Home.tsx
+36 -9
View File
@@ -10,6 +10,7 @@ import { useRef, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import Logo from "../components/Logo"; import Logo from "../components/Logo";
import { EnvelopeReveal } from "../components/reader/EnvelopeReveal"; import { EnvelopeReveal } from "../components/reader/EnvelopeReveal";
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";
@@ -213,9 +214,20 @@ export default function Home() {
style={{ style={{
opacity: useTransform(smoothProgress1, [0.66, 0.7], [0, 1]), opacity: useTransform(smoothProgress1, [0.66, 0.7], [0, 1]),
}} }}
>
<motion.span
className="font-display text-accent"
style={{
color: useTransform(
smoothProgress1,
[0.67, 1],
["var(--color-accent)", "var(--color-neutral)"],
),
}}
> >
{" "} {" "}
or{" "} or{" "}
</motion.span>
<span className="font-display text-success"> <span className="font-display text-success">
yourself in the future yourself in the future
</span> </span>
@@ -270,7 +282,7 @@ export default function Home() {
> >
<button <button
className={ className={
"opacity-50 hover:opacity-100 btn btn-ghost btn-wide md:btn-xl rounded-full font-extralight grayscale hover:grayscale-0 hover:-translate-y-1 transition-all duration-1000" "md:opacity-50 hover:opacity-100 btn btn-ghost btn-wide md:btn-xl rounded-full font-extralight md:grayscale hover:grayscale-0 hover:-translate-y-1 transition-all duration-1000"
} }
type={"button"} type={"button"}
> >
@@ -279,7 +291,7 @@ export default function Home() {
</button> </button>
<button <button
className={ className={
"opacity-50 hover:opacity-100 btn btn-primary rounded-full btn-wide md:btn-xl grayscale hover:grayscale-0 hover:-translate-y-1 transition-all duration-1000" "md:opacity-50 hover:opacity-100 btn btn-primary rounded-full btn-wide md:btn-xl md:grayscale hover: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 })}
@@ -298,11 +310,7 @@ export default function Home() {
[0.3, 0.4, 0.5, 0.52], [0.3, 0.4, 0.5, 0.52],
[0, 1, 0.1, 0], [0, 1, 0.1, 0],
), ),
y: useTransform( y: useTransform(smoothProgress1, [0.3, 0.45, 0.5], [300, 0, 200]),
smoothProgress1,
[0.3, 0.45, 0.5],
[400, 100, 300],
),
scale: useTransform( scale: useTransform(
smoothProgress1, smoothProgress1,
[0.3, 0.4, 0.5], [0.3, 0.4, 0.5],
@@ -310,7 +318,7 @@ export default function Home() {
), ),
}} }}
> >
<div className="mockup-phone w-100 border-primary"> <div className="mockup-phone w-[75vw] border-primary">
<div className="mockup-phone-camera"></div> <div className="mockup-phone-camera"></div>
<div className="mockup-phone-display"> <div className="mockup-phone-display">
<img alt="letter" src="/screenshots/letter.webp" /> <img alt="letter" src="/screenshots/letter.webp" />
@@ -319,7 +327,7 @@ export default function Home() {
</motion.div> </motion.div>
{/* Envelope */} {/* Envelope */}
<motion.div <motion.div
className="absolute scale-80" className="absolute scale-50 md:scale-80 z-10"
style={{ style={{
opacity: useTransform( opacity: useTransform(
smoothProgress1, smoothProgress1,
@@ -339,6 +347,25 @@ export default function Home() {
openFlap={flapOpen} openFlap={flapOpen}
/> />
</motion.div> </motion.div>
{/* Saajan */}
<motion.div
className="absolute bottom-0 -mb-18 z-10 font-sans"
style={{
opacity: useTransform(
smoothProgress1,
[0.98, 0.995, 1],
[0, 0.5, 1],
),
y: useTransform(smoothProgress1, [0.98, 1], [50, 0]),
}}
>
<Saajan
message={
"I think we forget things\nif there is nobody to tell them."
}
position={"top"}
/>
</motion.div>
{/* Orb */} {/* Orb */}
<motion.div <motion.div
className="w-48 z-100 h-48 rounded-full blur-3xl opacity-20" className="w-48 z-100 h-48 rounded-full blur-3xl opacity-20"