Loyaly/loyalyweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup old PHP source files and update Next.js pages and components

Browse Source
This commit is contained in:
R-Bharathraj
2026-06-30 17:02:35 +05:30
parent 7175adb0db
commit 7cf5035c89
1223 changed files with 438 additions and 168007 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/home/TheLoop.tsx
View File

@@ -155,7 +155,7 @@ export default function TheLoop() {
<h2 style={{
margin: '0 0 18px',
fontSize: 'clamp(2.6rem, 6vw, 5rem)',
fontWeight: 900, color: '#fff',
fontWeight: 800, color: '#fff',
lineHeight: 0.92, letterSpacing: '-0.05em',
fontFamily: 'Sora, sans-serif',
}}>
@@ -222,6 +222,7 @@ export default function TheLoop() {
style={{
flex: 1,
position: 'relative',
zIndex: 1,
padding: 'clamp(26px, 2.2vw, 38px) clamp(20px, 1.8vw, 28px)',
borderRadius: 26,
background: isActive ? 'rgba(244,190,40,0.07)' : 'rgba(255,255,255,0.025)',
@@ -276,14 +277,15 @@ export default function TheLoop() {
width: 'clamp(28px, 3vw, 56px)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
position: 'relative',
zIndex: 0,
}}>
<div style={{
<div className="loop-connector-line" style={{
position: 'absolute', left: 0, right: 0, height: 2, borderRadius: 2,
background: 'linear-gradient(90deg, rgba(244,190,40,0.1), rgba(244,190,40,0.45), rgba(244,190,40,0.1))',
backgroundSize: '200% 100%',
animation: revealed ? 'loopFlow 1.8s linear infinite' : 'none',
}} />
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#f4be28" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ position: 'relative', zIndex: 2, opacity: 0.8 }}>
<svg className="loop-connector-arrow" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#f4be28" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ position: 'relative', zIndex: 2, opacity: 0.8 }}>
<path d="M5 12h14M13 6l6 6-6 6" />
</svg>
</div>
@@ -330,9 +332,25 @@ export default function TheLoop() {
@keyframes loopShimmer { 0%{background-position:200% center} 100%{background-position:-200% center} }
@keyframes loopDash { to { stroke-dashoffset: -32; } }
@keyframes loopFlow { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes loopFlowVertical { 0%{background-position:0 200%} 100%{background-position:0 -200%} }
@keyframes loopArrowBounceH { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes loopArrowBounceV { 0%,100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(5px); } }
.loop-connector-arrow { animation: loopArrowBounceH 1.4s ease-in-out infinite; }
@media (max-width: 880px) {
.loop-row { flex-direction: column; }
.loop-connector { width: 100% !important; height: 40px; transform: rotate(90deg); }
.loop-card { z-index: 1; }
.loop-connector {
width: 100% !important; height: 40px; z-index: 0;
}
.loop-connector-line {
left: 50% !important; right: auto !important; top: 0 !important; bottom: 0 !important;
width: 2px !important; height: 100% !important;
transform: translateX(-50%);
background: linear-gradient(180deg, rgba(244,190,40,0.1), rgba(244,190,40,0.45), rgba(244,190,40,0.1)) !important;
background-size: 100% 200% !important;
animation-name: loopFlowVertical !important;
}
.loop-connector-arrow { animation: loopArrowBounceV 1.4s ease-in-out infinite; }
.loop-arc, .loop-arc-label { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {