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

@@ -207,6 +207,7 @@ class Model_View_Base(BaseModel, ABC):
FLAG_OBEDIENCE_LEVEL: ClassVar[str] = Obedience_Level.FLAG_OBEDIENCE_LEVEL
FLAG_OVERLAY: ClassVar[str] = 'overlay'
FLAG_PAGE_BODY: ClassVar[str] = 'page-body'
FLAG_PRICING: ClassVar[str] = 'pricing'
FLAG_QUANTITY: ClassVar[str] = 'quantity'
FLAG_RESPONSE_QUALITY_METRIC: ClassVar[str] = Response_Quality_Metric.FLAG_RESPONSE_QUALITY_METRIC
FLAG_RIGHT_HAND_SIDE: ClassVar[str] = 'rhs'
@@ -223,6 +224,7 @@ class Model_View_Base(BaseModel, ABC):
FLAG_TABLE_MAIN: ClassVar[str] = 'table-main'
FLAG_TEMPORARY_ELEMENT: ClassVar[str] = 'temporary-element'
FLAG_USER: ClassVar[str] = User.FLAG_USER
# FLAG_VALUE_PROPOSITION: ClassVar[str] = 'value-proposition'
FLAG_WEATHER: ClassVar[str] = Weather.FLAG_WEATHER
FLAG_WEBSITE: ClassVar[str] = Base.FLAG_WEBSITE
HASH_GET_ALTCHA_CHALLENGE: ClassVar[str] = '/altcha/create-challenge'

View File

@@ -14,17 +14,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;
@@ -32,13 +28,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;
@@ -47,6 +43,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;
@@ -80,14 +83,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 {

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;
@@ -145,7 +156,7 @@ header {
}
}
@media (max-width: 515px) {
@media (max-width: 450px) {
.nav-links {
display: none;
}

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

View File

@@ -426,34 +426,50 @@
<li><a href="{{ model.HASH_PAGE_ACCESSIBILITY_STATEMENT }}">Accessibility Statement</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Contact</h3>
<ul>
<li><a href="mailto:{{ model.get_mail_contact_public() }}">Email: {{ model.get_mail_contact_public() }}</a></li>
<li><a href="{{ model.URL_DISCORD }}">Discord: {{ model.USERNAME_DISCORD }}</a></li>
<!-- <li><a href="{{ model.URL_FACEBOOK }}">Facebook: {{ model.USERNAME_FACEBOOK }}</a></li> -->
<li><a href="{{ model.URL_GITHUB }}">GitHub: {{ model.USERNAME_GITHUB }}</a></li>
<li><a href="{{ model.URL_INSTAGRAM }}">Instagram: {{ model.USERNAME_INSTAGRAM }}</a></li>
</ul>
</div>
<div class="footer-section">
<h3 style="color: #1f2937;">Contact</h3>
<ul>
<!-- <li>Phone</li> -->
<!-- <li><a href="{{ model.URL_LINKEDIN }}">LinkedIn: {{ model.USERNAME_LINKEDIN }}</a></li> -->
<li><a href="{{ model.URL_REDDIT }}">Reddit: {{ model.USERNAME_REDDIT }}</a></li>
<li><a href="{{ model.URL_TIKTOK }}">TikTok: {{ model.USERNAME_TIKTOK }}</a></li>
<li><a href="{{ model.URL_TWITTER }}">Twitter: {{ model.USERNAME_TWITTER }}</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; {{ current_year }} {{ model.NAME_COMPANY }}. <a href="{{ model.HASH_PAGE_LICENSE }}" alt="License" aria-label="License">All rights reserved.</a></p>
</div>
</div>
<div class="footer-content">
<div class="footer-section contact">
<h3>Contact</h3>
<!--
<ul>
<li><a href="mailto:{{ model.get_mail_contact_public() }}">Email: {{ model.get_mail_contact_public() }}</a></li>
<li><a href="{{ model.URL_DISCORD }}">Discord: {{ model.USERNAME_DISCORD }}</a></li>
< !-- <li><a href="{{ model.URL_FACEBOOK }}">Facebook: {{ model.USERNAME_FACEBOOK }}</a></li> -- >
<li><a href="{{ model.URL_GITHUB }}">GitHub: {{ model.USERNAME_GITHUB }}</a></li>
<li><a href="{{ model.URL_INSTAGRAM }}">Instagram: {{ model.USERNAME_INSTAGRAM }}</a></li>
</ul>
</div>
<div class="footer-section contact">
<h3 style="color: #1f2937;">Contact</h3>
<ul>
< !-- <li>Phone</li> -- >
< !-- <li><a href="{{ model.URL_LINKEDIN }}">LinkedIn: {{ model.USERNAME_LINKEDIN }}</a></li> -- >
<li><a href="{{ model.URL_REDDIT }}">Reddit: {{ model.USERNAME_REDDIT }}</a></li>
<li><a href="{{ model.URL_TIKTOK }}">TikTok: {{ model.USERNAME_TIKTOK }}</a></li>
<li><a href="{{ model.URL_TWITTER }}">Twitter: {{ model.USERNAME_TWITTER }}</a></li>
</ul>
-->
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="mailto:{{ model.get_mail_contact_public() }}">Email: {{ model.get_mail_contact_public() }}</a></div>
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_DISCORD }}">Discord: {{ model.USERNAME_DISCORD }}</a></div>
<!-- <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_FACEBOOK }}">Facebook: {{ model.USERNAME_FACEBOOK }}</a></div> -->
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_GITHUB }}">GitHub: {{ model.USERNAME_GITHUB }}</a></div>
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_INSTAGRAM }}">Instagram: {{ model.USERNAME_INSTAGRAM }}</a></div>
<!-- <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">Phone</div> -->
<!-- <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_LINKEDIN }}">LinkedIn: {{ model.USERNAME_LINKEDIN }}</a></div> -->
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_REDDIT }}">Reddit: {{ model.USERNAME_REDDIT }}</a></div>
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_TIKTOK }}">TikTok: {{ model.USERNAME_TIKTOK }}</a></div>
<div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}"><a href="{{ model.URL_TWITTER }}">Twitter: {{ model.USERNAME_TWITTER }}</a></div>
</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; {{ current_year }} {{ model.NAME_COMPANY }}. <a href="{{ model.HASH_PAGE_LICENSE }}" alt="License" aria-label="License">All rights reserved.</a></p>
</div>
</div>
</footer>
<script src="{{ url_for('static', filename='dist/js/main.bundle.js') }}"></script>

View File

@@ -8,13 +8,13 @@
{% endblock %}
{% block page_nav_links %}
<a href="#{{ model.FLAG_BENEFITS }}">Benefits</a>
<a href="#{{ model.FLAG_PROBLEM }}">Problem</a>
<a href="#{{ model.FLAG_SOLUTION }}">Solution</a>
<a href="#{{ model.FLAG_BENEFITS }}">Benefits</a>
<a href="#{{ model.FLAG_SOCIAL_PROOF }}">Social Proof</a>
<!-- <a href="#{{ model.FLAG_EARLY_ACCESS }}">Early Access</a> -->
<a href="#{{ model.FLAG_EARLY_ACCESS }}">Early Access</a>
<!-- <a href="#{{ model.FLAG_SOCIAL_PROOF }}">Social Proof</a>
<a href="#{{ model.FLAG_FEATURES }}">Features</a>
<a href="#{{ model.FLAG_FAQ }}">FAQs</a>
<a href="#{{ model.FLAG_FAQ }}">FAQs</a> -->
<a href="{{ model.HASH_PAGE_CONTACT }}" class="{{ model.FLAG_BUTTON }} {{ model.FLAG_BUTTON_PRIMARY }}">Contact Us</a>
{% endblock %}
@@ -22,84 +22,112 @@
<section class="hero">
<div class="container">
<div class="hero-content" data-aos="fade-up">
<h1>Track Every Tail Wag of Progress</h1>
<p>The UK's first professional dog training management platform that transforms how you document, measure, and showcase training success!</p>
<a href="{{ model.HASH_PAGE_CONTACT }}" class="{{ model.FLAG_BUTTON }} {{ model.FLAG_BUTTON_PRIMARY }}">Get Early Access</a>
<h1>Transform Your Dog Training Business with Smart Progress Tracking</h1>
<p>The first UK-built platform designed specifically for professional dog trainers. Track progress, measure success, and keep clients engaged like never before.</p>
<!-- <a href="{{ model.HASH_PAGE_CONTACT }}" class="{{ model.FLAG_BUTTON }} {{ model.FLAG_BUTTON_PRIMARY }}">Get Early Access</a>
<p>Join forward-thinking trainers across the UK who are revolutionising how they manage their business.</p> -->
<!-- <a href="{{ model.HASH_PAGE_CONTACT }}" class="{{ model.FLAG_BUTTON }} {{ model.FLAG_BUTTON_PRIMARY }}">Watch 2-Minute Demo</a> -->
<a href="{{ model.HASH_PAGE_CONTACT }}" class="{{ model.FLAG_BUTTON }} {{ model.FLAG_BUTTON_PRIMARY }}">Join the Waitlist</a>
</div>
</div>
</section>
<!--
<section id="{{ model.FLAG_PROBLEM_SOLUTION }}" class="{{ model.FLAG_PROBLEM_SOLUTION }}">
<section id="{{ model.FLAG_BENEFITS }}" class="{{ model.FLAG_BENEFITS }}">
<div class="container">
<h2 class="section-title text-center">Finally, Software That Understands Dog Training</h2>
<p class="section-subtitle text-center"><strong>Problem Statement:</strong> Running a dog training business shouldn't mean drowning in paperwork. Between managing client schedules, tracking each dog's progress, sending updates to worried pet parents, and keeping your business profitable, there's barely time left for actual training.</p>
<p class="section-subtitle text-center"><strong>Solution Overview:</strong> Fetch Metrics was built specifically for dog trainers by people who understand your industry. Every feature is designed around how you actually work - from intake forms that capture behavioral quirks to progress reports that build client confidence.</p>
<h2 class="section-title text-center">Finally, Software That Understands Dog Training</h2> <!-- Finally, A System That Speaks Your Language -->
<p class="section-subtitle text-center">Running a successful dog training business shouldn't mean drowning in paperwork or losing track of client progress. Fetch Metrics brings clarity to every session, ensuring both you and your clients stay perfectly synchronized.</p>
<p>Key features:</p>
<ul> < !-- style="list-style: none; margin: 2rem 0;"-- >
<li>✓ <strong>Client & Dog Management:</strong> Complete profiles with photos, medical notes, and behavioral history</li>
<li>✓ <strong>Session Tracking:</strong> Quick note-taking, homework assignments, and progress photos</li>
</ul>
<div class="{{ model.FLAG_CARD }} {{ model.FLAG_BENEFITS }}">
<p class="section-subtitle text-center"><strong>Key benefits:</strong></p>
<ul>
<li>📊 <strong>Track Real Progress:</strong> Document every breakthrough and milestone with detailed performance tracking that shows exactly how each dog is progressing with specific commands.</li>
<li>🤝 <strong>Keep Everyone in Sync:</strong> Ensure trainers and owners use consistent commands and signals. No more confusion, no more mixed messages, just clear communication that accelerates results.</li>
<li>📈 <strong>Prove Your Value:</strong> Generate professional progress reports that showcase improvement over time. Show clients exactly why your training works.</li>
</ul>
</div>
</div>
</section>
-->
<section id="{{ model.FLAG_PROBLEM }}" class="{{ model.FLAG_PROBLEM }}">
<div class="container">
<h2 class="section-title text-center">Still Using Spreadsheets and Paper Notes?</h2>
<!--
<p class="section-subtitle text-center"><strong>Problem Statement:</strong> Running a dog training business shouldn't mean drowning in paperwork. Between managing client schedules, tracking each dog's progress, sending updates to worried pet parents, and keeping your business profitable, there's barely time left for actual training.</p>
<p class="section-subtitle text-center"><strong>Solution Overview:</strong> Fetch Metrics was built specifically for dog trainers by people who understand your industry. Every feature is designed around how you actually work - from intake forms that capture behavioral quirks to progress reports that build client confidence.</p>
<h2 class="section-title text-center">Sound Familiar?</h2>
<div class="{{ model.FLAG_CARD }} {{ model.FLAG_PROBLEM }}">
<p class="section-subtitle text-center">Pain Points:</p>
<ul> < !-- style="list-style: none; margin: 2rem 0;"-- >
<li>Spending 10+ hours per week on paperwork and scheduling</li>
<li>Losing client information in messy spreadsheets</li>
<li>Forgetting to follow up on training progress</li>
<li>Struggling to show clients their dog's improvement</li>
<li>Missing appointments and double-booking sessions</li>
<li>Difficulty tracking payments and outstanding invoices</li>
<ul>
<li>Spending hours on admin instead of training</li>
<li>Clients forgetting commands between sessions</li>
<li>No clear way to show progress over time</li>
<li>Different trainers or pets using different signals</li>
<li>Lost notes and forgotten homework</li>
</ul>
<p>You became a dog trainer to work with animals and help families - not to be a data entry clerk. Yet successful trainers tell us they spend more time on administration than actual training.</p>
</div>
-->
<div class="{{ model.FLAG_CARD }} {{ model.FLAG_PROBLEM }}">
<p>You're not alone. Most UK dog trainers spend hours each week juggling multiple systems, trying to remember which dog knows which commands, and struggling to show clients real progress.</p>
<p>What if you could track every command, every session, and every breakthrough in one simple system?</p>
<!--
<p>You became a dog trainer to work with animals and help families - not to be a data entry clerk. Yet successful trainers tell us they spend more time on administration than actual training.</p>
-->
<p>Fetch Metrics solves these challenges with purpose-built tools that streamline your workflow and enhance client results. Spend less time on paperwork and more time doing what you love.</p>
</div>
</div>
</section>
<section id="{{ model.FLAG_SOLUTION }}" class="{{ model.FLAG_SOLUTION }}">
<div class="container">
<h2 class="section-title text-center">Professional Progress Tracking Made Simple</h2>
<!--
<p class="section-subtitle text-center"><strong>Problem Statement:</strong> Running a dog training business shouldn't mean drowning in paperwork. Between managing client schedules, tracking each dog's progress, sending updates to worried pet parents, and keeping your business profitable, there's barely time left for actual training.</p>
<p class="section-subtitle text-center"><strong>Solution Overview:</strong> Fetch Metrics was built specifically for dog trainers by people who understand your industry. Every feature is designed around how you actually work - from intake forms that capture behavioral quirks to progress reports that build client confidence.</p>
<h2 class="section-title text-center">Simple to Start, Powerful in Practice</h2>
<div class="{{ model.FLAG_CARD }} {{ model.FLAG_SOLUTION }}">
<p class="section-subtitle text-center">Teaser Benefits:</p>
<ul>
<li><strong>Professional Client Management:</strong> Never lose track of a client or their dog's progress again</li>
<li><strong>Effortless Scheduling:</strong> Appointments that actually sync with your life</li>
<li><strong>Progress That Speaks:</strong> Show clients exactly how their dog is improving</li>
<li><strong>Smart Business Tools:</strong> Everything you need to run a professional training business</li>
<li><strong>Happy Dog Owners:</strong> Give clients access to their dog's training journey</li>
<li><strong>1. Set Up Your Business:</strong> Add your trainers, create client profiles, and customise your training programmes in minutes.</li>
<li><strong>2. Track Every Session:</strong> Record progress, document breakthroughs, and maintain consistency across all trainers and clients.</li>
<li><strong>3. Engage Your Clients:</strong> Give owners access to their dog's journey, including command reminders and homework assignments.</li>
<li><strong>4. Showcase Success:</strong> Generate professional reports that demonstrate progress and justify your expertise.</li>
</ul>
<p><strong>Note:</strong> Full feature details available to beta users only</p>
</div>
-->
<p class="section-subtitle text-center">Finally, a system built specifically for how dog trainers actually work. Document command mastery, track skill progression, and generate professional progress reports that wow your clients.</p>
<div class="{{ model.FLAG_CARD }} {{ model.FLAG_SOLUTION }}">
</div>
</section>
<section id="{{ model.FLAG_EARLY_ACCESS }}" class="{{ model.FLAG_EARLY_ACCESS }}">
<div class="container">
<h2 class="section-title text-center">Be Among the First</h2>
<p class="section-subtitle text-center">We're putting the finishing touches on something special. Join our early access list to:</p>
<div class="{{ model.FLAG_CARD }} {{ model.FLAG_EARLY_ACCESS }}">
<ul>
<li><strong>Command Performance Tracking:</strong> Monitor success rates for every command, from basic sit-stay to advanced behaviours</li>
<li><strong>Skill Level Assessment:</strong> Automatically track progression through training levels with detailed performance metrics</li>
<li><strong>Professional Progress Reports:</strong> Generate impressive client reports that showcase real, measurable improvement</li>
<li><strong>Session History:</strong> Never lose track of what you worked on last week or which exercises need reinforcement</li>
<li>✓ Get exclusive first access when we launch</li>
<li>✓ Lock in founder pricing (up to 50% off)</li>
<li>✓ Shape the features that matter most to you</li>
<li>✓ Join a community of forward-thinking trainers</li>
</ul>
<a href="{{ model.HASH_PAGE_CONTACT }}" class="{{ model.FLAG_BUTTON }} {{ model.FLAG_BUTTON_PRIMARY }}">Reserve My Spot</a>
</div>
</div>
</section>
<!--
<section id="{{ model.FLAG_FEATURES }}" class="{{ model.FLAG_FEATURES }}">
<div class="container">
<h2 class="section-title text-center">Everything You Need, Nothing You Don't</h2>
<div class="{{ model.FLAG_CARD }} {{ model.FLAG_FEATURES }}">
< !--
<ul>
<li>✓ Detailed command performance tracking</li>
<li>✓ Multi-level skill progression monitoring</li>
<li>✓ Professional progress report generation</li>
<li>✓ Client and dog profile management</li>
<li>✓ Session planning and note-taking</li>
<li>✓ Mobile-friendly for field use</li>
<li>✓ Secure cloud-based storage</li>
<li>✓ GDPR compliant</li>
</ul>
-- >
<ul>
<li>✓ Comprehensive progress tracking for individual commands</li>
<li>✓ Unified command library for team consistency</li>
<li>✓ Client portal for owner engagement</li>
<li>✓ Session scheduling and reminders</li>
<li>✓ Professional progress reporting</li>
<li>✓ Mobile-friendly for field use</li>
<li>✓ Secure photo and video storage</li>
<li>✓ Multi-trainer support with permissions</li>
</ul>
<a href="{{ model.HASH_PAGE_CONTACT }}" class="{{ model.FLAG_BUTTON }} {{ model.FLAG_BUTTON_PRIMARY }}">Reserve Your Spot Now</a>
<p>And this is just the beginning. We're constantly adding features based on feedback from trainers like you.</p>
</div>
</div>
</section>
@@ -132,16 +160,10 @@
<section id="{{ model.FLAG_SOCIAL_PROOF }}" class="{{ model.FLAG_SOCIAL_PROOF }}">
<div class="container">
<h2 class="section-title text-center">Join Progressive UK Trainers Already Transforming Their Business</h2>
<h2 class="section-title text-center">Built for UK Trainers, By UK Trainers</h2>
<div class="{{ model.FLAG_CARD }} {{ model.FLAG_SOCIAL_PROOF }}">
<p class="section-subtitle text-center">
"I wish I'd had this 5 years ago. What used to take me a full Sunday afternoon now takes 20 minutes. My clients love seeing their dog's progress, and I actually enjoy the business side now."
<ul>
<li>Tierney G., Dog Trainer, Rugby</li>
</ul>
</p>
<!--
<p>We understand the unique challenges of running a dog training business in the UK. That's why we've created the first platform designed specifically for our market.</p>
<p class="section-subtitle text-center">Stats:</p>
<ul>
<li>✓ 30+ Professional Trainers in Beta</li>
@@ -149,52 +171,11 @@
<li>✓ 10 Hours Saved Per Week (Average)</li>
<li>✓ 40% Increase in Client Retention</li>
</ul>
-->
</div>
</div>
</section>
<section id="{{ model.FLAG_FEATURES }}" class="{{ model.FLAG_FEATURES }}">
<div class="container">
<h2 class="section-title text-center">Everything You Need to Run a Modern Training Business</h2>
<div class="{{ model.FLAG_CARD }} {{ model.FLAG_FEATURES }}">
<ul>
<li>✓ Detailed command performance tracking</li>
<li>✓ Multi-level skill progression monitoring</li>
<li>✓ Professional progress report generation</li>
<li>✓ Client and dog profile management</li>
<li>✓ Session planning and note-taking</li>
<li>✓ Mobile-friendly for field use</li>
<li>✓ Secure cloud-based storage</li>
<li>✓ GDPR compliant</li>
</ul>
<a href="{{ model.HASH_PAGE_CONTACT }}" class="{{ model.FLAG_BUTTON }} {{ model.FLAG_BUTTON_PRIMARY }}">Reserve Your Spot Now</a>
<p>30-day money-back guarantee • Cancel anytime • No setup fees</p>
</div>
</div>
</section>
<!--
<section id="{{ model.FLAG_EARLY_ACCESS }}" class="{{ model.FLAG_EARLY_ACCESS }}">
<div class="container">
<h2 class="section-title text-center">Be Among the First to Experience the Future of Dog Training Business Management</h2>
<p class="section-subtitle text-center">Limited early access launching Autumn 2025. Join successful trainers who are already seeing results.</p>
<div class="{{ model.FLAG_CARD }} {{ model.FLAG_EARLY_ACCESS }}">
<p class="section-subtitle text-center">What You Get:</p>
<ul>
<li>✓ First access when we launch</li>
<li>✓ Exclusive beta features</li>
<li>✓ Direct input on development</li>
<li>✓ Founding member pricing (save 50% for life)</li>
<li>✓ Personal onboarding session</li>
</ul>
<a href="{{ model.HASH_PAGE_CONTACT }}" class="{{ model.FLAG_BUTTON }} {{ model.FLAG_BUTTON_PRIMARY }}">Reserve Your Spot Now</a>
<p class="section-subtitle text-center"><strong>Risk Reversal:</strong> 30-day money-back guarantee • Cancel anytime • No setup fees</p>
</div>
</div>
</section>
-->
<!--
<section class="{{ model.FLAG_CTA_1 }}">
<div class="container">
<h2 class="section-title">Ready to Revolutionise Your Training Business?</h2>
@@ -204,6 +185,15 @@
</div>
</section>
<section id="{{ model.FLAG_PRICING }}" class="{{ model.FLAG_PRICING }}">
<div class="container">
<h2 class="section-title">Pricing That Grows With You</h2>
<p class="section-subtitle text-center">Whether you're an independent trainer or managing a team, we have a plan that fits. All plans include our core features with no hidden fees.</p>
<a href="{{ model.HASH_PAGE_CONTACT }}" class="{{ model.FLAG_BUTTON }} {{ model.FLAG_BUTTON_LIGHT }}">Get Early Access Today</a>
<p>30-day money-back guarantee • Cancel anytime • No setup fees</p>
</div>
</section>
<section id="{{ model.FLAG_FAQ }}" class="{{ model.FLAG_FAQ }}">
<div class="container">
<h2 class="section-title text-center">FAQs</h2>
@@ -217,13 +207,13 @@
</div>
</div>
</section>
-->
<section class="{{ model.FLAG_CTA_2 }}">
<div class="container">
<h2 class="section-title">Stop Losing Track of Training Progress</h2>
<p class="section-subtitle text-center">Your expertise deserves professional tools. Join innovative UK trainers who are already transforming how they track, measure, and showcase training success.</p>
<a href="{{ model.HASH_PAGE_CONTACT }}" class="{{ model.FLAG_BUTTON }} {{ model.FLAG_BUTTON_LIGHT }}">Join the Waitlist</a>
<p>Enter your email for updates and exclusive early access</p>
<h2 class="section-title">Built for UK Trainers, by UK Trainers</h2>
<p class="section-subtitle text-center">Fetch Metrics isn't another generic business tool trying to fit your needs. We're building this specifically for the unique requirements of professional dog training in the UK.</p>
<a href="{{ model.HASH_PAGE_CONTACT }}" class="{{ model.FLAG_BUTTON }} {{ model.FLAG_BUTTON_LIGHT }}">Questions?</a>
</div>
</section>