ourworld_web/www_circl
20
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add discount

Browse Source
This commit is contained in:
sasha-astiadi 2025-05-07 15:35:39 +02:00
parent 629ad976cb
commit a9a0ea8211
52 changed files with 1987 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
dist/output.css vendored
View File

@ -1,7 +1,7 @@
@font-face {
font-family: 'Open Sauce';
src: url('/src/fonts/OpenSauceOne-Regular.ttf') format('truetype');
src: url('/fonts/OpenSauceOne-Regular.ttf') format('truetype');
font-weight: 400;
@ -11,7 +11,7 @@
@font-face {
font-family: 'Open Sauce';
src: url('/src/fonts/OpenSauceOne-Light.ttf') format('truetype');
src: url('/fonts/OpenSauceOne-Light.ttf') format('truetype');
font-weight: 300;
@ -21,7 +21,7 @@
@font-face {
font-family: 'Open Sauce';
src: url('/src/fonts/OpenSauceOne-Medium.ttf') format('truetype');
src: url('/fonts/OpenSauceOne-Medium.ttf') format('truetype');
font-weight: 500;
@ -31,7 +31,7 @@
@font-face {
font-family: 'Open Sauce';
src: url('/src/fonts/OpenSauceOne-Bold.ttf') format('truetype');
src: url('/fonts/OpenSauceOne-Bold.ttf') format('truetype');
font-weight: 700;
@ -1642,35 +1642,44 @@ body:is(.dark *) {
.toggle-switch {
position: relative;
display: inline-flex;
height: 40px;
width: 240px;
cursor: pointer;
border-radius: 9999px;
background-color: rgb(0 0 0 / 0.3);
padding: 0.25rem;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
background-color: rgb(31 41 55 / 0.5);
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.toggle-switch[data-state="checked"] {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.toggle-switch-thumb {
height: 1.5rem;
width: 120px;
position: absolute;
top: 2px;
left: 2px;
height: 36px;
width: 118px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.toggle-switch[data-state="checked"] .toggle-switch-thumb {
transform: translateX(100%);
transform: translateX(118px);
}
.toggle-switch-label {
@ -1679,8 +1688,8 @@ body:is(.dark *) {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 1rem;
padding-right: 1rem;
padding-left: 2rem;
padding-right: 2rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
@ -1688,8 +1697,6 @@ body:is(.dark *) {
.toggle-switch-label span {
z-index: 10;
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
@ -1697,12 +1704,24 @@ body:is(.dark *) {
.toggle-switch[data-state="checked"] .toggle-switch-label span:first-child {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.toggle-switch[data-state="checked"] .toggle-switch-label span:last-child {
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.toggle-switch[data-state="unchecked"] .toggle-switch-label span:first-child {
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.toggle-switch[data-state="unchecked"] .toggle-switch-label span:last-child {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.hover\:scale-105:hover {

6
package.json
View File

@ -3,9 +3,9 @@
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "tailwindcss -i ./src/input.css -o ./dist/output.css",
"watch": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
"serve": "http-server . -p 3000 -c-1",
"build": "tailwindcss -i ./src/input.css -o ./src/output.css",
"watch": "tailwindcss -i ./src/input.css -o ./src/output.css --watch",
"serve": "http-server src -p 3000 -c-1",
"dev": "npm run build && (npm run watch & npm run serve)"
},
"repository": {

1
src/Open Sauce One OFL.txt Symbolic link
View File

@ -0,0 +1 @@
fonts/Open Sauce One OFL.txt

1
src/Open Sauce Sans OFL.txt Symbolic link
View File

@ -0,0 +1 @@
fonts/Open Sauce Sans OFL.txt

1
src/Open Sauce Two OFL.txt Symbolic link
View File

@ -0,0 +1 @@
fonts/Open Sauce Two OFL.txt

1
src/OpenSauceOne-Black.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceOne-Black.ttf

1
src/OpenSauceOne-BlackItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceOne-BlackItalic.ttf

1
src/OpenSauceOne-Bold.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceOne-Bold.ttf

1
src/OpenSauceOne-BoldItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceOne-BoldItalic.ttf

1
src/OpenSauceOne-ExtraBold.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceOne-ExtraBold.ttf

1
src/OpenSauceOne-ExtraBoldItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceOne-ExtraBoldItalic.ttf

1
src/OpenSauceOne-Italic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceOne-Italic.ttf

1
src/OpenSauceOne-Light.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceOne-Light.ttf

1
src/OpenSauceOne-LightItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceOne-LightItalic.ttf

1
src/OpenSauceOne-Medium.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceOne-Medium.ttf

1
src/OpenSauceOne-MediumItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceOne-MediumItalic.ttf

1
src/OpenSauceOne-Regular.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceOne-Regular.ttf

1
src/OpenSauceOne-SemiBold.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceOne-SemiBold.ttf

1
src/OpenSauceOne-SemiBoldItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceOne-SemiBoldItalic.ttf

1
src/OpenSauceSans-Black.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceSans-Black.ttf

1
src/OpenSauceSans-BlackItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceSans-BlackItalic.ttf

1
src/OpenSauceSans-Bold.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceSans-Bold.ttf

1
src/OpenSauceSans-BoldItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceSans-BoldItalic.ttf

1
src/OpenSauceSans-ExtraBold.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceSans-ExtraBold.ttf

1
src/OpenSauceSans-ExtraBoldItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceSans-ExtraBoldItalic.ttf

1
src/OpenSauceSans-Italic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceSans-Italic.ttf

1
src/OpenSauceSans-Light.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceSans-Light.ttf

1
src/OpenSauceSans-LightItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceSans-LightItalic.ttf

1
src/OpenSauceSans-Medium.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceSans-Medium.ttf

1
src/OpenSauceSans-MediumItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceSans-MediumItalic.ttf

1
src/OpenSauceSans-Regular.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceSans-Regular.ttf

1
src/OpenSauceSans-SemiBold.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceSans-SemiBold.ttf

1
src/OpenSauceSans-SemiBoldItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceSans-SemiBoldItalic.ttf

1
src/OpenSauceTwo-Black.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceTwo-Black.ttf

1
src/OpenSauceTwo-BlackItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceTwo-BlackItalic.ttf

1
src/OpenSauceTwo-Bold.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceTwo-Bold.ttf

1
src/OpenSauceTwo-BoldItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceTwo-BoldItalic.ttf

1
src/OpenSauceTwo-ExtraBold.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceTwo-ExtraBold.ttf

1
src/OpenSauceTwo-ExtraBoldItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceTwo-ExtraBoldItalic.ttf

1
src/OpenSauceTwo-Italic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceTwo-Italic.ttf

1
src/OpenSauceTwo-Light.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceTwo-Light.ttf

1
src/OpenSauceTwo-LightItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceTwo-LightItalic.ttf

1
src/OpenSauceTwo-Medium.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceTwo-Medium.ttf

1
src/OpenSauceTwo-MediumItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceTwo-MediumItalic.ttf

1
src/OpenSauceTwo-Regular.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceTwo-Regular.ttf

1
src/OpenSauceTwo-SemiBold.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceTwo-SemiBold.ttf

1
src/OpenSauceTwo-SemiBoldItalic.ttf Symbolic link
View File

@ -0,0 +1 @@
fonts/OpenSauceTwo-SemiBoldItalic.ttf

1
src/circle.png Symbolic link
View File

@ -0,0 +1 @@
fonts/circle.png

78
src/index.html
View File

@ -4,20 +4,20 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Tailwind Website</title>
<link href="../dist/output.css" rel="stylesheet">
<link href="/output.css" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="16x16" href="../src/assets/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="../src/assets/favicon/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="../src/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="../src/assets/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="../src/assets/favicon/android-chrome-512x512.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/assets/favicon/android-chrome-512x512.png">
</head>
<body class="min-h-screen bg-black">
<div class="container mx-auto px-4 py-8">
<nav class="flex items-center justify-between mb-8">
<div class="flex items-center">
<img src="../src/assets/logos/logo_lightmode2.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
<img src="/assets/logos/logo_lightmode2.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
</div>
<ul class="flex space-x-6 text-white">
<li><a href="index.html" class="hover:text-gray-300">Home</a></li>
@ -28,7 +28,7 @@
</nav>
<!-- Home Section 1 -->
<header class="mb-12 relative min-h-[500px] flex items-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg.webp');">
<header class="mb-12 relative min-h-[500px] flex items-center bg-cover bg-center" style="background-image: url('/home/img/backgrounds/home_bg.webp');">
<div class="absolute inset-0 bg-black bg-opacity-30"></div>
<div class="relative z-10 w-full py-48">
<div class="container mx-auto px-4 mb-4">
@ -46,10 +46,10 @@
<main>
<!-- Home Section 2 -->
<div class="container mx-auto px-4">
<section class="grid grid-cols-1 md:grid-cols-2 gap-8 relative min-h-[400px] bg-cover bg-center mb-12" style="background-image: url('../src/home/img/backgrounds/home_bg2.webp');">
<section class="grid grid-cols-1 md:grid-cols-2 gap-8 relative min-h-[400px] bg-cover bg-center mb-12" style="background-image: url('/home/img/backgrounds/home_bg2.webp');">
<div class="absolute inset-0 bg-black bg-opacity-0"></div>
<div class="relative z-10 flex items-center justify-center">
<img src="../src/home/img/homescreen.webp" alt="Homescreen" class="w-full h-auto rounded-lg shadow-xl fade-up">
<img src="/home/img/homescreen.webp" alt="Homescreen" class="w-full h-auto rounded-lg shadow-xl fade-up">
</div>
<div class="relative z-10 flex flex-col justify-center">
<h1 class="hero-heading-2 text-left fade-up delay-200">Replace the chaos of multiple tools with one collaborative system — shared workspaces for teams, projects, and even your personal life.</h1>
@ -63,16 +63,16 @@
<div class="carousel relative w-full h-[600px]">
<div class="carousel-slides absolute inset-0">
<div class="carousel-slide absolute inset-0 opacity-95 transition-opacity duration-1000">
<img src="../src/home/img/carousell/own2.webp" alt="Data" class="w-full h-[600px] object-cover">
<img src="/home/img/carousell/own2.webp" alt="Data" class="w-full h-[600px] object-cover">
</div>
<div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
<img src="../src/home/img/carousell/human2.webp" alt="Human" class="w-full h-[600px] object-cover">
<img src="/home/img/carousell/human2.webp" alt="Human" class="w-full h-[600px] object-cover">
</div>
<div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
<img src="../src/home/img/carousell/one2.webp" alt="One" class="w-full h-[600px] object-cover">
<img src="/home/img/carousell/one2.webp" alt="One" class="w-full h-[600px] object-cover">
</div>
<div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
<img src="../src/home/img/carousell/WEB42.webp" alt="Web4" class="w-full h-[600px] object-cover">
<img src="/home/img/carousell/WEB42.webp" alt="Web4" class="w-full h-[600px] object-cover">
</div>
</div>
<div class="absolute inset-0 bg-black bg-opacity-50 z-10"></div>
@ -102,7 +102,7 @@
</section>
<!-- Home Section 4 (Responsive) -->
<section class="relative w-screen min-h-[800px] py-12 overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg41.webp');">
<section class="relative w-screen min-h-[800px] py-12 overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('/home/img/backgrounds/home_bg41.webp');">
<div class="absolute inset-0 bg-gradient-to-b from-black/80 via-black/70 to-black/80"></div>
<!-- Desktop Layout -->
@ -173,7 +173,7 @@
</section>
<!-- Home Section 7 -->
<section class="lg:pt-12 relative w-screen min-h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg71.webp');">
<section class="lg:pt-12 relative w-screen min-h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('/home/img/backgrounds/home_bg71.webp');">
<div class="absolute inset-0 bg-gradient-to-r from-black/20 via-black/10 to-transparent"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="flex flex-col items-center text-center max-w-4xl mx-auto">
@ -181,7 +181,7 @@
<h2 class="hero-heading-2 mb-6">Your Private World<br>Organized and Alive.</h2>
<a href="#" class="hero-paragraph hover:text-white transition-colors mb-12">→ <u>Learn More</u></a>
<div class="w-full fade-up">
<img src="../src/home/img/creators2.png" alt="Creators Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
<img src="/home/img/creators2.png" alt="Creators Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
</div>
</div>
</div>
@ -189,7 +189,7 @@
<!-- Home Section 6 -->
<section class="relative w-screen min-h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg61.webp');">
<section class="relative w-screen min-h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('/home/img/backgrounds/home_bg61.webp');">
<div class="absolute inset-0 bg-gradient-to-r from-black/20 via-black/10 to-transparent"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
@ -199,14 +199,14 @@
<a href="#" class="hero-paragraph hover:text-white transition-colors">→ <u>Learn More</u></a>
</div>
<div class="relative fade-up delay-200">
<img src="../src/home/img/chat.png" alt="Chat Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
<img src="/home/img/chat.png" alt="Chat Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
</div>
</div>
</div>
</section>
<!-- Home Section 8 -->
<section class="py-24 relative w-screen min-h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg8.webp');">
<section class="py-24 relative w-screen min-h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('/home/img/backgrounds/home_bg8.webp');">
<div class="absolute inset-0 bg-black bg-opacity-30"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="flex flex-col items-center text-center max-w-3xl mx-auto">
@ -214,7 +214,7 @@
<h2 class="hero-heading-2 mb-6">Lead, Plan, and Make Things Happen.</h2>
<a href="#" class="hero-paragraph hover:text-white transition-colors mb-12">→ <u>Learn More</u></a>
<div class="w-full fade-up">
<img src="../src/home/img/circle.png" alt="Creators Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
<img src="/home/img/circle.png" alt="Creators Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
</div>
</div>
</div>
@ -247,7 +247,7 @@
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-white">$7.99</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-300">/ user / month</span>
<span class="text-sm/6 font-semibold text-gray-300">/ user</span>
</p>
<a href="#" aria-describedby="tier-freelancer" class="mt-6 block rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
@ -293,7 +293,7 @@
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-white">$12.99</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-300">/ user / month</span>
<span class="text-sm/6 font-semibold text-gray-300">/ user</span>
</p>
<a href="#" aria-describedby="tier-startup" class="mt-6 block rounded-md bg-gray-500 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
@ -338,7 +338,7 @@
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-white">$24.99</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-300">/ user / month</span>
<span class="text-sm/6 font-semibold text-gray-300">/ user</span>
</p>
<a href="#" aria-describedby="tier-enterprise" class="mt-6 block rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
@ -411,18 +411,24 @@
const frequencyElements = document.querySelectorAll('.pricing-card [class*="text-sm"]');
billingToggle.addEventListener('click', () => {
const isAnnual = billingToggle.getAttribute('data-state') === 'checked';
billingToggle.setAttribute('data-state', isAnnual ? 'unchecked' : 'checked');
const currentState = billingToggle.getAttribute('data-state');
const isChangingToAnnual = currentState === 'unchecked';
billingToggle.setAttribute('data-state', isChangingToAnnual ? 'checked' : 'unchecked');
const frequency = isAnnual ? 'year' : 'month';
const prices = isAnnual ? {
teams: '$71.88', // $5.99 * 12
companies: '$131.88', // $10.99 * 12
businesses: '$251.88' // $20.99 * 12
const monthlyPrices = {
teams: 7.99,
companies: 12.99,
businesses: 24.99
};
const prices = isChangingToAnnual ? {
teams: `$${(monthlyPrices.teams * 12 * 0.8).toFixed(2)}`,
companies: `$${(monthlyPrices.companies * 12 * 0.8).toFixed(2)}`,
businesses: `$${(monthlyPrices.businesses * 12 * 0.8).toFixed(2)}`
} : {
teams: '$7.99',
companies: '$12.99',
businesses: '$24.99'
teams: `$${monthlyPrices.teams.toFixed(2)}`,
companies: `$${monthlyPrices.companies.toFixed(2)}`,
businesses: `$${monthlyPrices.businesses.toFixed(2)}`
};
// Update prices and frequency text using parent elements
@ -435,10 +441,10 @@
// Update each card's price and frequency
Object.entries(cards).forEach(([type, card]) => {
const priceElement = card.querySelector('.text-4xl');
const frequencyElement = card.querySelector('.text-sm\\/6');
const frequencyElement = card.querySelector('.text-sm\\/6.font-semibold.text-gray-300');
priceElement.textContent = prices[type];
frequencyElement.textContent = `/ user / ${frequency}`;
frequencyElement.textContent = '/ user';
});
});

33
src/input.css
View File

@ -1,27 +1,27 @@
@font-face {
font-family: 'Open Sauce';
src: url('/src/fonts/OpenSauceOne-Regular.ttf') format('truetype');
src: url('/fonts/OpenSauceOne-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Open Sauce';
src: url('/src/fonts/OpenSauceOne-Light.ttf') format('truetype');
src: url('/fonts/OpenSauceOne-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Open Sauce';
src: url('/src/fonts/OpenSauceOne-Medium.ttf') format('truetype');
src: url('/fonts/OpenSauceOne-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Open Sauce';
src: url('/src/fonts/OpenSauceOne-Bold.ttf') format('truetype');
src: url('/fonts/OpenSauceOne-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@ -214,35 +214,42 @@
}
.toggle-switch {
@apply relative inline-flex cursor-pointer rounded-full p-1 bg-black/30 transition-colors duration-300;
border: 1px solid rgba(255, 255, 255, 0.1);
@apply relative inline-flex cursor-pointer rounded-full bg-gray-800/50 transition-all duration-300 w-[240px] h-[40px] border border-gray-700;
}
.toggle-switch[data-state="checked"] {
@apply bg-gray-500;
@apply bg-gray-700;
}
.toggle-switch-thumb {
@apply h-6 w-[120px] rounded-full bg-white transition-transform duration-300 transform;
@apply absolute top-[2px] left-[2px] h-[36px] w-[118px] rounded-full bg-white transition-transform duration-300 transform shadow-lg;
}
.toggle-switch[data-state="checked"] .toggle-switch-thumb {
transform: translateX(100%);
transform: translateX(118px);
}
.toggle-switch-label {
@apply absolute inset-0 flex items-center justify-between px-4 text-sm font-medium;
@apply absolute inset-0 flex items-center justify-between px-8 text-sm font-medium;
}
.toggle-switch-label span {
@apply z-10 text-black transition-colors duration-300;
@apply z-10 transition-colors duration-300;
}
.toggle-switch[data-state="checked"] .toggle-switch-label span:first-child {
@apply text-white;
@apply text-gray-400;
}
.toggle-switch[data-state="checked"] .toggle-switch-label span:last-child {
@apply text-black font-semibold;
}
.toggle-switch[data-state="unchecked"] .toggle-switch-label span:first-child {
@apply text-black font-semibold;
}
.toggle-switch[data-state="unchecked"] .toggle-switch-label span:last-child {
@apply text-white;
@apply text-gray-400;
}
}

1
src/open-sauce.zip Symbolic link
View File

@ -0,0 +1 @@
fonts/open-sauce.zip

1838
src/output.css Normal file
View File

File diff suppressed because it is too large Load Diff