feat: added new examples

Author: Lisofffa

website/src/components/HomePage/ExamplesFirstSection.module.scss

@@ -0,0 +1,84 @@
+.wrapper {
+  padding: 0 1.25rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 75rem;
+  margin: 8.5rem auto 0;
+}
+
+.title {
+  font-size: var(--fs-24-48);
+  font-weight: 600;
+  line-height: 1;
+  display: flex;
+}
+
+.examplesContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 5rem;
+  margin-top: 2.5rem;
+}
+
+.exampleBlock {
+  display: flex;
+  align-items: center;
+  gap: 3.75rem;
+
+  &.reverse {
+    flex-direction: row-reverse;
+  }
+}
+
+.imageContainer {
+  flex: 1;
+  min-width: 0;
+  will-change: transform, opacity;
+  transform: translateY(1.25rem);
+  opacity: 0;
+}
+
+.exampleImage {
+  width: 100%;
+  height: auto;
+  border-radius: .625rem;
+  transition: none;
+}
+
+.content {
+  flex: 1;
+  min-width: 0;
+}
+
+.exampleTitle {
+  font-size: var(--fs-18-24);
+  font-weight: 600;
+}
+
+.exampleDescription {
+  display: block;
+  margin-top: 1.25rem;
+  font-size: var(--fs-14-16);
+  line-height: 1.49;
+}
+
+// Мобильная версия
+@media (max-width: 768px) {
+  .wrapper {
+   margin-top: 4rem;
+  }
+
+  .examplesContainer {
+    gap: 1.25rem;
+  }
+
+  .exampleBlock {
+    flex-direction: column;
+    gap: 1.25rem;
+
+    &.reverse {
+      flex-direction: column;
+    }
+  }
+}

website/src/components/HomePage/ExamplesFirstSection.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import React, { useRef, useEffect } from 'react';
+import styles from './ExamplesFirstSection.module.scss';
+import { ThemeImage } from '../ThemeImage';
+import { Examples } from '@/constants/constantsText';
+import cn from 'classnames';
+import gsap from 'gsap';
+
+export const ExamplesFirstSection = () => {
+  const exampleBlocksRef = useRef<(HTMLDivElement | null)[]>([]);
+
+  const addToExampleBlocksRef = (el: HTMLDivElement | null, index: number) => {
+    if (el) {
+      gsap.set(el.querySelector(`.${styles.imageContainer}`), { 
+        opacity: 0, 
+        y: 50 
+      });
+      exampleBlocksRef.current[index] = el;
+    }
+  };
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const observers: IntersectionObserver[] = [];
+
+    exampleBlocksRef.current.forEach((block, index) => {
+      if (!block) return;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              const imageContainer = entry.target.querySelector(`.${styles.imageContainer}`);
+              if (imageContainer) {
+                gsap.to(imageContainer, {
+                  y: 0,
+                  opacity: 1,
+                  duration: 0.8,
+                  delay: 0.1 * index,
+                  ease: 'power2.in',
+                });
+              }
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        {
+          threshold: 0.4, 
+          rootMargin: '0px 0px -150px 0px' 
+        }
+      );
+
+      observer.observe(block);
+      observers.push(observer);
+    });
+
+    return () => {
+      observers.forEach(observer => observer.disconnect());
+    };
+  }, []);
+
+  return (
+    <section className={styles.wrapper}>
+      <h2 className={styles.title}>
+      examples
+      </h2>
+
+      <div className={styles.examplesContainer}>
+        {Examples.map((example, index) => (
+          <div
+            key={index}
+            className={cn(styles.exampleBlock, {
+              [styles.reverse]: index % 2 !== 0,
+            })}
+            ref={(el) => addToExampleBlocksRef(el, index)}
+          >
+            <div className={styles.imageContainer}>
+              <ThemeImage
+                width={500}
+                height={300}
+                alt={example.title}
+                src={`images/example-${index + 1}.png`}
+                className={styles.exampleImage}
+              />
+            </div>
+            <div className={styles.content}>
+              <h3 className={styles.exampleTitle}>{example.title}</h3>
+              <p className={styles.exampleDescription}>{example.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+
+
+export default ExamplesFirstSection;

website/src/components/HomePage/ExamplesSection.tsx

@@ -67,9 +67,9 @@ const ExamplesSection = () => {
   return (
     <section className={styles.wrapper} ref={sectionRef}>
       <h2 className={styles.title}>
-        mutations
+        more
         <span className={cn(styles.title, styles['title--color'])}>
-          &nbsp;example
+          &nbsp;examples
         </span>
       </h2>
       <div className={styles.container}>

website/src/pages/home/index.tsx

@@ -5,6 +5,7 @@ import HowItWorksSection from '@/components/HomePage/HowItWorksSection';
 import ExamplesSection from '@/components/HomePage/ExamplesSection';
 import FeaturesSection from '@/components/HomePage/FeaturesSection';
 import GetStartedSection from '@/components/HomePage/GetStartedSection';
+import ExamplesFirstSection from '@/components/HomePage/ExamplesFirstSection';
 
 const Home = () => {
   return (
@@ -14,8 +15,9 @@ const Home = () => {
     >
       <div className={styles.wrapper}>
         <HeroSection />
-        <HowItWorksSection />
+        <ExamplesFirstSection/>
         <ExamplesSection />
+        <HowItWorksSection />
         <FeaturesSection />
         <GetStartedSection />
       </div>