Skip to content

Commit 21a7fd1

Browse files
ivke995sesar002gloriababic
authored
WEB-49 Feat:Values section redesign (#380)
* add images,fix section header etc * values card changed layout and added icon * fix margin bottom in content * WEB-48 Feat: redesign hero section (#379) * redesign hero section * fix some paddings,change picture etc * remove images we do not use * change change * remove minus margin * fix margins around text * omg,remove some margins * add idx to services * add book a call scroll * Feat/web 52 homepage testimonials redesign (#381) * feat: add pill title * feat: add testimonials to homepafe * feat: add padding * trusted by text position fixed * create Clients separate section --------- Co-authored-by: Luka <luka.sesar99@gmail.com> Co-authored-by: Gloria Babić <gloria@crocoder.dev>
1 parent 3d543a8 commit 21a7fd1

File tree

14 files changed

+101
-49
lines changed

14 files changed

+101
-49
lines changed

‎apps/website/public/line-chart-waves.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎apps/website/public/pie-chart.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎apps/website/public/target-black.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎apps/website/public/values-1-cro.png‎

148 KB
Loading

‎apps/website/public/values-img-crocodile-3.png‎

82.9 KB
Loading

‎apps/website/public/values-main-image.png‎

2.27 MB
Loading

‎apps/website/src/components/Clients.astro‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
import Section from "./Section.astro";
3+
---
4+
5+
<Section>
6+
<h4
7+
class="text-base text-start md:text-center mx-4 md:mx-7 font-bold uppercase mt-[72px]"
8+
>
9+
Trusted By:
10+
</h4>
11+
<div class="overflow-x-auto whitespace-nowrap px-4 no-scrollbar">
12+
<div class="flex gap-7 justify-center my-8 lg:my-10 min-w-max">
13+
<img src="/conductor.svg" alt="" class="grayscale opacity-50 w-[200px]" />
14+
<img
15+
src="/lynes.svg"
16+
alt=""
17+
class="grayscale opacity-50 w-[200px] md:hidden xl:block"
18+
/>
19+
<img
20+
src="/submix.svg"
21+
alt=""
22+
class="grayscale invert opacity-50 w-[200px]"
23+
/>
24+
<img src="/sevdesk.svg" alt="" class="grayscale opacity-50 w-[200px]" />
25+
<img
26+
src="/misterspex.svg"
27+
alt=""
28+
class="grayscale opacity-50 w-[200px]"
29+
/>
30+
</div>
31+
</div>
32+
33+
<div class="text-[#3C3843] md:text-center text-2xl leading-9 md:text-4xl md:leading-[54px] font-medium px-4 md:px-7 xl:px-60 py-[72px] md:pt-32 md:pb-[138px]">
34+
Our tailored software services bridge the gap between the big-picture
35+
<span class="text-[#3C384380]">
36+
strategy and day-to-day operations, turning ambitious goals into concrete,
37+
actionable steps that drive results.
38+
</span>
39+
</div>
40+
</Section>

‎apps/website/src/components/ValueCard.astro‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,23 @@ interface Props {
99
};
1010
styles?: string | string[];
1111
onDark?: boolean;
12+
icon: string;
1213
}
1314
14-
const { idx, title, content, img, styles, onDark } = Astro.props;
15+
const { title, content, img, styles, onDark, icon } = Astro.props;
1516
---
1617

1718
<section
18-
class={`col-span-6 rounded-2xl p-7 max-md:max-w-[470px] mx-auto xl:p-12 xl:pb-0 pb-0 flex flex-col gap-7 overflow-hidden lg:h-fit md:col-span-6 lg:col-span-4 ${styles} ${onDark ? "text-[#ffff]" : "text-secondary"}`}
19+
class={`col-span-6 rounded-2xl p-7 md:p-12 md:pb-0 max-md:max-w-[470px] mx-auto xl:p-12 xl:pb-0 pb-0 flex flex-col overflow-hidden lg:h-fit md:col-span-12 xl:col-span-4 ${styles} ${onDark ? "text-[#ffff]" : "text-secondary"}`}
1920
>
20-
<span class="font-medium text-[28px] leading-8">{`{${idx}}`}</span>
21-
<h3 class="font-medium text-[28px] leading-8">{title}</h3>
22-
<p set:html={content.html} class="text-base leading-7" />
23-
24-
<img class="mt-auto" src={img.path} alt={img.alt} />
21+
<div class="flex gap-7 flex-col md:flex-row xl:flex-col mb-5 xl:mb-[61px]">
22+
<img class="h-[72px] w-[72px] xl:h-[90px] xl:w-[90px]" src={icon} alt={icon}>
23+
<div>
24+
<h3 class="font-medium text-[28px] md:text-4xl leading-[30px] md:leading-10 mb-7">{title}</h3>
25+
<p set:html={content.html} class="text-base leading-7" />
26+
</div>
27+
</div>
28+
<div class="flex justify-center">
29+
<img class="mt-auto max-w-[466px] w-full" src={img.path} alt={img.alt} />
30+
</div>
2531
</section>

‎apps/website/src/components/Values.astro‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ import ValueCard from "./ValueCard.astro";
44
import SectionTitle from "./SectionTitle.astro";
55
import Section from "./Section.astro";
66
import { grid_classes } from "./_grid";
7+
import Pill from "./Pill.astro";
78
89
const styles = [
910
"bg-[#FEB534]",
10-
"bg-[#607A1A] [&_img]:max-w-[calc(100%+56px)] [&_img]:-ml-7 xl:[&_img]:max-w-[calc(100%+96px)] xl:[&_img]:-ml-12",
11+
"bg-[#607A1A]",
1112
"bg-[#F6FCFD]",
1213
];
1314
@@ -23,32 +24,32 @@ for (const value of valueCollection) {
2324
path: value.data.imgPath,
2425
alt: value.data.imgAlt,
2526
},
27+
icon: value.data.icon
2628
});
2729
}
2830
---
2931

30-
<Section idx="values-wrapper" contentClassName={grid_classes}>
31-
<div
32-
class="col-start-1 col-span-6 md:col-start-2 md:col-span-10 lg:col-span-9 text-2xl md:text-3xl !leading-relaxed pb-8"
33-
>
34-
Our tailored software services bridge the gap between the big-picture
35-
strategy and day-to-day operations, turning ambitious goals into concrete,
36-
actionable steps that drive results.
32+
<Section idx="values-wrapper" contentClassName={grid_classes} className="bg-contrast bg-[url(/values-main-image.png)] bg-no-repeat bg-top bg-[auto_320px]">
33+
<div class="col-span-6 md:col-span-12 flex flex-col gap-4 pt-[148px] md:pt-48 md:items-center pb-5 md:pb-11 xl:pb-12">
34+
<Pill>We’re 100% Focused on results</Pill>
35+
<SectionTitle className="col-span-6 md:text-center text-[44px] leading-[48px] md:text-[74px] md:leading-[81px] md:max-w-[712px] xl:max-w-[848px] text-white">
36+
<span class="text-[#FEB534]">
37+
Creating Value
38+
</span>Through The Power Of Software
39+
</SectionTitle>
3740
</div>
38-
<SectionTitle className="col-span-6 md:col-span-10 md:col-start-2 ">
39-
Creating Value Through<br /> The Power Of Software
40-
</SectionTitle>
4141
{
4242
values.map((value, idx) => {
4343
return (
44-
<ValueCard
45-
idx={idx + 1}
46-
title={value.title}
47-
content={value.content}
48-
styles={styles[idx]}
49-
onDark={idx === 1}
50-
img={value.img}
51-
/>
44+
<ValueCard
45+
idx={idx + 1}
46+
title={value.title}
47+
content={value.content}
48+
styles={styles[idx]}
49+
onDark={idx === 1}
50+
img={value.img}
51+
icon={value.icon}
52+
/>
5253
);
5354
})
5455
}

‎apps/website/src/components/hero.astro‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -62,25 +62,6 @@ import Section from "./Section.astro";
6262
</h1>
6363
</div>
6464
</div>
65-
<h4 class="text-base text-start md:text-center mx-4 md:mx-7 font-bold uppercase mt-[72px]">Trusted By:</span>
66-
<div class="overflow-x-auto whitespace-nowrap px-4 no-scrollbar">
67-
<div class="flex gap-7 justify-center my-8 lg:my-10 min-w-max">
68-
<img src="/conductor.svg" alt="" class="grayscale opacity-50 w-[200px]" />
69-
<img
70-
src="/lynes.svg"
71-
alt=""
72-
class="grayscale opacity-50 w-[200px] md:hidden xl:block"
73-
/>
74-
<img
75-
src="/submix.svg"
76-
alt=""
77-
class="grayscale invert opacity-50 w-[200px]"
78-
/>
79-
<img src="/sevdesk.svg" alt="" class="grayscale opacity-50 w-[200px]" />
80-
<img src="/misterspex.svg" alt="" class="grayscale opacity-50 w-[200px]" />
81-
</div>
82-
</div>
83-
8465
</Section>
8566

8667
<script is:inline>
@@ -92,6 +73,11 @@ import Section from "./Section.astro";
9273
}
9374

9475
document
95-
.querySelectorAll("#discover-our-solutions-action-hero, #book-a-call-action-hero")
96-
.forEach((element) => element.addEventListener("click", handleActionHeroClick));
76+
.querySelectorAll(
77+
"#discover-our-solutions-action-hero, #book-a-call-action-hero",
78+
)
79+
.forEach((element) =>
80+
element.addEventListener("click", handleActionHeroClick),
81+
);
82+
9783
</script>

0 commit comments

Comments
 (0)