[UI] Update Screenshots (#24)

* update-websiteImages

* update-themes

Author: Mariaboni

assets/heroic_01.png

@@ -2,7 +2,7 @@
 import Link from 'next/link'
 import React from 'react'
 
-const logo = require('../assets/logo.png')
+const logo = require('../assets/logo.png?webp')
 import {
   faTwitter,
   faGithub,

assets/heroic_01.webp

@@ -6,14 +6,14 @@ import { motion } from 'framer-motion'
 
 import styles from '../styles/Home.module.css'
 
-const img1 = require('../assets/heroic_01.png?webp')
-const img2 = require('../assets/heroic_game.png?webp')
-const img3 = require('../assets/heroic_install.png?webp')
-const img4 = require('../assets/heroic_stores.png?webp')
-const img5 = require('../assets/heroic_wine.png?webp')
-const img6 = require('../assets/heroic_wine_settings.png?webp')
+const img1 = require('../assets/heroic_01.webp')
+const img2 = require('../assets/heroic_game.webp')
+const img3 = require('../assets/heroic_install.webp')
+const img4 = require('../assets/heroic_stores.webp')
+const img5 = require('../assets/heroic_wine.webp')
+const img6 = require('../assets/heroic_wine_settings.webp')
 const img7 = require('../assets/heroic_langs.png?webp')
-const img8 = require('../assets/heroic_menu.png?webp')
+const img8 = require('../assets/heroic_menu.webp')
 const gif = require('../assets/themes.gif')
 
 const initial = { y: '300px', opacity: 0 }

assets/heroic_game.png

@@ -127,9 +127,7 @@ footer {
     width: 212px;
   }
 
-  .feature img {
-    width: 813px;
-  }
+ 
 
   .heroicPreview {
     width: 1130px;