Feat(UI): Improved content and styling for home page.

This commit is contained in:
2025-07-25 21:16:02 +01:00
parent b76a999d01
commit c5a37daf45
11 changed files with 253 additions and 185 deletions

View File

@@ -28,7 +28,7 @@ header {
gap: 2rem;
display: flex;
flex-wrap: wrap;
max-width: 70vw;
max-width: 58vw;
}
.nav-links a {
@@ -44,9 +44,9 @@ header {
}
.container {
max-width: 1200px;
max-width: min(2000px, 90vw);
margin: 0 auto;
padding: 0 1.5rem;
padding: 0 5vw;
}
/* Header */
@@ -67,9 +67,9 @@ header {
}
.logo {
font-size: 1.5rem;
font-size: 2rem;
font-weight: bold;
color: var(--primary);
color: var(--colour-secondary);
}
.nav-links {
@@ -105,6 +105,7 @@ header {
color: #fff;
margin-bottom: 1rem;
font-size: 1.2rem;
text-align: center;
}
.footer-section ul {
@@ -138,6 +139,16 @@ header {
color: aquamarine;
}
.footer-section.contact {
width: 100%;
}
.footer-section .container {
padding: 0;
}
.footer-section .container.row .container.column {
padding: 1vh 2vw;
}
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;

View File

@@ -1 +1 @@
{"version":3,"file":"css/core_admin_home.bundle.css","mappings":";AACA;CACC;AACD;IACI,iBAAiB;IACjB,qCAAqC;IACrC;aACS;IACT,WAAW;IACX,aAAa;AACjB;;AAEA;IACI,aAAa;IACb,8BAA8B;IAC9B,mBAAmB;IACnB,eAAe;AACnB;;AAEA;IACI,iBAAiB;IACjB,iBAAiB;IACjB,qBAAqB;AACzB;;AAEA;IACI,aAAa;IACb,SAAS;IACT,aAAa;IACb,eAAe;IACf,eAAe;AACnB;;AAEA;IACI,qBAAqB;IACrB,kBAAkB;IAClB,gBAAgB;IAChB,qBAAqB;IACrB,eAAe;AACnB;AACA;IACI,YAAY;IACZ,cAAc;AAClB;;AAEA;IACI,iBAAiB;IACjB,cAAc;IACd,iBAAiB;AACrB;;AAEA,WAAW;AACX;IACI,iBAAiB;IACjB,qCAAqC;IACrC;aACS;IACT,WAAW;IACX,aAAa;AACjB;;AAEA;IACI,aAAa;IACb,8BAA8B;IAC9B,mBAAmB;IACnB,eAAe;AACnB;;AAEA;IACI,iBAAiB;IACjB,iBAAiB;IACjB,qBAAqB;AACzB;;AAEA;IACI,aAAa;IACb,SAAS;AACb;;AAEA;IACI,qBAAqB;IACrB,kBAAkB;IAClB,gBAAgB;IAChB,qBAAqB;AACzB;AACA;IACI,YAAY;AAChB;;AAEA,WAAW;AACX;IACI,mBAAmB;IACnB,cAAc;IACd,oBAAoB;AACxB;;AAEA;IACI,aAAa;IACb,2DAA2D;IAC3D,SAAS;IACT,mBAAmB;AACvB;;AAEA;IACI,WAAW;IACX,mBAAmB;IACnB,iBAAiB;AACrB;;AAEA;IACI,gBAAgB;IAChB,UAAU;AACd;;AAEA;IACI,qBAAqB;AACzB;;AAEA;IACI,cAAc;IACd,qBAAqB;IACrB,2BAA2B;AAC/B;;AAEA;IACI,WAAW;IACX,0BAA0B;AAC9B;;AAEA;IACI,6BAA6B;IAC7B,iBAAiB;IACjB,kBAAkB;IAClB,iBAAiB;AACrB;;AAEA;IACI,iBAAiB;AACrB;;AAEA;IACI;QACI,0BAA0B;QAC1B,kBAAkB;IACtB;AACJ;;AAEA;IACI;QACI,aAAa;IACjB;AACJ,C;ACvJA;IACI,uBAAuB;AAC3B;;AAEA;IACI,WAAW;AACf,C","sources":["webpack://app/./static/css/sections/core.css","webpack://app/./static/css/pages/core/admin_home.css"],"sourcesContent":["\n/* Home page\n*/\nheader {\n background: white;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n /* position: fixed;\n top: 0; */\n width: 100%;\n z-index: 1000;\n}\n\n.navbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 0;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n display: flex;\n flex-wrap: wrap;\n max-width: 70vw;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text);\n font-weight: 500;\n align-content: center;\n font-size: 1rem;\n}\n.nav-links a.button {\n color: white;\n margin: 0 auto;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 1.5rem;\n}\n\n/* Header */\nheader {\n background: white;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n /* position: fixed;\n top: 0; */\n width: 100%;\n z-index: 1000;\n}\n\n.navbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 0;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text);\n font-weight: 500;\n align-content: center;\n}\n.nav-links a.button {\n color: white;\n}\n\n/* Footer */\n.footer {\n background: #1f2937;\n color: #f3f4f6;\n padding: 4rem 0 2rem;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-bottom: 2rem;\n}\n\n.footer-section h3 {\n color: #fff;\n margin-bottom: 1rem;\n font-size: 1.2rem;\n}\n\n.footer-section ul {\n list-style: none;\n padding: 0;\n}\n\n.footer-section ul li {\n margin-bottom: 0.5rem;\n}\n\n.footer-section a {\n color: #f3f4f6;\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.footer-section a:hover {\n color: #fff;\n text-decoration: underline;\n}\n\n.footer-bottom {\n border-top: 1px solid #374151;\n padding-top: 2rem;\n text-align: center;\n font-size: 0.9rem;\n}\n\n.footer-bottom a {\n color: aquamarine;\n}\n\n@media (max-width: 768px) {\n .footer-content {\n grid-template-columns: 1fr;\n text-align: center;\n }\n}\n\n@media (max-width: 450px) {\n .nav-links {\n display: none;\n }\n}","#pageBody > .card:first-of-type {\n width: min(80vw, 500px);\n}\n\n.container.row {\n width: auto;\n}"],"names":[],"sourceRoot":""}
{"version":3,"file":"css/core_admin_home.bundle.css","mappings":";AACA;CACC;AACD;IACI,iBAAiB;IACjB,qCAAqC;IACrC;aACS;IACT,WAAW;IACX,aAAa;AACjB;;AAEA;IACI,aAAa;IACb,8BAA8B;IAC9B,mBAAmB;IACnB,eAAe;AACnB;;AAEA;IACI,iBAAiB;IACjB,iBAAiB;IACjB,qBAAqB;AACzB;;AAEA;IACI,aAAa;IACb,SAAS;IACT,aAAa;IACb,eAAe;IACf,eAAe;AACnB;;AAEA;IACI,qBAAqB;IACrB,kBAAkB;IAClB,gBAAgB;IAChB,qBAAqB;IACrB,eAAe;AACnB;AACA;IACI,YAAY;IACZ,cAAc;AAClB;;AAEA;IACI,4BAA4B;IAC5B,cAAc;IACd,cAAc;AAClB;;AAEA,WAAW;AACX;IACI,iBAAiB;IACjB,qCAAqC;IACrC;aACS;IACT,WAAW;IACX,aAAa;AACjB;;AAEA;IACI,aAAa;IACb,8BAA8B;IAC9B,mBAAmB;IACnB,eAAe;AACnB;;AAEA;IACI,eAAe;IACf,iBAAiB;IACjB,8BAA8B;AAClC;;AAEA;IACI,aAAa;IACb,SAAS;AACb;;AAEA;IACI,qBAAqB;IACrB,kBAAkB;IAClB,gBAAgB;IAChB,qBAAqB;AACzB;AACA;IACI,YAAY;AAChB;;AAEA,WAAW;AACX;IACI,mBAAmB;IACnB,cAAc;IACd,oBAAoB;AACxB;;AAEA;IACI,aAAa;IACb,2DAA2D;IAC3D,SAAS;IACT,mBAAmB;AACvB;;AAEA;IACI,WAAW;IACX,mBAAmB;IACnB,iBAAiB;IACjB,kBAAkB;AACtB;;AAEA;IACI,gBAAgB;IAChB,UAAU;AACd;;AAEA;IACI,qBAAqB;AACzB;;AAEA;IACI,cAAc;IACd,qBAAqB;IACrB,2BAA2B;AAC/B;;AAEA;IACI,WAAW;IACX,0BAA0B;AAC9B;;AAEA;IACI,6BAA6B;IAC7B,iBAAiB;IACjB,kBAAkB;IAClB,iBAAiB;AACrB;;AAEA;IACI,iBAAiB;AACrB;;AAEA;IACI,WAAW;AACf;AACA;IACI,UAAU;AACd;AACA;IACI,gBAAgB;AACpB;;AAEA;IACI;QACI,0BAA0B;QAC1B,kBAAkB;IACtB;AACJ;;AAEA;IACI;QACI,aAAa;IACjB;AACJ,C;AClKA;IACI,uBAAuB;AAC3B;;AAEA;IACI,WAAW;AACf,C","sources":["webpack://app/./static/css/sections/core.css","webpack://app/./static/css/pages/core/admin_home.css"],"sourcesContent":["\n/* Home page\n*/\nheader {\n background: white;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n /* position: fixed;\n top: 0; */\n width: 100%;\n z-index: 1000;\n}\n\n.navbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 0;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n display: flex;\n flex-wrap: wrap;\n max-width: 58vw;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text);\n font-weight: 500;\n align-content: center;\n font-size: 1rem;\n}\n.nav-links a.button {\n color: white;\n margin: 0 auto;\n}\n\n.container {\n max-width: min(2000px, 90vw);\n margin: 0 auto;\n padding: 0 5vw;\n}\n\n/* Header */\nheader {\n background: white;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n /* position: fixed;\n top: 0; */\n width: 100%;\n z-index: 1000;\n}\n\n.navbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 0;\n}\n\n.logo {\n font-size: 2rem;\n font-weight: bold;\n color: var(--colour-secondary);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text);\n font-weight: 500;\n align-content: center;\n}\n.nav-links a.button {\n color: white;\n}\n\n/* Footer */\n.footer {\n background: #1f2937;\n color: #f3f4f6;\n padding: 4rem 0 2rem;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-bottom: 2rem;\n}\n\n.footer-section h3 {\n color: #fff;\n margin-bottom: 1rem;\n font-size: 1.2rem;\n text-align: center;\n}\n\n.footer-section ul {\n list-style: none;\n padding: 0;\n}\n\n.footer-section ul li {\n margin-bottom: 0.5rem;\n}\n\n.footer-section a {\n color: #f3f4f6;\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.footer-section a:hover {\n color: #fff;\n text-decoration: underline;\n}\n\n.footer-bottom {\n border-top: 1px solid #374151;\n padding-top: 2rem;\n text-align: center;\n font-size: 0.9rem;\n}\n\n.footer-bottom a {\n color: aquamarine;\n}\n\n.footer-section.contact {\n width: 100%;\n}\n.footer-section .container {\n padding: 0;\n}\n.footer-section .container.row .container.column {\n padding: 1vh 2vw;\n}\n\n@media (max-width: 768px) {\n .footer-content {\n grid-template-columns: 1fr;\n text-align: center;\n }\n}\n\n@media (max-width: 450px) {\n .nav-links {\n display: none;\n }\n}","#pageBody > .card:first-of-type {\n width: min(80vw, 500px);\n}\n\n.container.row {\n width: auto;\n}"],"names":[],"sourceRoot":""}

View File

@@ -28,7 +28,7 @@ header {
gap: 2rem;
display: flex;
flex-wrap: wrap;
max-width: 70vw;
max-width: 58vw;
}
.nav-links a {
@@ -44,9 +44,9 @@ header {
}
.container {
max-width: 1200px;
max-width: min(2000px, 90vw);
margin: 0 auto;
padding: 0 1.5rem;
padding: 0 5vw;
}
/* Header */
@@ -67,9 +67,9 @@ header {
}
.logo {
font-size: 1.5rem;
font-size: 2rem;
font-weight: bold;
color: var(--primary);
color: var(--colour-secondary);
}
.nav-links {
@@ -105,6 +105,7 @@ header {
color: #fff;
margin-bottom: 1rem;
font-size: 1.2rem;
text-align: center;
}
.footer-section ul {
@@ -138,6 +139,16 @@ header {
color: aquamarine;
}
.footer-section.contact {
width: 100%;
}
.footer-section .container {
padding: 0;
}
.footer-section .container.row .container.column {
padding: 1vh 2vw;
}
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;

File diff suppressed because one or more lines are too long

View File

@@ -28,7 +28,7 @@ header {
gap: 2rem;
display: flex;
flex-wrap: wrap;
max-width: 70vw;
max-width: 58vw;
}
.nav-links a {
@@ -44,9 +44,9 @@ header {
}
.container {
max-width: 1200px;
max-width: min(2000px, 90vw);
margin: 0 auto;
padding: 0 1.5rem;
padding: 0 5vw;
}
/* Header */
@@ -67,9 +67,9 @@ header {
}
.logo {
font-size: 1.5rem;
font-size: 2rem;
font-weight: bold;
color: var(--primary);
color: var(--colour-secondary);
}
.nav-links {
@@ -105,6 +105,7 @@ header {
color: #fff;
margin-bottom: 1rem;
font-size: 1.2rem;
text-align: center;
}
.footer-section ul {
@@ -138,6 +139,16 @@ header {
color: aquamarine;
}
.footer-section.contact {
width: 100%;
}
.footer-section .container {
padding: 0;
}
.footer-section .container.row .container.column {
padding: 1vh 2vw;
}
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
@@ -166,17 +177,13 @@ ul li {
font-size: 16px;
}
section.problem,
section.benefits,
section.features,
section.faq {
padding: 6rem 0;
section.solution {
padding: 4rem 0;
background: var(--colour-text-background);
}
section.problem .card.problem,
section.benefits .card.benefits,
section.features .card.features,
section.faq .card.faq {
section.solution .card.solution {
padding: 2rem;
background: var(--colour-page-background);
border-radius: 8px;
@@ -184,13 +191,13 @@ section.faq .card.faq {
display: block;
}
section.solution,
section.social-proof {
padding: 6rem 0;
section.problem,
section.early-access {
padding: 4rem 0;
background: var(--colour-page-background-1);
}
section.solution .card.solution,
section.social-proof .card.social-proof {
section.problem .card.problem,
section.early-access .card.early-access {
background: var(--colour-text-background);
padding: 2rem;
border-radius: 8px;
@@ -199,6 +206,13 @@ section.social-proof .card.social-proof {
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
section.benefits ul li,
section.solution ul li,
section.early-access ul li {
list-style: none;
}
/* Hero Section */
.hero {
padding: 8rem 0 4rem;
@@ -232,14 +246,19 @@ section.problem .problem.card:hover {
transform: translateY(-5px);
}
*/
section.problem .section-subtitle {
/* font-size: 18px; */
font-weight: bold;
}
/* Solution Section */
/* Benefits Section */
/* Benefits Section * /
section.benefits .section-subtitle {
font-size: 18px;
font-weight: bold;
}
*/
/* Social Proof Section * /
section.social-proof {

File diff suppressed because one or more lines are too long