fdfe3cd7c7
Prompt: all resources in homepage that are using domain clockify.me should be downloaded and served locally instead. Look through other resources as well and if they are not common and public library, download those resources and serve them localy Stats: Context: 66,431 tokens Time: 18m 17s
1140 lines
66 KiB
Vue
1140 lines
66 KiB
Vue
<script setup lang="ts">
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
|
|
|
const isMobileMenuOpen = ref(false);
|
|
const activeFeatureTab = ref(0);
|
|
const activeMainFeature = ref(0);
|
|
|
|
const mainFeatures = [
|
|
{ name: 'Timekeeping', image: '/assets/images/home-main-features/main-feature-timekeeping.png', link: '/timekeeping' },
|
|
{ name: 'Budgeting', image: '/assets/images/home-main-features/main-feature-budgeting.png', link: '/budgeting' },
|
|
{ name: 'Planning', image: '/assets/images/home-main-features/main-feature-planning.png', link: '/planning' },
|
|
{ name: 'Attendance', image: '/assets/images/home-main-features/main-feature-attendance.png', link: '/attendance' },
|
|
{ name: 'Reporting', image: '/assets/images/home-main-features/main-feature-reporting.png', link: '/reporting' },
|
|
{ name: 'Payroll', image: '/assets/images/home-main-features/main-feature-payroll.png', link: '/payroll' },
|
|
];
|
|
|
|
const featureTabs = [
|
|
{ name: 'Timer', image: '/assets/images/home-features-tabs-images/video-cover-timer.png', duration: '7:46' },
|
|
{ name: 'Timesheet', image: '/assets/images/home-features-tabs-images/video-cover-timesheet.png', duration: '3:35' },
|
|
{ name: 'Calendar', image: '/assets/images/home-features-tabs-images/video-cover-calendar.png', duration: '3:16' },
|
|
{ name: 'Auto tracker', image: '/assets/images/home-features-tabs-images/video-cover-auto-tracker-2.png', duration: '2:57' },
|
|
{ name: 'Kiosk', image: '/assets/images/home-features-tabs-images/video-cover-kiosk.png', duration: '5:21' },
|
|
{ name: 'Reports', image: '/assets/images/home-features-tabs-images/video-cover-reports.png', duration: '6:58' },
|
|
{ name: 'Activity', image: '/assets/images/home-features-tabs-images/video-cover-activity.png', duration: '5:44' },
|
|
{ name: 'Rates', image: '/assets/images/home-features-tabs-images/video-cover-rates.png', duration: '5:50' },
|
|
{ name: 'Projects', image: '/assets/images/home-features-tabs-images/video-cover-projects.png', duration: '4:08' },
|
|
{ name: 'Location', image: '/assets/images/home-features-tabs-images/video-cover-location.png', duration: '2:09' },
|
|
{ name: 'Scheduling', image: '/assets/images/home-features-tabs-images/video-cover-scheduling.png', duration: '4:19' },
|
|
{ name: 'Time off', image: '/assets/images/home-features-tabs-images/video-cover-time-off.png', duration: '6:47' },
|
|
{ name: 'Approval', image: '/assets/images/home-features-tabs-images/video-cover-approval.png', duration: '6:07' },
|
|
{ name: 'Invoicing', image: '/assets/images/home-features-tabs-images/video-cover-invoicing.png', duration: '5:15' },
|
|
{ name: 'Expenses', image: '/assets/images/home-features-tabs-images/video-cover-expenses.png', duration: '3:15' },
|
|
{ name: 'Team', image: '/assets/images/home-features-tabs-images/video-cover-team-2.png', duration: '9:06' },
|
|
];
|
|
|
|
const timekeepingFeatures = [
|
|
{ name: 'Timer', desc: 'Track work hours in real time.', icon: '/assets/images/home-features-icons/icon-timer.svg', link: '/features/timer' },
|
|
{ name: 'Timesheet', desc: 'Enter time in a weekly timesheet.', icon: '/assets/images/home-features-icons/icon-timesheet.svg', link: '/features/timesheet' },
|
|
{ name: 'Calendar', desc: 'Visually block out and manage time.', icon: '/assets/images/home-features-icons/icon-calendar.svg', link: '/features/calendar' },
|
|
{ name: 'Auto tracker', desc: 'Track apps and websites you use.', icon: '/assets/images/home-features-icons/icon-map-locate.svg', link: '/features/auto-tracker' },
|
|
{ name: 'Kiosk', desc: 'Clock in from a shared device.', icon: '/assets/images/home-features-icons/icon-kiosk.svg', link: '/features/kiosk' },
|
|
];
|
|
|
|
const timekeepingImages = [
|
|
'/assets/images/home-features-tabs-images/time-menagement-timer.png',
|
|
'/assets/images/home-features-tabs-images/time-menagement-timesheet.png',
|
|
'/assets/images/home-features-tabs-images/time-menagement-calendar.png',
|
|
'/assets/images/home-features-tabs-images/time-menagement-auto-tracker.png',
|
|
'/assets/images/home-features-tabs-images/time-menagement-kiosk.png',
|
|
];
|
|
|
|
const reportingFeatures = [
|
|
{ name: 'Reports', desc: 'Analyze and export tracked time.', icon: '/assets/images/home-features-icons/icon-reports.svg', link: '/features/reports' },
|
|
{ name: 'Activity', desc: 'See who works on what.', icon: '/assets/images/home-features-icons/icon-activity.svg', link: '/features/activity' },
|
|
{ name: 'Rates', desc: 'See earnings, cost, and profit.', icon: '/assets/images/home-features-icons/icon-rates.svg', link: '/features/rates' },
|
|
{ name: 'Projects', desc: 'Track project estimates and budget.', icon: '/assets/images/home-features-icons/icon-projects.svg', link: '/features/projects' },
|
|
{ name: 'Location', desc: 'See visited sites and routes.', icon: '/assets/images/home-features-icons/icon-location.svg', link: '/features/location' },
|
|
];
|
|
|
|
const reportingImages = [
|
|
'/assets/images/home-features-tabs-images/time-menagement-reports.png',
|
|
'/assets/images/home-features-tabs-images/time-menagement-activity.png',
|
|
'/assets/images/home-features-tabs-images/time-menagement-rates.png',
|
|
'/assets/images/home-features-tabs-images/time-menagement-projects.png',
|
|
'/assets/images/home-features-tabs-images/time-menagement-location.png',
|
|
];
|
|
|
|
const managementFeatures = [
|
|
{ name: 'Scheduling', desc: 'Schedule work, assignments, and shifts.', icon: '/assets/images/home-features-icons/icon-scheduling.svg', link: '/features/scheduling' },
|
|
{ name: 'Time off', desc: 'Manage leaves and holidays.', icon: '/assets/images/home-features-icons/icon-time-off.svg', link: '/features/time-off' },
|
|
{ name: 'Approval', desc: 'Submit and approve timesheets.', icon: '/assets/images/home-features-icons/icon-approval.svg', link: '/features/approval' },
|
|
{ name: 'Invoicing', desc: 'Create invoices from billable time.', icon: '/assets/images/home-features-icons/icon-invoicing.svg', link: '/features/invoicing' },
|
|
{ name: 'Expenses', desc: 'Record project expenses and fees.', icon: '/assets/images/home-features-icons/icon-expenses.svg', link: '/features/expenses' },
|
|
{ name: 'Team', desc: 'Manage team members and roles.', icon: '/assets/images/home-features-icons/icon-team.svg', link: '/features/team' },
|
|
];
|
|
|
|
const managementImages = [
|
|
'/assets/images/home-features-tabs-images/time-menagement-scheduling.png',
|
|
'/assets/images/home-features-tabs-images/time-menagement-time-off.png',
|
|
'/assets/images/home-features-tabs-images/time-menagement-approval.png',
|
|
'/assets/images/home-features-tabs-images/time-menagement-invoicing.png',
|
|
'/assets/images/home-features-tabs-images/time-menagement-expenses.png',
|
|
'/assets/images/home-features-tabs-images/time-menagement-team.png',
|
|
];
|
|
|
|
const companyLogos = [
|
|
'/assets/images/companies/hewlett-packard.svg',
|
|
'/assets/images/companies/verizon.svg',
|
|
'/assets/images/companies/american-express.svg',
|
|
'/assets/images/companies/simens.svg',
|
|
'/assets/images/companies/cisco.svg',
|
|
'/assets/images/companies/fujifilm.svg',
|
|
'/assets/images/companies/kmart.svg',
|
|
'/assets/images/companies/asics.svg',
|
|
'/assets/images/companies/ucla.svg',
|
|
'/assets/images/companies/dominos.svg',
|
|
'/assets/images/companies/douglas.svg',
|
|
'/assets/images/companies/paysafe.svg',
|
|
];
|
|
|
|
const reviews = [
|
|
{
|
|
rating: 5,
|
|
title: "Trackers don't get much better",
|
|
text: "I track my time for all the tasks I perform; work-related and other.",
|
|
name: 'Ivan Arsenov',
|
|
role: 'Recruitment Manager',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Very useful and intuitive',
|
|
text: 'Extremely comfortable. Ads free. Amazing in terms of customer support.',
|
|
name: 'Ivan Napolskykh',
|
|
role: 'Software Engineer',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Best time-tracking tool',
|
|
text: 'Easy to use with detailed reporting and analytics allowing users to track their time spent.',
|
|
name: 'Joshua O.',
|
|
role: 'Infrastructure Engineer',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'A game-changer for remote work',
|
|
text: 'I can track on my phone - a few taps and I\'m ready to get onto my work.',
|
|
name: 'Kerri MacKay',
|
|
role: 'Coordinator',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'It has greatly improved our business',
|
|
text: 'Before Clockify we had no idea of how long we were spending on each event.',
|
|
name: 'Hilary Raeside',
|
|
role: 'Executive Assistant',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Grows with you!',
|
|
text: 'I love how Clockify allows my contractors to independently log billable hours.',
|
|
name: 'Cameron Suorsa',
|
|
role: 'Entrepreneur',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'An amazing experience!',
|
|
text: 'Works exactly like you\'d hope, feature-rich, and has helped us realize profits.',
|
|
name: 'Torre Capistran',
|
|
role: 'Entrepreneur',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Affordable price and support',
|
|
text: 'New features appearing every month. Great and helpful customer support.',
|
|
name: 'Maciej Tkaczyk',
|
|
role: 'Manager',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Fantastic from start to finish',
|
|
text: 'I absolutely love how this software has so many features',
|
|
name: 'Ollie Yates',
|
|
role: 'CEO',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'The only app to keep you accountable',
|
|
text: 'The best app out there which allows us to keep a tab on our productivity.',
|
|
name: 'Ze Belchior',
|
|
role: 'Managing Director',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'One of the best values available online',
|
|
text: 'Really good. Overall, this is a TREMENDOUS value for the price.',
|
|
name: 'Patrick Carver',
|
|
role: 'Entrepreneur',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Best time tracker',
|
|
text: 'Clockify is the easiest to use time tracking tool and has given me the most beneficial time tracking experience.',
|
|
name: 'Luis Miguel Rivas Zepeda',
|
|
role: 'Software Engineer',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Seamless time tracking',
|
|
text: 'Clockify is so easy to use and intuitive. The learning curve is almost none.',
|
|
name: 'Sheila Zayas',
|
|
role: 'Graphic Design',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Clockify is scary good!',
|
|
text: 'It is a powerful and often frightening insight into your own behavior.',
|
|
name: 'Skyler Bird',
|
|
role: 'Web Designer',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Finally an intuitive online time logger',
|
|
text: 'I like that it is available to me online and can use it wherever I am.',
|
|
name: 'Michele Wong',
|
|
role: 'Entrepreneur',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Amazing timer that gets the job done',
|
|
text: 'Gives a very clear idea about where my time is being spent. It helps in self-development!',
|
|
name: 'Anirudh Kshemendranath',
|
|
role: 'Consulting Analyst',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Love Clockify! Super reccomend!',
|
|
text: 'Amazing! Would 100% recommend to anyone! Absolutely great!',
|
|
name: 'Priscilla C.',
|
|
role: 'Executive Assistant',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'May be the best time tracker there is!',
|
|
text: 'Clockify has been an essential tool for our team to track time on a daily basis.',
|
|
name: 'Camille Ang',
|
|
role: 'Entrepreneur',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Works great for startups',
|
|
text: 'We grew from a couple people to almost 80 and it worked perfectly the whole time!',
|
|
name: 'Zachary Gaskill',
|
|
role: 'Sales Manager',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Fantastic',
|
|
text: 'Makes it incredibly easy to record time and attach pdf reports to invoices.',
|
|
name: 'David Jackson',
|
|
role: 'Consultant',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Best time tracking software!',
|
|
text: 'I use Clockify for work, but it also lets me know exactly what I am doing in my day!',
|
|
name: 'Marc Wolfe',
|
|
role: 'Marketing Manager',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Best timesheet software on the market',
|
|
text: 'Easy to use. Quick to maneuver. Excellent reporting and administration.',
|
|
name: 'Anurag K',
|
|
role: 'Database Engineer',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'Wonderful for tracking productivity',
|
|
text: 'I enjoy it so much I use outside of work to track my own personal self-development.',
|
|
name: 'Jessup S',
|
|
role: 'Operations Associate',
|
|
},
|
|
{
|
|
rating: 5,
|
|
title: 'I feel more productive!',
|
|
text: "It's really encouraging to look back and see how much I've accomplished!",
|
|
name: 'Kristen Eisentrager',
|
|
role: 'Creative Coordinator',
|
|
},
|
|
];
|
|
|
|
const reviewStars = (rating: number) => {
|
|
return Array.from({ length: 5 }, (_, i) => i < rating);
|
|
};
|
|
|
|
const isScrolled = ref(false);
|
|
|
|
onMounted(() => {
|
|
const handleScroll = () => {
|
|
isScrolled.value = window.scrollY > 10;
|
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Clockify - Time Tracking Software">
|
|
<link rel="stylesheet" href="/fonts/inter/inter.css" />
|
|
</Head>
|
|
|
|
<div class="min-h-screen bg-white font-sans text-[#1d1d1f]">
|
|
<!-- Header -->
|
|
<header
|
|
class="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-200 transition-shadow duration-200"
|
|
:class="isScrolled ? 'shadow-sm' : ''"
|
|
>
|
|
<div class="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<!-- Logo -->
|
|
<a href="/" class="flex items-center shrink-0">
|
|
<img
|
|
src="/assets/images/clockify-header-link-logo-new.svg"
|
|
alt="Clockify"
|
|
class="h-7 w-auto"
|
|
/>
|
|
</a>
|
|
|
|
<!-- Desktop Navigation -->
|
|
<nav class="hidden lg:flex items-center gap-6 xl:gap-8 text-sm">
|
|
<a href="/" class="font-medium text-[#0d5ad8]">Home</a>
|
|
<a href="/features" class="text-gray-600 hover:text-gray-900">Features</a>
|
|
<a href="/pricing" class="text-gray-600 hover:text-gray-900">Pricing</a>
|
|
<a href="/why-use-time-tracker" class="text-gray-600 hover:text-gray-900">Solutions</a>
|
|
<a href="/apps" class="text-gray-600 hover:text-gray-900">Download</a>
|
|
<a href="/customers" class="text-gray-600 hover:text-gray-900">Reviews</a>
|
|
<a href="/help" class="text-gray-600 hover:text-gray-900">Support</a>
|
|
</nav>
|
|
|
|
<!-- Desktop Auth Buttons -->
|
|
<div class="hidden lg:flex items-center gap-3">
|
|
<a
|
|
href="https://app.clockify.me/en/login"
|
|
class="text-sm font-medium text-gray-700 hover:text-gray-900 px-4 py-2"
|
|
>
|
|
Log in
|
|
</a>
|
|
<a
|
|
href="https://app.clockify.me/en/signup"
|
|
class="text-sm font-medium bg-[#0d5ad8] text-white px-5 py-2.5 rounded-md hover:bg-[0b4eb8] transition-colors"
|
|
>
|
|
Sign up free
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Mobile menu button -->
|
|
<button
|
|
class="lg:hidden p-2 text-gray-600"
|
|
@click="isMobileMenuOpen = !isMobileMenuOpen"
|
|
>
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
v-if="!isMobileMenuOpen"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|
/>
|
|
<path
|
|
v-else
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div v-if="isMobileMenuOpen" class="lg:hidden border-t border-gray-200 bg-white">
|
|
<div class="px-4 py-4 space-y-3">
|
|
<a href="/" class="block text-sm font-medium text-[#0d5ad8]">Home</a>
|
|
<a href="/features" class="block text-sm text-gray-600 hover:text-gray-900">Features</a>
|
|
<a href="/pricing" class="block text-sm text-gray-600 hover:text-gray-900">Pricing</a>
|
|
<a href="/why-use-time-tracker" class="block text-sm text-gray-600 hover:text-gray-900">Solutions</a>
|
|
<a href="/apps" class="block text-sm text-gray-600 hover:text-gray-900">Download</a>
|
|
<a href="/customers" class="block text-sm text-gray-600 hover:text-gray-900">Reviews</a>
|
|
<a href="/help" class="block text-sm text-gray-600 hover:text-gray-900">Support</a>
|
|
<div class="pt-3 border-t border-gray-200 space-y-2">
|
|
<a
|
|
href="https://app.clockify.me/en/login"
|
|
class="block text-sm text-center text-gray-700 py-2"
|
|
>
|
|
Log in
|
|
</a>
|
|
<a
|
|
href="https://app.clockify.me/en/signup"
|
|
class="block text-sm text-center bg-[#0d5ad8] text-white py-2.5 rounded-md"
|
|
>
|
|
Sign up free
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Spacer for fixed header -->
|
|
<div class="h-16"></div>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="bg-[#f9f9f9] pt-16 pb-20 lg:pt-24 lg:pb-28">
|
|
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h1
|
|
class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-[#1d1d1f] leading-tight max-w-4xl mx-auto"
|
|
>
|
|
The most popular time tracker for teams
|
|
</h1>
|
|
<p class="mt-6 text-lg sm:text-xl text-[#6b6b6b] max-w-3xl mx-auto leading-relaxed">
|
|
Time tracking software used by millions. Clockify is a time tracker and timesheet app that
|
|
lets you track work hours across projects.
|
|
</p>
|
|
|
|
<!-- Rating Badge -->
|
|
<div class="mt-8 flex items-center justify-center gap-2">
|
|
<img
|
|
src="/assets/images/stars-small.svg"
|
|
alt="4.8 rating"
|
|
class="h-5 w-auto"
|
|
/>
|
|
<span class="text-sm font-medium text-[#1d1d1f]">4.8 (9,000+ reviews)</span>
|
|
<a href="/customers" class="text-sm text-[#0d5ad8] hover:underline ml-1">/customers</a>
|
|
</div>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<a
|
|
href="https://app.clockify.me/signup"
|
|
class="w-full sm:w-auto text-center text-base font-medium bg-[#0d5ad8] text-white px-8 py-3.5 rounded-md hover:bg-[0b4eb8] transition-colors"
|
|
>
|
|
Start tracking time - it's free!
|
|
</a>
|
|
<div class="flex items-center gap-2 text-sm text-[#6b6b6b]">
|
|
<img
|
|
src="/assets/images/signed-up-icon.svg"
|
|
alt=""
|
|
class="w-5 h-5"
|
|
/>
|
|
<a href="/customers" class="text-[#0d5ad8] hover:underline">
|
|
Join 7 million+ users
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Trusted by companies -->
|
|
<section class="py-12 lg:py-16 border-b border-gray-200">
|
|
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<p class="text-sm font-medium text-[#6b6b6b] uppercase tracking-wider mb-8">
|
|
Trusted by 7M+ users in companies worldwide
|
|
</p>
|
|
<div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-12 gap-6 items-center justify-items-center opacity-60">
|
|
<img
|
|
v-for="(logo, i) in companyLogos"
|
|
:key="i"
|
|
:src="logo"
|
|
:alt="['Hewlett Packard', 'Verizon', 'American Express', 'Siemens', 'Cisco', 'FujiFilm', 'Kmart', 'Asics', 'UCLA', 'Domino\'s', 'Douglas', 'Paysafe'][i]"
|
|
class="h-8 w-auto max-w-[120px] grayscale hover:grayscale-0 transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Time management features tabs -->
|
|
<section class="py-16 lg:py-24">
|
|
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-3xl lg:text-4xl font-bold text-center text-[#1d1d1f] mb-4">
|
|
Time management features
|
|
</h2>
|
|
<p class="text-center text-[#6b6b6b] mb-12 max-w-2xl mx-auto">
|
|
Track productivity, attendance, and billable hours with a simple time tracker and timesheet.
|
|
</p>
|
|
|
|
<!-- Tab Navigation -->
|
|
<div class="flex flex-wrap justify-center gap-2 mb-12">
|
|
<button
|
|
@click="activeFeatureTab = 0"
|
|
class="px-5 py-2.5 text-sm font-medium rounded-full transition-all"
|
|
:class="activeFeatureTab === 0 ? 'bg-[#0d5ad8] text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
|
|
>
|
|
Timekeeping
|
|
</button>
|
|
<button
|
|
@click="activeFeatureTab = 1"
|
|
class="px-5 py-2.5 text-sm font-medium rounded-full transition-all"
|
|
:class="activeFeatureTab === 1 ? 'bg-[#0d5ad8] text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
|
|
>
|
|
Reporting
|
|
</button>
|
|
<button
|
|
@click="activeFeatureTab = 2"
|
|
class="px-5 py-2.5 text-sm font-medium rounded-full transition-all"
|
|
:class="activeFeatureTab === 2 ? 'bg-[#0d5ad8] text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
|
|
>
|
|
Management
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div v-if="activeFeatureTab === 0">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6 mb-12">
|
|
<a
|
|
v-for="(feature, i) in timekeepingFeatures"
|
|
:key="i"
|
|
:href="feature.link"
|
|
class="flex flex-col items-center text-center p-6 rounded-xl hover:bg-gray-50 transition-colors group"
|
|
>
|
|
<img
|
|
:src="feature.icon"
|
|
:alt="feature.name"
|
|
class="w-10 h-10 mb-4"
|
|
/>
|
|
<h3 class="text-base font-semibold text-[#1d1d1f] mb-1 group-hover:text-[#0d5ad8] transition-colors">
|
|
{{ feature.name }}
|
|
</h3>
|
|
<p class="text-sm text-[#6b6b6b]">{{ feature.desc }}</p>
|
|
</a>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<img
|
|
:src="timekeepingImages[activeFeatureTab % timekeepingImages.length]"
|
|
alt="Timekeeping"
|
|
class="w-full max-w-4xl rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="activeFeatureTab === 1">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6 mb-12">
|
|
<a
|
|
v-for="(feature, i) in reportingFeatures"
|
|
:key="i"
|
|
:href="feature.link"
|
|
class="flex flex-col items-center text-center p-6 rounded-xl hover:bg-gray-50 transition-colors group"
|
|
>
|
|
<img
|
|
:src="feature.icon"
|
|
:alt="feature.name"
|
|
class="w-10 h-10 mb-4"
|
|
/>
|
|
<h3 class="text-base font-semibold text-[#1d1d1f] mb-1 group-hover:text-[#0d5ad8] transition-colors">
|
|
{{ feature.name }}
|
|
</h3>
|
|
<p class="text-sm text-[#6b6b6b]">{{ feature.desc }}</p>
|
|
</a>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<img
|
|
:src="reportingImages[activeFeatureTab % reportingImages.length]"
|
|
alt="Reporting"
|
|
class="w-full max-w-4xl rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="activeFeatureTab === 2">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 mb-12">
|
|
<a
|
|
v-for="(feature, i) in managementFeatures"
|
|
:key="i"
|
|
:href="feature.link"
|
|
class="flex flex-col items-center text-center p-6 rounded-xl hover:bg-gray-50 transition-colors group"
|
|
>
|
|
<img
|
|
:src="feature.icon"
|
|
:alt="feature.name"
|
|
class="w-10 h-10 mb-4"
|
|
/>
|
|
<h3 class="text-base font-semibold text-[#1d1d1f] mb-1 group-hover:text-[#0d5ad8] transition-colors">
|
|
{{ feature.name }}
|
|
</h3>
|
|
<p class="text-sm text-[#6b6b6b]">{{ feature.desc }}</p>
|
|
</a>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<img
|
|
:src="managementImages[activeFeatureTab % managementImages.length]"
|
|
alt="Management"
|
|
class="w-full max-w-4xl rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why track time with Clockify -->
|
|
<section class="py-16 lg:py-24 bg-[#f9f9f9]">
|
|
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-3xl lg:text-4xl font-bold text-center text-[#1d1d1f] mb-16">
|
|
Why track time with Clockify
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
|
|
<a
|
|
v-for="(feature, i) in mainFeatures"
|
|
:key="i"
|
|
:href="feature.link"
|
|
class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
|
|
>
|
|
<img
|
|
:src="feature.image"
|
|
:alt="feature.name"
|
|
class="w-full"
|
|
/>
|
|
<div class="p-6">
|
|
<h3 class="text-xl font-semibold text-[#1d1d1f] mb-2">{{ feature.name }}</h3>
|
|
<p class="text-[#6b6b6b] mb-4">
|
|
<template v-if="i === 0">Track time using a timer, clock-in kiosk, or timesheet.</template>
|
|
<template v-else-if="i === 1">Set client budgets and track project status.</template>
|
|
<template v-else-if="i === 2">Manage resources, capacity, and utilization.</template>
|
|
<template v-else-if="i === 3">Track daily employee attendance and overtime.</template>
|
|
<template v-else-if="i === 4">See where time goes and analyze costs.</template>
|
|
<template v-else>Calculate payroll and employee costs.</template>
|
|
</p>
|
|
<span class="text-sm font-medium text-[#0d5ad8] hover:underline">Learn more →</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- More use cases -->
|
|
<div class="mt-16 text-center">
|
|
<h3 class="text-lg font-semibold text-[#1d1d1f] mb-6">More use cases</h3>
|
|
<div class="flex flex-wrap justify-center gap-x-6 gap-y-3">
|
|
<a href="/time-clock-app" class="text-[#0d5ad8] hover:underline text-sm">Time Clock</a>
|
|
<a href="/work-hours-tracker" class="text-[#0d5ad8] hover:underline text-sm">Work Hours Tracker</a>
|
|
<a href="/employee-time-tracking" class="text-[#0d5ad8] hover:underline text-sm">Employee Time Tracker</a>
|
|
<a href="/attendance-tracker" class="text-[#0d5ad8] hover:underline text-sm">Attendance Tracker</a>
|
|
<a href="/task-timer" class="text-[#0d5ad8] hover:underline text-sm">Task Timer</a>
|
|
<a href="/time-card-calculator" class="text-[#0d5ad8] hover:underline text-sm">Time Card Calculator</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Trusted by companies with reviews -->
|
|
<section class="py-16 lg:py-24">
|
|
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl lg:text-4xl font-bold text-[#1d1d1f] mb-4">
|
|
Trusted by companies around the world
|
|
</h2>
|
|
<div class="flex items-center justify-center gap-4 text-sm text-[#6b6b6b]">
|
|
<span class="flex items-center gap-1">
|
|
<img src="/assets/images/stars-small.svg" alt="4.8" class="h-4 w-auto" />
|
|
4.8 Rating
|
|
</span>
|
|
<span>•</span>
|
|
<span>9,000+ Reviews</span>
|
|
<span>•</span>
|
|
<span>95% Customer Satisfaction</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Company logos -->
|
|
<div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-12 gap-6 items-center justify-items-center mb-16 opacity-60">
|
|
<img
|
|
v-for="(logo, i) in companyLogos"
|
|
:key="i"
|
|
:src="logo"
|
|
:alt="['Hewlett Packard', 'Verizon', 'American Express', 'Siemens', 'Cisco', 'FujiFilm', 'Kmart', 'Nestle', 'UCLA', 'Saint Gobain', 'Douglas', 'Paysafe'][i]"
|
|
class="h-8 w-auto max-w-[120px] grayscale hover:grayscale-0 transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Review site badges -->
|
|
<div class="flex flex-wrap justify-center gap-6 mb-16 opacity-60">
|
|
<img src="/assets/images/review-site-capterra-gray.svg" alt="Capterra" class="h-8 w-auto" />
|
|
<img src="/assets/images/review-site-software-advice-gray.svg" alt="Software Advice" class="h-8 w-auto" />
|
|
<img src="/assets/images/review-site-g2-crowd-gray.svg" alt="G2 Crowd" class="h-8 w-auto" />
|
|
<img src="/assets/images/review-site-crozdesk-gray.svg" alt="Crozdesk" class="h-8 w-auto" />
|
|
<img src="/assets/images/review-site-trust-radius-gray.svg" alt="Trust Radius" class="h-8 w-auto" />
|
|
<img src="/assets/images/review-site-getapp-gray.svg" alt="GetApp" class="h-8 w-auto" />
|
|
</div>
|
|
|
|
<!-- Awards -->
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6 mb-20 opacity-70">
|
|
<img src="/assets/images/source-forge.png" alt="SourceForge Award" class="h-12 w-auto" />
|
|
<img src="/assets/images/source-forge-customer-love-us.png" alt="SourceForge Customers Love Us" class="h-12 w-auto" />
|
|
<img src="/assets/images/source-forge-customers-love-us-heart.png" alt="SourceForge Heart" class="h-12 w-auto" />
|
|
<img src="/assets/images/source-forge-spring-2025.png" alt="SourceForge Spring 2025" class="h-12 w-auto" />
|
|
<img src="/assets/images/award-capterra.png" alt="Capterra Award" class="h-12 w-auto" />
|
|
<img src="/assets/images/award-software-advice.png" alt="Software Advice Award" class="h-12 w-auto" />
|
|
<img src="/assets/images/award-leader.png" alt="Leader Award" class="h-12 w-auto" />
|
|
<img src="/assets/images/award-getapp.png" alt="GetApp Award" class="h-12 w-auto" />
|
|
</div>
|
|
|
|
<!-- Reviews -->
|
|
<div class="mb-12">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div
|
|
v-for="(review, i) in reviews"
|
|
:key="i"
|
|
class="border border-gray-200 rounded-xl p-6 hover:border-gray-300 transition-colors"
|
|
>
|
|
<div class="flex items-center gap-1 mb-4">
|
|
<img
|
|
v-for="(star, j) in reviewStars(review.rating)"
|
|
:key="j"
|
|
src="/assets/images/stars-small.svg"
|
|
alt="★"
|
|
class="h-4 w-auto"
|
|
/>
|
|
</div>
|
|
<h4 class="text-base font-semibold text-[#1d1d1f] mb-2">{{ review.title }}</h4>
|
|
<p class="text-sm text-[#6b6b6b] mb-4 leading-relaxed">{{ review.text }}</p>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-[#0d5ad8] flex items-center justify-center text-white text-sm font-semibold">
|
|
{{ review.name.charAt(0) }}
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-[#1d1d1f]">{{ review.name }}</p>
|
|
<p class="text-xs text-[#6b6b6b]">{{ review.role }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<a href="/customers" class="text-[#0d5ad8] hover:underline font-medium">
|
|
Read more customer stories →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Time tracking apps -->
|
|
<section class="py-16 lg:py-24 bg-[#f9f9f9]">
|
|
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-3xl lg:text-4xl font-bold text-center text-[#1d1d1f] mb-4">
|
|
Time tracking apps
|
|
</h2>
|
|
<p class="text-center text-[#6b6b6b] mb-12 max-w-2xl mx-auto">
|
|
Clockify works across devices. Track time from anywhere — all data is synced online.
|
|
</p>
|
|
|
|
<div class="text-center mb-12">
|
|
<a
|
|
href="https://app.clockify.me/en/login"
|
|
class="inline-flex items-center gap-2 text-[#0d5ad8] hover:underline font-medium"
|
|
>
|
|
Open Clockify in your browser
|
|
</a>
|
|
<p class="mt-2 text-[#6b6b6b]">or download for:</p>
|
|
</div>
|
|
|
|
<!-- Desktop app -->
|
|
<div class="mb-16">
|
|
<h3 class="text-xl font-semibold text-[#1d1d1f] mb-6">Desktop app</h3>
|
|
<div class="flex flex-wrap gap-4 mb-8">
|
|
<a href="/mac-time-tracking">
|
|
<img src="/assets/images/apps/get-mac.svg" alt="Get Clockify for Mac" class="h-12 w-auto" />
|
|
</a>
|
|
<a href="/windows-time-tracking">
|
|
<img src="/assets/images/apps/get-windows.svg" alt="Get Clockify for Windows" class="h-12 w-auto" />
|
|
</a>
|
|
<a href="/linux-time-tracking">
|
|
<img src="/assets/images/apps/get-linux.svg" alt="Get Clockify for Linux" class="h-12 w-auto" />
|
|
</a>
|
|
</div>
|
|
<img
|
|
src="/assets/images/home-tracking-apps/home-desktop-app.png"
|
|
alt="Desktop time tracking app"
|
|
class="w-full rounded-lg"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Web app -->
|
|
<div class="mb-16">
|
|
<h3 class="text-xl font-semibold text-[#1d1d1f] mb-6">Web app</h3>
|
|
<div class="flex flex-wrap gap-4 mb-8">
|
|
<a href="/chrome-time-tracking">
|
|
<img src="/assets/images/apps/store-chrome.svg" alt="Get Clockify for Chrome" class="h-12 w-auto" />
|
|
</a>
|
|
<a href="/firefox-time-tracking">
|
|
<img src="/assets/images/apps/get-firefox.svg" alt="Get Clockify for Firefox" class="h-12 w-auto" />
|
|
</a>
|
|
<a href="/edge-time-tracking">
|
|
<img src="/assets/images/apps/get-edge.svg" alt="Get Clockify for Edge" class="h-12 w-auto" />
|
|
</a>
|
|
</div>
|
|
<img
|
|
src="/assets/images/home-tracking-apps/home-web-app.png"
|
|
alt="Online time tracking app"
|
|
class="w-full rounded-lg"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Mobile app -->
|
|
<div class="mb-16">
|
|
<h3 class="text-xl font-semibold text-[#1d1d1f] mb-6">Mobile app</h3>
|
|
<div class="flex flex-wrap gap-4 mb-8">
|
|
<a href="/iphone-time-tracking">
|
|
<img src="/assets/images/apps/store-ios.svg" alt="Get Clockify for iPhone" class="h-12 w-auto" />
|
|
</a>
|
|
<a href="/android-time-tracking">
|
|
<img src="/assets/images/apps/store-android.svg" alt="Get Clockify for Android" class="h-12 w-auto" />
|
|
</a>
|
|
</div>
|
|
<img
|
|
src="/assets/images/home-tracking-apps/home-mobile-app.png"
|
|
alt="Mobile time tracking app"
|
|
class="w-full rounded-lg"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Kiosk app -->
|
|
<div>
|
|
<h3 class="text-xl font-semibold text-[#1d1d1f] mb-6">Kiosk app</h3>
|
|
<div class="flex flex-wrap gap-4 mb-8">
|
|
<a href="/free-time-clock-kiosk-app">
|
|
<img src="/assets/images/footer/kiosk.svg" alt="Get for Any device" class="h-12 w-auto" />
|
|
</a>
|
|
</div>
|
|
<img
|
|
src="/assets/images/home-tracking-apps/home-kiosk-app.png"
|
|
alt="Kiosk time tracking app"
|
|
class="w-full rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- World-class customer support -->
|
|
<section class="py-16 lg:py-24">
|
|
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-3xl lg:text-4xl font-bold text-[#1d1d1f] mb-4">
|
|
World-class customer support
|
|
</h2>
|
|
<p class="text-[#6b6b6b] mb-4 max-w-2xl mx-auto">
|
|
We're here 24 hours a day, every day of the week, including holidays.
|
|
</p>
|
|
<a href="/help/contact" class="text-[#0d5ad8] hover:underline font-medium mb-16 inline-block">
|
|
Contact us
|
|
</a>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8 max-w-4xl mx-auto">
|
|
<div class="flex flex-col items-center text-center">
|
|
<img
|
|
src="/assets/images/home-support-icons/headphones.svg"
|
|
alt="24/7 support"
|
|
class="w-12 h-12 mb-4"
|
|
/>
|
|
<h3 class="text-sm font-semibold text-[#1d1d1f] mb-1">24/7 support anytime, anywhere</h3>
|
|
</div>
|
|
<div class="flex flex-col items-center text-center">
|
|
<img
|
|
src="/assets/images/home-support-icons/mail.svg"
|
|
alt="Email response"
|
|
class="w-12 h-12 mb-4"
|
|
/>
|
|
<h3 class="text-sm font-semibold text-[#1d1d1f] mb-1"><1h average email response time</h3>
|
|
</div>
|
|
<div class="flex flex-col items-center text-center">
|
|
<img
|
|
src="/assets/images/home-support-icons/hearth.svg"
|
|
alt="Satisfaction"
|
|
class="w-12 h-12 mb-4"
|
|
/>
|
|
<h3 class="text-sm font-semibold text-[#1d1d1f] mb-1">95% satisfaction (18k+ ratings)</h3>
|
|
</div>
|
|
<div class="flex flex-col items-center text-center">
|
|
<img
|
|
src="/assets/images/home-support-icons/human.svg"
|
|
alt="Human support"
|
|
class="w-12 h-12 mb-4"
|
|
/>
|
|
<h3 class="text-sm font-semibold text-[#1d1d1f] mb-1">100% human-based support</h3>
|
|
</div>
|
|
<div class="flex flex-col items-center text-center">
|
|
<img
|
|
src="/assets/images/home-support-icons/pulse.svg"
|
|
alt="Uptime"
|
|
class="w-12 h-12 mb-4"
|
|
/>
|
|
<h3 class="text-sm font-semibold text-[#1d1d1f] mb-1">99.99% service uptime level</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="py-16 lg:py-24 bg-[#f9f9f9]">
|
|
<div class="max-w-[800px] mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-3xl lg:text-4xl font-bold text-[#1d1d1f] mb-4">
|
|
Start tracking time with Clockify
|
|
</h2>
|
|
<p class="text-sm text-[#6b6b6b] mb-10">
|
|
24/7 Support • Cancel Anytime • 7-day Trial
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<a
|
|
href="https://app.clockify.me/signup"
|
|
class="w-full sm:w-auto text-center text-base font-medium bg-[#0d5ad8] text-white px-8 py-3.5 rounded-md hover:bg-[0b4eb8] transition-colors"
|
|
>
|
|
Create FREE account
|
|
</a>
|
|
<div class="flex items-center gap-2 text-sm text-[#6b6b6b]">
|
|
<img
|
|
src="/assets/images/signed-up-icon.svg"
|
|
alt=""
|
|
class="w-5 h-5"
|
|
/>
|
|
<a href="/customers" class="text-[#0d5ad8] hover:underline">
|
|
Join 7 million+ users
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-[#1d1d1f] text-white py-16">
|
|
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- Top section -->
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-8 mb-12">
|
|
<!-- Product -->
|
|
<div>
|
|
<h3 class="text-sm font-semibold mb-4 text-white">Product</h3>
|
|
<ul class="space-y-2.5">
|
|
<li><a href="/" class="text-sm text-gray-400 hover:text-white transition-colors">Overview</a></li>
|
|
<li><a href="/apps" class="text-sm text-gray-400 hover:text-white transition-colors">Apps</a></li>
|
|
<li><a href="/integrations" class="text-sm text-gray-400 hover:text-white transition-colors">Integrations</a></li>
|
|
<li><a href="/customers" class="text-sm text-gray-400 hover:text-white transition-colors">Customers</a></li>
|
|
<li><a href="/help/whats-new" class="text-sm text-gray-400 hover:text-white transition-colors">Changelog</a></li>
|
|
<li><a href="https://docs.clockify.me/" class="text-sm text-gray-400 hover:text-white transition-colors">API</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Plans -->
|
|
<div>
|
|
<h3 class="text-sm font-semibold mb-4 text-white">Plans</h3>
|
|
<ul class="space-y-2.5">
|
|
<li><a href="/pricing" class="text-sm text-gray-400 hover:text-white transition-colors">Free</a></li>
|
|
<li><a href="/basic-plan/" class="text-sm text-gray-400 hover:text-white transition-colors">Basic</a></li>
|
|
<li><a href="/standard-plan/" class="text-sm text-gray-400 hover:text-white transition-colors">Standard</a></li>
|
|
<li><a href="/pro-plan/" class="text-sm text-gray-400 hover:text-white transition-colors">Pro</a></li>
|
|
<li><a href="/enterprise-plan/" class="text-sm text-gray-400 hover:text-white transition-colors">Enterprise</a></li>
|
|
<li><a href="/pricing" class="text-sm text-gray-400 hover:text-white transition-colors">See pricing</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Use cases -->
|
|
<div>
|
|
<h3 class="text-sm font-semibold mb-4 text-white">Use cases</h3>
|
|
<ul class="space-y-2.5">
|
|
<li><a href="/timekeeping" class="text-sm text-gray-400 hover:text-white transition-colors">Timekeeping</a></li>
|
|
<li><a href="/planning" class="text-sm text-gray-400 hover:text-white transition-colors">Planning</a></li>
|
|
<li><a href="/attendance" class="text-sm text-gray-400 hover:text-white transition-colors">Attendance</a></li>
|
|
<li><a href="/reporting" class="text-sm text-gray-400 hover:text-white transition-colors">Reporting</a></li>
|
|
<li><a href="/budgeting" class="text-sm text-gray-400 hover:text-white transition-colors">Budgeting</a></li>
|
|
<li><a href="/payroll" class="text-sm text-gray-400 hover:text-white transition-colors">Payroll</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Features -->
|
|
<div>
|
|
<h3 class="text-sm font-semibold mb-4 text-white">Features</h3>
|
|
<ul class="space-y-2.5">
|
|
<li><a href="/features/timer" class="text-sm text-gray-400 hover:text-white transition-colors">Timer</a></li>
|
|
<li><a href="/features/timesheet" class="text-sm text-gray-400 hover:text-white transition-colors">Timesheet</a></li>
|
|
<li><a href="/features/kiosk" class="text-sm text-gray-400 hover:text-white transition-colors">Kiosk</a></li>
|
|
<li><a href="/features/calendar" class="text-sm text-gray-400 hover:text-white transition-colors">Calendar</a></li>
|
|
<li><a href="/features/auto-tracker" class="text-sm text-gray-400 hover:text-white transition-colors">Auto tracker</a></li>
|
|
<li><a href="/features/rates" class="text-sm text-gray-400 hover:text-white transition-colors">Rates</a></li>
|
|
<li><a href="/features/projects" class="text-sm text-gray-400 hover:text-white transition-colors">Projects</a></li>
|
|
<li><a href="/features/activity" class="text-sm text-gray-400 hover:text-white transition-colors">Activity</a></li>
|
|
<li><a href="/features/location" class="text-sm text-gray-400 hover:text-white transition-colors">Location</a></li>
|
|
<li><a href="/features/scheduling" class="text-sm text-gray-400 hover:text-white transition-colors">Scheduling</a></li>
|
|
<li><a href="/features/time-off" class="text-sm text-gray-400 hover:text-white transition-colors">Time off</a></li>
|
|
<li><a href="/features/approval" class="text-sm text-gray-400 hover:text-white transition-colors">Approval</a></li>
|
|
<li><a href="/features/team" class="text-sm text-gray-400 hover:text-white transition-colors">Team</a></li>
|
|
<li><a href="/features/expenses" class="text-sm text-gray-400 hover:text-white transition-colors">Expenses</a></li>
|
|
<li><a href="/features/invoicing" class="text-sm text-gray-400 hover:text-white transition-colors">Invoicing</a></li>
|
|
<li><a href="/features/" class="text-sm text-gray-400 hover:text-white transition-colors">All features</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Resources -->
|
|
<div>
|
|
<h3 class="text-sm font-semibold mb-4 text-white">Resources</h3>
|
|
<ul class="space-y-2.5">
|
|
<li><a href="/learn/" class="text-sm text-gray-400 hover:text-white transition-colors">Knowledge hub</a></li>
|
|
<li><a href="/learn/resources/" class="text-sm text-gray-400 hover:text-white transition-colors">Clockify guides</a></li>
|
|
<li><a href="/resources" class="text-sm text-gray-400 hover:text-white transition-colors">Time management</a></li>
|
|
<li><a href="/tutorials" class="text-sm text-gray-400 hover:text-white transition-colors">Tutorials</a></li>
|
|
<li><a href="/blog/" class="text-sm text-gray-400 hover:text-white transition-colors">Blog</a></li>
|
|
<li><a href="/customer-stories/" class="text-sm text-gray-400 hover:text-white transition-colors">Customer stories</a></li>
|
|
<li><a href="/reviews/" class="text-sm text-gray-400 hover:text-white transition-colors">Software Reviews</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Industries -->
|
|
<div>
|
|
<h3 class="text-sm font-semibold mb-4 text-white">Industries</h3>
|
|
<ul class="space-y-2.5">
|
|
<li><a href="/freelance-time-tracking" class="text-sm text-gray-400 hover:text-white transition-colors">Freelancers</a></li>
|
|
<li><a href="/creative-agency-time-tracking" class="text-sm text-gray-400 hover:text-white transition-colors">Agencies</a></li>
|
|
<li><a href="/startups-time-tracking" class="text-sm text-gray-400 hover:text-white transition-colors">Startups</a></li>
|
|
<li><a href="/developer-time-tracking" class="text-sm text-gray-400 hover:text-white transition-colors">Developers</a></li>
|
|
<li><a href="/consultant-time-tracking" class="text-sm text-gray-400 hover:text-white transition-colors">Consultants</a></li>
|
|
<li><a href="/time-tracking-accounting" class="text-sm text-gray-400 hover:text-white transition-colors">Accountants</a></li>
|
|
<li><a href="/industry" class="text-sm text-gray-400 hover:text-white transition-colors">More industries</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calculators & Support -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-8 mb-12 pb-12 border-b border-gray-800">
|
|
<div>
|
|
<h3 class="text-sm font-semibold mb-4 text-white">Calculators</h3>
|
|
<ul class="space-y-2.5">
|
|
<li><a href="/time-card-calculator" class="text-sm text-gray-400 hover:text-white transition-colors">Time card calculator</a></li>
|
|
<li><a href="/hourly-rate-calculator" class="text-sm text-gray-400 hover:text-white transition-colors">Hourly rate calculator</a></li>
|
|
<li><a href="/overtime-pay-calculators" class="text-sm text-gray-400 hover:text-white transition-colors">Overtime pay calculator</a></li>
|
|
<li><a href="/labor-based-pricing-cost-calculator" class="text-sm text-gray-400 hover:text-white transition-colors">Labor pricing calculator</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-semibold mb-4 text-white">Support</h3>
|
|
<ul class="space-y-2.5">
|
|
<li><a href="/help/" class="text-sm text-gray-400 hover:text-white transition-colors">Help center</a></li>
|
|
<li><a href="/help/contact" class="text-sm text-gray-400 hover:text-white transition-colors">Contact</a></li>
|
|
<li><a href="https://app.clockify.me/?feedback" class="text-sm text-gray-400 hover:text-white transition-colors">Feedback</a></li>
|
|
<li><a href="https://status.clockify.me" class="text-sm text-gray-400 hover:text-white transition-colors">System status</a></li>
|
|
<li><a href="https://forum.clockify.me/" class="text-sm text-gray-400 hover:text-white transition-colors">Community</a></li>
|
|
<li><a href="mailto:support@clockify.me" class="text-sm text-gray-400 hover:text-white transition-colors">support@clockify.me</a></li>
|
|
<li><a href="tel:+1-855-738-8741" class="text-sm text-gray-400 hover:text-white transition-colors">+1-855-738-8741</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Download apps -->
|
|
<div class="mb-12 pb-12 border-b border-gray-800">
|
|
<h3 class="text-sm font-semibold mb-4 text-white">Download apps</h3>
|
|
<div class="flex flex-wrap gap-4">
|
|
<a href="/iphone-time-tracking">
|
|
<img src="/assets/images/apps/store-ios.svg" alt="iOS" class="h-8 w-auto" />
|
|
</a>
|
|
<a href="/android-time-tracking">
|
|
<img src="/assets/images/apps/store-android.svg" alt="Android" class="h-8 w-auto" />
|
|
</a>
|
|
<a href="/mac-time-tracking">
|
|
<img src="/assets/images/apps/get-mac.svg" alt="MacOS" class="h-8 w-auto" />
|
|
</a>
|
|
<a href="/windows-time-tracking">
|
|
<img src="/assets/images/apps/get-windows.svg" alt="Windows" class="h-8 w-auto" />
|
|
</a>
|
|
<a href="/linux-time-tracking">
|
|
<img src="/assets/images/apps/get-linux.svg" alt="Linux" class="h-8 w-auto" />
|
|
</a>
|
|
<a href="/firefox-time-tracking">
|
|
<img src="/assets/images/apps/get-firefox.svg" alt="Firefox" class="h-8 w-auto" />
|
|
</a>
|
|
<a href="/edge-time-tracking">
|
|
<img src="/assets/images/apps/get-edge.svg" alt="Edge" class="h-8 w-auto" />
|
|
</a>
|
|
<a href="/chrome-time-tracking">
|
|
<img src="/assets/images/apps/store-chrome.svg" alt="Chrome" class="h-8 w-auto" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Social & bottom -->
|
|
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
<div class="flex flex-col items-center md:items-start gap-4">
|
|
<div class="flex items-center gap-6">
|
|
<a href="https://www.facebook.com/clockify.me" class="text-gray-400 hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
|
|
</a>
|
|
<a href="https://www.linkedin.com/company/clockify" class="text-gray-400 hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
|
</a>
|
|
<a href="https://x.com/Clockify" class="text-gray-400 hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
|
</a>
|
|
<a href="https://www.youtube.com/clockify" class="text-gray-400 hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
|
|
</a>
|
|
<a href="https://www.instagram.com/clockify.me/" class="text-gray-400 hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
|
|
</a>
|
|
</div>
|
|
<div class="flex items-center gap-3 text-xs text-gray-500">
|
|
<a href="https://cake.com/security" class="flex items-center gap-1">
|
|
<img src="/assets/images/footer/iso.svg" alt="ISO" class="h-5 w-auto" />
|
|
</a>
|
|
<a href="https://cake.com/security" class="flex items-center gap-1">
|
|
<img src="/assets/images/footer/soc2.svg" alt="SOC2" class="h-5 w-auto" />
|
|
</a>
|
|
<a href="https://cake.com/security" class="flex items-center gap-1">
|
|
<img src="/assets/images/footer/gdpr.svg" alt="GDPR" class="h-5 w-auto" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="text-center md:text-right">
|
|
<p class="text-xs text-gray-500">© Clockify by CAKE.com Inc.</p>
|
|
<div class="flex flex-wrap justify-center md:justify-end gap-x-4 gap-y-1 mt-2 text-xs text-gray-500">
|
|
<a href="https://cake.com/cookies" class="hover:text-white transition-colors">Cookies</a>
|
|
<a href="https://cake.com/terms" class="hover:text-white transition-colors">Terms</a>
|
|
<a href="https://cake.com/privacy" class="hover:text-white transition-colors">Privacy</a>
|
|
<a href="https://cake.com/security" class="hover:text-white transition-colors">Security</a>
|
|
<a href="/sitemap" class="hover:text-white transition-colors">Sitemap</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Other products -->
|
|
<div class="mt-12 pt-12 border-t border-gray-800">
|
|
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
<div>
|
|
<h4 class="text-sm font-semibold mb-2 text-white">Productivity software suite</h4>
|
|
<p class="text-xs text-gray-500">
|
|
<a href="https://cake.com/suite" class="hover:text-white transition-colors">Suite</a>
|
|
·
|
|
<a href="https://cake.com/bundle" class="hover:text-white transition-colors">Bundle</a>
|
|
·
|
|
<a href="https://cake.com/updates/" class="hover:text-white transition-colors">Updates</a>
|
|
·
|
|
<a href="https://marketplace.cake.com/" class="hover:text-white transition-colors">Marketplace</a>
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-8">
|
|
<a href="https://pumble.com/" class="flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
|
|
<img src="/assets/images/footer/pumble-logo.svg" alt="Pumble" class="h-6 w-auto" />
|
|
<span class="text-sm">Team communication</span>
|
|
</a>
|
|
<a href="https://plaky.com/" class="flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
|
|
<img src="/assets/images/footer/plaky-logo.svg" alt="Plaky" class="h-6 w-auto" />
|
|
<span class="text-sm">Project management</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.font-sans {
|
|
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
</style>
|