convert-next.js
This commit is contained in:
R-Bharathraj
175
src/components/PhoneWidget.tsx
Normal file
175
src/components/PhoneWidget.tsx
Normal file
@@ -0,0 +1,175 @@
|
||||
'use client';
|
||||
|
||||
import React, { useRef, useEffect, useCallback } from 'react';
|
||||
|
||||
export default function PhoneWidget() {
|
||||
const stageRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const onMove = useCallback((e: MouseEvent) => {
|
||||
const el = stageRef.current;
|
||||
if (!el) return;
|
||||
const r = el.getBoundingClientRect();
|
||||
const px = (e.clientX - r.left) / r.width - 0.5;
|
||||
const py = (e.clientY - r.top) / r.height - 0.5;
|
||||
el.style.setProperty('--rx', `${(-py * 8).toFixed(2)}deg`);
|
||||
el.style.setProperty('--ry', `${(px * 10).toFixed(2)}deg`);
|
||||
el.style.setProperty('--tx', `${(px * 18).toFixed(1)}px`);
|
||||
el.style.setProperty('--ty', `${(py * 18).toFixed(1)}px`);
|
||||
}, []);
|
||||
|
||||
const onLeave = useCallback(() => {
|
||||
const el = stageRef.current;
|
||||
if (!el) return;
|
||||
el.style.setProperty('--rx', '0deg');
|
||||
el.style.setProperty('--ry', '0deg');
|
||||
el.style.setProperty('--tx', '0px');
|
||||
el.style.setProperty('--ty', '0px');
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const el = stageRef.current;
|
||||
if (!el) return;
|
||||
el.addEventListener('mousemove', onMove);
|
||||
el.addEventListener('mouseleave', onLeave);
|
||||
return () => {
|
||||
el.removeEventListener('mousemove', onMove);
|
||||
el.removeEventListener('mouseleave', onLeave);
|
||||
};
|
||||
}, [onMove, onLeave]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<style>{`
|
||||
@keyframes pwOrbFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-22px) scale(1.04)} }
|
||||
@keyframes pwOrb2Float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(18px) scale(0.97)} }
|
||||
@keyframes pwGlow { 0%,100%{box-shadow:0 0 30px rgba(244,190,40,0.2)} 50%{box-shadow:0 0 60px rgba(244,190,40,0.5),0 0 120px rgba(244,190,40,0.2)} }
|
||||
@keyframes pwScreenShimmer { 0%{left:-40%} 60%{left:120%} 100%{left:120%} }
|
||||
.pw-hero-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6vw; width: 100%; }
|
||||
@media (max-width: 900px) { .pw-hero-grid { grid-template-columns: 1fr; } .pw-widget-col { display: none; } }
|
||||
`}</style>
|
||||
|
||||
<div
|
||||
ref={stageRef}
|
||||
style={{
|
||||
position: 'relative', display: 'flex',
|
||||
justifyContent: 'center', alignItems: 'center',
|
||||
perspective: 1200, cursor: 'default',
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
transformStyle: 'preserve-3d',
|
||||
transform: 'rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(var(--tx,0px), var(--ty,0px))',
|
||||
transition: 'transform 0.5s cubic-bezier(0.22,1,0.36,1)',
|
||||
position: 'relative',
|
||||
}}>
|
||||
{/* Glow ring */}
|
||||
<div style={{
|
||||
position: 'absolute', inset: -36, borderRadius: '56px',
|
||||
background: 'radial-gradient(circle at 50% 50%, rgba(244,190,40,0.2) 0%, transparent 70%)',
|
||||
animation: 'pwGlow 3s ease-in-out infinite',
|
||||
}} />
|
||||
|
||||
{/* Phone shell */}
|
||||
<div style={{
|
||||
width: 268, height: 548, borderRadius: '48px',
|
||||
background: 'linear-gradient(160deg, #22223a 0%, #10101c 100%)',
|
||||
border: '1.5px solid rgba(255,255,255,0.1)',
|
||||
boxShadow: '0 70px 130px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.1)',
|
||||
display: 'flex', flexDirection: 'column', overflow: 'hidden',
|
||||
animation: 'pwOrbFloat 6s ease-in-out infinite', position: 'relative',
|
||||
}}>
|
||||
{/* Shimmer sweep */}
|
||||
<div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 20, overflow: 'hidden', borderRadius: '48px' }}>
|
||||
<div style={{
|
||||
position: 'absolute', top: '-20%', left: 0, width: '40%', height: '140%',
|
||||
background: 'linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.07) 50%, transparent 100%)',
|
||||
animation: 'pwScreenShimmer 4.5s ease-in-out infinite', animationDelay: '1s',
|
||||
}} />
|
||||
</div>
|
||||
|
||||
{/* Dynamic island */}
|
||||
<div style={{ display: 'flex', justifyContent: 'center', paddingTop: 16, paddingBottom: 4 }}>
|
||||
<div style={{ width: 96, height: 28, borderRadius: 20, background: '#080810', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
|
||||
<div style={{ width: 10, height: 10, borderRadius: '50%', background: '#1a1a28', border: '1px solid rgba(255,255,255,0.08)' }} />
|
||||
<div style={{ width: 6, height: 6, borderRadius: '50%', background: '#0d0d18' }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<div style={{ padding: '8px 22px 12px' }}>
|
||||
<div style={{ fontSize: 10, color: '#f4be28', fontWeight: 700, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Good Morning</div>
|
||||
<div style={{ fontSize: 16, color: '#fff', fontWeight: 800, fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>Loyaly ✦</div>
|
||||
</div>
|
||||
|
||||
{/* Points card */}
|
||||
<div style={{
|
||||
margin: '0 14px', borderRadius: 22,
|
||||
background: 'linear-gradient(135deg, #f4be28 0%, #e09820 100%)',
|
||||
padding: '18px 20px', boxShadow: '0 8px 24px rgba(244,190,40,0.35)',
|
||||
position: 'relative', overflow: 'hidden',
|
||||
}}>
|
||||
<div style={{ position: 'absolute', top: '-30%', right: '-10%', width: 110, height: 110, borderRadius: '50%', background: 'rgba(255,255,255,0.12)' }} />
|
||||
<div style={{ fontSize: 10, color: 'rgba(23,21,18,0.65)', fontWeight: 700, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Total Points</div>
|
||||
<div style={{ fontSize: 34, color: '#171512', fontWeight: 900, fontFamily: 'Manrope, sans-serif', letterSpacing: '-0.03em', marginTop: 2 }}>284</div>
|
||||
<div style={{ fontSize: 10, color: 'rgba(23,21,18,0.6)', fontFamily: 'Manrope, sans-serif', marginTop: 4 }}>≈ ₹284 redeemable</div>
|
||||
</div>
|
||||
|
||||
{/* Activity feed */}
|
||||
<div style={{ padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 7, flex: 1 }}>
|
||||
{[
|
||||
{ label: 'Daily Login', pts: '+50', color: '#4ade80' },
|
||||
{ label: 'Walking 5k Steps', pts: '+80', color: '#4ade80' },
|
||||
{ label: 'Spin Wheel', pts: '-50', color: '#f87171' },
|
||||
].map((item, i) => (
|
||||
<div key={i} style={{
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||
background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: '10px 13px',
|
||||
border: '1px solid rgba(255,255,255,0.06)',
|
||||
}}>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.78)', fontFamily: 'Manrope, sans-serif' }}>{item.label}</span>
|
||||
<span style={{ fontSize: 12, color: item.color, fontWeight: 700, fontFamily: 'Manrope, sans-serif' }}>{item.pts}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Nav dots */}
|
||||
<div style={{ display: 'flex', justifyContent: 'center', gap: 6, padding: '10px 0 20px' }}>
|
||||
{[1, 0, 0, 0].map((a, i) => (
|
||||
<div key={i} style={{ width: a ? 22 : 6, height: 4, borderRadius: 2, background: a ? '#f4be28' : 'rgba(255,255,255,0.2)' }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating chip — top left */}
|
||||
<div style={{
|
||||
position: 'absolute', top: '12%', left: '-22%', borderRadius: 16,
|
||||
padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10,
|
||||
background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)',
|
||||
border: '1px solid rgba(255,255,255,0.12)',
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
|
||||
animation: 'pwOrb2Float 7s ease-in-out infinite',
|
||||
}}>
|
||||
<div style={{ width: 30, height: 30, borderRadius: 9, background: 'rgba(74,222,128,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4ade80', fontSize: 14, fontWeight: 800 }}>↑</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, color: '#fff', fontFamily: 'Manrope, sans-serif' }}>+120 pts</div>
|
||||
<div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif' }}>just now</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating chip — bottom right */}
|
||||
<div style={{
|
||||
position: 'absolute', bottom: '14%', right: '-22%', borderRadius: 16,
|
||||
padding: '12px 16px',
|
||||
background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)',
|
||||
border: '1px solid rgba(255,255,255,0.12)',
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
|
||||
animation: 'pwOrbFloat 8s ease-in-out infinite',
|
||||
}}>
|
||||
<div style={{ fontSize: 9, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 3 }}>Redeemable</div>
|
||||
<div style={{ fontSize: 17, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>₹284.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user