Files
satware.ai/docs/stylesheets/modules/home.scss
T
tfw d814f14897 Add testimonials section with interactive functionality
Introduced a testimonials section to the homepage, including JavaScript for interactive switching and automatic cycling, as well as responsive styles in SCSS. Users can now view dynamic testimonials with associated images and text.
2025-04-25 11:41:04 +02:00

140 lines
2.3 KiB
SCSS

.satag--home-landing{
@mixin ohne-balken{
h1,h2,h3,h4,h5,h6{
&:after{
display: none;
}
}
}
.satag--home-hero{
.entry-text{
font-size: 1.2rem;
line-height: 2rem;
padding-bottom: 1.6rem;
padding-top: 1.6rem;
}
//@include ohne-balken;
h1{
font-size: 5rem;
margin-bottom: 1.75rem;
text-align: left;
line-height: 114%;
&:after{
height: 12px;
width: 85px;
margin-top: 1.3rem;
margin-bottom: -0.2rem;
}
}
.hero-buttons{
text-align: left;
padding-bottom: 3rem;
}
//text-align: center;
.screenshot-container{
padding: 2rem 0;
text-align: center;
}
img{
border: 1px solid var(--md-primary-fg-color--light);
width: 100%;
}
}
.satag--home-companies{
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding: 2rem 0 4rem 0;
background-color: var(--md-primary-fg-color);
h2{
padding-bottom: 1rem;
font-size: 2.5rem;
line-height: 3rem;
max-width: 61rem;
text-align: left;
margin: 0 auto;
}
//@include ohne-balken;
text-align: center;
.satag--home-companies-logo-container{
display: flex;
max-width: 61rem;
margin: 0 auto;
.satag--home-companies-logo{
flex: auto;
img{
width: 80%;
float:left;
}
}
}
}
.satag--home-counters{
width: 100%;
padding: 2rem 0 4rem 0;
h2{
padding-bottom: 1rem;
}
@include ohne-balken;
text-align: center;
.satag--home-counters-container{
display: flex;
.satag--home-counter{
flex: auto;
display: block;
.satag--home-counter-icon{
display: block;
font-size: 2rem;
color: var(--md-primary-fg-color--light);
}
.satag--home-counter-number{
display: block;
font-weight: 700;
font-size: 3rem;
}
}
}
}
}
body{
&.home{
background-image: url(../assets/images/home/bg.jpg);
background-size: 40%;
background-repeat: no-repeat;
background-position: top;
.md-header, .md-tabs {
background-color: transparent;
box-shadow: none;
}
}
}