chore: nice new section for seach

Signed-off-by: blam <ben@blam.sh>

microsite/core/Components.js

@@ -53,13 +53,17 @@ Block.QuoteContainer = simpleComponent('div', 'Block__QuoteContainer');
 Block.Quote = simpleComponent('p', 'Block__Quote');
 Block.Divider = simpleComponent('p', 'Block__Divider', ['quote']);
 Block.MediaFrame = simpleComponent('div', 'Block__MediaFrame');
-Block.Graphics = ({ padding, children, innerPadding }) => {
+Block.Graphics = ({ padding, children, innerPadding, width }) => {
   const style = {};
   const innerStyle = {};
   if (padding) {
     style.padding = `${padding}% 0`;
   }
 
+  if (width) {
+    style.width = width;
+  }
+
   if (innerPadding) {
     innerStyle.padding = `${innerPadding}% 0`;
   }

microsite/data/plugins/backstage-search-platform.yaml

@@ -0,0 +1,10 @@
+---
+title: Backstage Search
+author: Spotify
+authorUrl: https://github.com/spotify
+category: Core Feature
+description: A composable and extensible search platform built to fit your organization’s needs and find information quickly.
+documentation: https://backstage.io/docs/features/software-catalog/software-catalog-overview
+iconUrl: img/backstage-search-platform.svg
+npmPackageName: '@backstage/plugin-search'
+order: 5

microsite/pages/en/index.js

@@ -440,18 +440,6 @@ class Index extends React.Component {
                   experience, or edit the look and feel of each search result
                 </Block.Paragraph>
               </Block.TextBox>
-              <Block.Image
-                wide
-                style={{
-                  background: `url(${baseUrl}img/search-platform-overview.png)`,
-                  backgroundSize: '594px 312px',
-                  width: '594px',
-                  height: '312px',
-                  margin: '-50px 105px 0 10px',
-                  borderRadius: '8px',
-                  boxShadow: '2px 3px 6px rgba(0,0,0,0.1)',
-                }}
-              />
               <Block.TextBox small>
                 <BulletLine />
                 <Block.SmallTitle small>
@@ -463,7 +451,6 @@ class Index extends React.Component {
                   TechDocs or Confluence and Stack Overflow
                 </Block.Paragraph>
               </Block.TextBox>
-
               <Block.TextBox small>
                 <BulletLine />
                 <Block.SmallTitle small>
@@ -475,6 +462,22 @@ class Index extends React.Component {
                 </Block.Paragraph>
               </Block.TextBox>
             </Block.Container>
+            <Breakpoint
+              wide={
+                <Block.Graphics innerPadding={25} width={'1100px'}>
+                  <Block.Graphic
+                    padding={0}
+                    src={`${baseUrl}img/search-platform-overview.png`}
+                    width={100}
+                    style={{
+                      borderRadius: '8px',
+                      boxShadow: '3px 8px 8px rgba(0,0,0,0.3)',
+                      bottom: '8px',
+                    }}
+                  />
+                </Block.Graphics>
+              }
+            />
           </Block>
 
           <ActionBlock className="stripe bg-teal">

microsite/static/img/backstage-search-platform.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 380 380" style="enable-background:new 0 0 380 380;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#121212;stroke:#7DF3E1;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st1{fill:#121212;stroke:#7DF3E1;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<g>
+	<path class="st0" d="M148.71,175.36l111.65,103.46c7.55,6.99,5.63,19.4-3.67,23.79h0c-5.36,2.53-11.72,1.55-16.07-2.48
+		L120.4,188.73"/>
+	<circle class="st0" cx="129.29" cy="165.67" r="90.21"/>
+	<circle class="st0" cx="129.29" cy="165.67" r="66.34"/>
+	<path class="st1" d="M82.1,170.2c-0.47-4.87-0.17-9.73,0.84-14.42"/>
+	<path class="st1" d="M89.39,140.09c4.93-7.7,12.13-14.06,21.16-17.94"/>
+</g>
+</svg>