feat: added RevolutionarySection

Author: Lisofffa

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

@@ -121,6 +121,7 @@
   font-size: var(--fs-14-16);
   line-height: 1.49;
   white-space: pre-line;
+  opacity: 0.7;
 }
 
 
@@ -160,11 +161,11 @@
 }
 
 @media (max-width: 950px) {
-  .labelImg{
+  .labelImg {
     display: none;
   }
-  
-  .label{
+
+  .label {
     display: none;
   }
 }
@@ -188,11 +189,11 @@
     }
   }
 
-  .content{
+  .content {
     max-width: none;
   }
 
-  .imageContainer{
+  .imageContainer {
     max-width: none;
   }
 }

website/src/components/HomePage/HeroSection.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useRef } from 'react';
 import { Button } from '../Button';
 import styles from './HeroSection.module.scss';
 import SupportedBySection from './SupportedBySection';
-import { HomeTitle } from '@/constants/constantsText';
 import { ThemeImage } from '../ThemeImage';
 import cn from 'classnames';
 import gsap from 'gsap';
@@ -79,7 +78,9 @@ const HeroSection = () => {
           The Home <br />
           of Mutable Web
         </h1>
-        <p className={styles.subtitle}>{HomeTitle.subtitle}</p>
+        <p className={styles.subtitle}>Dapplets Project&nbsp;&mdash; open source platform that enables small applications (dapplets)
+          to&nbsp;run on&nbsp;top of&nbsp;any existing website, extending its functionality
+          and adding new services to&nbsp;the website on&nbsp;the fly.</p>
       </header>
       <div className={styles.buttons} ref={buttonsContainerRef}>
         <Button

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

@@ -0,0 +1,64 @@
+.wrapper {
+    padding: 5rem 1.25rem 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 75rem;
+    margin: 0 auto;
+    gap: 1.5rem;
+
+}
+
+.title {
+    font-size: var(--fs-24-48);
+    font-weight: 600;
+    line-height: 1;
+    margin: 0;
+
+    &--color {
+        color: var(--red-db);
+    }
+}
+
+.subtitle {
+    margin-top: .75rem;
+    font-size: var(--fs-14-16);
+    line-height: 1.49;
+    opacity: 0.7;
+    max-width: 22.5rem;
+}
+
+.article {
+    max-width: 51.25rem;
+    width: 100%;
+    border-radius: .625rem;
+    padding: 2.5rem 1.25rem;
+    background-color: var(--grey-de);
+    backdrop-filter: blur(1.25rem);
+}
+
+.text {
+    font-size: var(--fs-14-16);
+    line-height: 1.49;
+    opacity: 0.7;
+    display: block;
+    margin-top: .5rem;
+
+    &--hilight {
+        color: var(--black-22);
+        opacity: 1;
+        margin-top: 1.5rem;
+    }
+}
+
+@media (max-width:1185px) {
+    .wrapper {
+        display: block;
+        margin: 0 auto;
+    }
+
+    .article{
+        margin-top: 2.5rem;
+        max-width: none;
+    }
+}

website/src/components/HomePage/RevolutionarySection.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import styles from './RevolutionarySection.module.scss';
+import cn from 'classnames';
+
+
+const RevolutionarySection:FC = () => {
+    return (
+        <section className={styles.wrapper}>
+            <header className={styles.titleBlock}>
+                <h2 className={styles.title}>
+                    why is&nbsp;it<br />
+                    <span className={cn(styles.title, styles['title--color'])}>revolutionary</span>
+
+                </h2>
+                <p className={styles.subtitle}>It&nbsp;enables applications you have never seen before,
+                    all without asking anyone&rsquo;s permission!</p>
+            </header>
+            <article className={styles.article}>
+                <p className={styles.text}><b>Users&nbsp;</b>&mdash; can now customize existing sites as&nbsp;they wish and follow custom&nbsp;UX created by&nbsp;developers.</p>
+                <p className={styles.text}><b>Developers&nbsp;</b>&mdash; can add new contextual services to&nbsp;these sites and customize the&nbsp;UX as&nbsp;they see fit.</p>
+                <p className={styles.text}><b>Communities&nbsp;</b>&mdash; can embed their workflows directly into other people&amp;apos;s websites, run their own economies, and earn their own money. This makes communities economically self-sustaining and resilient.</p>
+                <p className={cn(styles.text, styles['text--hilight'])}>The Mutable Web initiates a&nbsp;permissionless, global shift from the traditional legacy Web toward Web3, driven by&nbsp;token-based incentives and decentralized governance.</p>
+            </article>
+        </section>
+    );
+};
+
+export default RevolutionarySection;

website/src/constants/constantsText.tsx

@@ -29,33 +29,28 @@ export const getStartedLinks = [
   },
 ];
 
-export const HomeTitle = {
-  title: `The Home
-   of Mutable Web`,
-  subtitle: `Dapplets Project - open-source platform which empowers developers to create a community-driven web, giving users and developers the ability to take control of the UX/UI on any existing websites.`,
-};
 
 export const Examples = [
   {
     title:'Xen/Aigency',
     description:'Xen/Aigency\u00A0- is\u00A0your private\u00A0AI assistant that uses your custom set of\u00A0agents for inference.\nXen uses Mutable Web to\u00A0capture user context and render agentic output back into the web page, extending its\u00A0UX on\u00A0the fly.',
-    labelTop:{
+    labelBottom:{
       label:'Embeds agentic output',
       subLabel:'on the fly'
     },
-    labelBottom:{
+    labelTop:{
       label:'Captures user context',
       subLabel:'on the fly'
     }
   },
   {
     title:'YouSure',
     description:'YouShure\u00A0- embeds seamlessly prediction markets into social networks so\u00A0that every statement posted can be\u00A0challenged with a\u00A0bet for money or\u00A0reputation. It\u00A0promotes responsible communication so\u00A0that bullshit posters lose either reputation or\u00A0money, or\u00A0both.',
-    labelBottom:{
+    labelTop:{
       label:'Captures user context',
       subLabel:'on the fly'
     },
-    labelTop:{
+    labelBottom:{
       label:'Embeds agentic output',
       subLabel:'on the fly'
     } 

website/src/pages/home/index.tsx

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