changes as per @LianaHus comments

apps/remix-ide/src/app/tabs/locales/en/home.json

@@ -68,3 +68,4 @@
   "home.seeAllTutorials": "See all tutorials",
   "home.maintainedByRemix": "Maintained by Remix"
 }
+

libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx

@@ -17,7 +17,7 @@ function HomeTabFeatured() {
         <FormattedMessage id="home.featured" />
       </label>
       <div className="mb-2">
-        <div className="w-100 d-flex flex-column rounded-3" style={{ height: '300px' }}>
+        <div className="w-100 d-flex flex-column rounded-3" style={{ height: '450px' }}>
           <ThemeContext.Provider value={themeFilter}>
             <Carousel
               arrows={false}
@@ -34,14 +34,14 @@ function HomeTabFeatured() {
               centerMode={false}
               autoPlay={true}
               keyBoardControl={true}
-              containerClass="border w-full carousel-container"
+              containerClass="border w-full carousel-container h-100 d-flex align-items-center"
               sliderClass="h-100 justify-content-between"
               deviceType={'desktop'}
               itemClass=""
               autoPlaySpeed={10000}
               dotListClass="position-relative mt-2"
             >
-              <div className="mr-1 pr-1 d-flex">
+              <div className="mr-1 pr-1 d-flex align-items-center justify-content-center h-100">
                 <div className="h6 w-50 p-2 pl-4 align-self-center" style={{ flex: '1' }}>
                   <h5>{releaseDetails.version} {releaseDetails.title}</h5>
                   <div style={{ fontSize: '0.8rem' }} className="mb-3">
@@ -65,7 +65,7 @@ function HomeTabFeatured() {
                   <img src={'assets/img/remi_drums_whatsnew.webp'} style={{ flex: '1', height: '220px', maxWidth: '220px' }} alt=""></img>
                 </a>
               </div>
-              <div className="mr-1 pr-1 d-flex">
+              <div className="mr-1 pr-1 d-flex align-items-center justify-content-center h-100">
                 <div className="h6 w-50 p-2 pl-4  align-self-center" style={{ flex: '1' }}>
                   <h5>
                     <FormattedMessage id="home.jumpIntoWeb3" />
@@ -86,7 +86,7 @@ function HomeTabFeatured() {
                   <img src={'assets/img/bgRemi_small.webp'} style={{ flex: '1', height: '220px', maxWidth: '220px' }} alt=""></img>
                 </a>
               </div>
-              <div className="mr-1 pr-1 d-flex">
+              <div className="mr-1 pr-1 d-flex align-items-center justify-content-center h-100">
                 <div className="h6 w-50 p-2 pl-4  align-self-center" style={{ flex: '1' }}>
                   <h5>
                     <FormattedMessage id="home.remixYouTube" />
@@ -110,7 +110,7 @@ function HomeTabFeatured() {
                   <img src={'/assets/img/YouTubeLogo.webp'} style={{ flex: '1', height: '220px', maxWidth: '220px' }} alt=""></img>
                 </a>
               </div>
-              <div className="mr-1 pr-1 d-flex">
+              <div className="mr-1 pr-1 d-flex align-items-center justify-content-center h-100">
                 <div className="h6 w-50 p-2 pl-4  align-self-center" style={{ flex: '1' }}>
                   <h5>
                     <FormattedMessage id="home.betaTesting" />

libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx

@@ -247,7 +247,7 @@ contract HelloWorld {
       <Toaster message={state.toasterMsg} />
       <div className="justify-content-start mt-1 p-2 d-flex flex-column" id="hTFileSection">
         {(state.recentWorkspaces[0] || state.recentWorkspaces[1] || state.recentWorkspaces[2]) && (
-          <div className="d-flex flex-column mb-3">
+          <div className="d-flex flex-column mb-5">
             <label style={{ fontSize: '0.8rem' }} className="mt-3">
               Recent workspaces
             </label>
@@ -274,7 +274,7 @@ contract HelloWorld {
         <div className="d-flex flex-column">
           <div className="d-flex flex-row">
             <CustomTooltip placement={'top'} tooltipId="overlay-tooltip" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="home.startCodingPlayground" />} tooltipTextClasses="border bg-light text-dark p-1 pr-3">
-              <button className="btn btn-primary text-nowrap p-2 mr-2 border my-1" data-id="homeTabStartCoding" style={{ width: 'fit-content' }} onClick={() => startCoding()}>
+              <button className="btn btn-primary text-nowrap p-2 mr-2 border my-1" data-id="homeTabStartCoding" style={{ width: 'fit-content' }} onClick={async () => await plugin.call('filePanel', 'createNewFile')}>
                 <FormattedMessage id="home.startCoding" />
               </button>
             </CustomTooltip>
@@ -316,12 +316,10 @@ contract HelloWorld {
             </button>
           </div>
         </div>
-        {/* <label style={{ fontSize: '0.8rem' }} className="pt-3">
-          <FormattedMessage id="home.loadFrom" />
-        </label> */}
         <div className="d-flex mt-2 align-items-end">
           <CustomTooltip placement={'top'} tooltipId="overlay-tooltip" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="home.connectToLocalhost" />} tooltipTextClasses="border bg-light text-dark p-1 pr-3">
             <button className="btn btn-block w-100 text-nowrap p-2 border my-1" style={{ width: 'fit-content' }} onClick={() => connectToLocalhost()}>
+              <i className="fa-regular fa-desktop pr-2"></i>
               <FormattedMessage id="home.accessFileSystem" />
             </button>
           </CustomTooltip>

libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx

@@ -155,7 +155,7 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
       </label>
       <div ref={carouselRefDiv} className="w-100 d-flex flex-column">
         <ThemeContext.Provider value={themeFilter}>
-          <div className="pt-2">
+          <div className="pt-3">
             <div className="d-flex flex-row align-items-center mb-3 flex-nowrap">
               {workspaceTemplates.slice(0, 3).map((template, index) => (
                 <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="top-start" key={`${template.gsID}-${template.workspaceTitle}-${index}`}>
@@ -172,7 +172,7 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
                 </CustomTooltip>
               ))}
             </div>
-            <div className="d-flex flex-row align-items-center mb-3 flex-nowrap">
+            <div className="d-flex flex-row align-items-center mb-2 flex-nowrap">
               {workspaceTemplates.slice(3, workspaceTemplates.length).map((template, index) => (
                 <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="bottom-start" key={`${template.gsID}-${template.workspaceTitle}-${index}`}>
                   <button