Merge pull request #9 from redrockjs/dev

feat: add result section

.husky/pre-commit

@@ -1 +1,4 @@
 npx lint-staged
+
+echo "Running test build..."
+npm run build

package.json

@@ -31,8 +31,8 @@
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
-      "eslint --fix",
+      "prettier --write",
-      "prettier --write"
+      "eslint --fix"
     ]
   }
 }

src/core/styles/variables.scss

@@ -8,8 +8,9 @@ $desktop: 1440px;
 //fonts
 $font-open-sans: var(--open-sans), sans-serif;
 
+$font-light: 300;
 $font-regular: 400;
-$font-medium: 400;
+$font-medium: 500;
 $font-semi-bold: 600;
 
 // colors

src/views/home/ui/home.tsx

@@ -1,6 +1,6 @@
 import Main from './main/main';
 import Offer from './offer/offer';
-// import Result from './result/result';
+import Result from './result/result';
 // import License from './license/license';
 // import Contacts from './contacts/contacts';
 // import Footer from './footer/footer';
@@ -10,7 +10,7 @@ export default function HomePage() {
     <>
       <Main />
       <Offer />
-      {/*<Result />*/}
+      <Result />
       {/*<License />*/}
       {/*<Contacts />*/}
       {/*<Footer />*/}

src/views/home/ui/offer/offer.module.scss

@@ -150,10 +150,58 @@
   }
 
   .Form {
-    .Title {
+    position: relative;
+    padding: 40px 60px;
+    background: #292E3D;
+    border-radius: 28px;
+    overflow: hidden;
+    &:after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 1;
+      left: 0;
+      top: 0;
+      background-color: rgba(#163055, .6);
+      transition: 250ms background-color;
+    }
+
+    .Background {
+      position: absolute;
+      object-fit: cover;
+      z-index: 1;
     }
 
     .SubTitle {
+      position: relative;
+      z-index: 2;
+      font-family: $font-open-sans;
+      font-weight: $font-light;
+      font-size: 30px;
+      line-height: 100%;
+      color: $color-white;
+      margin-bottom: 16px;
+    }
+
+    .Title {
+      position: relative;
+      z-index: 2;
+      font-family: $font-open-sans;
+      font-weight: $font-regular;
+      font-size: 48px;
+      line-height: 130%;
+      color: $color-white;
+      max-width: 660px;
+      margin: 0;
+    }
+
+    .Input{
+      position: absolute;
+      z-index: 2;
+      right: 60px;
+      bottom: 40px;
     }
   }
 }

src/views/home/ui/offer/offer.tsx

@@ -10,6 +10,7 @@ import gridThree from '@public/images/grid-3.png';
 import gridFour from '@public/images/grid-4.png';
 import gridFive from '@public/images/grid-5.png';
 import gridSix from '@public/images/grid-6.png';
+import bgForm from '@public/images/bg-form.jpg';
 
 export default function Offer() {
   return (
@@ -64,9 +65,18 @@ export default function Offer() {
         </div>
       </div>
       <div className={s.Form}>
+        <Image
+          className={s.Background}
+          src={bgForm}
+          placeholder='blur'
+          alt={''}
+          quality={75}
+          fill
+          priority
+        />
         <p className={s.SubTitle}>Нужна помощь?</p>
         <h3 className={s.Title}>Оставьте заявку на бесплатную консультацию</h3>
-        <input type='text' placeholder='+79991234567' />
+        <input className={s.Input} type='text' placeholder='+79991234567' />
       </div>
     </section>
   );

src/views/home/ui/result/result.module.scss

@@ -1,2 +1,68 @@
 .Result {
+  padding: 160px;
+
+  .Header {
+    font-family: $font-open-sans;
+    font-weight: $font-semi-bold;
+    font-size: 60px;
+    line-height: 100%;
+    color: $color-text;
+    margin-bottom: 96px;
+  }
+
+  .Row {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 10vw;
+    margin-bottom: 80px;
+
+    &:nth-child(odd) {
+      flex-direction: row-reverse;
+    }
+
+    .Review {
+      flex: 1;
+
+      .Title {
+        font-family: $font-open-sans;
+        font-weight: $font-regular;
+        font-size: 48px;
+        line-height: 100%;
+        color: $color-text;
+        margin-bottom: 40px;
+      }
+
+      .Description {
+        font-family: $font-open-sans;
+        font-weight: $font-regular;
+        font-size: 24px;
+        line-height: 100%;
+        color: $color-text;
+      }
+    }
+
+    .Picture {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+      border-radius: 28px;
+      object-fit: contain;
+      max-width: 720px;
+      height: 540px;
+      &:after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        background-color: rgba(#292E3D, .4);
+        transition: 250ms background-color;
+      }
+    }
+  }
 }

src/views/home/ui/result/result.tsx

@@ -1,5 +1,63 @@
 import s from './result.module.scss';
+import { Mark } from '@shared/ui';
+
+import Image from 'next/image';
+
+import bogatyrImg from '@public/images/bogatyr.png';
+import chateauImg from '@public/images/chateau-de-talu.png';
+import schoolImg from '@public/images/school-20.png';
 
 export default function Result() {
-  return <section className={s.Result}>Result</section>;
+  return (
+    <section className={s.Result}>
+      <h2 className={s.Header}>
+        Наш опыт – <br /> ваш <Mark>результат!</Mark>
+      </h2>
+
+      {resultData.map(({ title, location, description, image }, idx) => (
+        <div key={idx} className={s.Row}>
+          <div className={s.Review}>
+            <h3 className={s.Title}>
+              {title}, <br /> {location}
+            </h3>
+            <p className={s.Description}>{description}</p>
+          </div>
+          <div className={s.Picture}>
+            <Image
+              src={image}
+              placeholder='blur'
+              alt={''}
+              quality={75}
+              fill
+              priority
+            />
+          </div>
+        </div>
+      ))}
+    </section>
+  );
 }
+
+const resultData = [
+  {
+    title: 'Отель Богатырь',
+    location: 'г.Сочи',
+    description:
+      'Написать что требовалось,что сделали,что получилось и какие преимущества получил заказчик в итоге',
+    image: bogatyrImg,
+  },
+  {
+    title: 'Château de Talu',
+    location: 'г. Геленджик',
+    description:
+      'Написать что требовалось,что сделали,что получилось и какие преимущества получил заказчик в итоге',
+    image: chateauImg,
+  },
+  {
+    title: 'МОБУ Школа №20',
+    location: 'г.Сочи',
+    description:
+      'Написать что требовалось,что сделали,что получилось и какие преимущества получил заказчик в итоге',
+    image: schoolImg,
+  },
+];