feat: add service section and refresh features sections on homepage
parent
1411d17745
commit
e5ba11643d
GPG Key ID:
AD9F0F08E855ED88
|
|
@ -1,6 +1,8 @@
|
|||
.home-card__group {
|
||||
display: flex;
|
||||
margin: 50px auto;
|
||||
//margin: 50px auto;
|
||||
margin: 0px auto;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.home-card__conatiner {
|
||||
|
|
|
|||
|
|
@ -1,25 +1,46 @@
|
|||
@import "../components/fullscreen";
|
||||
|
||||
.service__features {
|
||||
margin: 20px 0px;
|
||||
@include fullscreen;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.service__features--split {
|
||||
margin: 20px 0px;
|
||||
@include fullscreen;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
max-height: 1300px;
|
||||
}
|
||||
|
||||
.service-card__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.service-card__conatiner {
|
||||
// background-color: #eee;
|
||||
margin: 10px 0px;
|
||||
// wpadding: 10px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
// height: 250px;
|
||||
height: 100vh;
|
||||
border-top: 1px solid grey;
|
||||
// height: 250px;
|
||||
// border-top: 1px solid #cacaca;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.service-card__conatiner:first-child {
|
||||
border-top: none;
|
||||
.line-border {
|
||||
width: 80%;
|
||||
display: block;
|
||||
border-bottom: 1px solid #cacaca;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.service-card__conatiner:last-child {
|
||||
// border-top: none;
|
||||
}
|
||||
|
||||
.service-card__icon {
|
||||
|
|
@ -30,14 +51,19 @@
|
|||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.service-card__service-name {
|
||||
color: rgb(0, 128, 0);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.service-card__title {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
//text-align: center;
|
||||
}
|
||||
|
||||
.service-card__text {
|
||||
// font-size: 0.7rem;
|
||||
text-align: center;
|
||||
// text-align: center;
|
||||
margin-bottom: 30px !important;
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +73,7 @@
|
|||
}
|
||||
|
||||
.service-card__aciton-btn {
|
||||
margin: auto;
|
||||
margin: auto 0;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
.service-card__conatiner {
|
||||
width: 85%;
|
||||
flex-direction: column-reverse;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.service__features--split,
|
||||
.service__features {
|
||||
height: auto !important;
|
||||
min-height: auto !important;
|
||||
max-height: none !important;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.line-border {
|
||||
width: 95%;
|
||||
}
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
.home__vision-container {
|
||||
flex-direction: column;
|
||||
height: auto !important;
|
||||
min-height: auto !important;
|
||||
max-height: auto !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
.home__vision-container{
|
||||
@import "../components/fullscreen";
|
||||
|
||||
.home__vision-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 320px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
|
||||
.home__vision-text-line {
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
|
|
@ -38,3 +39,16 @@
|
|||
.home__vision-action-link {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.page__container--split {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
padding: 50px 0;
|
||||
width: 80%;
|
||||
@include fullscreen;
|
||||
max-height: 1300px;
|
||||
height: 90vh !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,37 @@
|
|||
<section class="service__features--split">
|
||||
<div class="service-card__group">
|
||||
|
||||
<div class="service-card__conatiner">
|
||||
<div class="service-card__text-container">
|
||||
<p class="service-card__service-name">Gitea Hosting</p>
|
||||
<h2 class="service-card__title">Run indepandent software forge</h2>
|
||||
<p class="service-card__text">Dedicated Gitea hosting with Woodpecker, flat monthly price, unlimited bandwidth and users. All upgrades included. Fully self-hostable. ETA July 1st, 2022.</p>
|
||||
<ul class="index-banner__features-list">
|
||||
<li class="index-banner__features">Tested software releases</li>
|
||||
<li class="index-banner__features">Infrastructure as Code Software</li>
|
||||
<li class="index-banner__features">Woodpecker CI, Librepages and GitPad integrations</li>
|
||||
<li class="index-banner__features">Payments manager included: become a service provider!</li>
|
||||
</ul>
|
||||
<button class="service-card__aciton-btn">
|
||||
<a href="/gitea-clinic" class="home__vision-action-link">Learn More</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="service-card__icon-container">
|
||||
<img
|
||||
src="{{ get_url(path='/tmp-logo.png', cachebust=true) }}"
|
||||
alt="Temporary card icon"
|
||||
class="service-card__icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="home__features">
|
||||
<div class="home-card__group">
|
||||
{{ card_macro::home_card(title="Radically Transparent", description="Hostea is radically transparent, we hold discussions in the open and publish all expenses down to the last penny") }}
|
||||
{{ card_macro::home_card(title="100% Free Software", description="All Hostea components are Free, you are welcome to download and even sell Hostea!") }}
|
||||
{{ card_macro::home_card(title="Towards Forge Federation 🚀", description="Hostea developers are also leading the charge in implementing ecosystem-wide federation, we really care about software development :)") }}
|
||||
</div>
|
||||
<div class="home-card__group">
|
||||
{{ card_macro::home_card(title="Towards Forge Federation 🚀", description="Hostea developers are also leading the charge in implementing ecosystem-wide federation, we really care about software development :)") }}
|
||||
{{ card_macro::home_card(title="Observable and Reliable", description="All Hostea software come with monitoring and backups configured for high, observable reliability") }}
|
||||
{{ card_macro::home_card(title="Fully Self-Hostable ", description="Like to get your hands dirty? We got you covered! Hostea comes with infrastructure as code and documentation to make self-hostable a first class experience") }}
|
||||
{{ card_macro::home_card(title="Horizontal Community", description="Hostea development is lead by a horizontal community minded individuals and organisations with a common goal to advance Free Software.") }}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
<div class="line-border"></div>
|
||||
<section class="service__features">
|
||||
<div class="service-card__group">
|
||||
<!--
|
||||
{{ card_macro2::home_card2(title="Gitea Clinic", description="Having issues upgrading your self-hosted Gitea? Upload it to Hostea and a doctor will help out. Once it feels better you can bring it home or decide it becomes a permanent resident.", action_link="/gitea-clinic") }}
|
||||
-->
|
||||
|
||||
|
||||
<div class="service-card__conatiner">
|
||||
<div class="service-card__text-container">
|
||||
<p class="service-card__service-name">Gitea Clinic</p>
|
||||
<h2 class="service-card__title">Debug and Recover Self-Hosted Gitea Instances</h2>
|
||||
<p class="service-card__text">Having issues upgrading your self-hosted Gitea? Upload it to Hostea and a doctor will help out. Once it feels better you can bring it home or decide it becomes a permanent resident.</p>
|
||||
<ul class="index-banner__features-list">
|
||||
<li class="index-banner__features">Consult Gitea experts</li>
|
||||
<li class="index-banner__features">Upload your sick Gitea</li>
|
||||
<li class="index-banner__features">Once it gets better bring it back home</li>
|
||||
<li class="index-banner__features">Optionally, decide it should get a permanent residence at hostea</li>
|
||||
</ul>
|
||||
<button class="service-card__aciton-btn">
|
||||
<a href="/gitea-clinic" class="home__vision-action-link">Learn More</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="service-card__icon-container">
|
||||
<img
|
||||
src="{{ get_url(path='/tmp-logo.png', cachebust=true) }}"
|
||||
alt="Temporary card icon"
|
||||
class="service-card__icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
|
||||
{{ card_macro2::home_card2(title="Gitea Hosting", description="Dedicated Gitea hosting with Woodpecker, flat monthly price, unlimited bandwidth and users. All upgrades included. Fully self-hostable. ETA July 1st, 2022.", template=true ) }}
|
||||
|
||||
|
||||
{{ card_macro2::home_card2(title="Towards Forge Federation 🚀", description="Hostea is leading the charge in implementing forge federation. It will be made available to all hosted Gitea instance as soon as it is available.") }}
|
||||
-->
|
||||
|
||||
</div>
|
||||
<div class="action-call__container">
|
||||
<div class="action-call__margin-container">
|
||||
<p class="action-call__prompt">Stuck with a broken Gitea instance? Talk to a Hostea Doctor!</p>
|
||||
<button class="action-call__button"><a href="/contact" class="action-call_link">Contact Us</a></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<section class="home__features">
|
||||
<h2 class="home__features-title">Services Offered</h2>
|
||||
<div class="home-card__group">
|
||||
{{ card_macro::home_card(title="Gitea Hosting", description="Dedicated Gitea hosting with Woodpecker, flat monthly price, unlimited bandwidth and users. All upgrades included. Fully self-hostable. ETA July 1st, 2022.") }}
|
||||
{{ card_macro::home_card(title="Gitea Clinic", description="Having issues upgrading your self-hosted Gitea? Upload it to Hostea and a doctor will help out. Once it feels better you can bring it home or decide it becomes a permanent resident.") }}
|
||||
{{ card_macro::home_card(title="Towards Forge Federation 🚀", description="Hostea is leading the charge in implementing forge federation. It will be made available to all hosted Gitea instance as soon as it is available.") }}
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
{% macro home_card2(title, description, action_link=false, template=false) %}
|
||||
<div class="service-card__conatiner">
|
||||
<div class="service-card__text-container">
|
||||
<h2 class="service-card__title">{{ title }}</h2>
|
||||
<p class="service-card__text">{{ description }}</p>
|
||||
{% if action_link %}
|
||||
<button class="service-card__aciton-btn">
|
||||
<a href="{{ action_link }}" class="home__vision-action-link">Learn More</a>
|
||||
</button>
|
||||
{% else %}
|
||||
<button disabled class="service-card__aciton-btn--inactive">Coming Soon</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="service-card__icon-container">
|
||||
<img
|
||||
src="{{ get_url(path='/tmp-logo.png', cachebust=true) }}"
|
||||
alt="Temporary card icon"
|
||||
class="service-card__icon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{% if template %}
|
||||
<!-- {% include "home/components/_features.html" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endmacro home_card2 %}
|
||||
Loading…
Reference in New Issue