diff --git a/src/themes/dspace/app/+home-page/home-news/home-news.component.html b/src/themes/dspace/app/+home-page/home-news/home-news.component.html
new file mode 100644
index 0000000000..9063961ace
--- /dev/null
+++ b/src/themes/dspace/app/+home-page/home-news/home-news.component.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
DSpace 7
+
DSpace is the world leading open source repository platform that enables
+ organisations to:
+
+
+
+ - easily ingest documents, audio, video, datasets and their corresponding Dublin Core
+ metadata
+
+ - open up this content to local and global audiences, thanks to the OAI-PMH interface and
+ Google Scholar optimizations
+
+ - issue permanent urls and trustworthy identifiers, including optional integrations with
+ handle.net and DataCite DOI
+
+
+
Join an international community of leading institutions using DSpace.
+
+
+
Photo by @inspiredimages
+
diff --git a/src/themes/dspace/app/+home-page/home-news/home-news.component.scss b/src/themes/dspace/app/+home-page/home-news/home-news.component.scss
new file mode 100644
index 0000000000..b5a070e51e
--- /dev/null
+++ b/src/themes/dspace/app/+home-page/home-news/home-news.component.scss
@@ -0,0 +1,69 @@
+:host {
+ display: block;
+ margin-top: calc(var(--ds-content-spacing) * -1);
+
+ div.background-image {
+ color: white;
+ background-color: var(--bs-info);
+ position: relative;
+ background-position-y: -200px;
+ background-image: url('/assets/dspace/images/banner.jpg');
+ background-size: cover;
+ @media screen and (max-width: map-get($grid-breakpoints, lg)) {
+ background-position-y: 0;
+ }
+
+ .container {
+ position: relative;
+ text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+
+ &:before, &:after {
+ content: '';
+ display: block;
+ width: var(--ds-banner-background-gradient-width);
+ height: 100%;
+ top: 0;
+ position: absolute;
+ }
+
+ &:before {
+ background: linear-gradient(to left, var(--ds-banner-text-background), transparent);
+ left: calc(-1 * var(--ds-banner-background-gradient-width));
+
+ }
+
+ &:after {
+ background: linear-gradient(to right, var(--ds-banner-text-background), transparent);
+ right: calc(-1 * var(--ds-banner-background-gradient-width));
+ }
+
+ background-color: var(--ds-banner-text-background);
+ }
+
+
+ small.credits {
+ a {
+ color: inherit;
+ }
+
+ opacity: 0.3;
+ position: absolute;
+ right: var(--bs-spacer);
+ bottom: 0;
+ }
+ }
+
+ .jumbotron {
+ background-color: transparent;
+ }
+
+ a {
+ color: var(--ds-home-news-link-color);
+
+ @include hover {
+ color: var(--ds-home-news-link-hover-color);
+ }
+ }
+}
+
+
diff --git a/src/themes/dspace/app/+home-page/home-news/home-news.component.ts b/src/themes/dspace/app/+home-page/home-news/home-news.component.ts
new file mode 100644
index 0000000000..7f06295407
--- /dev/null
+++ b/src/themes/dspace/app/+home-page/home-news/home-news.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { HomeNewsComponent as BaseComponent } from '../../../../../app/+home-page/home-news/home-news.component';
+
+@Component({
+ selector: 'ds-home-news',
+ styleUrls: ['./home-news.component.scss'],
+ templateUrl: './home-news.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class HomeNewsComponent extends BaseComponent {}
+
diff --git a/src/assets/images/banner.jpg b/src/themes/dspace/assets/images/banner.jpg
similarity index 100%
rename from src/assets/images/banner.jpg
rename to src/themes/dspace/assets/images/banner.jpg
diff --git a/src/themes/dspace/styles/_theme_css_variable_overrides.scss b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
index f95ab5c764..75d4fd9362 100644
--- a/src/themes/dspace/styles/_theme_css_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
@@ -3,7 +3,7 @@
:root {
--ds-banner-text-background: rgba(0, 0, 0, 0.35);
--ds-banner-background-gradient-width: 300px;
- --ds-home-news-link-color: $green;
+ --ds-home-news-link-color: #{$green};
--ds-home-news-link-hover-color: #{darken($green, 15%)};
}
diff --git a/src/themes/dspace/theme.module.ts b/src/themes/dspace/theme.module.ts
index 2959728156..ed840c2e25 100644
--- a/src/themes/dspace/theme.module.ts
+++ b/src/themes/dspace/theme.module.ts
@@ -28,6 +28,7 @@ import { StatisticsModule } from '../../app/statistics/statistics.module';
import { StoreModule } from '@ngrx/store';
import { StoreRouterConnectingModule } from '@ngrx/router-store';
import { TranslateModule } from '@ngx-translate/core';
+import { HomeNewsComponent } from './app/+home-page/home-news/home-news.component';
import { HomePageModule } from '../../app/+home-page/home-page.module';
import { AppModule } from '../../app/app.module';
import { ItemPageModule } from '../../app/+item-page/item-page.module';
@@ -42,6 +43,7 @@ import { MyDSpacePageModule } from '../../app/+my-dspace-page/my-dspace-page.mod
import { NavbarComponent } from './app/navbar/navbar.component';
const DECLARATIONS = [
+ HomeNewsComponent,
NavbarComponent
];