chore: update Migration guide, update website img assets (SAP#9337)

* chore: update Migration guide, update website img assets

* chore: update

Author: ilhan007

docs/Migrating to version 2.0 guide.md

@@ -88,8 +88,8 @@ const config: Config = {
       title: 'UI5 Web Components',
       logo: {
         alt: 'UI5 Web Components Logo',
-        src: 'img/LogoWater.svg',
-        srcDark: 'img/LogoFire.svg',
+        src: 'img/logos/LogoWater.svg',
+        srcDark: 'img/logos/LogoFire.svg',
       },
       items: [
         {

packages/website/docusaurus.config.ts

@@ -63,7 +63,6 @@
 }
 
 .demo-apps__link {
-  color: #3584BE;
   text-align: center;
   font-size: 0.875rem;
   display: inline-block;

packages/website/src/components/HomepageDemoApps/styles.css

@@ -7,7 +7,6 @@ import BuildingsDark from "@site/static/img/features/dark/Buildings.svg";
 import FrameDark from "@site/static/img/features/dark/Frame.svg";
 import HandDark from "@site/static/img/features/dark/Hand.svg";
 
-
 import { useColorMode } from '@docusaurus/theme-common';
 
 type FeatureItem = {
@@ -18,26 +17,34 @@ type FeatureItem = {
   SVGDark?: React.ComponentType<React.SVGProps<SVGSVGElement> & {
     title?: string;
   }>;
-  description: JSX.Element;
+  src?: string,
+  srcDark?: string,
+  description: JSX.Element,
+  cssClass?: string,
 };
 
 const FeatureList: FeatureItem[] = [
   {
     title: 'Easy to Use',
     SVG: Frame,
     SVGDark: FrameDark,
+    src: null,
+    srcDark: null,
     description: (
       <>
        Based on web standards - just HTML!
        Future-proof.
        Easy to add to your project.
       </>
     ),
+    cssClass: "feature__image_frame"
   },
   {
     title: 'Lightweight',
     SVG: Hand,
     SVGDark:  HandDark,
+    src: null,
+    srcDark: null,
     description: (
       <>
        Tiny - come with a minimal footprint.
@@ -50,6 +57,8 @@ const FeatureList: FeatureItem[] = [
     title: 'Enterprise Ready',
     SVG: Buildings,
     SVGDark: BuildingsDark,
+    src: require('@site/static/img/features/light/Buildings_Water.png').default,
+    srcDark: require('@site/static/img/features/dark/Buildings_Fire.png').default,
     description: (
       <>
        Implements latest SAP Design language.
@@ -60,14 +69,15 @@ const FeatureList: FeatureItem[] = [
   },
 ];
 
-function Feature({ title, SVG, SVGDark, description }: FeatureItem) {
+function Feature({ title, SVG, SVGDark, src, srcDark, description, cssClass }: FeatureItem) {
   const { colorMode } = useColorMode();
+  const light = colorMode === "light";
 
   return (
     <div className="feature">
-      {colorMode === "light" ? <SVG className='feature__image'/> : <SVGDark className='feature__image'/>}
-      <h2 className="feature__title">{title}</h2>
-      <p className="feature__desc">{description}</p>
+      {src ? light ? <img className='feature__image' src={src} /> : <img className='feature__image' src={srcDark} /> : light ? <SVG className={`feature__image ${cssClass}`}/> : <SVGDark className={`feature__image ${cssClass}`}/>}
+        <h2 className="feature__title">{title}</h2>
+        <p className="feature__desc">{description}</p>
     </div>
   );
 }

packages/website/src/components/HomepageFeatures/index.tsx

@@ -22,6 +22,10 @@
   width: 10rem;
 }
 
+.feature__image.feature__image_frame {
+  width: 14rem;
+}
+
 .feature {
   display: flex;
   flex-direction: column;
@@ -37,18 +41,19 @@
 
 .feature__title {
   font-weight: 700;
-  font-size: var(--ifm-h3-font-size);
+  font-style: normal;
   text-align: center;
   margin-top: 1rem;
   margin-bottom: 1rem;
   text-wrap: wrap;
 }
 
 .feature__desc {
-  font-size: 1rem;
-  margin-bottom: 4rem;
+  font-style: normal;
+  font-weight: 300;
   text-wrap: wrap;
   text-align: center;
+  max-width: 26rem;
 }
 
 @media (max-width: 900px) {

packages/website/src/components/HomepageFeatures/styles.css

@@ -188,6 +188,11 @@ code {
   font-weight: bold;
 }
 
+.button--getting-started {
+  border-radius: 1.215rem;
+  padding: 0.5rem 1.24rem 0.5rem 1.24rem;
+}
+
 @media (max-width: 996px) {
   .navbar__title {
     font-size: 0.875rem;

packages/website/src/css/custom.css

@@ -7,8 +7,8 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import HomepageDemoApps from '@site/src/components/HomepageDemoApps';
 import HomepageTestimonials from '@site/src/components/HomepageTestimonials';
 import Heading from '@theme/Heading';
-import LogoWater from "@site/static/img/compatibility-frameworks/LogoWater.svg";
-import LogoFire from "@site/static/img/compatibility-frameworks/LogoFire.svg";
+import LogoWater from "@site/static/img/logos/LogoWater.svg";
+import LogoFire from "@site/static/img/logos/LogoFire.svg";
 
 import styles from './index.module.css';
 
@@ -72,7 +72,6 @@ export default function Home(): JSX.Element {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
-        {/* <HomepageCompatibility /> */}
         <HomepageDemoApps />
         <HomepageTestimonials />
       </main>