89da4fdcc1
Prompt: update homepage to look exactly like this: https://clockify.me/ I want everything copied, I will update what I need and don't need later, I need this to look like 1:1 copy Stats: Context: 85,890 tokens Time: 36m 25s
1141 lines
68 KiB
Vue
1141 lines
68 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: 'https://clockify.me/assets/images/home-main-features/main-feature-timekeeping.png', link: '/timekeeping' },
|
|
{ name: 'Budgeting', image: 'https://clockify.me/assets/images/home-main-features/main-feature-budgeting.png', link: '/budgeting' },
|
|
{ name: 'Planning', image: 'https://clockify.me/assets/images/home-main-features/main-feature-planning.png', link: '/planning' },
|
|
{ name: 'Attendance', image: 'https://clockify.me/assets/images/home-main-features/main-feature-attendance.png', link: '/attendance' },
|
|
{ name: 'Reporting', image: 'https://clockify.me/assets/images/home-main-features/main-feature-reporting.png', link: '/reporting' },
|
|
{ name: 'Payroll', image: 'https://clockify.me/assets/images/home-main-features/main-feature-payroll.png', link: '/payroll' },
|
|
];
|
|
|
|
const featureTabs = [
|
|
{ name: 'Timer', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-timer.png', duration: '7:46' },
|
|
{ name: 'Timesheet', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-timesheet.png', duration: '3:35' },
|
|
{ name: 'Calendar', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-calendar.png', duration: '3:16' },
|
|
{ name: 'Auto tracker', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-auto-tracker-2.png', duration: '2:57' },
|
|
{ name: 'Kiosk', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-kiosk.png', duration: '5:21' },
|
|
{ name: 'Reports', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-reports.png', duration: '6:58' },
|
|
{ name: 'Activity', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-activity.png', duration: '5:44' },
|
|
{ name: 'Rates', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-rates.png', duration: '5:50' },
|
|
{ name: 'Projects', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-projects.png', duration: '4:08' },
|
|
{ name: 'Location', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-location.png', duration: '2:09' },
|
|
{ name: 'Scheduling', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-scheduling.png', duration: '4:19' },
|
|
{ name: 'Time off', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-time-off.png', duration: '6:47' },
|
|
{ name: 'Approval', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-approval.png', duration: '6:07' },
|
|
{ name: 'Invoicing', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-invoicing.png', duration: '5:15' },
|
|
{ name: 'Expenses', image: 'https://clockify.me/assets/images/home-features-tabs-images/video-cover-expenses.png', duration: '3:15' },
|
|
{ name: 'Team', image: 'https://clockify.me/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: 'https://clockify.me/assets/images/home-features-icons/icon-timer.svg', link: '/features/timer' },
|
|
{ name: 'Timesheet', desc: 'Enter time in a weekly timesheet.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-timesheet.svg', link: '/features/timesheet' },
|
|
{ name: 'Calendar', desc: 'Visually block out and manage time.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-calendar.svg', link: '/features/calendar' },
|
|
{ name: 'Auto tracker', desc: 'Track apps and websites you use.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-map-locate.svg', link: '/features/auto-tracker' },
|
|
{ name: 'Kiosk', desc: 'Clock in from a shared device.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-kiosk.svg', link: '/features/kiosk' },
|
|
];
|
|
|
|
const timekeepingImages = [
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-timer.png',
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-timesheet.png',
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-calendar.png',
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-auto-tracker.png',
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-kiosk.png',
|
|
];
|
|
|
|
const reportingFeatures = [
|
|
{ name: 'Reports', desc: 'Analyze and export tracked time.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-reports.svg', link: '/features/reports' },
|
|
{ name: 'Activity', desc: 'See who works on what.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-activity.svg', link: '/features/activity' },
|
|
{ name: 'Rates', desc: 'See earnings, cost, and profit.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-rates.svg', link: '/features/rates' },
|
|
{ name: 'Projects', desc: 'Track project estimates and budget.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-projects.svg', link: '/features/projects' },
|
|
{ name: 'Location', desc: 'See visited sites and routes.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-location.svg', link: '/features/location' },
|
|
];
|
|
|
|
const reportingImages = [
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-reports.png',
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-activity.png',
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-rates.png',
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-projects.png',
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-location.png',
|
|
];
|
|
|
|
const managementFeatures = [
|
|
{ name: 'Scheduling', desc: 'Schedule work, assignments, and shifts.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-scheduling.svg', link: '/features/scheduling' },
|
|
{ name: 'Time off', desc: 'Manage leaves and holidays.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-time-off.svg', link: '/features/time-off' },
|
|
{ name: 'Approval', desc: 'Submit and approve timesheets.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-approval.svg', link: '/features/approval' },
|
|
{ name: 'Invoicing', desc: 'Create invoices from billable time.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-invoicing.svg', link: '/features/invoicing' },
|
|
{ name: 'Expenses', desc: 'Record project expenses and fees.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-expenses.svg', link: '/features/expenses' },
|
|
{ name: 'Team', desc: 'Manage team members and roles.', icon: 'https://clockify.me/assets/images/home-features-icons/icon-team.svg', link: '/features/team' },
|
|
];
|
|
|
|
const managementImages = [
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-scheduling.png',
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-time-off.png',
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-approval.png',
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-invoicing.png',
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-expenses.png',
|
|
'https://clockify.me/assets/images/home-features-tabs-images/time-menagement-team.png',
|
|
];
|
|
|
|
const companyLogos = [
|
|
'https://clockify.me/assets/images/companies/hewlett-packard.svg',
|
|
'https://clockify.me/assets/images/companies/verizon.svg',
|
|
'https://clockify.me/assets/images/companies/american-express.svg',
|
|
'https://clockify.me/assets/images/companies/simens.svg',
|
|
'https://clockify.me/assets/images/companies/cisco.svg',
|
|
'https://clockify.me/assets/images/companies/fujifilm.svg',
|
|
'https://clockify.me/assets/images/companies/kmart.svg',
|
|
'https://clockify.me/assets/images/companies/asics.svg',
|
|
'https://clockify.me/assets/images/companies/ucla.svg',
|
|
'https://clockify.me/assets/images/companies/dominos.svg',
|
|
'https://clockify.me/assets/images/companies/douglas.svg',
|
|
'https://clockify.me/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="preconnect" href="https://rsms.me/" />
|
|
<link rel="stylesheet" href="https://rsms.me/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="https://clockify.me/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="https://clockify.me/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="https://clockify.me/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="https://clockify.me/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="https://clockify.me/assets/images/review-site-capterra-gray.svg" alt="Capterra" class="h-8 w-auto" />
|
|
<img src="https://clockify.me/assets/images/review-site-software-advice-gray.svg" alt="Software Advice" class="h-8 w-auto" />
|
|
<img src="https://clockify.me/assets/images/review-site-g2-crowd-gray.svg" alt="G2 Crowd" class="h-8 w-auto" />
|
|
<img src="https://clockify.me/assets/images/review-site-crozdesk-gray.svg" alt="Crozdesk" class="h-8 w-auto" />
|
|
<img src="https://clockify.me/assets/images/review-site-trust-radius-gray.svg" alt="Trust Radius" class="h-8 w-auto" />
|
|
<img src="https://clockify.me/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="https://clockify.me/assets/images/source-forge.png" alt="SourceForge Award" class="h-12 w-auto" />
|
|
<img src="https://clockify.me/assets/images/source-forge-customer-love-us.png" alt="SourceForge Customers Love Us" class="h-12 w-auto" />
|
|
<img src="https://clockify.me/assets/images/source-forge-customers-love-us-heart.png" alt="SourceForge Heart" class="h-12 w-auto" />
|
|
<img src="https://clockify.me/assets/images/source-forge-spring-2025.png" alt="SourceForge Spring 2025" class="h-12 w-auto" />
|
|
<img src="https://clockify.me/assets/images/award-capterra.png" alt="Capterra Award" class="h-12 w-auto" />
|
|
<img src="https://clockify.me/assets/images/award-software-advice.png" alt="Software Advice Award" class="h-12 w-auto" />
|
|
<img src="https://clockify.me/assets/images/award-leader.png" alt="Leader Award" class="h-12 w-auto" />
|
|
<img src="https://clockify.me/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="https://clockify.me/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="https://clockify.me/assets/images/apps/get-mac.svg" alt="Get Clockify for Mac" class="h-12 w-auto" />
|
|
</a>
|
|
<a href="/windows-time-tracking">
|
|
<img src="https://clockify.me/assets/images/apps/get-windows.svg" alt="Get Clockify for Windows" class="h-12 w-auto" />
|
|
</a>
|
|
<a href="/linux-time-tracking">
|
|
<img src="https://clockify.me/assets/images/apps/get-linux.svg" alt="Get Clockify for Linux" class="h-12 w-auto" />
|
|
</a>
|
|
</div>
|
|
<img
|
|
src="https://clockify.me/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="https://clockify.me/assets/images/apps/store-chrome.svg" alt="Get Clockify for Chrome" class="h-12 w-auto" />
|
|
</a>
|
|
<a href="/firefox-time-tracking">
|
|
<img src="https://clockify.me/assets/images/apps/get-firefox.svg" alt="Get Clockify for Firefox" class="h-12 w-auto" />
|
|
</a>
|
|
<a href="/edge-time-tracking">
|
|
<img src="https://clockify.me/assets/images/apps/get-edge.svg" alt="Get Clockify for Edge" class="h-12 w-auto" />
|
|
</a>
|
|
</div>
|
|
<img
|
|
src="https://clockify.me/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="https://clockify.me/assets/images/apps/store-ios.svg" alt="Get Clockify for iPhone" class="h-12 w-auto" />
|
|
</a>
|
|
<a href="/android-time-tracking">
|
|
<img src="https://clockify.me/assets/images/apps/store-android.svg" alt="Get Clockify for Android" class="h-12 w-auto" />
|
|
</a>
|
|
</div>
|
|
<img
|
|
src="https://clockify.me/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="https://clockify.me/assets/images/footer/kiosk.svg" alt="Get for Any device" class="h-12 w-auto" />
|
|
</a>
|
|
</div>
|
|
<img
|
|
src="https://clockify.me/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="https://clockify.me/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="https://clockify.me/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="https://clockify.me/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="https://clockify.me/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="https://clockify.me/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="https://clockify.me/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="https://clockify.me/assets/images/apps/store-ios.svg" alt="iOS" class="h-8 w-auto" />
|
|
</a>
|
|
<a href="/android-time-tracking">
|
|
<img src="https://clockify.me/assets/images/apps/store-android.svg" alt="Android" class="h-8 w-auto" />
|
|
</a>
|
|
<a href="/mac-time-tracking">
|
|
<img src="https://clockify.me/assets/images/apps/get-mac.svg" alt="MacOS" class="h-8 w-auto" />
|
|
</a>
|
|
<a href="/windows-time-tracking">
|
|
<img src="https://clockify.me/assets/images/apps/get-windows.svg" alt="Windows" class="h-8 w-auto" />
|
|
</a>
|
|
<a href="/linux-time-tracking">
|
|
<img src="https://clockify.me/assets/images/apps/get-linux.svg" alt="Linux" class="h-8 w-auto" />
|
|
</a>
|
|
<a href="/firefox-time-tracking">
|
|
<img src="https://clockify.me/assets/images/apps/get-firefox.svg" alt="Firefox" class="h-8 w-auto" />
|
|
</a>
|
|
<a href="/edge-time-tracking">
|
|
<img src="https://clockify.me/assets/images/apps/get-edge.svg" alt="Edge" class="h-8 w-auto" />
|
|
</a>
|
|
<a href="/chrome-time-tracking">
|
|
<img src="https://clockify.me/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="https://clockify.me/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="https://clockify.me/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="https://clockify.me/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="https://clockify.me/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="https://clockify.me/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>
|