https://portfolio-sh23.webflow.io/cases/contracthero

1<!DOCTYPE html><!-- Last Published: Sun Dec 10 2023 22:09:32 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="portfolio-sh23.webflow.io" data-wf-page="64afe45a2daaf57d982d6f6b" data-wf-site="64653ddbdd2b114ca9c5d299" lang="de" data-wf-collection="64afe45a2daaf57d982d6f4e" data-wf-item-slug="contracthero"><head><meta charset="utf-8"/><link href="https://assets-global.website-files.com" rel="preconnect" crossorigin="anonymous"/><title>Portfolio 2023</title><link rel="alternate" hrefLang="x-default" href="https://portfolio-sh23.webflow.io/cases/contracthero"/><link rel="alternate" hrefLang="de" href="https://portfolio-sh23.webflow.io/cases/contracthero"/><link rel="alternate" hrefLang="en" href="https://portfolio-sh23.webflow.io/en/cases/contracthero"/><meta content="width=device-width, initial-scale=1" name="viewport"/><link href="https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/css/portfolio-sh23.21445c631.min.css" rel="stylesheet" type="text/css"/>

1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>

1<link href="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/6491e04513fcd6b8e5387733_32.png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/6491e04a52ac2b535a9f35cd_256.png" rel="apple-touch-icon"/><style>
2* {
3  -webkit-font-smoothing: antialiased;
4}
5
6.menu_link {
7	pointer-events: none;  
8}
9  
10.fixed {
11  position: fixed;
12  top: 0;
13  left: 0;
14}
15  
16.active-flip-item {z-index: 2;}
17  
18</style>
19
20<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

21<script async src="https://cdn.splitbee.io/sb.js"></script>

21</head><body><div class="page-content cms-page"><div class="page-wrapper cms-page"><div class="global-styles w-embed"><style>
22
23/* START: Font size settings (customize them at https://wizardry-technique.webflow.io/)*/
24body {
25 font-size: 1.1111111111111112vw;
26}
27
28/* Select Color */
29::selection {color: #ec5c29; background: #202126;}
30
31/* Max Font Size */
32@media screen and (min-width:1440px) {
33 body {font-size: 16px;}
34}
35/* Container Max Width */
36.container {
37  max-width: 1440px;
38}
39/* Min Font Size */
40@media screen and (max-width:991px) {
41 body {font-size: 11.011111111111111px;}
42}
43/* END: Font size settings */
44
45
46.dsg-table>:last-child {
47	border-bottom: 0px;
48}
49
50/* Prevents hover states and clicks on elements */
51.non-clickable {
52	pointer-events: none;
53}
54
55/* Enables hover states and clicks on elements */
56.clickable {
57  pointer-events: auto;
58}
59
60/* Aspect ratios for image wrappers */
61.aspect-ratio-1-1 {
62	aspect-ratio:  1 / 1;
63}
64.aspect-ratio-2-1 {
65	aspect-ratio:  2 / 1;
66}
67.aspect-ratio-4-3 {
68	aspect-ratio:  4 / 3;
69}
70.aspect-ratio-16-9 {
71	aspect-ratio:  16 / 9;
72}
73.aspect-ratio-3-4 {
74	aspect-ratio:  3 / 4;
75}
76
77/* Reset for links and buttons */
78a {
79	color: inherit;
80	text-decoration: inherit;
81	font-size: inherit;
82}
83

84/* Removes top margin on first element in rich text fields*/
85.w-richtext>:first-child {
86	margin-top: 0;
87}
88
89/* Removes bottom margin on last element in rich text fields*/
90.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
91	margin-bottom: 0;
92}
93
94/*Cuts text off after 3 lines and adds "..." */
95.is-txt-cut-3lines {
96	overflow: hidden;
97	display: -webkit-box;
98  -webkit-box-orient: vertical;
99	-webkit-line-clamp: 3;
100}
101
102/*Cuts text off after 2 lines and adds "..." */
103.is-txt-cut-2lines {
104	overflow: hidden;
105	display: -webkit-box;
106  -webkit-box-orient: vertical;
107	-webkit-line-clamp: 2;
108}
109
110select {
111    appearance: none !important;
112    -webkit-appearance: none !important;
113    -moz-appearance: none !important;
114  }
115
116.project_link {
117	isolation: isolate;
118}
119
120</style></div><div class="main-wrapper"><div tr-ajaxmodal-element="cms-page-content" class="case-study_section"><div class="container is-popup"><div class="projects_content is-popup"><div class="case-top-wrap"><div class="is-url-wrap is-bg-black-50"><div class="projects_heading-wrap"><div class="ssl-icon w-embed"><svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
121<path d="M1.55458 3.3H5.44347C5.58982 3.3 5.69902 3.41506 5.69902 3.54545V

1215.45455C5.69902 5.58494 5.58982 5.7 5.44347 5.7H1.55458C1.40823 5.7 1.29902 5.58494 1.29902 5.45455V3.54545C1.29902 3.41506 1.40823 3.3 1.55458 3.3Z" stroke="#E5E5E5" stroke-width="0.6" stroke-linecap="square" stroke-linejoin="bevel"/>
122<mask id="path-2-inside-1_556_83280" fill="white">
123<path d="M2 3V2.11111C2 1.81643 2.15804 1.53381 2.43934 1.32544C2.72064 1.11706 3.10218 1 3.5 1C3.89782 1 4.27936 1.11706 4.56066 1.32544C4.84196 1.53381 5 1.81643 5 2.11111V3"/>
124</mask>
125<path d="M1.4 3V3.6H2.6V3H1.4ZM2 2.11111H1.4H2ZM4.4 3V3.6H5.6V3H4.4ZM2.6 3V2.11111H1.4V3H2.6ZM2.6 2.11111C2.6 2.0436 2.63548 1.92683 2.79648 1.80757L2.0822 0.843303C1.68059 1.1408 1.4 1.58925 1.4 2.11111L2.6 2.11111ZM2.79648 1.80757C2.96064 1.68597 3.21246 1.6 3.5 1.6V0.4C2.99189 0.4 2.48065 0.548156 2.0822 0.843303L2.79648 1.80757ZM3.5 1.6C3.78754 1.6 4.03936 1.68597 4.20352 1.80757L4.9178 0.843303C4.51935 0.548156 4.00811 0.4 3.5 0.4V1.6ZM4.20352 1.80757C4.36452 1.92683 4.4 2.0436 4.4 2.11111H5.6C5.6 1.58925 5.31941 1.1408 4.9178 0.843303L4.20352 1.80757ZM4.4 2.11111V3H5.6V2.11111H4.4Z" fill="#E5E5E5" mask="url(#path-2-inside-1_556_83280)"/>
126</svg></div><div class="projects_heading">contracthero.com</div></div></div></div><div class="visual_wrap"><img src="https://cdn.prod.website-files.com/646b443c3877cab907282c19/646e951f7eb54cdf5c59a237_contracthero-case.webp" loading="lazy" alt="" sizes="(max-width: 479px) 89vw, 100vw" srcset="https://cdn.prod.website-files.com/646b443c3877cab907282c19/646e951f7eb54cdf5c59a237_contracthero-case-p-500.webp 500w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/646e951f7eb54cdf5c59a237_contracthero-case-p-800.webp 800w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/646e951f7eb54cdf5c59a237_contracthero-case-p-1080.webp 1080w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/646e951f7eb54cdf5c59a237_contracthero-case.webp 1584w" class="projects_img is-cases is-mb"/><img src="https://cdn.prod.website-files.com/646b443c3877cab907282c19/646e951f7eb54cdf5c59a237_contracthero-case.webp" loading="lazy" alt="" sizes="100vw" srcset="https://cdn.prod.website-files.com/646b443c3877cab907282c19/646e951f7eb54cdf5c59a237_contracthero-case-p-500.webp 500w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/646e951f7eb54cdf5c59a237_contracthero-case-p-800.webp 800w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/646e951f7eb54cdf5c59a237_contracthero-case-p-1080.webp 1080w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/646e951f7eb54cdf5c59a237_contracthero-case.webp 1584w" class="projects_img is-cases w-condition-invisible"/><div class="case-video w-embed"><div style="width: 100%; height: 100%;" class="w-background-video w-background-video-atom">
127      <video playsinline loop muted autoplay="" loop="" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
128        <source src="https://assets.website-files.com/64653ddbdd2b114ca9c5d299/6491b04aab5973759ba2ed18_CH-case-video-transcode.webm" data-wf-ignore="true"/>
129      </video>
130</div></div><div class="is-pad-tb-72"><div class="container-col-8"><div class="w-layout-grid grid--6-6 is-popup"><div id="w-node-bd1b4433-2174-1fcc-09bd-a5fa5004ea0a-982d6f6b" class="popup_meta-content"><div class="contact-detail-wrap"><p class="is-txt-pop-heading">Services</p><p class="is-txt-xsmall">Webflow Development,
131Advanced Animations,
132Custom Code,
133Hubspot.</p></div><div class="contact-detail-wrap"><p class="is-txt-pop-heading">Duration</p><p class="is-txt-xsmall">3 Weeks</p></div><div class="contact-detail-wrap"><p class="is-txt-pop-heading">Credits</p><p class="is-txt-xsmall">small tribe GmbH</p></div><div class="contact-detail-wrap"><p class="is-txt-pop-heading">Live Site</p><a href="https://www.contracthero.com/" target="_blank" class="is-txt-xsmall">contracthero.com</a></div></div><div id="w-node-_460c52f5-f645-56b2-df45-9eeab61e3627-982d6f6b" class="popup-content"><div class="popup-content-wrap"><h1 class="is-case-h1">ContractHero Website</h1><p class="is-txt-small">ContractHero brings order to your contract chaos and finally makes digital contract management easy and efficie

133nt. As a freelance part of the team, I supported small tribe GmbH in developing their Figma design into a scalable and robust marketing website with full attention to detail and simple animations. The focus here was on an intuitive, responsive and highly converting mobile site.</p></div></div></div></div></div><div class="is-pad-b-72"><img loading="eager" alt="" src="https://cdn.prod.website-files.com/646b443c3877cab907282c19/648a0d9804f1e0be032a8b12_CH_Mobile%20(1).jpg" sizes="(max-width: 479px) 89vw, (max-width: 767px) 91vw, (max-width: 991px) 86vw, 66vw" srcset="https://cdn.prod.website-files.com/646b443c3877cab907282c19/648a0d9804f1e0be032a8b12_CH_Mobile%20(1)-p-500.jpg 500w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/648a0d9804f1e0be032a8b12_CH_Mobile%20(1)-p-800.jpg 800w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/648a0d9804f1e0be032a8b12_CH_Mobile%20(1)-p-1080.jpg 1080w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/648a0d9804f1e0be032a8b12_CH_Mobile%20(1)-p-1600.jpg 1600w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/648a0d9804f1e0be032a8b12_CH_Mobile%20(1).jpg 1980w" class="popup_img"/></div><div class="container-col-8"><div class="w-layout-grid grid--6-6"><div id="w-node-adda7aeb-7c61-002e-32be-fc4afbb81fb1-982d6f6b" class="popup-content-wrap"><div class="is-pad-b-16"><h2 class="is-h5">ROI Calculator</h2></div><p class="is-txt-small">Using custom code, we created an ROI calculator to show the potential return on investment (ROI) that the ContractHeros contract management solution could provide for their customers.</p></div></div></div><div class="is-pad-tb-72"><div class="w-layout-grid grid--6-6"><img loading="eager" alt="" src="https://cdn.prod.website-files.com/646b443c3877cab907282c19/6489a117dcc3977ac097e026_CH_Mobile-Calc.jpg" sizes="(max-width: 479px) 89vw, (max-width: 767px) 91vw, (max-width: 991px) 86vw, 66vw" srcset="https://cdn.prod.website-files.com/646b443c3877cab907282c19/6489a117dcc3977ac097e026_CH_Mobile-Calc-p-500.jpg 500w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/6489a117dcc3977ac097e026_CH_Mobile-Calc-p-800.jpg 800w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/6489a117dcc3977ac097e026_CH_Mobile-Calc-p-1080.jpg 1080w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/6489a117dcc3977ac097e026_CH_Mobile-Calc.jpg 1446w" class="popup_img"/><img loading="eager" alt="" src="https://cdn.prod.website-files.com/646b443c3877cab907282c19/6489a11f35534c42d1446fd7_CH_Desktop-Calc.jpg" sizes="(max-width: 479px) 89vw, (max-width: 767px) 91vw, (max-width: 991px) 86vw, 66vw" srcset="https://cdn.prod.website-files.com/646b443c3877cab907282c19/6489a11f35534c42d1446fd7_CH_Desktop-Calc-p-500.jpg 500w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/6489a11f35534c42d1446fd7_CH_Desktop-Calc-p-800.jpg 800w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/6489a11f35534c42d1446fd7_CH_Desktop-Calc-p-1080.jpg 1080w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/6489a11f35534c42d1446fd7_CH_Desktop-Calc.jpg 1446w" class="popup_img"/></div></div><div class="container-col-10"><div class="w-layout-grid grid--6-6"><div id="w-node-ec30be57-7416-0ee9-3b69-2a1345ad2b69-982d6f6b" class="popup-content-wrap"><div class="is-pad-b-16"><h2 class="is-h5">Modular CMS-based components system</h2></div><p class="is-txt-small">We have implemented a CMS based design and component system to create landing pages for different marketing, sub pages and sales pages. Everything can be managed by the marketing team itself.</p></div></div></div><div class="is-pad-t-72"><img loading="eager" alt="" src="https://cdn.prod.website-files.com/646b443c3877cab907282c19/648a0d9d08477f3e6a6184be_CH_Components%20(1).jpg" sizes="(max-width: 479px) 89vw, (max-width: 767px) 91vw, (max-width: 991px) 86vw, 66vw" srcset="https://cdn.prod.website-files.com/646b443c3877cab907282c19/648a0d9d08477f3e6a6184be_CH_Components%20(1)-p-500.jpg 500w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/648a0d9d08477f3e6a6184be_CH_Components%20(1)-p-800.jpg 800w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/648a0d9d08477f3e6a6184be_CH_Components%20(1)-p-1080.jpg 1080w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/648a0d9d08477f3e6a6184be_CH_Components%20(1)-p-1600.jpg 1600w, https://cdn.prod.website-files.com/646b443c3877cab907282c19/648a0d9d08477f3e6a6184be_CH_Components%20(1).jpg 1980w" class="popup_img"/></div><div class="is-pad-tb-72"><div class="case-testimonial-wrap"><div class="case-testimonial-quote-wrap"><div class="case-testimonial-quote"><div class="is-txt-cases-testimonial">

133Steffen combines excellent animations, pixel-perfect implementation and great performance at the highest level. The communication is super fast &amp; effective. For anyone looking for a webflow expert, we can’t recommend Steffen enough. That’s why he’s our go to partner at smalltribe for every webflow project!</div></div><img src="https://cdn.prod.website-files.com/64653ddbdd2b114ca9c5d299/6494c5b15850a23332d0a367_testimonial-bubble.svg" loading="lazy" alt=""/></div><div class="case-testimonial-name-wrap"><img loading="lazy" alt="" src="https://cdn.prod.website-files.com/646b443c3877cab907282c19/6494c4dfbb22fe7d654dea6e_js.jpg" class="case-testimonial-img"/><div class="case-testimonial-name"><p class="is-txt-small is-txt-black-100">Justin Schüler</p><p class="is-txt-xsmall">Founder @small tribe GmbH</p></div></div></div></div></div></div></div><a href="mailto:[email protected]" class="case-contact-wrap w-inline-block"><div class="is-txt-case-contact non-clickable">Let&#x27;s work together.</div><div class="is-txt-case-contact-bg">Contact</div></a></div></div></div></div>

133<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=64653ddbdd2b114ca9c5d299" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

133<script src="https://assets-global.website-files.com/64653ddbdd2b114ca9c5d299/js/portfolio-sh23.b3138bf18.js" type="text/javascript"></script>

133<script>
134let duration = 400;
135let menuShape = $(".menu_shape");
136let menuShapeBG = $(".menu_shape-bg");
137let menuLink = $(".menu_link");
138let currentLink = $(".menu_link.w--current");
139
140// On page load
141moveShape(currentLink);
142$(".menu_link-bg").css("opacity", "0");
143menuShape.css("opacity", "1");
144menuLink.css("pointer-events", "auto");
145
146// On click
147menuLink.on("click", function (e) {
148  // Page url
149  e.preventDefault();
150  setTimeout(() => {
151    window.location = $(this).attr("href");
152  }, duration);
153  // menuShapeBG Stretch
154  if ($(this).index() > currentLink.index()) {
155    menuShape.css("justify-content", "flex-end");
156  }
157  if (currentLink.index() !== $(this).index()) {
158    menuShapeBG.css("transition", `width ${duration / 2}ms`);
159    menuShapeBG.css("width", "140%");
160    setTimeout(() => {
161      menuShapeBG.css("width", "100%");
162    }, duration / 2);
163  }
164  // menuShape move
165  menuShape.css("transition", `all ${duration}ms`);
166  moveShape($(this));
167});
168
169// Snap
170function moveShape(target) {
171  let linkWidth = target.innerWidth();
172  let linkOffset = target.offset().left;
173  let menuOffset = $(".menu").offset().left;
174  let leftPosition = linkOffset - menuOffset;
175  menuShape.css("left", leftPosition);
176  menuShape.css("width", linkWidth);
177}
178
179// Resize
180window.addEventListener("resize", function () {
181  moveShape(currentLink);
182});
183
184// Back button safari
185window.onpageshow = function (event) {
186  if (event.persisted) {
187    window.location.reload();
188  }
189};
190  
191</script>

191
192

193<script>
194  $('.menu_link').click(function (e) {
195    e.preventDefault(); // prevent default anchor behavior
196    var goTo = this.getAttribute("href"); // store anchor href
197    setTimeout(function(){
198      window.location = goTo;
199    },600); // the duration of the "load out" animation in milliseconds
200  });
201</script>

201
202
203
204</body></html>