mikhail_lanskikh/graff.training
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixed teaching, refactoring

Browse Source
This commit is contained in:
Lanskikh
2024-07-16 15:59:08 +05:00
parent f7eead0b3f
commit 41e512a85f
15 changed files with 43 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Layout/Navbar.tsx
+1 -1
View File
@@ -140,7 +140,7 @@ function LangToggler({ lang }: { lang: Lang }) {
return (
<div
ref={langTogglerRef}
className="min-w-[101px] mobile:max-[1349px]:hidden box-border border-r border-[#3D425C]"
className="min-w-[101px] mobile:max-[1349px]:hidden box-border border-r border-[#3D425C] hover:bg-[#3D425C] active:bg-[#14161F]"
>
<button
onClick={() => setOpen(prev => !prev)}
src/components/Main/Availables.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export function Availables() {
</div>
<AppearanceHr className=" mb-6" />
<AppearanceText
className="tablet-figma:max-w-[668px] desktop-figma:max-w-[39.25vw]"
className="md:max-w-[668px] desktop-figma:max-w-[39.25vw]"
splits={[
'В одном ',
'цифровом ',
src/components/Main/Contacts.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ export function Contacts() {
</Link>
</div>
</div>
<div className="flex flex-col gap-y-4 sm:max-lg:justify-between tablet-figma:max-lg:min-w-[332px] sm:max-tablet-figma:min-w-[250px]">
<div className="flex flex-col gap-y-4 sm:max-lg:justify-between md:max-lg:min-w-[332px] sm:max-md:min-w-[250px]">
<p className="font-semibold text-[#ffffff] l-text">Социальные сети</p>
<div className="flex gap-x-2">
<Link
src/components/Main/Decreasing.tsx
+2 -2
View File
@@ -22,7 +22,7 @@ export function Decreasing() {
сократить затраты на обучение, повысить безопасность и
производительность
</Title>
<div className="flex tablet-figma:flex-row mobile:max-tablet-figma:flex-col justify-normal desktop-figma:gap-x-[10vw] tablet-figma:max-desktop-figma:gap-x-[clamp(16px,16px+(100vw-1024px)/576*142,160px)] desktop-figma:max-w-[calc(70.8vw+256px)] desktop-figma:justify-between sm:items-end xl:pl-64 desktop-figma:mt-[77px] lg:mt-14 mobile:mt-6">
<div className="flex md:flex-row mobile:max-md:flex-col justify-normal desktop-figma:gap-x-[10vw] md:max-desktop-figma:gap-x-[clamp(16px,16px+(100vw-1024px)/576*142,160px)] desktop-figma:max-w-[calc(70.8vw+256px)] desktop-figma:justify-between sm:items-end xl:pl-64 desktop-figma:mt-[77px] lg:mt-14 mobile:mt-6">
<ul className="xl:max-w-[47vw] w-full sm:min-w-[318px] mobile:mb-6">
<AppearanceHr />
<li className="flex justify-between py-5 gap-x-4">
@@ -52,7 +52,7 @@ export function Decreasing() {
</ul>
<img
src="src/assets/effect.png"
className="mobile:max-tablet-figma:self-center mobile:max-tablet-figma:w-full object-contain"
className="mobile:max-md:self-center mobile:max-md:w-full object-contain"
alt=""
/>
</div>
src/components/Main/Distance.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ export function Distance() {
устройства
</Title>
<div className="xl:pl-64">
<div className="sm:grid lg:gap-x-4 lg:gap-y-6 sm:gap-x-3 sm:gap-y-4 lg:grid-cols-2 tablet-figma:max-[956px]:grid-cols-[446px_1fr]">
<div className="sm:grid lg:gap-x-4 lg:gap-y-6 sm:gap-x-3 sm:gap-y-4 lg:grid-cols-2 md:max-[956px]:grid-cols-[446px_1fr]">
<p className="text-[#ffffff] row-start-1 mobile:max-sm:mb-6 l-text">
Обучающиеся будут получать доступ к системе с высоко
детализированной 3D графикой для прохождения сценариев на любом
src/components/Main/Efficiency.tsx
+2 -2
View File
@@ -82,9 +82,9 @@ function Figure({
<h6 className="lg:font-medium l-text desktop-figma:max-w-[70%]">
{title}
</h6>
<h1 className="font-medium flex items-center tablet-figma:text-[clamp(64px,64px+(100vw-768px)/832*32,96px)] tablet-figma:leading-[clamp(57.6px,57.6px+(100vw-768px)/832*28.8,86.4px)] mobile:text-[64px] mobile:leading-[57.6px]">
<h1 className="font-medium flex items-center md:text-[clamp(64px,64px+(100vw-768px)/832*32,96px)] md:leading-[clamp(57.6px,57.6px+(100vw-768px)/832*28.8,86.4px)] mobile:text-[64px] mobile:leading-[57.6px]">
{percents}
<span className="tablet-figma:text-[clamp(32px,32px+(100vw-768px)/832*32,64px)] tablet-figma:leading-[clamp(32px,32px+(100vw-768px)/832*25.6,57.6px)] mobile:text-[32px] mobile:leading-8">
<span className="md:text-[clamp(32px,32px+(100vw-768px)/832*32,64px)] md:leading-[clamp(32px,32px+(100vw-768px)/832*25.6,57.6px)] mobile:text-[32px] mobile:leading-8">
%
</span>
</h1>
src/components/Main/Events.tsx
+2 -2
View File
@@ -29,7 +29,7 @@ export function Events() {
/>
<img
src="src/assets/ivolga_mini.png"
className="rounded-2xl mobile:max-tablet-figma:hidden w-[calc(286/1133*100%)]"
className="rounded-2xl mobile:max-md:hidden w-[calc(286/1133*100%)]"
alt=""
/>
</div>
@@ -81,7 +81,7 @@ function LinkButton({ href }: { href: string }) {
{hovered && (
<AppearanceHr
delay={0}
className="w-full border-[#ffffff] opacity-60"
className="w-full border-[#ffffff] opacity-60 mobile:max-lg:hidden"
/>
)}
</AnimatePresence>
src/components/Main/ProductTabs/ForTeachingTab.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
export function ForTeachingTab() {
return (
<div className="lg:bg-[url('src/assets/mask_group2.png')] lg:aspect-[1520/546] sm:max-lg:aspect-[720/460] w-full lg:h-[max(534px,34vw)] tablet-figma:max-lg:h-[min(460px,60vw)] sm:max-tablet-figma:h-[max(460px,60vw)] mobile:max-sm:min-h-[746pxsdf] bg-[#3D425C4D] bg-no-repeat lg:p-10 sm:p-7 mobile:p-5 rounded-xl 2xl:bg-contain bg-right lg:max-2xl:bg-[length:50%]">
<div className="lg:bg-[url('src/assets/mask_group2.png')] lg:aspect-[1520/546] sm:max-lg:aspect-[720/460] w-full lg:h-[max(534px,34vw)] md:max-lg:h-[min(460px,60vw)] sm:max-md:h-[max(460px,60vw)] mobile:max-sm:min-h-[746pxsdf] bg-[#3D425C4D] bg-no-repeat lg:p-10 sm:p-7 mobile:p-5 rounded-xl 2xl:bg-contain bg-right lg:max-2xl:bg-[length:50%]">
<div className='sm:max-lg:bg-[url("src/assets/mask_group2.png")] bg-no-repeat bg-right bg-[length:50%] sm:max-lg:pb-[55px] mobile:max-lg:border-b border-[#3D425C] sm:mb-8 mobile:mb-4'>
<h3 className="text-[#ffffff] font-medium lg:max-w-[455px] sm:max-w-[326px] mobile:max-sm:mb-0 h3">
Интерактивные тренажеры для учебных заведений
src/components/Main/ProductTabs/SimulatorsTab.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export function SimulatorsTab() {
});
return (
<div className="bg-[#3D425C4D] rounded-xl flex lg:aspect-[1520/546] sm:max-lg:aspect-[720/460] mobile:max-sm:min-h-[746psfgx] w-full lg:h-[max(534px,34vw)] tablet-figma:max-lg:h-[min(460px,60vw)] sm:max-tablet-figma:h-[max(460px,60vw)] lg:p-10 sm:max-lg:p-7 mobile:max-sm:p-5 select-none mobile:max-sm:overflow-hidden">
<div className="bg-[#3D425C4D] rounded-xl flex lg:aspect-[1520/546] sm:max-lg:aspect-[720/460] mobile:max-sm:min-h-[746psfgx] w-full lg:h-[max(534px,34vw)] md:max-lg:h-[min(460px,60vw)] sm:max-md:h-[max(460px,60vw)] lg:p-10 sm:max-lg:p-7 mobile:max-sm:p-5 select-none mobile:max-sm:overflow-hidden">
<div className="flex sm:justify-between w-full h-full mobile:max-sm:flex-col mobile:max-sm:justify-between items-center gap-x-2">
<div className="lg:max-w-[539px] sm:max-w-[50vw] self-start flex flex-col sm:max-lg:justify-between sm:max-lg:h-full">
<div className="flex flex-col">
src/components/Main/ProductTabs/TrainingsTab.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
export function TrainingsTab() {
return (
<div className="bg-[#3D425C4D] rounded-xl lg:aspect-[1520/546] sm:aspect-[720/460] lg:h-[max(534px,34vw)] tablet-figma:max-lg:h-[min(460px,60vw)] sm:max-tablet-figma:h-[max(460px,60vw)] mobile:max-sm: w-full lg:bg-[url('src/assets/mask_group.png')] desktop-figma:bg-[length:70%] bg-right-bottom lg:bg-[length:55%] lg:p-10 sm:max-lg:p-7 mobile:max-sm:p-5 bg-no-repeat">
<div className="bg-[#3D425C4D] rounded-xl lg:aspect-[1520/546] sm:aspect-[720/460] lg:h-[max(534px,34vw)] md:max-lg:h-[min(460px,60vw)] sm:max-md:h-[max(460px,60vw)] mobile:max-sm: w-full lg:bg-[url('src/assets/mask_group.png')] desktop-figma:bg-[length:70%] bg-right-bottom lg:bg-[length:55%] lg:p-10 sm:max-lg:p-7 mobile:max-sm:p-5 bg-no-repeat">
<div className="lg:max-w-[max(455px,28vw)]">
<div className="sm:max-lg:border-b border-[#3D425C] sm:max-lg:bg-[url('src/assets/mask_group.png')] bg-no-repeat bg-contain bg-right-bottom sm:max-tablet-figma:bg-[length:40%]">
<div className="sm:max-lg:border-b border-[#3D425C] sm:max-lg:bg-[url('src/assets/mask_group.png')] bg-no-repeat bg-contain bg-right-bottom sm:max-md:bg-[length:40%]">
<div className="sm:max-lg:max-w-[51vw] mobile:max-sm:border-b border-[#3D425C]">
<h3 className="text-[#ffffff] font-medium lg:mb-8 sm:max-lg:mb-28 h3">
Промышленные тренажеры виртуальной реальности
src/components/Main/Projects.tsx
+3 -1
View File
@@ -116,9 +116,11 @@ function Slider({
setSliderOffset(-baseOffset);
}, [order, baseOffset, slide]);
useEffect(() => console.log(sliderOffset), [sliderOffset]);
return (
<div className="flex flex-col lg:mt-4 sm:mt-3 mobile:mt-2">
<div className="" {...handlers}>
<div {...handlers}>
<div
className="flex gap-2 overflow-visible relative mb-[18px] -mr-10 select-none"
style={{
src/components/Main/Teaching.tsx
+13 -13
View File
@@ -32,7 +32,7 @@ export function Teaching() {
function TeachingFeaturesForDesktop() {
return (
<div className="mobile:max-lg:hidden lg:flex-col gap-y-4 flex-wrap lg:flex">
<div className="p-10 bg-[#3D425C4D] flex flex-col pr-20 rounded-2xl lg:min-h-[400px] bg-[url(src/assets/schedule_big.svg)] bg-no-repeat bg-[right_bottom] bg-[length:50%] lg:max-desktop-figma:min-w-[clamp(614px,614px+(100vw-1024px)/576*266,880px)] desktop-figma:min-w-[55vw]">
<div className="p-10 bg-[#3D425C4D] flex flex-col pr-20 rounded-2xl lg:min-h-[400px] bg-[url(src/assets/schedule_big.svg)] bg-no-repeat bg-[right_bottom] bg-[length:50%] lg:max-desktop-figma:min-w-[clamp(575px,575px+(100vw-1024px)/576*305,880px)] desktop-figma:min-w-[51vw]">
<div className="mb-[85px] max-w-[380px]">
<TeachingFeatureTitle>Управление процессом</TeachingFeatureTitle>
<TeachingFeatureDescription className="max-w-[361px]">
@@ -81,7 +81,7 @@ function TeachingFeaturesForDesktop() {
</div>
<div className="p-10 bg-[#3D425C4D] rounded-2xl lg:flex min-h-[400px] flex">
<div className="max-w-[351px]">
<div className="">
<TeachingFeatureTitle>Статистика обучения</TeachingFeatureTitle>
<TeachingFeatureDescription>
Фиксация правильных и неправильных действий.
@@ -89,7 +89,7 @@ function TeachingFeaturesForDesktop() {
Отчет об ошибках
</TeachingFeatureDescription>
</div>
<div className="flex absolute right-10 mt-10">
<div className="flex absolute right-10 mt-14">
<img
src="src/assets/schedule.svg"
className="rounded-lg self-end relative"
@@ -108,7 +108,7 @@ function TeachingFeaturesForDesktop() {
function TeachingFeaturesForOtherScreens() {
return (
<div className="mobile:max-sm:flex mobile:max-sm:flex-col mobile:max-sm:gap-y-2 tablet-figma:max-lg:grid grid-rows-[272px_113px_249px] gap-3 grid-cols-2 lg:hidden sm:max-tablet-figma:flex sm:max-tablet-figma:flex-col">
<div className="mobile:max-sm:flex mobile:max-sm:flex-col mobile:max-sm:gap-y-2 md:max-lg:grid grid-rows-[272px_113px_249px] gap-3 grid-cols-2 lg:hidden sm:max-md:flex sm:max-md:flex-col">
<div className="bg-[#3D425C4D] rounded-2xl sm:max-lg:pt-6 sm:max-lg:px-6 mobile:max-sm:pt-5 mobile:max-sm:px-5 overflow-hidden row-start-1 col-start-1 mobile:max-sm:flex mobile:max-sm:flex-col">
<TeachingFeatureTitle>
Управление
@@ -119,12 +119,12 @@ function TeachingFeaturesForOtherScreens() {
</TeachingFeatureDescription>
<img
src="src/assets/modal.svg"
className="relative mobile:max-sm:w-[351px] tablet-figma:max-lg:top-7 sm:max-tablet-figma:top-11 mobile:max-sm:top-5 mobile:max-sm:left-[92px] self-end sm:max-tablet-figma:m-auto"
className="relative mobile:max-sm:w-[351px] md:max-lg:top-7 sm:max-md:top-11 mobile:max-sm:top-5 mobile:max-sm:left-[92px] self-end sm:max-md:m-auto"
alt=""
/>
</div>
<div className="bg-[#3D425C4D] rounded-2xl sm:max-lg:pt-6 sm:max-lg:px-6 mobile:max-sm:pt-5 mobile:max-sm:px-5 bg-[url(src/assets/schedule_big.svg)] tablet-figma:max-lg:bg-contain mobile:max-sm:bg-contain mobile:max-sm:bg-[140px_150px] sm:max-tablet-figma:bg-[length:50%] bg-no-repeat tablet-figma:max-lg:bg-[73px_130px] sm:max-tablet-figma:bg-right-bottom row-start-1 row-span-2 col-start-2">
<div className="bg-[#3D425C4D] rounded-2xl sm:max-lg:pt-6 sm:max-lg:px-6 mobile:max-sm:pt-5 mobile:max-sm:px-5 bg-[url(src/assets/schedule_big.svg)] md:max-lg:bg-contain mobile:max-sm:bg-contain mobile:max-sm:bg-[140px_150px] sm:max-md:bg-[length:50%] bg-no-repeat md:max-lg:bg-[73px_130px] sm:max-md:bg-right-bottom row-start-1 row-span-2 col-start-2">
<TeachingFeatureTitle>Управление процессом</TeachingFeatureTitle>
<TeachingFeatureDescription>
Назначение сценария обучения
@@ -133,12 +133,12 @@ function TeachingFeaturesForOtherScreens() {
</TeachingFeatureDescription>
<img
src="src/assets/master_card.svg"
className="rounded-lg mb-11 h-[92px] mt-[166px] sm:max-tablet-figma:mx-auto"
className="rounded-lg mb-11 h-[92px] mt-[166px] sm:max-md:mx-auto"
alt=""
/>
</div>
<div className="bg-[#3D425C4D] rounded-2xl sm:max-lg:pt-6 sm:max-lg:px-6 mobile:max-sm:pt-5 mobile:max-sm:px-5 bg-[url(src/assets/pinned_windows_mini.svg)] sm:max-tablet-figma:bg-[100%_100px] tablet-figma:max-lg:bg-contain bg-no-repeat tablet-figma:max-lg:bg-[67px_150px] mobile:max-sm:bg-[100%_120px] mobile:max-sm:flex mobile:max-sm:flex-col row-start-2 row-span-2 col-start-1">
<div className="bg-[#3D425C4D] rounded-2xl sm:max-lg:pt-6 sm:max-lg:px-6 mobile:max-sm:pt-5 mobile:max-sm:px-5 bg-[url(src/assets/pinned_windows_mini.svg)] sm:max-md:bg-[100%_100px] md:max-lg:bg-contain bg-no-repeat md:max-lg:bg-[67px_150px] mobile:max-sm:bg-[100%_120px] mobile:max-sm:flex mobile:max-sm:flex-col row-start-2 row-span-2 col-start-1">
<TeachingFeatureTitle>Видеозапись обучения</TeachingFeatureTitle>
<TeachingFeatureDescription>
Фиксация и хранение сессий обучения, тренировки и тестирования.
@@ -146,19 +146,19 @@ function TeachingFeaturesForOtherScreens() {
</TeachingFeatureDescription>
<img
src="src/assets/manage_video.svg"
className="rounded-lg h-[94px] mt-[120px] sm:max-tablet-figma:mx-auto sm:max-tablet-figma:mr-[200px] self-end mr-[168px]"
className="rounded-lg h-[94px] mt-[120px] sm:max-md:mx-auto sm:max-md:mr-[200px] self-end mr-[168px]"
alt=""
/>
</div>
<div className="bg-[#3D425C4D] rounded-2xl sm:max-lg:pt-6 sm:max-lg:px-6 mobile:max-sm:pt-5 mobile:max-sm:px-5 sm:max-tablet-figma:pb-6 mobile:max-sm:pb-5 overflow-hidden row-start-3 col-start-2">
<div className="bg-[#3D425C4D] rounded-2xl sm:max-lg:pt-6 sm:max-lg:px-6 mobile:max-sm:pt-5 mobile:max-sm:px-5 sm:max-md:pb-6 mobile:max-sm:pb-5 overflow-hidden row-start-3 col-start-2">
<TeachingFeatureTitle>Статистика обучения</TeachingFeatureTitle>
<TeachingFeatureDescription className="mobile:max-tablet-figma:mb-5">
<TeachingFeatureDescription className="mobile:max-md:mb-5">
Фиксация правильных и неправильных действий. <br />
Отчет об ошибках
</TeachingFeatureDescription>
<div className="flex flex-col">
<div className="flex items-end mobile:max-tablet-figma:justify-center tablet-figma:max-lg:overflow-hidden mt-0.5 mobile:max-sm:pl-11 mx-auto">
<div className="flex items-end mobile:max-md:justify-center md:max-lg:overflow-hidden mt-0.5 mobile:max-sm:pl-11 mx-auto">
<img
src="src/assets/schedule.svg"
className="rounded-lg mobile:max-lg:w-[166px] sm:max-lg:relative z-10"
@@ -166,7 +166,7 @@ function TeachingFeaturesForOtherScreens() {
/>
<img
src="src/assets/stats.svg"
className="rounded-lg relative tablet-figma:max-lg:right-[27px] sm:max-tablet-figma:right-[31px] mobile:max-lg:w-[166px] sm:max-tablet-figma:bottom-[27px] mobile:max-sm:bottom-[14px] mobile:max-sm:right-11"
className="rounded-lg relative md:max-lg:right-[27px] sm:max-md:right-[31px] mobile:max-lg:w-[166px] sm:max-md:bottom-[27px] mobile:max-sm:bottom-[14px] mobile:max-sm:right-11"
alt=""
/>
</div>
src/components/Main/Trainings.tsx
+4 -4
View File
@@ -70,7 +70,7 @@ function TrainingsFeature({
ref={ref}
className="lg:first:h-[200px] lg:last:h-[200px] lg:h-[176px] sm:flex items-stretch justify-between sm:py-10 mobile:max-sm:pt-5"
>
<div className="sm:flex flex-col gap-y-4 mobile:max-sm:mb-[42px] tablet-figma:w-[43.7%] sm:max-tablet-figma:min-w-[76%]">
<div className="sm:flex flex-col gap-y-4 mobile:max-sm:mb-[42px] md:w-[43.7%] sm:max-md:min-w-[76%]">
<h3 className="font-medium text-[#ffffff] mobile:max-sm:mb-2 h3">
{title}
</h3>
@@ -80,7 +80,7 @@ function TrainingsFeature({
<p className="text-[#52587A] m-text mb-5">{order}</p>
<img src={src} alt="" className="w-[50vw]" />
</div>
<div className="tablet-figma:flex mobile:max-tablet-figma:hidden">
<div className="md:flex mobile:max-md:hidden">
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: +hovered, scale: 1 }}
@@ -114,7 +114,7 @@ function TrainingsFeature({
</div>
<p className="text-[#52587A] lg:font-medium m-text">{order}</p>
</div>
<div className="w-[calc(280/768*100%)] mobile:max-sm:hidden tablet-figma:hidden flex justify-center items-center">
<div className="w-[calc(280/768*100%)] mobile:max-sm:hidden md:hidden flex justify-center items-center">
<img src={src} className="relative z-20" alt="" />
<img
src="src/assets/vr_backlight.svg"
@@ -122,7 +122,7 @@ function TrainingsFeature({
alt=""
/>
</div>
<p className="text-[#52587A] lg:font-medium m-text mobile:max-sm:hidden tablet-figma:hidden">
<p className="text-[#52587A] lg:font-medium m-text mobile:max-sm:hidden md:hidden">
{order}
</p>
</div>
src/index.css
+9 -9
View File
@@ -15,38 +15,38 @@ body {
@layer components {
.h1 {
@apply -tracking-[.02em] leading-[90%] desktop-figma:text-[clamp(96px,6vw,128px)] lg:max-desktop-figma:text-[clamp(76px,76px+(100vw-1024px)/576*20,96px)] tablet-figma:max-lg:text-[clamp(64px,64px+(100vw-768px)/256*16,80px)] sm:max-tablet-figma:text-[clamp(56px,56px+(100vw-640px)/128*8,64px)] mobile:max-sm:text-[clamp(40px,40px+(100vw-360px)/280*4,44px)];
@apply -tracking-[.02em] leading-[90%] desktop-figma:text-[clamp(96px,6vw,128px)] lg:max-desktop-figma:text-[clamp(76px,76px+(100vw-1024px)/576*20,96px)] md:max-lg:text-[clamp(64px,64px+(100vw-768px)/256*16,80px)] sm:max-md:text-[clamp(56px,56px+(100vw-640px)/128*8,64px)] mobile:max-sm:text-[clamp(40px,40px+(100vw-360px)/280*4,44px)];
}
.h2 {
@apply -tracking-[.02em] lg:leading-[90%] mobile:max-lg:leading-[100%] desktop-figma:text-[clamp(64px,4vw,80px)] lg:max-desktop-figma:text-[clamp(56px,56px+(100vw-1024px)/576*8,64px)] tablet-figma:max-lg:text-[clamp(40px,40px+(100vw-768px)/256*12,52px)] sm:max-tablet-figma:text-[clamp(32px,32px+(1000vw-640px)/128*8,40px)] mobile:max-sm:text-[clamp(28px,28px+(100vw-360px)/280*4,32px)];
@apply -tracking-[.02em] lg:leading-[90%] mobile:max-lg:leading-[100%] desktop-figma:text-[clamp(64px,4vw,80px)] lg:max-desktop-figma:text-[clamp(56px,56px+(100vw-1024px)/576*8,64px)] md:max-lg:text-[clamp(40px,40px+(100vw-768px)/256*12,52px)] sm:max-md:text-[clamp(32px,32px+(1000vw-640px)/128*8,40px)] mobile:max-sm:text-[clamp(28px,28px+(100vw-360px)/280*4,32px)];
}
.h3 {
@apply leading-[100%] desktop-figma:text-[clamp(32px,2vw,40px)] lg:max-desktop-figma:text-[clamp(28px,28px+(100vw-1024px)/576*4,32px)] tablet-figma:max-lg:text-[clamp(24px,24px+(100vw-768px)/256*4,28px)] sm:max-tablet-figma:text-[clamp(20px,20px+(100vw-640px)/128*4,24px)] mobile:max-sm:text-[clamp(20px,20px+(100vw-360px)/280*4,24px)];
@apply leading-[100%] desktop-figma:text-[clamp(32px,2vw,40px)] lg:max-desktop-figma:text-[clamp(28px,28px+(100vw-1024px)/576*4,32px)] md:max-lg:text-[clamp(24px,24px+(100vw-768px)/256*4,28px)] sm:max-md:text-[clamp(20px,20px+(100vw-640px)/128*4,24px)] mobile:max-sm:text-[clamp(20px,20px+(100vw-360px)/280*4,24px)];
}
.h4 {
@apply leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] lg:max-desktop-figma:text-sm tablet-figma:max-lg:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] sm:max-tablet-figma:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] mobile:max-sm:text-[clamp(14px,14px+(100vw-360px)/280*2,16px,18px)];
@apply leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] lg:max-desktop-figma:text-sm md:max-lg:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] sm:max-md:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] mobile:max-sm:text-[clamp(14px,14px+(100vw-360px)/280*2,16px,18px)];
}
.l-text {
@apply leading-[135%] desktop-figma:text-[clamp(18px,1.125vw,20px)] lg:max-desktop-figma:text-[clamp(16px,16px+(100vw-1024px)/576*2,18px)] tablet-figma:max-lg:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] sm:max-tablet-figma:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] mobile:max-sm:text-[clamp(14px,14px+(100vw-360px)/280*2,16px)];
@apply leading-[135%] desktop-figma:text-[clamp(18px,1.125vw,20px)] lg:max-desktop-figma:text-[clamp(16px,16px+(100vw-1024px)/576*2,18px)] md:max-lg:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] sm:max-md:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] mobile:max-sm:text-[clamp(14px,14px+(100vw-360px)/280*2,16px)];
}
.m-text {
@apply leading-[140%] desktop-figma:text-[clamp(14px,0.875vw,16px)] lg:max-desktop-figma:text-sm tablet-figma:max-lg:text-[clamp(12px,12px+(100vw-768px)/576*2,14px)] sm:max-tablet-figma:text-xs mobile:max-sm:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
@apply leading-[140%] desktop-figma:text-[clamp(14px,0.875vw,16px)] lg:max-desktop-figma:text-sm md:max-lg:text-[clamp(12px,12px+(100vw-768px)/576*2,14px)] sm:max-md:text-xs mobile:max-sm:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
}
.btn-text {
@apply -tracking-[.02em] leading-[100%] desktop-figma:text-[clamp(18px,1.125vw,20px)] lg:max-desktop-figma:text-[clamp(16px,16px+(100vw-1024px)/576*2,18px)] tablet-figma:max-lg:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] sm:max-tablet-figma:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] mobile:max-sm:text-[clamp(14px,14px+(100vw-360px)/280*2,16px)];
@apply -tracking-[.02em] leading-[100%] desktop-figma:text-[clamp(18px,1.125vw,20px)] lg:max-desktop-figma:text-[clamp(16px,16px+(100vw-1024px)/576*2,18px)] md:max-lg:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] sm:max-md:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] mobile:max-sm:text-[clamp(14px,14px+(100vw-360px)/280*2,16px)];
}
.link {
@apply tracking-[.02em] leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] lg:max-desktop-figma:text-[clamp(12px,12px+(100vw-1024px)/576*2,14px)] tablet-figma:max-lg:text-[clamp(12px,12px+(100vw-768px)/256*2,14px)] sm:max-tablet-figma:text-xs mobile:max-sm:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
@apply tracking-[.02em] leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] lg:max-desktop-figma:text-[clamp(12px,12px+(100vw-1024px)/576*2,14px)] md:max-lg:text-[clamp(12px,12px+(100vw-768px)/256*2,14px)] sm:max-md:text-xs mobile:max-sm:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
}
.descriptor {
@apply tracking-[.02em] leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] lg:max-desktop-figma:text-[clamp(12px,12px+(100vw-1024px)/576*2,14px)] tablet-figma:max-lg:text-[clamp(12px,12px+(100vw-640px)/256*2,14px)] sm:max-tablet-figma:text-xs mobile:max-sm:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
@apply tracking-[.02em] leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] lg:max-desktop-figma:text-[clamp(12px,12px+(100vw-1024px)/576*2,14px)] md:max-lg:text-[clamp(12px,12px+(100vw-640px)/256*2,14px)] sm:max-md:text-xs mobile:max-sm:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
}
.feedback-field:focus ~ .feedback-placeholder {
tailwind.config.js
-1
View File
@@ -7,7 +7,6 @@ export default {
extend: {
screens: {
mobile: '360px',
'tablet-figma': '768px',
'desktop-figma': '1600px',
},
animation: {