Update src/app/page.tsx

Merge version_19 into main

src/app/page.tsx

@@ -3,11 +3,9 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
-import MediaAbout from '@/components/sections/about/MediaAbout';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
@@ -16,6 +14,13 @@ import TeamCardSix from '@/components/sections/team/TeamCardSix';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 
 export default function LandingPage() {
+  const handleScroll = (id: string) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="directional-hover"
@@ -30,540 +35,74 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Услуги",
-          id: "services",
-        },
-        {
-          name: "О клинике",
-          id: "about",
-        },
-        {
-          name: "Врачи",
-          id: "team",
-        },
-        {
-          name: "Запись",
-          id: "contact",
-        },
-      ]}
-      brandName="Diamond Dent"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Услуги", id: "services" },
+              { name: "О нас", id: "why-us" },
+              { name: "Цены", id: "pricing" },
+              { name: "Запись", id: "contact" },
+            ]}
+            brandName="Diamond Dent"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardCarousel
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Ваша идеальная улыбка — наша миссия"
-      description="Премиальная стоматология в Грозном. Мы сочетаем передовые технологии и заботливый подход для создания вашей безупречной улыбки."
-      buttons={[
-        {
-          text: "Записаться на приём",
-          href: "#contact",
-        },
-        {
-          text: "Узнать больше",
-          href: "#about",
-        },
-      ]}
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-dentist-treating-patients-teeth-with-dental-microscope-dentistry-concept_169016-66977.jpg?_wi=1",
-          imageAlt: "modern dental clinic interior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/patient-pov-listening-explication-teeth-treatment-dentist-coverall-showing-x-ray-tablet-stomatology-specialist-wearing-protective-suit-against-infection-with-covid19-pointing-radiograph_482257-13149.jpg",
-          imageAlt: "modern dental clinic interior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/medical-instruments_1157-18593.jpg",
-          imageAlt: "modern dental clinic interior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-male-dentist-room-with-medical-equipment-background_613910-15260.jpg",
-          imageAlt: "modern dental clinic interior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-dentist-wearing-face-mask_23-2149164285.jpg",
-          imageAlt: "modern dental clinic interior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-dental-tooth-intruments-medical-stomatology-orthodontic-office_482257-12296.jpg",
-          imageAlt: "modern dental clinic interior",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroBillboardCarousel
+            title="Ваша идеальная улыбка — наша миссия"
+            description="Премиальная стоматология в Грозном"
+            background={{ variant: "gradient-bars" }}
+            buttons={[
+              { text: "Записаться", href: "#contact" },
+              { text: "Услуги", onClick: () => handleScroll('services') },
+            ]}
+            mediaItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/young-female-dentist-treating-patients-teeth-with-dental-microscope-dentistry-concept_169016-66977.jpg?_wi=1", imageAlt: "dentistry" }]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <MediaAbout
-      useInvertedBackground={false}
-      title="Diamond Dent Grozny — качество в деталях"
-      description="Наша клиника основана на принципах инноваций и искренней заботы. Мы верим, что каждая улыбка заслуживает безупречного здоровья и эстетики, поэтому предлагаем лучшие решения в области стоматологии."
-      imageSrc="http://img.b2bpic.net/free-photo/dentistry-team-explaining-radiography-sick-patient-doing-oral-care-examination-cure-toothache-stomatologist-assistant-consulting-x-ray-results-dental-drill-procedure_482257-32294.jpg?_wi=1"
-      imageAlt="dentist patient consultation modern"
-    />
-  </div>
+        <div id="services" data-section="services">
+            <FeatureCardTwentyThree 
+                title="Наши услуги" 
+                description="Мы предлагаем полный спектр стоматологических услуг с использованием современного оборудования."
+                features={[{ id: '1', title: 'Имплантация', tags: ['Премиум'], imageSrc: 'http://img.b2bpic.net/free-photo/dental-implants_38503-463.jpg?_wi=1' }, { id: '2', title: 'Отбеливание', tags: ['Эстетика'], imageSrc: 'http://img.b2bpic.net/free-photo/white-teeth_169016-568.jpg?_wi=1' }]} 
+                animationType="slide-up" 
+                textboxLayout="split" 
+                useInvertedBackground={false}
+            />
+        </div>
 
-  <div id="services" data-section="services">
-      <FeatureCardTwentyThree
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: "s1",
-          title: "Имплантация",
-          tags: [
-            "хирургия",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/female-patient-looking-dental-mold-with-orthodontist_23-2148985828.jpg?_wi=1",
-        },
-        {
-          id: "s2",
-          title: "Отбеливание",
-          tags: [
-            "эстетика",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/patient-receiving-dental-treatment_107420-65438.jpg?_wi=1",
-        },
-        {
-          id: "s3",
-          title: "Брекеты",
-          tags: [
-            "ортодонтия",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/dental-tools-equipment-dental-chart_1232-1742.jpg",
-        },
-        {
-          id: "s4",
-          title: "Лечение кариеса",
-          tags: [
-            "терапия",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-vector/tooth-implant-implant-dental-health-tooth-healthy-implant-vector-illustration_1284-46131.jpg",
-        },
-        {
-          id: "s5",
-          title: "Детская стоматология",
-          tags: [
-            "забота",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-vector/creative-dentistry-dental-tooth-care-logo-template_1017-55253.jpg",
-        },
-        {
-          id: "s6",
-          title: "Протезирование",
-          tags: [
-            "эстетика",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/dental-tools-equipment-dental-chart_1232-1741.jpg",
-        },
-      ]}
-      title="Наши услуги"
-      description="Профессиональный спектр стоматологических услуг с использованием инновационного оборудования."
-    />
-  </div>
+        <div id="before-after" data-section="before-after">
+            <ProductCardFour title="Преображение улыбок" description="Посмотрите на результаты наших работ по восстановлению эстетики улыбки." gridVariant="three-columns-all-equal-width" animationType="slide-up" textboxLayout="split" useInvertedBackground={false} />
+        </div>
 
-  <div id="why-us" data-section="why-us">
-      <MetricCardTwo
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "10+",
-          description: "лет успешного опыта",
-        },
-        {
-          id: "m2",
-          value: "5000+",
-          description: "довольных пациентов",
-        },
-        {
-          id: "m3",
-          value: "100%",
-          description: "безопасное оборудование",
-        },
-        {
-          id: "m4",
-          value: "Без боли",
-          description: "комфортное лечение",
-        },
-        {
-          id: "m5",
-          value: "24/7",
-          description: "поддержка пациентов",
-        },
-      ]}
-      title="Почему выбирают нас?"
-      description="Мы гордимся доверием наших пациентов и стремимся к совершенству в каждом аспекте."
-    />
-  </div>
+        <div id="why-us" data-section="why-us">
+            <MetricCardTwo metrics={[]} description="Мы используем только сертифицированные материалы и передовые технологии лечения." gridVariant="uniform-all-items-equal" animationType="slide-up" title="Почему выбирают нас?" textboxLayout="split" useInvertedBackground={false} />
+        </div>
 
-  <div id="team" data-section="team">
-      <TeamCardSix
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={true}
-      members={[
-        {
-          id: "d1",
-          name: "Аслан Магомедов",
-          role: "Главный врач, имплантолог",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-dentist-standing-with-arms-crossed_107420-74176.jpg",
-        },
-        {
-          id: "d2",
-          name: "Амина Исаева",
-          role: "Стоматолог-терапевт",
-          imageSrc: "http://img.b2bpic.net/free-photo/healthcare-workers-medicine-insurance-covid-pandemic-concept-dreamy-young-talented-doctor-whi_1258-92303.jpg",
-        },
-        {
-          id: "d3",
-          name: "Магомед Саидов",
-          role: "Ортодонт",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-dentist-standing-clinic_107420-65271.jpg",
-        },
-        {
-          id: "d4",
-          name: "Фатима Ибрагимова",
-          role: "Детский стоматолог",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doctor-with-stethoscope-hospital_1303-20699.jpg",
-        },
-        {
-          id: "d5",
-          name: "Ибрагим Алиев",
-          role: "Хирург-стоматолог",
-          imageSrc: "http://img.b2bpic.net/free-photo/goodlooking-male-dentist-standing-dental-office_651396-3120.jpg",
-        },
-      ]}
-      title="Команда профессионалов"
-      description="Лучшие специалисты в области современной стоматологии."
-    />
-  </div>
+        <div id="team" data-section="team">
+            <TeamCardSix members={[]} description="В нашей клинике работают специалисты с многолетним стажем и подтвержденной квалификацией." gridVariant="three-columns-all-equal-width" animationType="slide-up" title="Команда профессионалов" textboxLayout="split" useInvertedBackground={false} />
+        </div>
 
-  <div id="before-after" data-section="before-after">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "Кейс №1",
-          price: "от 5000 ₽",
-          variant: "виниры",
-          imageSrc: "http://img.b2bpic.net/free-photo/surprised-woman-with-hands-up-amazed-shocked-by-unexpected-news_273609-13734.jpg",
-        },
-        {
-          id: "p2",
-          name: "Кейс №2",
-          price: "от 8000 ₽",
-          variant: "отбеливание",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-woman-daydreams-with-closed-eyes-smiles-toothily-keeps-palms-near-face-recalls-lovely-moment-feels-glad-poses-indoor-people-pleasant-feelings-emotions-concept_273609-58258.jpg",
-        },
-        {
-          id: "p3",
-          name: "Кейс №3",
-          price: "от 12000 ₽",
-          variant: "ортодонтия",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-woman-looking-shy_273609-13720.jpg",
-        },
-        {
-          id: "p4",
-          name: "Кейс №4",
-          price: "от 7000 ₽",
-          variant: "протезирование",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-friends-gesturing-selfie-camera_23-2148143259.jpg",
-        },
-        {
-          id: "p5",
-          name: "Кейс №5",
-          price: "от 9000 ₽",
-          variant: "виниры",
-          imageSrc: "http://img.b2bpic.net/free-photo/three-girlfriends-making-selfie_1301-2878.jpg",
-        },
-        {
-          id: "p6",
-          name: "Кейс №6",
-          price: "от 6000 ₽",
-          variant: "терапия",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-glad-curly-haired-woman-winks-eye-makes-peace-gesture-smiles-broadly-looks-away-has-cheerful-expression-focused-away-isolated-red-background-blank-space-your-advertising-content_273609-61422.jpg",
-        },
-      ]}
-      title="Преображение улыбок"
-      description="Результаты нашей работы, которыми мы гордимся."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+            <TestimonialCardOne testimonials={[]} description="Мы ценим доверие наших пациентов и стремимся к совершенству в каждом случае." gridVariant="three-columns-all-equal-width" animationType="slide-up" title="Отзывы" textboxLayout="split" useInvertedBackground={false} />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Ибрагим А.",
-          role: "Пациент",
-          company: "Грозный",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/adult-man-woman-working-together_23-2148461552.jpg",
-        },
-        {
-          id: "t2",
-          name: "Зарема М.",
-          role: "Пациент",
-          company: "Грозный",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-doctor-shaking-hand-patient_23-2147896666.jpg",
-        },
-        {
-          id: "t3",
-          name: "Руслан С.",
-          role: "Пациент",
-          company: "Грозный",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-doctor-home-visit_637285-11276.jpg",
-        },
-        {
-          id: "t4",
-          name: "Мадина К.",
-          role: "Пациент",
-          company: "Грозный",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-male-doctor-advising-senior-couple-about-vitamins-medical-appointment-his-office_637285-1483.jpg",
-        },
-        {
-          id: "t5",
-          name: "Хасан Б.",
-          role: "Пациент",
-          company: "Грозный",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-testing-colours_23-2150538710.jpg",
-        },
-      ]}
-      title="Отзывы наших пациентов"
-      description="Благодарим за доверие к Diamond Dent."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+            <PricingCardNine plans={[]} description="Прозрачное ценообразование на все виды услуг нашей стоматологической клиники." animationType="slide-up" title="Цены" textboxLayout="split" useInvertedBackground={false} />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardNine
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "pr1",
-          title: "Гигиена",
-          price: "3000 ₽",
-          period: "сеанс",
-          features: [
-            "Профессиональная чистка",
-            "Полировка",
-            "Фторирование",
-          ],
-          button: {
-            text: "Записаться",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/revealing-shot-orthodontic-chair-with-nobody-teeth-x-ray-images-modern-display_482257-14035.jpg",
-          imageAlt: "Revealing shot of orthodontic chair with nobody in teeth x ray images on modern display",
-        },
-        {
-          id: "pr2",
-          title: "Отбеливание",
-          price: "15000 ₽",
-          period: "сеанс",
-          features: [
-            "Экспресс отбеливание",
-            "Защита эмали",
-          ],
-          button: {
-            text: "Записаться",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-dentist-treating-patients-teeth-with-dental-microscope-dentistry-concept_169016-66977.jpg?_wi=2",
-          imageAlt: "Revealing shot of orthodontic chair with nobody in teeth x ray images on modern display",
-        },
-        {
-          id: "pr3",
-          title: "Лечение",
-          price: "от 2500 ₽",
-          period: "зуб",
-          features: [
-            "Лечение кариеса",
-            "Пломбирование",
-            "Анестезия",
-          ],
-          button: {
-            text: "Записаться",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/dentistry-team-explaining-radiography-sick-patient-doing-oral-care-examination-cure-toothache-stomatologist-assistant-consulting-x-ray-results-dental-drill-procedure_482257-32294.jpg?_wi=2",
-          imageAlt: "Revealing shot of orthodontic chair with nobody in teeth x ray images on modern display",
-        },
-        {
-          id: "pr4",
-          title: "Имплантация",
-          price: "от 35000 ₽",
-          period: "под ключ",
-          features: [
-            "Консультация хирурга",
-            "Имплант",
-            "Коронка",
-          ],
-          button: {
-            text: "Записаться",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/female-patient-looking-dental-mold-with-orthodontist_23-2148985828.jpg?_wi=2",
-          imageAlt: "Revealing shot of orthodontic chair with nobody in teeth x ray images on modern display",
-        },
-        {
-          id: "pr5",
-          title: "Брекеты",
-          price: "от 80000 ₽",
-          period: "полный курс",
-          features: [
-            "Диагностика",
-            "Система брекетов",
-            "Коррекция",
-          ],
-          button: {
-            text: "Записаться",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/patient-receiving-dental-treatment_107420-65438.jpg?_wi=2",
-          imageAlt: "Revealing shot of orthodontic chair with nobody in teeth x ray images on modern display",
-        },
-      ]}
-      title="Стоимость услуг"
-      description="Прозрачные цены на все стоматологические процедуры."
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactSplitForm title="Записаться на прием" description="г. Грозный, ул. Стоматологическая 1. Телефон: +7 (999) 000-00-00" inputs={[{name:"name", type:"text", placeholder:"Ваше имя"}, {name:"phone", type:"tel", placeholder:"Ваш телефон"}]} useInvertedBackground={false} />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="split"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "q1",
-          title: "Больно ли лечить зубы?",
-          content: "Благодаря современным методам анестезии лечение проходит комфортно и без боли.",
-        },
-        {
-          id: "q2",
-          title: "Сколько длится отбеливание?",
-          content: "Обычно процедура занимает около 60 минут.",
-        },
-        {
-          id: "q3",
-          title: "Можно ли детям?",
-          content: "Да, мы проводим бережный прием для детей любого возраста.",
-        },
-        {
-          id: "q4",
-          title: "Как записаться?",
-          content: "Вы можете записаться через форму на сайте или по телефону.",
-        },
-        {
-          id: "q5",
-          title: "Есть ли гарантия?",
-          content: "На все виды работ мы предоставляем официальную гарантию.",
-        },
-      ]}
-      title="Часто задаваемые вопросы"
-      description="Ответы на популярные вопросы о стоматологическом лечении."
-      faqsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Записаться на прием"
-      description="Оставьте заявку, и наш администратор свяжется с вами в течение 15 минут."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Ваше имя",
-          required: true,
-        },
-        {
-          name: "phone",
-          type: "tel",
-          placeholder: "Ваш телефон",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "Услуга или комментарий",
-        rows: 4,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/empty-hotel-lounge-with-cozy-furniture_482257-67425.jpg"
-      buttonText="Отправить заявку"
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/carbon-fibre-background-with-metal-diamond-frame_1048-10417.jpg"
-      logoText="Diamond Dent"
-      columns={[
-        {
-          title: "Контакты",
-          items: [
-            {
-              label: "г. Грозный, ул. Стоматологическая, 1",
-              href: "#",
-            },
-            {
-              label: "+7 (999) 000-00-00",
-              href: "tel:+79990000000",
-            },
-          ],
-        },
-        {
-          title: "График работы",
-          items: [
-            {
-              label: "Пн–Сб: 09:00 – 19:00",
-              href: "#",
-            },
-            {
-              label: "Воскресенье: выходной",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Соцсети",
-          items: [
-            {
-              label: "Instagram",
-              href: "#",
-            },
-            {
-              label: "WhatsApp",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterSimple 
+                columns={[{ title: "Контакты", items: [{ label: "Адрес: Грозный" }, { label: "Телефон: +7(999)000-00-00" }, { label: "Instagram: @diamonddent" }] }, { title: "Время работы", items: [{ label: "Пн-Пт: 09:00 - 20:00" }, { label: "Сб-Вс: 10:00 - 18:00" }] }]} 
+                bottomLeftText="© 2025 Diamond Dent"
+                bottomRightText="Все права защищены"
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
+  --background: #f5faff;
+  --card: #ffffff;
+  --foreground: #001122;
   --primary-cta: #15479c;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #C9A84C;
-  --secondary-cta-text: #ffffff;
-  --accent: #C9A84C;
-  --background-accent: #f1f8ff;
+  --primary-cta-text: #f5faff;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #001122;
+  --accent: #f8f600;
+  --background-accent: #7ba3cf;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);