Update widget container styles and header icons

components/app/Header/Header.module.css

@@ -8,8 +8,8 @@
   flex-direction: column;
 }
 .header svg {
-  width: 22px;
-  height: 22px;
+  width: 20px;
+  height: 20px;
   color: var(--color-text-black);
 }
 .header button {
@@ -99,9 +99,6 @@
   top: 0;
   padding: 1rem;
 }
-.header .iconSettings button svg {
-  margin: 0;
-}
 
 .header .iconSettings button {
   width: var(--size-big);
@@ -123,7 +120,7 @@
   right: 0;
   width: 100%;
   max-width: 320px;
-  height: auto;
+  height: 100%;
   bottom: var(--size-big);
   flex-direction: column;
   border-radius: 0;
@@ -154,11 +151,6 @@
     padding: 0;
   }
 
-  .nav button svg,
-  .iconSettings button svg {
-    width: 1.4rem;
-    height: 1.4rem;
-  }
   .nav button {
     height: var(--size-small);
   }

components/app/WidgetContainer/WidgetContainer.module.css

@@ -0,0 +1,7 @@
+.container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}

components/app/WidgetContainer/index.tsx

@@ -0,0 +1,7 @@
+import Styles from './WidgetContainer.module.css'
+
+const WidgetContainer = ({ children }: { children: React.ReactNode }) => {
+  return <div className={Styles.container}>{children}</div>
+}
+
+export default WidgetContainer

components/website/CardsFeat/index.tsx

@@ -20,31 +20,31 @@ export default function CardsFeat() {
           <IconSearch />
         </figure>
         <h3>Decentralized Search</h3>
-        <p>Search the same term on diverse sources and categories</p>
+        <p>Search the same term quickly on diverse sources</p>
       </div>
 
       <div>
         <figure>
           <IconShield />
         </figure>
         <h3>Privacy Level</h3>
-        <p>View the privacy level of selected source</p>
+        <p>Estimated privacy level of search provider</p>
       </div>
 
       <div>
         <figure>
           <IconLeaf />
         </figure>
-        <h3>Carbon Level</h3>
-        <p>View the estimate carbon footprint of selected source</p>
+        <h3>Carbon Footprint</h3>
+        <p>Estimated carbon footprint of search provider</p>
       </div>
 
       <div>
         <figure>
           <IconTrending />
         </figure>
         <h3>Trends</h3>
-        <p>Explore trending topics, contents, events, services and places nearby you</p>
+        <p>Trending topics, contents, events, services and places nearby you</p>
 
         {/* <p>
           Become <Link href={'/pro'}>Pro</Link> for unlimited access
@@ -56,7 +56,7 @@ export default function CardsFeat() {
           <IconText />
         </figure>
         <h3>Autosuggest</h3>
-        <p>Get suggestions of terms as you type to help on fast searches</p>
+        <p>Suggestions of terms as you type to make fast searches</p>
       </div>
 
       <div>
@@ -72,23 +72,23 @@ export default function CardsFeat() {
           <IconAccessibility />
         </figure>
         <h3>Accessibility</h3>
-        <p>Dark theme, balanced contrast, keyboard navigation and screen readers supported</p>
+        <p>Dark theme, balanced contrast, keyboard navigation and screen readers support</p>
       </div>
 
       <div>
         <figure>
           <IconLanguage />
         </figure>
         <h3>Internationalization</h3>
-        <p>Chose your country for local sources, or use international search</p>
+        <p>Chose a country for local sources, or use international search</p>
       </div>
 
       <div>
         <figure>
           <IconVisualSearch />
         </figure>
         <h3>Visual Search</h3>
-        <p>Use a image or shot to search on the supported sources</p>
+        <p>Use a image or camera to search on the supported sources</p>
 
         <p>* In development</p>
       </div>

pages/about.tsx

@@ -14,10 +14,10 @@ export default function PageAbout() {
       <section className="colors">
         <div className={Style.container}>
           <figure className={Style.icon}></figure>
-          <h1>Decentralized Web & AI Search</h1>
+          <h1>Open Source AI Search</h1>
           <p>
-            Findto is an open source assistant for decentralized Web & AI search. Get control over
-            algorithms, privacy and carbon. Explore a healthy internet.
+            Findto is an assistant for decentralized web search. Get control over AI and search
+            engines algorithms. Explore a healthy internet.
           </p>
         </div>
       </section>
@@ -31,11 +31,10 @@ export default function PageAbout() {
               </figure>
 
               <article>
-                <h2>Get control over algorithms</h2>
+                <h2>Get control over AI and search algorithms</h2>
                 <p>
-                  Findto puts people on control of the Web and AIs algorithms — not the other way
-                  around. Quickly switch between diverse sources and find anything. More productive
-                  and accessible searches.
+                  Findto puts people on control of the algorithms. Quickly switch between diverse
+                  sources and find anything. More productive and accessible searches.
                 </p>
               </article>
             </div>
@@ -46,10 +45,10 @@ export default function PageAbout() {
               </figure>
 
               <article>
-                <h2>More privacy and less carbon</h2>
+                <h2>More privacy, less carbon</h2>
                 <p>
-                  Findto displays the privacy level and estimated carbon footprint on top of every
-                  search source. Make better choices, for you and the planet.
+                  Findto show the privacy level and estimated carbon footprint of every search
+                  provider. Make better choices for you and the planet.
                 </p>
               </article>
             </div>
@@ -60,11 +59,11 @@ export default function PageAbout() {
               </figure>
 
               <article>
-                <h2>Welcome to the decentralization</h2>
+                <h2>Decentralized and open source search</h2>
                 <p>
                   The centralized internet — where monopoly wins — is unsustainable. Findto
-                  encourages a truly free search experience, where the people democratic choices and
-                  the planet needs walks together. As the internet should be.
+                  encourages a truly open search experience, where people choices and the planet
+                  needs walks together.
                 </p>
               </article>
             </div>
@@ -83,8 +82,8 @@ export default function PageAbout() {
       <section>
         <div className={Style.container}>
           <div className={Style.actionContainer}>
-            <h2>A better search experience</h2>
-            <p>Decentralized search. Crafted for people. Dedicated to the planet.</p>
+            <h2>A renewable search experience</h2>
+            <p>Decentralized search. Build by people. Dedicated to the planet.</p>
             <Button url="/" color="colors">
               {data?.t?.open ?? 'Open the app'}
             </Button>

pages/index.tsx

@@ -4,19 +4,21 @@ import WidgetTrends from '../components/app/WidgetTrends'
 import Banner from '../components/app/Banner'
 import WidgetPrivacy from '../components/app/WidgetPrivacy'
 import WidgetCarbon from '../components/app/WidgetCarbon'
+import WidgetContainer from '../components/app/WidgetContainer'
 
 export default function Index() {
   return (
     <LayoutApp
       title="Open Source AI Search"
       description="Findto is an assistant for decentralized Web & AI search. Explore a healthier internet with control over algorithms, privacy, and carbon.">
       <Search />
+
       <WidgetTrends />
 
-      <div>
+      <WidgetContainer>
         <WidgetPrivacy />
         <WidgetCarbon />
-      </div>
+      </WidgetContainer>
 
       <Banner />
     </LayoutApp>