Skip to content

Commit 822083d

Browse files
Mishra-coderMishra-coder
committed
fix:splash screen,login UI update
1 parent 7a08c0e commit 822083d

5 files changed

Lines changed: 396 additions & 124 deletions

File tree

‎frontend/src/App.jsx‎

Lines changed: 17 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
import { useState, useMemo, useEffect } from 'react'
1+
import { useState, useMemo } from 'react'
22
import Header from './components/Header'
33
import Sidebar from './components/Sidebar'
44
import ProductGrid from './components/ProductGrid'
55
import ProductDetail from './components/ProductDetail'
66
import { ALL_PRODUCTS } from './data/products'
77
import { motion, AnimatePresence } from 'framer-motion'
8-
import { X, ShoppingBag, Heart, User, Trash2 } from 'lucide-react'
8+
import { X, ShoppingBag, Heart, Trash2 } from 'lucide-react'
99
import { useGoogleLogin } from '@react-oauth/google'
1010
import Checkout from './components/Checkout'
1111
import AccountModal from './components/AccountModal'
1212

1313
function App() {
14-
const [showSplash, setShowSplash] = useState(true);
1514
const [selectedCategories, setSelectedCategories] = useState([]);
1615
const [selectedProduct, setSelectedProduct] = useState(null);
1716
const [activeOverlay, setActiveOverlay] = useState(null);
@@ -42,13 +41,6 @@ function App() {
4241
} catch { return []; }
4342
});
4443

45-
useEffect(() => {
46-
const timer = setTimeout(() => {
47-
setShowSplash(false);
48-
}, 2500);
49-
return () => clearTimeout(timer);
50-
}, []);
51-
5244
const userOrdersKey = (user) => `zappify_orders_${user?.email}`;
5345

5446
const handleLogin = (user) => {
@@ -152,10 +144,7 @@ function App() {
152144

153145
return (
154146
<AnimatePresence mode="wait">
155-
{showSplash ? (
156-
<SplashScreen key="splash" />
157-
) : (
158-
<motion.div
147+
<motion.div
159148
key="app-content"
160149
className="zappify-app"
161150
initial={{ opacity: 0 }}
@@ -311,42 +300,10 @@ function App() {
311300
/>
312301
)}
313302
</motion.div>
314-
)}
315303
</AnimatePresence>
316304
);
317305
}
318306

319-
const SplashScreen = () => (
320-
<motion.div
321-
className="splash-container"
322-
initial={{ opacity: 1 }}
323-
exit={{ opacity: 0 }}
324-
transition={{ duration: 0.8, ease: "easeInOut" }}
325-
>
326-
<motion.div
327-
className="splash-content"
328-
initial={{ scale: 0.85, opacity: 0, y: 10 }}
329-
animate={{ scale: 1, opacity: 1, y: 0 }}
330-
transition={{
331-
duration: 1,
332-
ease: [0.22, 1, 0.36, 1],
333-
opacity: { duration: 0.6 }
334-
}}
335-
>
336-
<div className="splash-logo">
337-
<img src="/logo.png" alt="Zappify" className="splash-logo-img" />
338-
</div>
339-
<div className="splash-subtitle">Premium Shoe Store</div>
340-
<motion.div
341-
className="splash-loader"
342-
initial={{ opacity: 0 }}
343-
animate={{ opacity: 1 }}
344-
transition={{ delay: 0.8 }}
345-
/>
346-
</motion.div>
347-
</motion.div>
348-
);
349-
350307
const Overlay = ({ type, onClose, cartItems, wishlistItems, onRemoveFromCart, onToggleWishlist, onLoginSuccess, onCheckout, loggedInUser, onSwitchOverlay }) => {
351308
const [isSignUp, setIsSignUp] = useState(false);
352309
const [formData, setFormData] = useState({ name: '', email: '', password: '', confirm: '' });
@@ -475,29 +432,32 @@ const Overlay = ({ type, onClose, cartItems, wishlistItems, onRemoveFromCart, on
475432
</div>
476433
</motion.div>
477434
) : (
478-
<motion.div className="modal" initial={{ opacity: 0, scale: 0.9, y: 20 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.9, y: 20 }}>
479-
<div className="modal-header">
480-
<button className="close-btn" onClick={onClose}><X size={24} /></button>
435+
<motion.div className="modal login-modal-new" initial={{ opacity: 0, scale: 0.9, y: 20 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.9, y: 20 }}>
436+
<div className="login-hero-banner">
437+
<img src="/hero-nike.png" alt="Nike" className="login-hero-img" />
438+
<button className="close-btn login-close-btn" onClick={onClose}><X size={20} /></button>
439+
<div className="login-hero-overlay">
440+
<p className="login-hero-tag">ZAPPIFY</p>
441+
<h2 className="login-hero-title">Premium<br />Footwear</h2>
442+
<p className="login-hero-sub">Step into the future</p>
443+
</div>
481444
</div>
482-
<div className="modal-content login-modal">
483-
<User size={48} className="user-icon-large" />
445+
<div className="login-form-card">
484446
<h2>{isSignUp ? 'Create Account' : 'Welcome Back'}</h2>
485447
<p>{isSignUp ? 'Join Zappify today' : 'Login to your Zappify account'}</p>
486-
487448
<div className="auth-form">
488449
{isSignUp && <input type="text" placeholder="Full Name" value={formData.name} onChange={e => setFormData({ ...formData, name: e.target.value })} />}
489450
<input type="email" placeholder="Email Address" value={formData.email} onChange={e => setFormData({ ...formData, email: e.target.value })} />
490451
<input type="password" placeholder="Password" value={formData.password} onChange={e => setFormData({ ...formData, password: e.target.value })} />
491452
{isSignUp && <input type="password" placeholder="Confirm Password" value={formData.confirm} onChange={e => setFormData({ ...formData, confirm: e.target.value })} />}
492453
{error && <p className="auth-error">{error}</p>}
493454
<button className="btn-primary auth-btn" onClick={handleAuth}>{isSignUp ? 'CREATE ACCOUNT' : 'SIGN IN'}</button>
494-
<div className="separator"><span>OR CONTINUE WITH</span></div>
495-
<button className="google-custom-btn" onClick={() => googleLogin()}>
496-
<img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" alt="Google" />
497-
{isSignUp ? 'Sign up with Google' : 'Sign in with Google'}
455+
<div className="separator"><span>OR</span></div>
456+
<button className="google-proper-btn" onClick={() => googleLogin()}>
457+
<img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" alt="Google" className="google-icon-large" />
458+
<span>{isSignUp ? 'Sign up with Google' : 'Sign in with Google'}</span>
498459
</button>
499460
</div>
500-
501461
<p className="auth-footer">
502462
{isSignUp ? 'Already have an account? ' : "Don't have an account? "}
503463
<span onClick={() => setIsSignUp(!isSignUp)}>{isSignUp ? 'Sign In' : 'Sign Up'}</span>

‎frontend/src/index.css‎

Lines changed: 236 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ ul {
261261

262262
.google-btn { height: 50px; justify-content: center; }
263263

264-
.auth-footer { margin-top: 2rem; border-top: 1px solid var(--slate-100); padding-top: 1.5rem; font-size: 0.9rem; }
264+
.auth-footer { margin-top: 2rem; border-top: 1px solid var(--slate-100); padding-top: 1.5rem; font-size: 0.9rem; text-align: center; }
265265
.auth-footer span { color: var(--brand-red); font-weight: 700; cursor: pointer; text-decoration: underline; }
266266

267267
@media (max-width: 480px) {
@@ -1564,3 +1564,238 @@ ul {
15641564
transform: rotate(-8deg);
15651565
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
15661566
}
1567+
1568+
.landing-page {
1569+
position: fixed;
1570+
inset: 0;
1571+
z-index: 9999;
1572+
background: #000;
1573+
display: flex;
1574+
align-items: center;
1575+
justify-content: space-between;
1576+
padding: 0 8vw;
1577+
overflow: hidden;
1578+
}
1579+
1580+
.landing-bg {
1581+
position: absolute;
1582+
inset: 0;
1583+
background: radial-gradient(ellipse at 70% 50%, rgba(255, 107, 0, 0.12) 0%, transparent 60%);
1584+
pointer-events: none;
1585+
}
1586+
1587+
.landing-content {
1588+
flex: 1;
1589+
z-index: 2;
1590+
max-width: 560px;
1591+
}
1592+
1593+
.landing-logo {
1594+
font-size: 1.8rem;
1595+
font-weight: 900;
1596+
letter-spacing: -1px;
1597+
color: #fff;
1598+
margin-bottom: 2rem;
1599+
}
1600+
1601+
.landing-tag {
1602+
color: #FF6B00;
1603+
font-size: 0.75rem;
1604+
font-weight: 800;
1605+
letter-spacing: 0.3em;
1606+
text-transform: uppercase;
1607+
margin-bottom: 1rem;
1608+
}
1609+
1610+
.landing-title {
1611+
font-size: clamp(3rem, 6vw, 5.5rem);
1612+
font-weight: 900;
1613+
color: #fff;
1614+
line-height: 1.0;
1615+
letter-spacing: -3px;
1616+
margin-bottom: 1.5rem;
1617+
}
1618+
1619+
.landing-sub {
1620+
font-size: 1.1rem;
1621+
color: #64748B;
1622+
line-height: 1.6;
1623+
max-width: 420px;
1624+
margin-bottom: 2.5rem;
1625+
}
1626+
1627+
.landing-cta {
1628+
background: #FF6B00;
1629+
color: #fff;
1630+
border: none;
1631+
padding: 1rem 3rem;
1632+
font-size: 1rem;
1633+
font-weight: 800;
1634+
letter-spacing: 1.5px;
1635+
border-radius: 50px;
1636+
cursor: pointer;
1637+
box-shadow: 0 15px 40px rgba(255, 107, 0, 0.35);
1638+
margin-bottom: 3rem;
1639+
}
1640+
1641+
.landing-scroll-hint {
1642+
display: flex;
1643+
flex-direction: column;
1644+
align-items: flex-start;
1645+
gap: 8px;
1646+
color: #475569;
1647+
font-size: 0.75rem;
1648+
font-weight: 600;
1649+
letter-spacing: 1px;
1650+
text-transform: uppercase;
1651+
}
1652+
1653+
.scroll-arrow {
1654+
width: 1px;
1655+
height: 40px;
1656+
background: linear-gradient(to bottom, #FF6B00, transparent);
1657+
animation: scrollPulse 1.5s ease-in-out infinite;
1658+
}
1659+
1660+
@keyframes scrollPulse {
1661+
0%, 100% { opacity: 0.4; transform: scaleY(1); }
1662+
50% { opacity: 1; transform: scaleY(1.2); }
1663+
}
1664+
1665+
.landing-shoe {
1666+
flex: 0 0 45%;
1667+
display: flex;
1668+
align-items: center;
1669+
justify-content: center;
1670+
z-index: 2;
1671+
}
1672+
1673+
.landing-shoe img {
1674+
width: 100%;
1675+
max-width: 600px;
1676+
transform: rotate(-10deg);
1677+
filter: drop-shadow(0 40px 80px rgba(255, 107, 0, 0.2));
1678+
}
1679+
1680+
@media (max-width: 768px) {
1681+
.landing-page {
1682+
flex-direction: column;
1683+
justify-content: center;
1684+
padding: 2rem;
1685+
text-align: center;
1686+
}
1687+
.landing-content {
1688+
max-width: 100%;
1689+
}
1690+
.landing-scroll-hint {
1691+
align-items: center;
1692+
}
1693+
.landing-shoe {
1694+
display: none;
1695+
}
1696+
}
1697+
1698+
.login-modal-new {
1699+
width: 420px !important;
1700+
max-width: 95vw !important;
1701+
padding: 0 !important;
1702+
overflow: hidden !important;
1703+
border-radius: 20px !important;
1704+
}
1705+
1706+
.login-hero-banner {
1707+
position: relative;
1708+
height: 220px;
1709+
background: #000;
1710+
overflow: hidden;
1711+
}
1712+
1713+
.login-hero-img {
1714+
width: 100%;
1715+
height: 100%;
1716+
object-fit: cover;
1717+
opacity: 0.75;
1718+
}
1719+
1720+
.login-close-btn {
1721+
position: absolute !important;
1722+
top: 12px !important;
1723+
right: 12px !important;
1724+
background: rgba(255,255,255,0.15) !important;
1725+
border: 1px solid rgba(255,255,255,0.3) !important;
1726+
border-radius: 20px !important;
1727+
padding: 6px 12px !important;
1728+
color: #fff !important;
1729+
}
1730+
1731+
.login-hero-overlay {
1732+
position: absolute;
1733+
bottom: 20px;
1734+
left: 24px;
1735+
}
1736+
1737+
.login-hero-tag {
1738+
color: #FF6B00;
1739+
font-size: 0.65rem;
1740+
font-weight: 900;
1741+
letter-spacing: 3px;
1742+
margin-bottom: 4px;
1743+
}
1744+
1745+
.login-hero-title {
1746+
color: #fff;
1747+
font-size: 1.8rem;
1748+
font-weight: 900;
1749+
line-height: 1.1;
1750+
letter-spacing: -1px;
1751+
margin-bottom: 4px;
1752+
}
1753+
1754+
.login-hero-sub {
1755+
color: #94A3B8;
1756+
font-size: 0.85rem;
1757+
}
1758+
1759+
.login-form-card {
1760+
padding: 24px 28px 28px;
1761+
background: #fff;
1762+
}
1763+
1764+
.login-form-card h2 {
1765+
font-size: 1.4rem;
1766+
font-weight: 800;
1767+
color: #0F172A;
1768+
margin-bottom: 4px;
1769+
}
1770+
1771+
.login-form-card > p {
1772+
font-size: 0.9rem;
1773+
color: #64748B;
1774+
margin-bottom: 20px;
1775+
}
1776+
1777+
.google-proper-btn {
1778+
display: flex;
1779+
align-items: center;
1780+
justify-content: center;
1781+
gap: 12px;
1782+
width: 100%;
1783+
padding: 12px;
1784+
border: 1.5px solid #e0e0e0;
1785+
border-radius: 12px;
1786+
background: #fff;
1787+
cursor: pointer;
1788+
font-size: 0.95rem;
1789+
font-weight: 600;
1790+
color: #1a1a1a;
1791+
transition: background 0.2s;
1792+
}
1793+
1794+
.google-proper-btn:hover {
1795+
background: #f5f5f5;
1796+
}
1797+
1798+
.google-icon-large {
1799+
width: 22px;
1800+
height: 22px;
1801+
}

0 commit comments

Comments
 (0)