Hugging Face's logo

Spaces:
abeea
/
D4
Running

App Files Community
abeea commited on
Commit
5fa4b8c
·
verified ·
1 Parent(s): c7da5c7

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +328 -19
index.html CHANGED
@@ -1,19 +1,328 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <style>
3
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=DM+Sans:wght@300;400&display=swap');
4
+
5
+ *{margin:0;padding:0;box-sizing:border-box}
6
+ body{font-family:'DM Sans',sans-serif;background:#0E0B09;color:#F5EEE6;overflow-x:hidden}
7
+
8
+ ::-webkit-scrollbar{width:3px}
9
+ ::-webkit-scrollbar-track{background:#1A1410}
10
+ ::-webkit-scrollbar-thumb{background:#B8926A}
11
+
12
+ /* NAV */
13
+ .nav{position:fixed;top:0;left:0;right:0;z-index:99;display:flex;align-items:center;justify-content:space-between;padding:20px 56px;background:rgba(14,11,9,0.82);backdrop-filter:blur(16px);border-bottom:1px solid rgba(184,146,106,0.15)}
14
+ .logo{font-family:'Playfair Display',serif;font-size:22px;letter-spacing:6px;color:#F5EEE6}
15
+ .logo b{color:#B8926A;font-weight:400}
16
+ .nav-links{display:flex;gap:32px;list-style:none}
17
+ .nav-links a{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#9E8E7E;text-decoration:none;transition:color .25s}
18
+ .nav-links a:hover{color:#D4B896}
19
+ .nav-btn{font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#0E0B09;background:#B8926A;border:none;padding:11px 26px;cursor:pointer;transition:background .25s}
20
+ .nav-btn:hover{background:#D4B896}
21
+
22
+ /* HERO */
23
+ .hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;padding-top:80px}
24
+ .hero-l{padding:80px 56px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#1A1008 0%,#0E0B09 100%);position:relative;overflow:hidden}
25
+ .hero-l::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(184,146,106,0.07) 0%,transparent 70%);top:-100px;right:-100px;pointer-events:none}
26
+ .tag-line{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:4px;text-transform:uppercase;color:#B8926A;margin-bottom:32px}
27
+ .tag-line::before{content:'';display:block;width:32px;height:1px;background:#B8926A}
28
+ .hero-h{font-family:'Playfair Display',serif;font-size:clamp(48px,5.5vw,80px);font-weight:400;line-height:1.08;color:#F5EEE6;margin-bottom:28px}
29
+ .hero-h em{font-style:italic;color:#B8926A}
30
+ .hero-p{font-size:13px;font-weight:300;line-height:1.9;color:#7A6E63;max-width:380px;margin-bottom:48px;letter-spacing:.4px}
31
+ .hero-actions{display:flex;gap:20px;align-items:center}
32
+ .btn-gold{background:#B8926A;color:#0E0B09;border:none;padding:14px 36px;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:3.5px;text-transform:uppercase;cursor:pointer;transition:all .25s}
33
+ .btn-gold:hover{background:#D4B896}
34
+ .btn-ghost{background:transparent;color:#9E8E7E;border:1px solid rgba(184,146,106,0.35);padding:14px 32px;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:all .25s}
35
+ .btn-ghost:hover{border-color:#B8926A;color:#D4B896}
36
+
37
+ .hero-r{display:flex;align-items:center;justify-content:center;background:#120F0A;position:relative;overflow:hidden}
38
+ .hero-r::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(184,146,106,0.06) 0%,transparent 65%)}
39
+ .showcase-wrap{position:relative;animation:float 5s ease-in-out infinite}
40
+ .showcase-card{width:280px;height:380px;background:#1C1610;border:1px solid rgba(184,146,106,0.2);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
41
+ .showcase-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#B8926A 50%,transparent)}
42
+ .sc-gem{font-size:88px;margin-bottom:16px;animation:pulse 3s ease-in-out infinite}
43
+ .sc-name{font-family:'Playfair Display',serif;font-size:18px;letter-spacing:3px;color:#D4B896;margin-bottom:6px;text-transform:uppercase}
44
+ .sc-price{font-size:11px;letter-spacing:2px;color:#7A6E63}
45
+ .badge-new{position:absolute;top:20px;left:-12px;background:#B8926A;color:#0E0B09;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:6px 14px}
46
+ .badge-new::before{content:'';position:absolute;left:0;bottom:-6px;border-top:6px solid #7A5C3A;border-left:6px solid transparent}
47
+ .float-stat{position:absolute;bottom:-24px;right:-32px;background:#1C1610;border:1px solid rgba(184,146,106,0.25);padding:16px 20px;text-align:center}
48
+ .stat-num{font-family:'Playfair Display',serif;font-size:24px;color:#B8926A}
49
+ .stat-lab{font-size:9px;letter-spacing:2px;color:#7A6E63;text-transform:uppercase;margin-top:2px}
50
+
51
+ /* TICKER */
52
+ .ticker{background:#B8926A;padding:13px 0;overflow:hidden}
53
+ .ticker-track{display:flex;gap:0;animation:ticker 20s linear infinite;white-space:nowrap}
54
+ .tick-item{display:flex;align-items:center;gap:0;flex-shrink:0}
55
+ .tick-text{font-size:11px;letter-spacing:3.5px;text-transform:uppercase;color:#0E0B09;padding:0 36px}
56
+ .tick-dot{color:#0E0B09;font-size:6px;opacity:.6}
57
+
58
+ /* COLLECTIONS */
59
+ .section{padding:100px 56px}
60
+ .section-top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:56px}
61
+ .sec-label{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:#B8926A;margin-bottom:14px}
62
+ .sec-h{font-family:'Playfair Display',serif;font-size:clamp(32px,4vw,52px);font-weight:400;line-height:1.1;color:#F5EEE6}
63
+ .sec-h em{font-style:italic;color:#9E8E7E}
64
+ .link-btn{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#7A6E63;background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;transition:color .25s;border-bottom:1px solid transparent;padding-bottom:2px}
65
+ .link-btn:hover{color:#B8926A;border-bottom-color:#B8926A}
66
+
67
+ .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
68
+ .pcard{cursor:pointer;position:relative;overflow:hidden}
69
+ .pcard-img{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;font-size:76px;position:relative;overflow:hidden;transition:all .5s}
70
+ .pcard:hover .pcard-img{filter:brightness(1.1)}
71
+ .pcard-img-inner{transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
72
+ .pcard:hover .pcard-img-inner{transform:scale(1.08)}
73
+ .g1{background:#1A1208}
74
+ .g2{background:#151510}
75
+ .g3{background:#0E1218}
76
+ .g4{background:#1A1410}
77
+ .pcard-over{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(14,11,9,.85));padding:24px 20px 20px;transform:translateY(6px);transition:transform .4s}
78
+ .pcard:hover .pcard-over{transform:translateY(0)}
79
+ .pcard-cat{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#B8926A;margin-bottom:6px}
80
+ .pcard-name{font-family:'Playfair Display',serif;font-size:16px;color:#F5EEE6;margin-bottom:10px}
81
+ .pcard-price{font-size:12px;color:#9E8E7E}
82
+ .pbadge{position:absolute;top:16px;left:16px;background:#B8926A;color:#0E0B09;font-size:8px;letter-spacing:2px;text-transform:uppercase;padding:5px 10px}
83
+ .pwish{position:absolute;top:14px;right:14px;width:34px;height:34px;background:rgba(14,11,9,.65);border:1px solid rgba(184,146,106,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:#B8926A;opacity:0;transition:opacity .3s}
84
+ .pcard:hover .pwish{opacity:1}
85
+ .pcard-info{padding:18px 0 4px}
86
+
87
+ /* SPLIT FEATURE */
88
+ .feature{display:grid;grid-template-columns:1fr 1fr;margin:0 56px 100px;background:#120F0A;border:1px solid rgba(184,146,106,.12)}
89
+ .feat-l{padding:72px 60px;display:flex;flex-direction:column;justify-content:center}
90
+ .feat-r{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:40px;align-items:center}
91
+ .gem-tile{background:#1A1610;padding:32px 20px;text-align:center;border:1px solid rgba(184,146,106,.1);transition:border-color .3s,transform .3s;cursor:pointer}
92
+ .gem-tile:hover{border-color:rgba(184,146,106,.4);transform:translateY(-3px)}
93
+ .gem-ico{font-size:36px;margin-bottom:12px}
94
+ .gem-nm{font-family:'Playfair Display',serif;font-size:15px;color:#D4B896;margin-bottom:4px}
95
+ .gem-sub{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:#7A6E63}
96
+
97
+ /* PERKS */
98
+ .perks{display:grid;grid-template-columns:repeat(4,1fr);background:#120F0A;border-top:1px solid rgba(184,146,106,.12);border-bottom:1px solid rgba(184,146,106,.12)}
99
+ .perk{padding:48px 36px;text-align:center;position:relative}
100
+ .perk+.perk::before{content:'';position:absolute;left:0;top:30%;bottom:30%;width:1px;background:rgba(184,146,106,.12)}
101
+ .perk-ico{font-size:28px;margin-bottom:18px;opacity:.85}
102
+ .perk-title{font-family:'Playfair Display',serif;font-size:16px;color:#D4B896;margin-bottom:8px}
103
+ .perk-desc{font-size:12px;font-weight:300;color:#5A504A;line-height:1.75;letter-spacing:.3px}
104
+
105
+ /* QUOTE */
106
+ .quote-sec{padding:100px 56px;text-align:center;position:relative;overflow:hidden;background:#0E0B09}
107
+ .quote-bg{position:absolute;top:-60px;left:50%;transform:translateX(-50%);font-family:'Playfair Display',serif;font-size:320px;color:rgba(184,146,106,.04);line-height:1;pointer-events:none;user-select:none}
108
+ .quote-text{font-family:'Playfair Display',serif;font-size:clamp(20px,2.5vw,34px);font-style:italic;font-weight:400;color:#D4B896;max-width:780px;margin:0 auto 36px;line-height:1.55;position:relative;z-index:1}
109
+ .quote-stars{color:#B8926A;font-size:13px;letter-spacing:4px;margin-bottom:14px;position:relative;z-index:1}
110
+ .quote-author{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:#5A504A;position:relative;z-index:1}
111
+
112
+ /* NEWSLETTER */
113
+ .newsletter{background:#1C1610;padding:72px 56px;display:flex;align-items:center;justify-content:space-between;gap:60px;border-top:1px solid rgba(184,146,106,.12)}
114
+ .nl-text{}
115
+ .nl-title{font-family:'Playfair Display',serif;font-size:32px;color:#F5EEE6;margin-bottom:10px}
116
+ .nl-sub{font-size:13px;font-weight:300;color:#7A6E63;letter-spacing:.3px}
117
+ .nl-form{display:flex;gap:0;flex-shrink:0}
118
+ .nl-input{background:#0E0B09;border:1px solid rgba(184,146,106,.25);border-right:none;padding:14px 22px;font-family:'DM Sans',sans-serif;font-size:12px;color:#F5EEE6;width:280px;outline:none}
119
+ .nl-input::placeholder{color:#5A504A}
120
+ .nl-input:focus{border-color:#B8926A}
121
+ .nl-sub-btn{background:#B8926A;color:#0E0B09;border:none;padding:14px 28px;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .25s}
122
+ .nl-sub-btn:hover{background:#D4B896}
123
+
124
+ /* FOOTER */
125
+ footer{background:#080604;padding:72px 56px 32px;border-top:1px solid rgba(184,146,106,.1)}
126
+ .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px;margin-bottom:56px}
127
+ .foot-logo{font-family:'Playfair Display',serif;font-size:24px;letter-spacing:5px;color:#F5EEE6;margin-bottom:18px}
128
+ .foot-logo b{color:#B8926A;font-weight:400}
129
+ .foot-desc{font-size:12px;font-weight:300;line-height:1.85;color:#4A4038;max-width:240px;margin-bottom:28px}
130
+ .socials{display:flex;gap:12px}
131
+ .soc{width:34px;height:34px;border:1px solid rgba(184,146,106,.25);display:flex;align-items:center;justify-content:center;font-size:11px;color:#B8926A;cursor:pointer;transition:all .25s;font-family:'DM Sans',sans-serif;font-weight:300}
132
+ .soc:hover{background:#B8926A;color:#0E0B09;border-color:#B8926A}
133
+ .foot-col h4{font-size:9px;letter-spacing:4px;text-transform:uppercase;color:#B8926A;margin-bottom:22px;font-weight:300}
134
+ .foot-col ul{list-style:none}
135
+ .foot-col li{margin-bottom:13px}
136
+ .foot-col a{font-size:12px;font-weight:300;color:#4A4038;text-decoration:none;transition:color .25s;letter-spacing:.4px}
137
+ .foot-col a:hover{color:#D4B896}
138
+ .foot-bottom{border-top:1px solid rgba(184,146,106,.08);padding-top:28px;display:flex;justify-content:space-between;align-items:center}
139
+ .foot-copy{font-size:11px;color:#2E2820;letter-spacing:.5px}
140
+ .foot-gold{color:#B8926A}
141
+
142
+ /* ANIMS */
143
+ @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
144
+ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.82}}
145
+ @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
146
+ @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
147
+
148
+ .hero-l>*{animation:fadeUp .8s ease forwards;opacity:0}
149
+ .tag-line{animation-delay:.15s}
150
+ .hero-h{animation-delay:.3s}
151
+ .hero-p{animation-delay:.45s}
152
+ .hero-actions{animation-delay:.6s}
153
+ </style>
154
+
155
+ <nav class="nav">
156
+ <div class="logo">AUR<b>U</b>M</div>
157
+ <ul class="nav-links">
158
+ <li><a href="#">Collections</a></li>
159
+ <li><a href="#">Rings</a></li>
160
+ <li><a href="#">Necklaces</a></li>
161
+ <li><a href="#">Bespoke</a></li>
162
+ <li><a href="#">About</a></li>
163
+ </ul>
164
+ <button class="nav-btn">Visit Boutique</button>
165
+ </nav>
166
+
167
+ <section class="hero">
168
+ <div class="hero-l">
169
+ <div class="tag-line">New Season — SS 2026</div>
170
+ <h1 class="hero-h">Where Gold<br>Meets <em>Soul</em></h1>
171
+ <p class="hero-p">Heirloom quality jewellery, handcrafted by master artisans. Each piece carries a whisper of the earth and the warmth of human hands.</p>
172
+ <div class="hero-actions">
173
+ <button class="btn-gold">Explore Now</button>
174
+ <button class="btn-ghost">Book Consultation</button>
175
+ </div>
176
+ </div>
177
+ <div class="hero-r">
178
+ <div class="showcase-wrap">
179
+ <div class="showcase-card">
180
+ <div class="badge-new">New Arrival</div>
181
+ <div class="sc-gem">💍</div>
182
+ <div class="sc-name">Aurum Ring</div>
183
+ <div class="sc-price">from PKR 95,000</div>
184
+ </div>
185
+ <div class="float-stat">
186
+ <div class="stat-num">1,400+</div>
187
+ <div class="stat-lab">Pieces Crafted</div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </section>
192
+
193
+ <div class="ticker">
194
+ <div class="ticker-track">
195
+ <div class="tick-item"><span class="tick-text">Fine Jewellery</span><span class="tick-dot">◆</span></div>
196
+ <div class="tick-item"><span class="tick-text">18K Gold</span><span class="tick-dot">◆</span></div>
197
+ <div class="tick-item"><span class="tick-text">Handcrafted in Pakistan</span><span class="tick-dot">◆</span></div>
198
+ <div class="tick-item"><span class="tick-text">Certified Gemstones</span><span class="tick-dot">◆</span></div>
199
+ <div class="tick-item"><span class="tick-text">Bespoke Design</span><span class="tick-dot">◆</span></div>
200
+ <div class="tick-item"><span class="tick-text">Ethically Sourced</span><span class="tick-dot">◆</span></div>
201
+ <div class="tick-item"><span class="tick-text">Fine Jewellery</span><span class="tick-dot">◆</span></div>
202
+ <div class="tick-item"><span class="tick-text">18K Gold</span><span class="tick-dot">◆</span></div>
203
+ <div class="tick-item"><span class="tick-text">Handcrafted in Pakistan</span><span class="tick-dot">◆</span></div>
204
+ <div class="tick-item"><span class="tick-text">Certified Gemstones</span><span class="tick-dot">◆</span></div>
205
+ <div class="tick-item"><span class="tick-text">Bespoke Design</span><span class="tick-dot">◆</span></div>
206
+ <div class="tick-item"><span class="tick-text">Ethically Sourced</span><span class="tick-dot">◆</span></div>
207
+ </div>
208
+ </div>
209
+
210
+ <section class="section" style="background:#0E0B09">
211
+ <div class="section-top">
212
+ <div>
213
+ <div class="sec-label">Featured Pieces</div>
214
+ <h2 class="sec-h">Our <em>Finest</em><br>Collections</h2>
215
+ </div>
216
+ <button class="link-btn">View All Pieces →</button>
217
+ </div>
218
+ <div class="grid4">
219
+ <div class="pcard">
220
+ <div class="pcard-img g1">
221
+ <div class="pcard-img-inner">💍</div>
222
+ <div class="pbadge">Bestseller</div>
223
+ <div class="pwish">♡</div>
224
+ <div class="pcard-over">
225
+ <div class="pcard-cat">Rings</div>
226
+ <div class="pcard-name">Rose Diamond Solitaire</div>
227
+ <div class="pcard-price">PKR 1,20,000</div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ <div class="pcard">
232
+ <div class="pcard-img g2">
233
+ <div class="pcard-img-inner">📿</div>
234
+ <div class="pwish">♡</div>
235
+ <div class="pcard-over">
236
+ <div class="pcard-cat">Necklaces</div>
237
+ <div class="pcard-name">Pearl Lumière Strand</div>
238
+ <div class="pcard-price">PKR 88,000</div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ <div class="pcard">
243
+ <div class="pcard-img g3">
244
+ <div class="pcard-img-inner">✨</div>
245
+ <div class="pbadge">New</div>
246
+ <div class="pwish">♡</div>
247
+ <div class="pcard-over">
248
+ <div class="pcard-cat">Earrings</div>
249
+ <div class="pcard-name">Celestial Drop Earrings</div>
250
+ <div class="pcard-price">PKR 64,000</div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ <div class="pcard">
255
+ <div class="pcard-img g4">
256
+ <div class="pcard-img-inner">💎</div>
257
+ <div class="pwish">♡</div>
258
+ <div class="pcard-over">
259
+ <div class="pcard-cat">Bracelets</div>
260
+ <div class="pcard-name">Sapphire Tennis Bangle</div>
261
+ <div class="pcard-price">PKR 1,05,000</div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </section>
267
+
268
+ <div class="feature">
269
+ <div class="feat-l">
270
+ <div class="sec-label">Bespoke Studio</div>
271
+ <h2 class="sec-h" style="margin-bottom:20px">Your Story,<br><em>Your Stone</em></h2>
272
+ <p style="font-size:13px;font-weight:300;line-height:1.9;color:#5A504A;margin-bottom:40px;max-width:380px;letter-spacing:.4px">Work with our master craftsmen to design a piece that is entirely yours — from selecting the stone to shaping the setting.</p>
273
+ <button class="btn-gold" style="align-self:flex-start">Start Designing</button>
274
+ </div>
275
+ <div class="feat-r">
276
+ <div class="gem-tile"><div class="gem-ico">💎</div><div class="gem-nm">Diamond</div><div class="gem-sub">Eternal</div></div>
277
+ <div class="gem-tile"><div class="gem-ico">🔴</div><div class="gem-nm">Ruby</div><div class="gem-sub">Passion</div></div>
278
+ <div class="gem-tile"><div class="gem-ico">💚</div><div class="gem-nm">Emerald</div><div class="gem-sub">Harmony</div></div>
279
+ <div class="gem-tile"><div class="gem-ico">💙</div><div class="gem-nm">Sapphire</div><div class="gem-sub">Loyalty</div></div>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="perks" style="margin-bottom:0">
284
+ <div class="perk"><div class="perk-ico">🚚</div><div class="perk-title">Free Delivery</div><div class="perk-desc">Insured shipping across Pakistan on all orders above PKR 5,000</div></div>
285
+ <div class="perk"><div class="perk-ico">⭐</div><div class="perk-title">Certified Gems</div><div class="perk-desc">Every stone is internationally certified and authenticity guaranteed</div></div>
286
+ <div class="perk"><div class="perk-ico">🔄</div><div class="perk-title">30-Day Returns</div><div class="perk-desc">Return any piece within 30 days, no questions asked</div></div>
287
+ <div class="perk"><div class="perk-ico">💬</div><div class="perk-title">Private Stylist</div><div class="perk-desc">Book a one-on-one consultation — in boutique or virtual</div></div>
288
+ </div>
289
+
290
+ <div class="quote-sec">
291
+ <div class="quote-bg">"</div>
292
+ <div class="quote-stars">★ ★ ★ ★ ★</div>
293
+ <p class="quote-text">"I wore Aurum on my nikah and every woman in the room asked where it was from. It felt like wearing a piece of history."</p>
294
+ <div class="quote-author">— Fatima Rehman, Lahore</div>
295
+ </div>
296
+
297
+ <div class="newsletter">
298
+ <div class="nl-text">
299
+ <div class="nl-title">Join the Inner Circle</div>
300
+ <div class="nl-sub">Early access to new collections, private events, and exclusive offers.</div>
301
+ </div>
302
+ <div class="nl-form">
303
+ <input class="nl-input" type="email" placeholder="Your email address" />
304
+ <button class="nl-sub-btn">Subscribe</button>
305
+ </div>
306
+ </div>
307
+
308
+ <footer>
309
+ <div class="footer-grid">
310
+ <div>
311
+ <div class="foot-logo">AUR<b>U</b>M</div>
312
+ <div class="foot-desc">Fine jewellery crafted with passion since 1998. Every piece is a lifelong companion.</div>
313
+ <div class="socials">
314
+ <div class="soc">IG</div>
315
+ <div class="soc">FB</div>
316
+ <div class="soc">YT</div>
317
+ <div class="soc">TT</div>
318
+ </div>
319
+ </div>
320
+ <div class="foot-col"><h4>Collections</h4><ul><li><a href="#">Rings</a></li><li><a href="#">Necklaces</a></li><li><a href="#">Earrings</a></li><li><a href="#">Bracelets</a></li><li><a href="#">Wedding Sets</a></li></ul></div>
321
+ <div class="foot-col"><h4>Services</h4><ul><li><a href="#">Bespoke Design</a></li><li><a href="#">Engraving</a></li><li><a href="#">Resizing</a></li><li><a href="#">Polishing</a></li><li><a href="#">Consultation</a></li></ul></div>
322
+ <div class="foot-col"><h4>Help</h4><ul><li><a href="#">Contact Us</a></li><li><a href="#">Size Guide</a></li><li><a href="#">Care Guide</a></li><li><a href="#">Returns</a></li><li><a href="#">FAQs</a></li></ul></div>
323
+ </div>
324
+ <div class="foot-bottom">
325
+ <span class="foot-copy">© 2026 Aurum Fine Jewellery. All rights reserved.</span>
326
+ <span class="foot-copy">Crafted with <span class="foot-gold">♥</span> in Lahore, Pakistan</span>
327
+ </div>
328
+ </footer>