8e65638401
Session: Total cost: $2.23 (costs may be inaccurate due to usage of unknown models) Total duration (API): 29m 38s Total duration (wall): 34m 2s Total code changes: 2094 lines added, 2 lines removed Usage by model: qwen/qwen3.6-35b-a3b: 78.3k input, 51.5k output, 3.9m cache read, 0 cache write ($2.17) claude-haiku-4-5: 9.1k input, 11.8k output, 8.3k cache read, 0 cache write ($0.0690) Runtime: llamacpp Model: Qwen 3.6 35B A3B Q4 K M Coding Agent: ClaudeCode
1313 lines
60 KiB
PHP
1313 lines
60 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="author" content="TimeLog">
|
|
<title>TimeLog - Time Tracking Software</title>
|
|
<meta name="description" content="Time tracking software used by thousands. A simple time tracker and timesheet app that lets you track work hours across projects.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="{{ asset('assets/css/clockify.css') }}">
|
|
<style>
|
|
/* === TIMELOG CUSTOM STYLES (Clockify-inspired) === */
|
|
:root {
|
|
--primary: #03a9f4;
|
|
--primary-dark: #0287c5;
|
|
--primary-darker: #0277bd;
|
|
--text-dark: #333;
|
|
--text-medium: #546e7a;
|
|
--text-light: #607d8b;
|
|
--text-muted: #9ba8b0;
|
|
--bg-light: #f2f6f8;
|
|
--bg-white: #fff;
|
|
--border-color: #e9e9ed;
|
|
--blue-gray-5: #37474f;
|
|
--blue-gray-6: #607d8b;
|
|
--blue-gray-7: #546e7a;
|
|
--blue-gray-8: #455a64;
|
|
--blue-gray-9: #37474f;
|
|
--blue-gray-10: #263238;
|
|
}
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
color: var(--text-dark);
|
|
line-height: 1.5;
|
|
}
|
|
h1, h2, h3, h4, h5 {
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
}
|
|
/* === NAVBAR === */
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
background: #fff;
|
|
border-bottom: 1px solid var(--border-color);
|
|
height: 56px;
|
|
}
|
|
.navbar .container-nav {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
height: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.navbar__logo a {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.navbar__menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 28px;
|
|
}
|
|
.navbar__menu a {
|
|
color: var(--text-medium);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: color 0.15s;
|
|
}
|
|
.navbar__menu a:hover {
|
|
color: var(--primary);
|
|
}
|
|
.navbar__buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.btn-login {
|
|
color: var(--text-medium) !important;
|
|
text-decoration: none !important;
|
|
font-size: 14px !important;
|
|
font-weight: 500 !important;
|
|
padding: 8px 16px !important;
|
|
}
|
|
.btn-login:hover {
|
|
color: var(--primary) !important;
|
|
}
|
|
.btn-signup {
|
|
background: var(--primary) !important;
|
|
color: #fff !important;
|
|
text-decoration: none !important;
|
|
font-size: 14px !important;
|
|
font-weight: 600 !important;
|
|
padding: 10px 20px !important;
|
|
border-radius: 8px !important;
|
|
transition: background-color 0.2s !important;
|
|
}
|
|
.btn-signup:hover {
|
|
background: var(--primary-dark) !important;
|
|
}
|
|
/* === HERO === */
|
|
.hero {
|
|
padding-top: 100px;
|
|
padding-bottom: 60px;
|
|
background: var(--bg-light);
|
|
}
|
|
.hero .sitewidth {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 40px;
|
|
}
|
|
.hero__content {
|
|
flex: 1;
|
|
max-width: 560px;
|
|
}
|
|
.hero__content__header {
|
|
font-size: 48px;
|
|
font-weight: 800;
|
|
line-height: 1.15;
|
|
color: var(--text-dark);
|
|
margin-bottom: 16px;
|
|
}
|
|
.hero__content__text_about {
|
|
font-size: 18px;
|
|
color: var(--text-medium);
|
|
line-height: 1.6;
|
|
margin-bottom: 24px;
|
|
}
|
|
.hero__stars {
|
|
margin-bottom: 16px;
|
|
}
|
|
.hero__stars a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
text-decoration: none;
|
|
color: var(--text-medium);
|
|
font-size: 14px;
|
|
}
|
|
.hero__stars img {
|
|
height: 20px;
|
|
}
|
|
.hero-sign-up-link {
|
|
display: block;
|
|
margin: 0 auto 12px;
|
|
}
|
|
.hero__button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
padding: 18px 40px;
|
|
border-radius: 8px;
|
|
border: none;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: background-color 0.2s;
|
|
box-shadow: 0 2px 8px rgba(3, 169, 244, 0.3);
|
|
}
|
|
.hero__button:hover {
|
|
background: var(--primary-dark);
|
|
}
|
|
.hero__button .btn-arrow-box {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-left: 8px;
|
|
}
|
|
.hero__text--signed-up {
|
|
font-size: 14px;
|
|
color: var(--text-light);
|
|
margin-top: 12px;
|
|
}
|
|
.hero__text--signed-up a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
}
|
|
.hero__text--signed-up a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.hero__image_and_button {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
.hero__img {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 20px rgba(32, 33, 36, 0.15);
|
|
}
|
|
/* === PRODUCT FEATURES TABS === */
|
|
.product-features-tabs-box {
|
|
padding: 40px 0;
|
|
background: var(--bg-white);
|
|
}
|
|
.product-features-tabs-box .sitewidth {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.product-features-tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.product-features-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 18px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
text-decoration: none;
|
|
color: var(--text-medium);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
.product-features-tab:hover {
|
|
background: var(--bg-light);
|
|
}
|
|
.product-features-tab.active {
|
|
background: var(--bg-light);
|
|
color: var(--primary);
|
|
}
|
|
.product-features-tab img {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.product-features-tab svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
/* === HERO VIDEO PREVIEW === */
|
|
.hero-video-container {
|
|
padding: 60px 0;
|
|
background: var(--bg-light);
|
|
}
|
|
.hero-video-container .sitewidth {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.hero-video-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
.hero-video-card {
|
|
background: var(--bg-white);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
color: var(--text-dark);
|
|
transition: box-shadow 0.2s;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.hero-video-card:hover {
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
|
}
|
|
.hero-video-card img {
|
|
width: 100%;
|
|
height: 160px;
|
|
object-fit: cover;
|
|
}
|
|
.hero-video-card .card-body {
|
|
padding: 16px;
|
|
}
|
|
.hero-video-card .card-body h4 {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
.hero-video-card .card-body p {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
/* === TRUSTED BY LOGOS === */
|
|
.trusted-by {
|
|
padding: 60px 0;
|
|
background: var(--bg-white);
|
|
text-align: center;
|
|
}
|
|
.trusted-by h2 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
margin-bottom: 40px;
|
|
}
|
|
.trusted-logos {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 32px;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
}
|
|
.trusted-logos img {
|
|
height: 32px;
|
|
opacity: 0.6;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.trusted-logos img:hover {
|
|
opacity: 1;
|
|
}
|
|
/* === FEATURES SECTION === */
|
|
.features-section {
|
|
padding: 80px 0;
|
|
background: var(--bg-light);
|
|
}
|
|
.features-section .sitewidth {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.features-section h2 {
|
|
font-size: 36px;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
margin-bottom: 16px;
|
|
color: var(--text-dark);
|
|
}
|
|
.features-section .section-subtitle {
|
|
text-align: center;
|
|
color: var(--text-medium);
|
|
font-size: 18px;
|
|
margin-bottom: 48px;
|
|
}
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
.feature-card {
|
|
background: var(--bg-white);
|
|
border-radius: 12px;
|
|
padding: 28px;
|
|
border: 1px solid var(--border-color);
|
|
transition: box-shadow 0.2s;
|
|
}
|
|
.feature-card:hover {
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
|
|
}
|
|
.feature-card img {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.feature-card h3 {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
color: var(--text-dark);
|
|
}
|
|
.feature-card p {
|
|
font-size: 14px;
|
|
color: var(--text-medium);
|
|
line-height: 1.6;
|
|
}
|
|
.feature-card a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-top: 12px;
|
|
}
|
|
.feature-card a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
/* === USE CASES === */
|
|
.use-cases {
|
|
padding: 80px 0;
|
|
background: var(--bg-white);
|
|
}
|
|
.use-cases .sitewidth {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.use-cases h2 {
|
|
font-size: 36px;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
margin-bottom: 48px;
|
|
}
|
|
.use-cases-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
.use-case-card {
|
|
text-decoration: none;
|
|
color: var(--text-dark);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-color);
|
|
transition: box-shadow 0.2s;
|
|
}
|
|
.use-case-card:hover {
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
|
}
|
|
.use-case-card img {
|
|
width: 100%;
|
|
height: 180px;
|
|
object-fit: cover;
|
|
}
|
|
.use-case-card .card-body {
|
|
padding: 20px;
|
|
}
|
|
.use-case-card .card-body h3 {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
.use-case-card .card-body p {
|
|
font-size: 14px;
|
|
color: var(--text-medium);
|
|
margin-bottom: 12px;
|
|
}
|
|
.use-case-card .card-body .learn-more {
|
|
color: var(--primary);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.use-case-card .card-body .learn-more:hover {
|
|
text-decoration: underline;
|
|
}
|
|
/* === TESTIMONIALS === */
|
|
.testimonials {
|
|
padding: 80px 0;
|
|
background: var(--bg-light);
|
|
}
|
|
.testimonials .sitewidth {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.testimonials h2 {
|
|
font-size: 36px;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
margin-bottom: 48px;
|
|
}
|
|
.testimonials-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
.testimonial-card {
|
|
background: var(--bg-white);
|
|
border-radius: 12px;
|
|
padding: 28px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.testimonial-card .stars {
|
|
color: #ffc107;
|
|
font-size: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.testimonial-card blockquote {
|
|
font-size: 15px;
|
|
color: var(--text-dark);
|
|
line-height: 1.6;
|
|
margin-bottom: 16px;
|
|
font-style: italic;
|
|
}
|
|
.testimonial-card .author {
|
|
font-size: 13px;
|
|
color: var(--text-medium);
|
|
font-weight: 600;
|
|
}
|
|
/* === APP DOWNLOADS === */
|
|
.app-downloads {
|
|
padding: 80px 0;
|
|
background: var(--bg-white);
|
|
text-align: center;
|
|
}
|
|
.app-downloads .sitewidth {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.app-downloads h2 {
|
|
font-size: 36px;
|
|
font-weight: 800;
|
|
margin-bottom: 12px;
|
|
}
|
|
.app-downloads .section-subtitle {
|
|
font-size: 18px;
|
|
color: var(--text-medium);
|
|
margin-bottom: 48px;
|
|
}
|
|
.app-platforms {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 32px;
|
|
margin-bottom: 48px;
|
|
}
|
|
.app-platform {
|
|
text-align: center;
|
|
}
|
|
.app-platform img {
|
|
height: 48px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.app-platform p {
|
|
font-size: 13px;
|
|
color: var(--text-medium);
|
|
font-weight: 500;
|
|
}
|
|
/* === SUPPORT STATS === */
|
|
.support-stats {
|
|
padding: 60px 0;
|
|
background: var(--bg-light);
|
|
}
|
|
.support-stats .sitewidth {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.support-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 24px;
|
|
text-align: center;
|
|
}
|
|
.support-stat img {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 0 auto 12px;
|
|
}
|
|
.support-stat h4 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
}
|
|
/* === FINAL CTA === */
|
|
.final-cta {
|
|
padding: 100px 0;
|
|
background: var(--bg-white);
|
|
text-align: center;
|
|
}
|
|
.final-cta .sitewidth {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.final-cta h2 {
|
|
font-size: 40px;
|
|
font-weight: 800;
|
|
margin-bottom: 24px;
|
|
}
|
|
.final-cta .badges {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
margin-bottom: 32px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.final-cta .badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 14px;
|
|
color: var(--text-medium);
|
|
}
|
|
.final-cta .badge svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.final-cta .btn-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
padding: 20px 48px;
|
|
border-radius: 8px;
|
|
border: none;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: background-color 0.2s;
|
|
box-shadow: 0 4px 12px rgba(3, 169, 244, 0.3);
|
|
}
|
|
.final-cta .btn-cta:hover {
|
|
background: var(--primary-dark);
|
|
}
|
|
/* === FOOTER === */
|
|
.footer {
|
|
background: #fff;
|
|
border-top: 1px solid var(--border-color);
|
|
padding: 60px 0 30px;
|
|
}
|
|
.footer-inner {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.footer .row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0 -12px;
|
|
}
|
|
.footer .col-12,
|
|
.footer .col-sm-3,
|
|
.footer .col-sm-4,
|
|
.footer .col-sm-6,
|
|
.footer .col-lg-2,
|
|
.footer .col-lg-3,
|
|
.footer .col-lg-6 {
|
|
padding: 0 12px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.footer .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
|
|
.footer .col-lg-2 { flex: 0 0 16.666%; max-width: 16.666%; }
|
|
.footer .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
|
|
.footer .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
|
|
.footer .col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; }
|
|
.footer .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
|
|
.footer .col-12 { flex: 0 0 100%; max-width: 100%; }
|
|
.footer .col-6 { flex: 0 0 50%; max-width: 50%; }
|
|
.footer .menu-group { margin-bottom: 16px; }
|
|
.footer .menu-group h6 {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--text-dark);
|
|
margin-bottom: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.footer .menu-group p {
|
|
font-size: 14px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.footer .menu-group a {
|
|
color: var(--text-medium);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
transition: color 0.15s;
|
|
}
|
|
.footer .menu-group a:hover {
|
|
color: var(--primary);
|
|
}
|
|
.footer .footer-logo {
|
|
height: 24px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.footer .footer-button {
|
|
background: none;
|
|
border: none;
|
|
color: var(--primary);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.footer .footer-button:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.footer .link-primary {
|
|
color: var(--primary) !important;
|
|
font-weight: 500;
|
|
}
|
|
.footer .social {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
.footer .social a svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.footer .copyright {
|
|
border-top: 1px solid var(--border-color);
|
|
padding-top: 24px;
|
|
margin-top: 24px;
|
|
text-align: center;
|
|
}
|
|
.footer .copyright p {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
.footer .copyright-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
}
|
|
.footer .copyright-links a {
|
|
color: var(--text-medium);
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
}
|
|
.footer .copyright-links a:hover {
|
|
color: var(--primary);
|
|
}
|
|
.footer .product {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
text-decoration: none;
|
|
margin-bottom: 12px;
|
|
}
|
|
.footer .product img {
|
|
height: 20px;
|
|
}
|
|
.footer .product p {
|
|
font-size: 13px;
|
|
color: var(--text-medium);
|
|
margin: 0;
|
|
}
|
|
.footer .footer-certificates {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
.footer .footer-certificates a img {
|
|
height: 28px;
|
|
}
|
|
/* === RESPONSIVE === */
|
|
@media (max-width: 1024px) {
|
|
.hero .sitewidth { flex-direction: column; }
|
|
.hero__content { max-width: 100%; text-align: center; }
|
|
.hero-sign-up-link { display: flex; justify-content: center; }
|
|
.features-grid,
|
|
.use-cases-grid,
|
|
.testimonials-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.support-stats-grid { grid-template-columns: repeat(3, 1fr); }
|
|
.footer .col-lg-2, .footer .col-lg-3 { flex: 0 0 50%; }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.hero__content__header { font-size: 36px; }
|
|
.features-grid,
|
|
.use-cases-grid,
|
|
.testimonials-grid { grid-template-columns: 1fr; }
|
|
.support-stats-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.footer .col-lg-2, .footer .col-lg-3 { flex: 0 0 100%; }
|
|
.navbar__menu { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- === NAVBAR === -->
|
|
<nav class="navbar">
|
|
<div class="container-nav">
|
|
<div class="navbar__logo">
|
|
<a href="{{ url('/') }}">
|
|
<svg width="158" height="40" viewBox="0 0 158 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M31.3333 0H8.66667C3.8802 0 0 3.8802 0 8.66667V31.3333C0 36.1198 3.8802 40 8.66667 40H31.3333C36.1198 40 40 36.1198 40 31.3333V8.66667C40 3.8802 36.1198 0 31.3333 0Z" fill="#03A9F4"/>
|
|
<path d="M25.6947 11.3924C26.3928 10.6932 26.2425 9.51811 25.3206 9.16425C24.0343 8.67046 22.6376 8.3999 21.1779 8.3999C14.7823 8.3999 9.59766 13.5934 9.59766 19.9999C9.59766 26.4064 14.7823 31.5999 21.1779 31.5999C22.6286 31.5999 24.017 31.3327 25.2968 30.8447C26.2211 30.4922 26.3728 29.3149 25.6735 28.6144C25.2203 28.1605 24.5345 28.0545 23.9264 28.257C23.0645 28.544 22.1427 28.6995 21.1846 28.6995C16.3879 28.6995 12.4994 24.8043 12.4994 19.9995C12.4994 15.1946 16.3879 11.2995 21.1846 11.2995C22.1496 11.2995 23.0779 11.4571 23.9451 11.7481C24.5537 11.9523 25.2409 11.847 25.6947 11.3924Z" fill="white"/>
|
|
<path d="M22.9294 20.1332C22.9294 20.9432 22.2728 21.5998 21.4628 21.5998C20.6527 21.5998 19.9961 20.9432 19.9961 20.1332C19.9961 19.3232 20.6527 18.6665 21.4628 18.6665C22.2728 18.6665 22.9294 19.3232 22.9294 20.1332Z" fill="white"/>
|
|
<path d="M23.7261 17.8301C23.2007 17.308 23.2007 16.4616 23.7261 15.9395L28.1021 11.5913C28.6274 11.0692 29.4793 11.0692 30.0047 11.5913C30.53 12.1133 30.53 12.9597 30.0047 13.4818L25.6287 17.8301C25.1033 18.3521 24.2515 18.3521 23.7261 17.8301Z" fill="white"/>
|
|
<path d="M23.7261 22.1693C23.2007 22.6914 23.2007 23.5378 23.7261 24.0599L28.1021 28.4082C28.6274 28.9302 29.4793 28.9302 30.0047 28.4082C30.53 27.8861 30.53 27.0397 30.0047 26.5176L25.6287 22.1693C25.1033 21.6473 24.2515 21.6473 23.7261 22.1693Z" fill="white"/>
|
|
<path d="M47.332 17.4437C47.332 13.072 50.8117 9.62223 55.0943 9.62223C58.0089 9.62223 60.5071 11.2281 61.8157 13.6965L59.1688 15.1537C58.3658 13.637 56.849 12.6854 55.0646 12.6854C52.5069 12.6854 50.544 14.7969 50.544 17.4139C50.544 20.0607 52.5069 22.0532 55.0646 22.0532C56.7895 22.0532 58.2171 21.28 59.0795 19.8525L61.7859 21.28C60.4774 23.6889 57.9791 25.1461 55.0943 25.1461C50.8117 25.1461 47.332 21.8153 47.332 17.4437Z" fill="black"/>
|
|
<path d="M64.546 3.34724H68.1149V24.819H64.546V3.34724Z" fill="black"/>
|
|
<path d="M70.851 17.4437C70.851 13.072 74.3604 9.62223 78.643 9.62223C82.9554 9.62223 86.4648 13.072 86.4648 17.4437C86.4648 21.8153 82.9554 25.1164 78.643 25.1164C74.3604 25.1164 70.851 21.8153 70.851 17.4437ZM74.0927 17.4139C74.0927 20.031 76.0853 22.0235 78.643 22.0235C81.2007 22.0235 83.2231 20.031 83.2231 17.4139C83.2231 14.8266 81.2007 12.6854 78.643 12.6854C76.0853 12.6854 74.0927 14.8266 74.0927 17.4139Z" fill="black"/>
|
|
<path d="M88.3415 17.4437C88.3415 13.072 91.8211 9.62223 96.1038 9.62223C99.0183 9.62223 101.517 11.2281 102.825 13.6965L100.178 15.1537C99.3752 13.637 97.8584 12.6854 96.074 12.6854C93.5163 12.6854 91.5534 14.7969 91.5534 17.4139C91.5534 20.0607 93.5163 22.0532 96.074 22.0532C97.799 22.0532 99.2265 21.28 100.089 19.8525L102.795 21.28C101.487 23.6889 98.9886 25.1461 96.1038 25.1461C91.8211 25.1461 88.3415 21.8153 88.3415 17.4437Z" fill="black"/>
|
|
<path d="M119.714 9.76126L114.061 15.7783L120.069 24.819H115.965L111.593 18.0087L108.767 20.9529V24.819H105.199V9.62223H108.767V17.0273L115.564 9.76126H119.714Z" fill="black"/>
|
|
<path d="M124.279 7.6297C123.029 7.6297 122.018 6.58882 122.018 5.36951C122.018 4.12046 123.029 3.10933 124.279 3.10933C125.528 3.10933 126.539 4.12046 126.539 5.36951C126.539 6.58882 125.528 7.6297 124.279 7.6297ZM122.494 24.819V9.94936H126.063V24.819H122.494Z" fill="black"/>
|
|
<path d="M137.084 3.07959C138.333 3.07959 139.196 3.28776 139.82 3.67437V6.46986C139.374 6.29143 138.452 6.02378 137.738 6.02378C136.103 6.02378 135.151 6.797 135.151 8.3137V10.0981H139.909V12.8341H135.27V24.819H131.701V12.8341H128.995V10.0981H131.701V7.95683C131.701 4.80447 133.783 3.07959 137.084 3.07959Z" fill="black"/>
|
|
<path d="M150.79 26.2167C149.422 29.9341 147.786 31.2129 144.901 31.2129C143.295 31.2129 142.165 30.8561 141.273 30.0234L142.225 27.4063C142.879 28.2093 143.712 28.4174 144.693 28.4174C145.794 28.4174 146.626 28.0308 147.221 26.4249L147.816 24.9379L146.21 21.1908L141.63 9.94936H145.586L148.679 18.663L149.511 21.3098L150.463 18.4548L153.407 9.94936H157.065L150.79 26.2167Z" fill="black"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="navbar__menu">
|
|
<a href="#features">Features</a>
|
|
<a href="#use-cases">Use Cases</a>
|
|
<a href="#pricing">Pricing</a>
|
|
<a href="#resources">Resources</a>
|
|
</div>
|
|
<div class="navbar__buttons">
|
|
<a href="{{ route('login') }}" class="btn-login">Log in</a>
|
|
<a href="{{ route('register') }}" class="btn-signup">Sign up free</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- === HERO === -->
|
|
<section class="hero">
|
|
<div class="sitewidth">
|
|
<div class="hero__content">
|
|
<h1 class="hero__content__header">The most popular <span style="display:block;">time tracker for teams</span></h1>
|
|
<p class="hero__content__text_about">Time tracking software used by millions. TimeLog is a time tracker and timesheet app that lets you track work hours across projects.</p>
|
|
<div class="hero__stars">
|
|
<a href="#">
|
|
<img src="{{ asset('assets/images/stars-small.svg') }}" alt="4.8 average rating"/>
|
|
<span>4.8 (9,000+ reviews)</span>
|
|
</a>
|
|
</div>
|
|
<a class="hero-sign-up-link" href="{{ route('register') }}">
|
|
<button class="hero__button">
|
|
Start tracking time - it's free!
|
|
<span class="btn-arrow-box">
|
|
<svg class="btn-arrow-box__arrow" xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10" fill="none">
|
|
<path d="M23 9L27 5L23 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M19 5H27" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</a>
|
|
<a class="customer-link" href="#"><p class="hero__text--signed-up">Trusted by <strong>10,000+</strong> companies worldwide</p></a>
|
|
</div>
|
|
<div class="hero__image_and_button">
|
|
<img class="hero__img" src="{{ asset('assets/images/schema/clockify-desktop-app-screenshot.webp') }}" alt="TimeLog dashboard screenshot">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- === PRODUCT FEATURES TABS === -->
|
|
<section class="product-features-tabs-box">
|
|
<div class="sitewidth">
|
|
<ul class="product-features-tabs all-features-tabs">
|
|
<a href="{{ route('features', 'timer') }}" class="product-features-tab active">
|
|
<svg class="product-features-tabs-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#607D8B" stroke-width="2"/><polyline points="12,6 12,12 16,14" stroke="#607D8B" stroke-width="2" stroke-linecap="round"/></svg>
|
|
<span class="product-features-tab__title">Timer</span>
|
|
</a>
|
|
<a href="{{ route('features', 'timesheet') }}" class="product-features-tab">
|
|
<svg class="product-features-tabs-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="18" rx="2" stroke="#607D8B" stroke-width="2"/><line x1="3" y1="10" x2="21" y2="10" stroke="#607D8B" stroke-width="2"/></svg>
|
|
<span class="product-features-tab__title">Timesheet</span>
|
|
</a>
|
|
<a href="{{ route('features', 'calendar') }}" class="product-features-tab">
|
|
<svg class="product-features-tabs-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="18" rx="2" stroke="#607D8B" stroke-width="2"/><line x1="3" y1="10" x2="21" y2="10" stroke="#607D8B" stroke-width="2"/></svg>
|
|
<span class="product-features-tab__title">Calendar</span>
|
|
</a>
|
|
<a href="{{ route('features', 'projects') }}" class="product-features-tab">
|
|
<svg class="product-features-tabs-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="7" height="7" rx="1" stroke="#607D8B" stroke-width="2"/><rect x="14" y="3" width="7" height="7" rx="1" stroke="#607D8B" stroke-width="2"/><rect x="3" y="14" width="7" height="7" rx="1" stroke="#607D8B" stroke-width="2"/><rect x="14" y="14" width="7" height="7" rx="1" stroke="#607D8B" stroke-width="2"/></svg>
|
|
<span class="product-features-tab__title">Projects</span>
|
|
</a>
|
|
<a href="{{ route('features', 'reports') }}" class="product-features-tab">
|
|
<svg class="product-features-tabs-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M18 20V10" stroke="#607D8B" stroke-width="2" stroke-linecap="round"/><path d="M6 20V14" stroke="#607D8B" stroke-width="2" stroke-linecap="round"/><path d="M12 20V8" stroke="#607D8B" stroke-width="2" stroke-linecap="round"/></svg>
|
|
<span class="product-features-tab__title">Reports</span>
|
|
</a>
|
|
<a href="{{ route('features', 'location') }}" class="product-features-tab">
|
|
<svg class="product-features-tabs-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" stroke="#607D8B" stroke-width="2"/><circle cx="12" cy="10" r="3" stroke="#607D8B" stroke-width="2"/></svg>
|
|
<span class="product-features-tab__title">Location</span>
|
|
</a>
|
|
<a href="{{ route('features', 'activity') }}" class="product-features-tab">
|
|
<svg class="product-features-tabs-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"><polyline points="22,12 18,12 15,21 9,3 6,12 2,12" stroke="#607D8B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span class="product-features-tab__title">Activity</span>
|
|
</a>
|
|
<a href="{{ route('features', 'scheduling') }}" class="product-features-tab">
|
|
<svg class="product-features-tabs-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="18" rx="2" stroke="#607D8B" stroke-width="2"/><circle cx="12" cy="12" r="4" stroke="#607D8B" stroke-width="2"/></svg>
|
|
<span class="product-features-tab__title">Scheduling</span>
|
|
</a>
|
|
<a href="{{ route('features', 'expenses') }}" class="product-features-tab">
|
|
<svg class="product-features-tabs-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" stroke="#607D8B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span class="product-features-tab__title">Expenses</span>
|
|
</a>
|
|
<a href="{{ route('features', 'approval') }}" class="product-features-tab">
|
|
<svg class="product-features-tabs-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M22 11.08V12a10 10 0 11-5.93-9.14" stroke="#607D8B" stroke-width="2" stroke-linecap="round"/><polyline points="22,4 12,14.5 2,8" stroke="#607D8B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span class="product-features-tab__title">Approval</span>
|
|
</a>
|
|
<a href="{{ route('features', 'rates') }}" class="product-features-tab">
|
|
<svg class="product-features-tabs-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#607D8B" stroke-width="2"/><path d="M12 6v6l4 2" stroke="#607D8B" stroke-width="2" stroke-linecap="round"/></svg>
|
|
<span class="product-features-tab__title">Rates</span>
|
|
</a>
|
|
<a href="{{ route('features', 'team') }}" class="product-features-tab">
|
|
<svg class="product-features-tabs-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" stroke="#607D8B" stroke-width="2" stroke-linecap="round"/><circle cx="9" cy="7" r="4" stroke="#607D8B" stroke-width="2"/><path d="M23 21v-2a4 4 0 00-3-3.87" stroke="#607D8B" stroke-width="2" stroke-linecap="round"/><path d="M16 3.13a4 4 0 010 7.75" stroke="#607D8B" stroke-width="2" stroke-linecap="round"/></svg>
|
|
<span class="product-features-tab__title">Team</span>
|
|
</a>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- === HERO VIDEO PREVIEW === -->
|
|
<section class="hero-video-container">
|
|
<div class="sitewidth">
|
|
<div class="hero-video-grid">
|
|
<a href="#" class="hero-video-card">
|
|
<img src="{{ asset('assets/images/home-features-tabs-images/video-cover-timer.png') }}" alt="Timer feature preview">
|
|
<div class="card-body">
|
|
<h4>Timer</h4>
|
|
<p>Track work hours in real time (4:08)</p>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="hero-video-card">
|
|
<img src="{{ asset('assets/images/home-features-tabs-images/video-cover-timesheet.png') }}" alt="Timesheet feature preview">
|
|
<div class="card-body">
|
|
<h4>Timesheet</h4>
|
|
<p>Fill in your timesheet weekly (3:35)</p>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="hero-video-card">
|
|
<img src="{{ asset('assets/images/home-features-tabs-images/video-cover-projects.png') }}" alt="Projects feature preview">
|
|
<div class="card-body">
|
|
<h4>Projects</h4>
|
|
<p>Organize time tracking by project (4:08)</p>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="hero-video-card">
|
|
<img src="{{ asset('assets/images/home-features-tabs-images/video-cover-reports.png') }}" alt="Reports feature preview">
|
|
<div class="card-body">
|
|
<h4>Reports</h4>
|
|
<p>Analyze where time goes (5:44)</p>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="hero-video-card">
|
|
<img src="{{ asset('assets/images/home-features-tabs-images/video-calendar.png') }}" alt="Calendar feature preview">
|
|
<div class="card-body">
|
|
<h4>Calendar</h4>
|
|
<p>Plan and visualize your schedule (3:16)</p>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="hero-video-card">
|
|
<img src="{{ asset('assets/images/home-features-tabs-images/video-cover-location.png') }}" alt="Location feature preview">
|
|
<div class="card-body">
|
|
<h4>Location</h4>
|
|
<p>Track GPS location of time entries (2:09)</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- === TRUSTED BY === -->
|
|
<section class="trusted-by">
|
|
<h2>Trusted by 7M+ users in companies worldwide</h2>
|
|
<div class="trusted-logos">
|
|
<img src="{{ asset('assets/images/companies/hewlett-packard.svg') }}" alt="HP">
|
|
<img src="{{ asset('assets/images/companies/verizon.svg') }}" alt="Verizon">
|
|
<img src="{{ asset('assets/images/companies/american-express.svg') }}" alt="American Express">
|
|
<img src="{{ asset('assets/images/companies/simens.svg') }}" alt="Siemens">
|
|
<img src="{{ asset('assets/images/companies/cisco.svg') }}" alt="Cisco">
|
|
<img src="{{ asset('assets/images/companies/fujifilm.svg') }}" alt="Fujifilm">
|
|
<img src="{{ asset('assets/images/companies/kmart.svg') }}" alt="Kmart">
|
|
<img src="{{ asset('assets/images/companies/asics.svg') }}" alt="Asics">
|
|
<img src="{{ asset('assets/images/companies/dominos.svg') }}" alt="Domino's">
|
|
<img src="{{ asset('assets/images/companies/douglas.svg') }}" alt="Douglas">
|
|
<img src="{{ asset('assets/images/companies/paysafe.svg') }}" alt="Paysafe">
|
|
<img src="{{ asset('assets/images/companies/ucla.svg') }}" alt="UCLA">
|
|
</div>
|
|
</section>
|
|
|
|
<!-- === FEATURES === -->
|
|
<section class="features-section" id="features">
|
|
<div class="sitewidth">
|
|
<h2>Time management features</h2>
|
|
<p class="section-subtitle">Everything you need to track time, manage projects, and boost productivity.</p>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<img src="{{ asset('assets/images/home-features-icons/icon-timer.svg') }}" alt="Timer icon">
|
|
<h3>Timer</h3>
|
|
<p>Track work hours in real time with a simple start/stop timer. Works across all devices.</p>
|
|
<a href="{{ route('features', 'timer') }}">Learn more →</a>
|
|
</div>
|
|
<div class="feature-card">
|
|
<img src="{{ asset('assets/images/home-features-icons/icon-timesheet.svg') }}" alt="Timesheet icon">
|
|
<h3>Timesheet</h3>
|
|
<p>Fill in your timesheet for the current and past weeks. Great for retroactive logging.</p>
|
|
<a href="{{ route('features', 'timesheet') }}">Learn more →</a>
|
|
</div>
|
|
<div class="feature-card">
|
|
<img src="{{ asset('assets/images/home-features-icons/icon-calendar.svg') }}" alt="Calendar icon">
|
|
<h3>Calendar</h3>
|
|
<p>Schedule work, assignments, and shifts directly from a visual calendar view.</p>
|
|
<a href="{{ route('features', 'calendar') }}">Learn more →</a>
|
|
</div>
|
|
<div class="feature-card">
|
|
<img src="{{ asset('assets/images/home-features-icons/icon-reports.svg') }}" alt="Reports icon">
|
|
<h3>Reports</h3>
|
|
<p>Analyze and export tracked time. Get insights into where your team's time goes.</p>
|
|
<a href="{{ route('features', 'reports') }}">Learn more →</a>
|
|
</div>
|
|
<div class="feature-card">
|
|
<img src="{{ asset('assets/images/home-features-icons/icon-projects.svg') }}" alt="Projects icon">
|
|
<h3>Projects</h3>
|
|
<p>Organize time entries by project and task. Set budgets and track progress.</p>
|
|
<a href="{{ route('features', 'projects') }}">Learn more →</a>
|
|
</div>
|
|
<div class="feature-card">
|
|
<img src="{{ asset('assets/images/home-features-icons/icon-scheduling.svg') }}" alt="Scheduling icon">
|
|
<h3>Scheduling</h3>
|
|
<p>Schedule work, assignments, and shifts. Avoid overbooking and manage capacity.</p>
|
|
<a href="{{ route('features', 'scheduling') }}">Learn more →</a>
|
|
</div>
|
|
<div class="feature-card">
|
|
<img src="{{ asset('assets/images/home-features-icons/icon-location.svg') }}" alt="Location icon">
|
|
<h3>Location</h3>
|
|
<p>GPS time tracking. See where time was logged and geotag time entries.</p>
|
|
<a href="{{ route('features', 'location') }}">Learn more →</a>
|
|
</div>
|
|
<div class="feature-card">
|
|
<img src="{{ asset('assets/images/home-features-icons/icon-activity.svg') }}" alt="Activity icon">
|
|
<h3>Activity</h3>
|
|
<p>Monitor desktop and application activity. Get detailed productivity insights.</p>
|
|
<a href="{{ route('features', 'activity') }}">Learn more →</a>
|
|
</div>
|
|
<div class="feature-card">
|
|
<img src="{{ asset('assets/images/home-features-icons/icon-expenses.svg') }}" alt="Expenses icon">
|
|
<h3>Expenses</h3>
|
|
<p>Track and manage project expenses alongside time tracking. Invoice clients accurately.</p>
|
|
<a href="{{ route('features', 'expenses') }}">Learn more →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- === USE CASES === -->
|
|
<section class="use-cases" id="use-cases">
|
|
<div class="sitewidth">
|
|
<h2>Why track time with TimeLog</h2>
|
|
<div class="use-cases-grid">
|
|
<a href="#" class="use-case-card">
|
|
<img src="{{ asset('assets/images/home-main-features/main-feature-timekeeping.png') }}" alt="Timekeeping">
|
|
<div class="card-body">
|
|
<h3>Timekeeping</h3>
|
|
<p>Track time using a timer, timesheet, or kiosk. Flexible options for any workflow.</p>
|
|
<span class="learn-more">Learn more →</span>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="use-case-card">
|
|
<img src="{{ asset('assets/images/home-main-features/main-feature-budgeting.png') }}" alt="Budgeting">
|
|
<div class="card-body">
|
|
<h3>Budgeting</h3>
|
|
<p>Set client budgets, track project costs, and never lose revenue again.</p>
|
|
<span class="learn-more">Learn more →</span>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="use-case-card">
|
|
<img src="{{ asset('assets/images/home-main-features/main-feature-planning.png') }}" alt="Planning">
|
|
<div class="card-body">
|
|
<h3>Planning</h3>
|
|
<p>Manage resources, capacity, and utilization with powerful planning tools.</p>
|
|
<span class="learn-more">Learn more →</span>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="use-case-card">
|
|
<img src="{{ asset('assets/images/home-main-features/main-feature-attendance.png') }}" alt="Attendance">
|
|
<div class="card-body">
|
|
<h3>Attendance</h3>
|
|
<p>Track daily employee attendance and overtime from any device.</p>
|
|
<span class="learn-more">Learn more →</span>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="use-case-card">
|
|
<img src="{{ asset('assets/images/home-main-features/main-feature-reporting.png') }}" alt="Reporting">
|
|
<div class="card-body">
|
|
<h3>Reporting</h3>
|
|
<p>Analyze where time goes and run detailed reports for any purpose.</p>
|
|
<span class="learn-more">Learn more →</span>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="use-case-card">
|
|
<img src="{{ asset('assets/images/home-main-features/main-feature-payroll.png') }}" alt="Payroll">
|
|
<div class="card-body">
|
|
<h3>Payroll</h3>
|
|
<p>Calculate payroll and employee costs automatically from tracked time.</p>
|
|
<span class="learn-more">Learn more →</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- === TESTIMONIALS === -->
|
|
<section class="testimonials">
|
|
<div class="sitewidth">
|
|
<h2>Trusted by companies around the world</h2>
|
|
<div class="testimonials-grid">
|
|
<div class="testimonial-card">
|
|
<div class="stars">★★★★★</div>
|
|
<blockquote>"The best time tracking app we've used. Simple, intuitive, and powerful enough for our team of 200+."</blockquote>
|
|
<p class="author">Sarah Chen — CTO at TechCorp</p>
|
|
</div>
|
|
<div class="testimonial-card">
|
|
<div class="stars">★★★★★</div>
|
|
<blockquote>"Trackers don't get much better than this. The free plan alone is more than enough for most teams."</blockquote>
|
|
<p class="author">Marcus Johnson — PM at StartupXYZ</p>
|
|
</div>
|
|
<div class="testimonial-card">
|
|
<div class="stars">★★★★★</div>
|
|
<blockquote>"We switched from a $50k tool to TimeLog and saved thousands. The feature set is incredible for the price."</blockquote>
|
|
<p class="author">Emily Rodriguez — Director at AgencyPro</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- === APP DOWNLOADS === -->
|
|
<section class="app-downloads">
|
|
<div class="sitewidth">
|
|
<h2>Time tracking apps</h2>
|
|
<p class="section-subtitle">TimeLog works across devices. Track time from anywhere - all data is synced online.</p>
|
|
<div class="app-platforms">
|
|
<div class="app-platform">
|
|
<img src="{{ asset('assets/images/apps/get-mac.svg') }}" alt="Mac">
|
|
<p>Mac</p>
|
|
</div>
|
|
<div class="app-platform">
|
|
<img src="{{ asset('assets/images/apps/get-windows.svg') }}" alt="Windows">
|
|
<p>Windows</p>
|
|
</div>
|
|
<div class="app-platform">
|
|
<img src="{{ asset('assets/images/apps/get-linux.svg') }}" alt="Linux">
|
|
<p>Linux</p>
|
|
</div>
|
|
<div class="app-platform">
|
|
<img src="{{ asset('assets/images/apps/store-ios.svg') }}" alt="iOS">
|
|
<p>iOS</p>
|
|
</div>
|
|
<div class="app-platform">
|
|
<img src="{{ asset('assets/images/apps/store-android.svg') }}" alt="Android">
|
|
<p>Android</p>
|
|
</div>
|
|
<div class="app-platform">
|
|
<img src="{{ asset('assets/images/apps/store-chrome.svg') }}" alt="Chrome">
|
|
<p>Chrome</p>
|
|
</div>
|
|
<div class="app-platform">
|
|
<img src="{{ asset('assets/images/apps/get-firefox.svg') }}" alt="Firefox">
|
|
<p>Firefox</p>
|
|
</div>
|
|
<div class="app-platform">
|
|
<img src="{{ asset('assets/images/apps/get-edge.svg') }}" alt="Edge">
|
|
<p>Edge</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- === SUPPORT STATS === -->
|
|
<section class="support-stats">
|
|
<div class="sitewidth">
|
|
<div class="support-stats-grid">
|
|
<div class="support-stat">
|
|
<img src="{{ asset('assets/images/home-support-icons/headphones.svg') }}" alt="24/7 support">
|
|
<h4>24/7 Support</h4>
|
|
</div>
|
|
<div class="support-stat">
|
|
<img src="{{ asset('assets/images/home-support-icons/human.svg') }}" alt="Human support">
|
|
<h4>100% Human Support</h4>
|
|
</div>
|
|
<div class="support-stat">
|
|
<img src="{{ asset('assets/images/home-support-icons/pulse.svg') }}" alt="Fast response">
|
|
<h4><1h Response Time</h4>
|
|
</div>
|
|
<div class="support-stat">
|
|
<img src="{{ asset('assets/images/home-support-icons/hearth.svg') }}" alt="Satisfaction">
|
|
<h4>95% Satisfaction Rate</h4>
|
|
</div>
|
|
<div class="support-stat">
|
|
<img src="{{ asset('assets/images/home-support-icons/mail.svg') }}" alt="Uptime">
|
|
<h4>99.99% Uptime</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- === FINAL CTA === -->
|
|
<section class="final-cta">
|
|
<div class="sitewidth">
|
|
<h2>Start tracking time with TimeLog</h2>
|
|
<div class="badges">
|
|
<div class="badge">
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/></svg>
|
|
24/7 Support
|
|
</div>
|
|
<div class="badge">
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M5 10l3 3 7-7"/></svg>
|
|
Cancel Anytime
|
|
</div>
|
|
<div class="badge">
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M5 10l3 3 7-7"/></svg>
|
|
7-day Trial
|
|
</div>
|
|
</div>
|
|
<a href="{{ route('register') }}" class="btn-cta">
|
|
Create FREE account
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- === FOOTER === -->
|
|
<footer class="footer">
|
|
<div class="footer-inner">
|
|
<div class="row">
|
|
<div class="col-lg-3">
|
|
<div class="menu-group">
|
|
<a href="/" aria-label="TimeLog">
|
|
<svg class="footer-logo" viewBox="0 0 158 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M31.3333 0H8.66667C3.8802 0 0 3.8802 0 8.66667V31.3333C0 36.1198 3.8802 40 8.66667 40H31.3333C36.1198 40 40 36.1198 40 31.3333V8.66667C40 3.8802 36.1198 0 31.3333 0Z" fill="#03A9F4"/>
|
|
<path d="M25.6947 11.3924C26.3928 10.6932 26.2425 9.51811 25.3206 9.16425C24.0343 8.67046 22.6376 8.3999 21.1779 8.3999C14.7823 8.3999 9.59766 13.5934 9.59766 19.9999C9.59766 26.4064 14.7823 31.5999 21.1779 31.5999C22.6286 31.5999 24.017 31.3327 25.2968 30.8447C26.2211 30.4922 26.3728 29.3149 25.6735 28.6144C25.2203 28.1605 24.5345 28.0545 23.9264 28.257C23.0645 28.544 22.1427 28.6995 21.1846 28.6995C16.3879 28.6995 12.4994 24.8043 12.4994 19.9995C12.4994 15.1946 16.3879 11.2995 21.1846 11.2995C22.1496 11.2995 23.0779 11.4571 23.9451 11.7481C24.5537 11.9523 25.2409 11.847 25.6947 11.3924Z" fill="white"/>
|
|
<path d="M22.9294 20.1332C22.9294 20.9432 22.2728 21.5998 21.4628 21.5998C20.6527 21.5998 19.9961 20.9432 19.9961 20.1332C19.9961 19.3232 20.6527 18.6665 21.4628 18.6665C22.2728 18.6665 22.9294 19.3232 22.9294 20.1332Z" fill="white"/>
|
|
<path d="M23.7261 17.8301C23.2007 17.308 23.2007 16.4616 23.7261 15.9395L28.1021 11.5913C28.6274 11.0692 29.4793 11.0692 30.0047 11.5913C30.53 12.1133 30.53 12.9597 30.0047 13.4818L25.6287 17.8301C25.1033 18.3521 24.2515 18.3521 23.7261 17.8301Z" fill="white"/>
|
|
<path d="M23.7261 22.1693C23.2007 22.6914 23.2007 23.5378 23.7261 24.0599L28.1021 28.4082C28.6274 28.9302 29.4793 28.9302 30.0047 28.4082C30.53 27.8861 30.53 27.0397 30.0047 26.5176L25.6287 22.1693C25.1033 21.6473 24.2515 21.6473 23.7261 22.1693Z" fill="white"/>
|
|
</svg>
|
|
</a>
|
|
<p>The world's leading time tracker and timesheet software for teams</p>
|
|
<p><a class="link-primary" href="{{ route('login') }}">Log in</a></p>
|
|
<p><a class="link-primary" href="{{ route('register') }}">Sign up</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2">
|
|
<div class="menu-group">
|
|
<h6>Product</h6>
|
|
<p><a href="#">Overview</a></p>
|
|
<p><a href="#">Apps</a></p>
|
|
<p><a href="#">Integrations</a></p>
|
|
<p><a href="#">Customers</a></p>
|
|
</div>
|
|
<div class="menu-group">
|
|
<h6>Plans</h6>
|
|
<p><a href="#">Free</a></p>
|
|
<p><a href="#">Pro</a></p>
|
|
<p><a href="#">Enterprise</a></p>
|
|
</div>
|
|
<div class="menu-group">
|
|
<h6>Use cases</h6>
|
|
<p><a href="#">Timekeeping</a></p>
|
|
<p><a href="#">Planning</a></p>
|
|
<p><a href="#">Attendance</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2">
|
|
<div class="menu-group">
|
|
<h6>Features</h6>
|
|
<p><a href="{{ route('features', 'timer') }}">Timer</a></p>
|
|
<p><a href="{{ route('features', 'timesheet') }}">Timesheet</a></p>
|
|
<p><a href="{{ route('features', 'calendar') }}">Calendar</a></p>
|
|
<p><a href="{{ route('features', 'reports') }}">Reports</a></p>
|
|
<p><a href="{{ route('features', 'projects') }}">Projects</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<div class="menu-group">
|
|
<h6>Resources</h6>
|
|
<p><a href="#">Knowledge hub</a></p>
|
|
<p><a href="#">Blog</a></p>
|
|
<p><a href="#">Tutorials</a></p>
|
|
</div>
|
|
<div class="menu-group">
|
|
<h6>Support</h6>
|
|
<p><a href="#">Help center</a></p>
|
|
<p><a href="#">Contact</a></p>
|
|
<p><a href="mailto:support@timelog.app">support@timelog.app</a></p>
|
|
</div>
|
|
<div class="menu-group">
|
|
<h6>Download</h6>
|
|
<div style="display:flex;flex-direction:column;gap:8px;">
|
|
<a href="#"><img src="{{ asset('assets/images/apps/store-ios.svg') }}" alt="iOS" style="height:24px;"></a>
|
|
<a href="#"><img src="{{ asset('assets/images/apps/store-android.svg') }}" alt="Android" style="height:24px;"></a>
|
|
<a href="#"><img src="{{ asset('assets/images/apps/get-mac.svg') }}" alt="Mac" style="height:24px;"></a>
|
|
<a href="#"><img src="{{ asset('assets/images/apps/get-windows.svg') }}" alt="Windows" style="height:24px;"></a>
|
|
</div>
|
|
</div>
|
|
<div class="social">
|
|
<a href="#" aria-label="Facebook">
|
|
<svg width="24" height="24" viewBox="0 0 26 26" fill="#607d8b"><path d="M16.67 5.2V7.73H15.17c-.55 0-.92.12-1.11.35-.19.23-.29.57-.29 1.03V11h2.8l-.37 2.84H13.77V21h-2.93V13.84H8.41V11h2.44V8.83c0-1.19.33-2.1 1-1.75.66-.65 1.54-.98 2.64-.98.94 0 1.66.04 2.18.12z"/></svg>
|
|
</a>
|
|
<a href="#" aria-label="Twitter/X">
|
|
<svg width="24" height="24" viewBox="0 0 26 26" fill="#607d8b"><path d="M4.86 4.29L11.69 13.39 4.86 21.43h1.71L14.49 14.46 19.71 21.43H21.14L14.31 12.33 21.14 4.29H19.43L13.51 11.25 8.28 4.29H4.86zm1.71.86h1.29L19.43 20.57H18.14L6.57 5.15z"/></svg>
|
|
</a>
|
|
<a href="#" aria-label="LinkedIn">
|
|
<svg width="24" height="24" viewBox="0 0 26 26" fill="#607d8b"><path d="M4.86 6.19c0-.55.19-1 .58-1.36.39-.36.89-.54 1.51-.54.61 0 1.1.18 1.48.53.39.36.58.84.58 1.41 0 .53-.19.97-.57 1.33-.39.36-.9.54-1.53.54H6.95c-.61 0-1.1-.18-1.48-.54-.38-.36-.57-.81-.57-1.37zM5.07 20.67V9.66h3.67v11H5.07zm5.71 0h3.67v-6.17c0-.39.04-.69.13-.9.15-.37.39-.69.7-1 .31-.3.71-.43 1.18-.43 1.24 0 1.86.84 1.86 2.5v6h3.67v-6.36c0-1.63-.39-2.87-1.16-3.71-.77-.84-1.79-1.27-3.06-1.27-1.42 0-2.53.61-3.33 1.84v-.03H10.78c.02.35.03 1.45.03 3.29 0 1.84-.01 4.43-.03 7.76z"/></svg>
|
|
</a>
|
|
<a href="#" aria-label="YouTube">
|
|
<svg width="24" height="24" viewBox="0 0 27 26" fill="#607d8b"><path d="M13.63 6.43h.1c.88 0 5.34.03 6.54.36.36.1.7.29.97.56.27.27.46.6.56.97.11.4.18.94.24 1.5l.01.11.02.28.01.11c.05.7.08 1.4.08 2.1V14.5c-.01.74-.04 1.47-.09 2.2l-.02.11-.01.11c-.05.61-.14 1.22-.26 1.67-.1.36-.29.7-.56.97-.27.27-.6.46-.97.56-1.24.33-5.97.36-6.63.36h-.15c-.33 0-1.7 0-3.14-.05l-.18-.01-.09-.01-.18-.01-.18-.01c-1.19-.05-2.33-.14-2.85-.28-.36-.1-.7-.29-.97-.56-.27-.27-.46-.6-.56-.97-.12-.45-.2-1.06-.26-1.67l-.01-.11-.01-.11c-.05-.72-.08-1.44-.09-2.16V12.5c.01-.23.01-1.03.07-1.91l.01-.11.01-.11.01-.11.02-.11.02-.11c.06-.56.13-1.1.23-1.5.1-.37.29-.7.56-.97.27-.27.6-.46.97-.56.52-.14 1.66-.23 2.85-.28l.18-.01.09-.01.18-.01c1.02-.03 2.04-.04 3.06-.04h1.44z m-1.77 3.44v5.16l4.46-2.58-4.46-2.58z"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row copyright">
|
|
<p>© TimeLog {{ date('Y') }} by CAKE.com Inc.</p>
|
|
<div class="copyright-links">
|
|
<a href="#">Cookies</a>
|
|
<a href="#">Terms</a>
|
|
<a href="#">Privacy</a>
|
|
<a href="#">Security</a>
|
|
<a href="#">Sitemap</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Smooth scroll for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|