Skip to content

Commit 0938460

Browse files
Pro-BandeyPro-Bandey
committed
Externalize styles/assets and overhaul About page
Move inline styles and scripts into external files and modernize site assets. About/index.html was reworked: added metadata (OG, keywords), service worker registration, canonical and favicon links, replaced CDN font with local font, swapped inline CSS and SVG sprite for /css/global.css, /css/about.css and /src/global.svg, and updated markup, navigation and footer. Added new contact placeholder page (Contact/index.html) and multiple CSS files (css/*), a global JS (js/global.js), and other assets under src/. Various pages (Media, Privacy, License, Terms, CopyRight, index.html, README) were updated to use the new assets and structure.
1 parent 8b87051 commit 0938460

20 files changed

Lines changed: 3019 additions & 1766 deletions

‎About/index.html‎

Lines changed: 193 additions & 371 deletions
Large diffs are not rendered by default.

‎Contact/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
7+
<!-- CSS -->
8+
<link rel="stylesheet" href="/css/global.css">
9+
</head>
10+
11+
<body>
12+
13+
<div id="loader" class="txt-mrc loader" style="pointer-events: none;">
14+
<img style="height: 120px; pointer-events: none;" src="/src/mrc-nuca-loading.svg" alt="mrc-nuca-loading">
15+
<div class="loader-text-wrapper">
16+
<span class="loader-text-letter">I</span>
17+
<span class="loader-text-letter">n</span>
18+
<span class="loader-text-letter">i</span>
19+
<span class="loader-text-letter">t</span>
20+
<span class="loader-text-letter">i</span>
21+
<span class="loader-text-letter">a</span>
22+
<span class="loader-text-letter">l</span>
23+
<span class="loader-text-letter">i</span>
24+
<span class="loader-text-letter">z</span>
25+
<span class="loader-text-letter">i</span>
26+
<span class="loader-text-letter">n</span>
27+
<span class="loader-text-letter">g</span>
28+
<hr>
29+
<span class="loader-text-letter">C</span>
30+
<span class="loader-text-letter">o</span>
31+
<span class="loader-text-letter">r</span>
32+
<span class="loader-text-letter">e</span>
33+
<div class="loader-colors"></div>
34+
</div>
35+
⚠ Unable To Initialize This Page!
36+
</div>
37+
38+
<script>
39+
window.addEventListener('load', () => {
40+
const loader = document.getElementById('loader');
41+
setTimeout(() => {
42+
loader.classList.add('hiden');
43+
}, 2000);
44+
});
45+
</script>
46+
</body>
47+
48+
</html>

‎CopyRight/index.html‎

Lines changed: 119 additions & 366 deletions
Large diffs are not rendered by default.

‎License/index.html‎

Lines changed: 92 additions & 277 deletions
Large diffs are not rendered by default.

‎Media/index.html‎

Lines changed: 36 additions & 343 deletions
Large diffs are not rendered by default.

‎Privacy/index.html‎

Lines changed: 97 additions & 96 deletions
Large diffs are not rendered by default.

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
</div>
1818

1919
<p style="font-size: 1.2em; line-height: 1.6em; color:
20-
MainRoute Core is a pioneering tech firm driving innovation through <strong>progressive web apps (PWAs)</strong>, robust software, and open-source solutions. We empower businesses, developers, and organizations to thrive in the digital era with scalable, impactful technology. Based in Pakistan, we blend global standards with local expertise.
20+
MainRoute Core is a pioneering tech firm driving innovation through <strong>progressive web apps (PWAs)</strong>, robust software, and open-source solutions. We empower businesses, developers, and organizations to thrive in the digital era with scalable, impactful technology.We blend global standards with local expertise.
2121
</p>
2222

2323
@@ -60,5 +60,5 @@ We’ve partnered with startups and organizations to:
6060
Ready to transform your digital journey? <a href="mailto:tellus@mrc.com" style="color: #3498db; text-decoration: none;">Get in touch</a> or explore our projects on <a href="https://github.com/MianRoute-Core" style="color: #3498db; text-decoration: none;">GitHub</a>. Let’s innovate together!
6161
</p>
6262

63-
*📍 Pakistan | 🌐 [MainRoute Core](https://www.mainroute-core.github.io)*
63+
*📍 | 🌐 [MainRoute Core](https://www.mainroute-core.github.io)*
6464

‎Terms/index.html‎

Lines changed: 98 additions & 96 deletions
Large diffs are not rendered by default.

‎css/about.css‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
@import url(/css/global.css);
2+
3+
/* Page Headers */
4+
.page-header {
5+
padding-top: calc(var(--nav-height) + 6rem);
6+
padding-bottom: 4rem;
7+
text-align: center;
8+
max-width: 900px;
9+
margin: 0 auto;
10+
position: relative;
11+
z-index: 10;
12+
}
13+
14+
.page-tag {
15+
display: inline-flex;
16+
align-items: center;
17+
gap: 0.5rem;
18+
font-family: var(--font-mono);
19+
font-size: 0.75rem;
20+
color: var(--mrc);
21+
background: rgba(244, 66, 52, 0.1);
22+
border: 1px solid rgba(244, 66, 52, 0.2);
23+
padding: 0.5rem 1rem;
24+
border-radius: 99px;
25+
margin-bottom: 2rem;
26+
}
27+
28+
.page-title {
29+
font-size: clamp(3rem, 8vw, 5.5rem);
30+
line-height: 0.95;
31+
letter-spacing: -0.02em;
32+
margin-bottom: 1.5rem;
33+
}
34+
35+
.text-gradient {
36+
background: linear-gradient(135deg, #fff 0%, var(--mrc) 100%);
37+
background-clip: text;
38+
-webkit-text-fill-color: transparent;
39+
}
40+
41+
.page-desc {
42+
font-size: clamp(1.1rem, 2vw, 1.35rem);
43+
color: var(--text-muted);
44+
line-height: 1.7;
45+
}
46+
47+
/* Origin Story Layout */
48+
.origin-card {
49+
padding: 3rem;
50+
position: relative;
51+
overflow: hidden;
52+
border-left: 4px solid var(--mrc);
53+
}
54+
55+
.origin-card::before {
56+
content: '';
57+
position: absolute;
58+
top: 0;
59+
right: 0;
60+
width: 300px;
61+
height: 300px;
62+
background: radial-gradient(circle, rgba(244, 66, 52, 0.1) 0%, transparent 70%);
63+
border-radius: 50%;
64+
transform: translate(50%, -50%);
65+
z-index: 0;
66+
}
67+
68+
.origin-content {
69+
position: relative;
70+
z-index: 1;
71+
}
72+
73+
/* Pro Bandey Cards */
74+
.philosophy-card {
75+
padding: 2.5rem;
76+
border-radius: 1.5rem;
77+
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s;
78+
position: relative;
79+
overflow: hidden;
80+
}
81+
82+
.philosophy-card:hover {
83+
transform: translateY(-8px);
84+
border-color: var(--mrc-glow);
85+
}
86+
87+
.phil-icon {
88+
width: 56px;
89+
height: 56px;
90+
border-radius: 1rem;
91+
background: rgba(244, 66, 52, 0.1);
92+
color: var(--mrc);
93+
display: flex;
94+
justify-content: center;
95+
align-items: center;
96+
margin-bottom: 1.5rem;
97+
transition: all 0.3s;
98+
}
99+
100+
.philosophy-card:hover .phil-icon {
101+
background: var(--mrc);
102+
color: #fff;
103+
box-shadow: 0 5px 15px var(--mrc-glow);
104+
}
105+
106+
/* Tech Arsenal Accordion / Grid */
107+
.tech-box {
108+
background:var(--glass-bg);
109+
border-radius: 1rem;
110+
padding: 2rem;
111+
display: flex;
112+
flex-direction: column;
113+
gap: 1rem;
114+
transition: all 0.3s;
115+
}
116+
117+
.tech-box:hover {
118+
background: rgba(244, 66, 52, 0.05);
119+
border-color: rgba(244, 66, 52, 0.3);
120+
}
121+
122+
.tech-header {
123+
display: flex;
124+
align-items: center;
125+
gap: 1rem;
126+
}
127+
128+
.tech-icon-wrapper {
129+
width: 48px;
130+
height: 48px;
131+
display: flex;
132+
align-items: center;
133+
justify-content: center;
134+
background: var(--bg-surface-elevated);
135+
border-radius: 50%;
136+
color: var(--text-main);
137+
border: 1px solid var(--glass-border);
138+
}

‎css/copyright.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
@import url(/css/global.css);
2+
.page-header {
3+
padding-top: calc(var(--nav-height) + 6rem);
4+
padding-bottom: 2rem;
5+
text-align: center;
6+
max-width: 800px;
7+
margin: 0 auto;
8+
}
9+
.page-title {
10+
font-size: clamp(2.5rem, 6vw, 4.5rem);
11+
font-weight: 900;
12+
line-height: 1.1;
13+
letter-spacing: -0.02em;
14+
margin-bottom: 1rem;
15+
}
16+
.page-subtitle {
17+
font-family: var(--font-mono);
18+
color: var(--mrc);
19+
font-size: 0.85rem;
20+
text-transform: uppercase;
21+
letter-spacing: 0.1em;
22+
background: rgba(244, 66, 52, 0.1);
23+
padding: 0.5rem 1rem;
24+
border-radius: 99px;
25+
display: inline-block;
26+
border: 1px solid rgba(244, 66, 52, 0.2);
27+
}
28+
29+
/* Long-form Content Area */
30+
.prose-container {
31+
max-width: 900px;
32+
margin: 0 auto;
33+
padding: clamp(2rem, 5vw, 4rem);
34+
margin-bottom: 4rem;
35+
}
36+
.prose {
37+
color: var(--text-muted);
38+
font-size: 1.05rem;
39+
line-height: 1.8;
40+
}
41+
.prose h2 {
42+
color: #fff;
43+
font-size: 1.75rem;
44+
font-weight: 800;
45+
margin-top: 3rem;
46+
margin-bottom: 1rem;
47+
letter-spacing: -0.02em;
48+
display: flex;
49+
align-items: center;
50+
gap: 0.5rem;
51+
}
52+
.prose h2::before {
53+
content: '';
54+
display: block;
55+
width: 8px;
56+
height: 24px;
57+
background: var(--mrc);
58+
border-radius: 4px;
59+
}
60+
.prose h2:first-child { margin-top: 0; }
61+
.prose p { margin-bottom: 1.5rem; }
62+
.prose ul { margin-bottom: 1.5rem; padding-left: 1.5rem; list-style-type: disc; }
63+
.prose li { margin-bottom: 0.5rem; }
64+
.prose a { color: var(--mrc); text-decoration: underline; text-decoration-color: rgba(244, 66, 52, 0.3); text-underline-offset: 4px; }
65+
.prose a:hover { text-decoration-color: var(--mrc); }
66+
67+
/* Brand Color Showcase */
68+
.color-box {
69+
display: inline-flex;
70+
align-items: center;
71+
gap: 1rem;
72+
background: rgba(255,255,255,0.05);
73+
padding: 0.5rem 1rem 0.5rem 0.5rem;
74+
border-radius: 99px;
75+
border: 1px solid var(--glass-border);
76+
margin-top: 0.5rem;
77+
font-family: var(--font-mono);
78+
font-size: 0.9rem;
79+
color: #fff;
80+
}
81+
.color-swatch {
82+
width: 24px;
83+
height: 24px;
84+
border-radius: 50%;
85+
background: var(--mrc);
86+
box-shadow: 0 0 10px var(--mrc-glow);
87+
}

0 commit comments

Comments
 (0)