Skip to content

Commit b0c6aef

Browse files
aalhouraalhour
committed
Demo pages: new layout
1 parent 94762d1 commit b0c6aef

File tree

11 files changed

+1932
-0
lines changed

11 files changed

+1932
-0
lines changed

‎pages/demo/demo_all_articles/bazaar_all_articles.png‎

2.59 MB
Loading

‎pages/demo/demo_all_articles/bazaar_all_articles_2.png‎

2.89 MB
Loading

‎pages/demo/demo_all_articles/index.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Articles — Digital Bazaar</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="description" content="Recent articles, essays and field notes from the Digital Bazaar community." />
8+
<link rel="stylesheet" href="../style.css"></rel>
9+
<style>
10+
.hero-image {
11+
width: 100%;
12+
height: clamp(220px, 26vw, 280px);
13+
object-fit: cover;
14+
display: block;
15+
object-position: 50% 70%;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<header class="nav">
21+
<div class="nav-inner">
22+
<div class="nav-left">
23+
<div class="nav-logo-mark"></div>
24+
<div class="nav-title">Digital Bazaar</div>
25+
</div>
26+
<div class="nav-right">
27+
<nav class="nav-links">
28+
<a href="index.html">Home</a>
29+
<a href="#">Articles</a>
30+
<a href="rules.html">Rules</a>
31+
</nav>
32+
<div class="nav-lang">
33+
<span class="active">EN</span> · <span>AR</span>
34+
</div>
35+
</div>
36+
</div>
37+
</header>
38+
39+
<main class="wrap">
40+
<!-- Hero with conversations banner -->
41+
<section class="hero">
42+
<!-- Replace with your “conversations in the bazaar” banner -->
43+
<img class="hero-image" src="bazaar_all_articles_2.png"
44+
alt="Groups of people and robots talking in the Digital Bazaar" />
45+
<div class="hero-text">
46+
<div class="hero-kicker">Articles &amp; field notes</div>
47+
<h1 class="hero-title">Recent writing from the Digital Bazaar.</h1>
48+
<p class="hero-sub">
49+
Essays, reflections and notes from people in the Bazaar – on engineering, product,
50+
management, markets, careers and life. These are the latest pieces; older work lives in the archive.
51+
</p>
52+
</div>
53+
</section>
54+
55+
<!-- Recent articles list (keep to last 5, newest first) -->
56+
<section class="section">
57+
<h2>Latest essays</h2>
58+
<p>The five most recent articles, sorted by newest first.</p>
59+
60+
<div class="grid">
61+
<!-- Example card 1 -->
62+
<a class="card" href="article.html">
63+
<img class="card-thumb" src="thumb-1.jpg" alt="Article thumbnail 1" />
64+
<div class="card-body">
65+
<div class="card-kicker">Management &amp; Leadership</div>
66+
<div class="card-title">When your team stops shipping: how to read the silence</div>
67+
<div class="card-meta">By Ahmad • 12 min read • 10 Dec 2025 • English</div>
68+
<div class="card-excerpt">
69+
The roadmap is clear, the talent is there, but output has slowed to a crawl. Before you blame “motivation”,
70+
learn to read the quieter signals that tell you why a team has gone still.
71+
</div>
72+
<div class="card-tags">
73+
<span class="chip">teams</span>
74+
<span class="chip">delivery</span>
75+
</div>
76+
</div>
77+
</a>
78+
79+
<!-- Example card 2 -->
80+
<a class="card" href="article.html">
81+
<img class="card-thumb" src="thumb-2.jpg" alt="Article thumbnail 2" />
82+
<div class="card-body">
83+
<div class="card-kicker">Tech</div>
84+
<div class="card-title">Notes from the data infra bazaar</div>
85+
<div class="card-meta">By Guest writer • 9 min read • 3 Dec 2025 • English</div>
86+
<div class="card-excerpt">
87+
From monoliths to distributed systems: what actually changes in day-to-day work,
88+
and which problems stubbornly stay the same no matter how shiny the stack is.
89+
</div>
90+
<div class="card-tags">
91+
<span class="chip">infra</span>
92+
<span class="chip">systems</span>
93+
</div>
94+
</div>
95+
</a>
96+
97+
<!-- Example card 3 -->
98+
<a class="card" href="article.html">
99+
<img class="card-thumb" src="thumb-3.jpg" alt="Article thumbnail 3" />
100+
<div class="card-body">
101+
<div class="card-kicker">Community</div>
102+
<div class="card-title">Welcome to Digital Bazaar</div>
103+
<div class="card-meta">By The Bazaar Team • 7 min read • 21 Nov 2025 • English</div>
104+
<div class="card-excerpt">
105+
Why we built this place, what “bazaar” means to us, and how we hope it will serve people
106+
building products, companies and careers in and around the Arab world.
107+
</div>
108+
<div class="card-tags">
109+
<span class="chip">community</span>
110+
<span class="chip">story</span>
111+
</div>
112+
</div>
113+
</a>
114+
115+
<!-- Example card 4 -->
116+
<a class="card" href="article.html">
117+
<img class="card-thumb" src="thumb-4.jpg" alt="Article thumbnail 4" />
118+
<div class="card-body">
119+
<div class="card-kicker">Markets &amp; business</div>
120+
<div class="card-title">Building in Arabic: the invisible advantages</div>
121+
<div class="card-meta">By Sara • 11 min read • 3 Nov 2025 • English</div>
122+
<div class="card-excerpt">
123+
Product-market fit in MENA isn’t just about feature sets. Language, trust and cultural nuance
124+
can become the deepest moat you have if you use them intentionally.
125+
</div>
126+
<div class="card-tags">
127+
<span class="chip">mena</span>
128+
<span class="chip">strategy</span>
129+
</div>
130+
</div>
131+
</a>
132+
133+
<!-- Example card 5 -->
134+
<a class="card" href="article.html">
135+
<img class="card-thumb" src="thumb-5.jpg" alt="Article thumbnail 5" />
136+
<div class="card-body">
137+
<div class="card-kicker">Career</div>
138+
<div class="card-title">Changing lanes without starting from zero</div>
139+
<div class="card-meta">By Lina • 8 min read • 2 Sep 2025 • English</div>
140+
<div class="card-excerpt">
141+
How to pivot into a new role or discipline in the digital world while carrying your leverage with you,
142+
instead of re-casting yourself as a beginner every time.
143+
</div>
144+
<div class="card-tags">
145+
<span class="chip">career</span>
146+
<span class="chip">leverage</span>
147+
</div>
148+
</div>
149+
</a>
150+
</div>
151+
152+
<div class="archive-cta">
153+
<a class="btn" href="archive.html">
154+
<span>View full archive</span>
155+
<span aria-hidden="true">📜</span>
156+
</a>
157+
</div>
158+
</section>
159+
160+
<footer>
161+
<span>© <script>document.write(new Date().getFullYear());</script> Digital Bazaar • Made with ❤ across the Arab world</span>
162+
<span>
163+
<a href="#" target="_blank" rel="noopener">WhatsApp</a> •
164+
<a href="#" target="_blank" rel="noopener">GitHub</a>
165+
</span>
166+
</footer>
167+
</main>
168+
</body>
169+
</html>

‎pages/demo/demo_bazaar_archive/bazaar_archive.png‎

2.76 MB
Loading

0 commit comments

Comments
 (0)