diff --git a/services/web/frontend/js/features/project-list/components/notifications/ads/brl-banner.tsx b/services/web/frontend/js/features/project-list/components/notifications/ads/brl-banner.tsx
index 101497f5b4..baa38edfe5 100644
--- a/services/web/frontend/js/features/project-list/components/notifications/ads/brl-banner.tsx
+++ b/services/web/frontend/js/features/project-list/components/notifications/ads/brl-banner.tsx
@@ -1,4 +1,5 @@
import { useCallback, useEffect, useRef, useState } from 'react'
+import bannerImage from '../../../images/brl-banner.png'
import usePersistedState from '../../../../../shared/hooks/use-persisted-state'
import * as eventTracking from '../../../../../infrastructure/event-tracking'
import OLModal, {
@@ -96,7 +97,7 @@ export default function BRLBanner() {
-
+
diff --git a/services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-create-new-project-dropdown.tsx b/services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-create-new-project-dropdown.tsx
index 0d6f7781b0..0f65d08249 100644
--- a/services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-create-new-project-dropdown.tsx
+++ b/services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-create-new-project-dropdown.tsx
@@ -11,6 +11,7 @@ import {
DropdownMenu,
DropdownToggle,
} from '@/features/ui/components/bootstrap-5/dropdown-menu'
+import createNewProjectImage from '../../images/create-a-new-project.svg'
const CustomDropdownToggle = forwardRef<
HTMLButtonElement,
@@ -40,7 +41,7 @@ const CustomDropdownToggle = forwardRef<
{t('create_a_new_project')}

diff --git a/services/web/frontend/js/features/project-list/components/welcome-message.tsx b/services/web/frontend/js/features/project-list/components/welcome-message.tsx
index 8cb5f80064..636d5e978b 100644
--- a/services/web/frontend/js/features/project-list/components/welcome-message.tsx
+++ b/services/web/frontend/js/features/project-list/components/welcome-message.tsx
@@ -5,6 +5,8 @@ import type { NewProjectButtonModalVariant } from './new-project-button/new-proj
import type { Nullable } from '../../../../../types/utils'
import WelcomeMessageLink from './welcome-message-new/welcome-message-link'
import WelcomeMessageCreateNewProjectDropdown from './welcome-message-new/welcome-message-create-new-project-dropdown'
+import learnLatexImage from '../images/learn-latex.svg'
+import browseTemplatesImage from '../images/browse-templates.svg'
import getMeta from '@/utils/meta'
import OLPageContentCard from '@/features/ui/components/ol/ol-page-content-card'
@@ -27,7 +29,7 @@ export default function WelcomeMessage() {
/>
{wikiEnabled && (
diff --git a/services/web/frontend/js/features/project-list/images/brl-banner.png b/services/web/frontend/js/features/project-list/images/brl-banner.png
new file mode 100644
index 0000000000..c3490b54b4
Binary files /dev/null and b/services/web/frontend/js/features/project-list/images/brl-banner.png differ
diff --git a/services/web/frontend/js/features/project-list/images/browse-templates.svg b/services/web/frontend/js/features/project-list/images/browse-templates.svg
new file mode 100644
index 0000000000..2da927f7ba
--- /dev/null
+++ b/services/web/frontend/js/features/project-list/images/browse-templates.svg
@@ -0,0 +1,105 @@
+
diff --git a/services/web/frontend/js/features/project-list/images/clp-banner.png b/services/web/frontend/js/features/project-list/images/clp-banner.png
new file mode 100644
index 0000000000..49d5e7fd27
Binary files /dev/null and b/services/web/frontend/js/features/project-list/images/clp-banner.png differ
diff --git a/services/web/frontend/js/features/project-list/images/cop-banner.png b/services/web/frontend/js/features/project-list/images/cop-banner.png
new file mode 100644
index 0000000000..6803a4617c
Binary files /dev/null and b/services/web/frontend/js/features/project-list/images/cop-banner.png differ
diff --git a/services/web/frontend/js/features/project-list/images/create-a-new-project.svg b/services/web/frontend/js/features/project-list/images/create-a-new-project.svg
new file mode 100644
index 0000000000..2460c1fd54
--- /dev/null
+++ b/services/web/frontend/js/features/project-list/images/create-a-new-project.svg
@@ -0,0 +1,31 @@
+
diff --git a/services/web/frontend/js/features/project-list/images/inr-banner.png b/services/web/frontend/js/features/project-list/images/inr-banner.png
new file mode 100644
index 0000000000..ead8016058
Binary files /dev/null and b/services/web/frontend/js/features/project-list/images/inr-banner.png differ
diff --git a/services/web/frontend/js/features/project-list/images/learn-latex.svg b/services/web/frontend/js/features/project-list/images/learn-latex.svg
new file mode 100644
index 0000000000..5aec4b5975
--- /dev/null
+++ b/services/web/frontend/js/features/project-list/images/learn-latex.svg
@@ -0,0 +1,114 @@
+
diff --git a/services/web/frontend/js/features/project-list/images/mxn-banner.png b/services/web/frontend/js/features/project-list/images/mxn-banner.png
new file mode 100644
index 0000000000..eacefbf102
Binary files /dev/null and b/services/web/frontend/js/features/project-list/images/mxn-banner.png differ
diff --git a/services/web/frontend/js/features/project-list/images/pen-banner.png b/services/web/frontend/js/features/project-list/images/pen-banner.png
new file mode 100644
index 0000000000..1a9b935422
Binary files /dev/null and b/services/web/frontend/js/features/project-list/images/pen-banner.png differ
diff --git a/services/web/frontend/js/features/share-project-modal/components/collaborators-limit-upgrade.tsx b/services/web/frontend/js/features/share-project-modal/components/collaborators-limit-upgrade.tsx
index 6808f5a771..450e42669d 100644
--- a/services/web/frontend/js/features/share-project-modal/components/collaborators-limit-upgrade.tsx
+++ b/services/web/frontend/js/features/share-project-modal/components/collaborators-limit-upgrade.tsx
@@ -4,6 +4,7 @@ import { upgradePlan } from '@/main/account-upgrade'
import { useUserContext } from '@/shared/context/user-context'
import StartFreeTrialButton from '@/shared/components/start-free-trial-button'
import OLButton from '@/features/ui/components/ol/ol-button'
+import addMoreEditorsImage from '../images/add-more-editors.svg'
export default function CollaboratorsLimitUpgrade() {
const { t } = useTranslation()
@@ -13,13 +14,7 @@ export default function CollaboratorsLimitUpgrade() {
- }
+ customIcon={

}
title={t('add_more_editors')}
content={
diff --git a/services/web/frontend/js/features/share-project-modal/images/add-more-editors.svg b/services/web/frontend/js/features/share-project-modal/images/add-more-editors.svg
new file mode 100644
index 0000000000..61ee16d570
--- /dev/null
+++ b/services/web/frontend/js/features/share-project-modal/images/add-more-editors.svg
@@ -0,0 +1,9 @@
+
diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/upgrade-track-changes-modal.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/upgrade-track-changes-modal.tsx
index a4b54b9e26..99c69a2f4f 100644
--- a/services/web/frontend/js/features/source-editor/components/review-panel/upgrade-track-changes-modal.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/upgrade-track-changes-modal.tsx
@@ -2,6 +2,8 @@ import { useTranslation } from 'react-i18next'
import Icon from '../../../../shared/components/icon'
import { useProjectContext } from '../../../../shared/context/project-context'
import { useUserContext } from '../../../../shared/context/user-context'
+import teaserVideo from '../../images/teaser-track-changes.mp4'
+import teaserImage from '../../images/teaser-track-changes.gif'
import { startFreeTrial, upgradePlan } from '@/main/account-upgrade'
import { memo } from 'react'
import { useFeatureFlag } from '@/shared/context/split-test-context'
@@ -41,12 +43,9 @@ function UpgradeTrackChangesModal({
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
diff --git a/services/web/frontend/js/features/source-editor/images/teaser-track-changes.gif b/services/web/frontend/js/features/source-editor/images/teaser-track-changes.gif
new file mode 100644
index 0000000000..00e02a29b0
Binary files /dev/null and b/services/web/frontend/js/features/source-editor/images/teaser-track-changes.gif differ
diff --git a/services/web/frontend/js/features/source-editor/images/teaser-track-changes.mp4 b/services/web/frontend/js/features/source-editor/images/teaser-track-changes.mp4
new file mode 100644
index 0000000000..1f75a461ad
Binary files /dev/null and b/services/web/frontend/js/features/source-editor/images/teaser-track-changes.mp4 differ
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/group-settings-button.tsx b/services/web/frontend/js/features/subscription/components/dashboard/group-settings-button.tsx
index 033733dd58..798d3faa92 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/group-settings-button.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/group-settings-button.tsx
@@ -8,6 +8,7 @@ import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/boots
import { bsVersion } from '@/features/utils/bootstrap-5'
import { ManagedGroupSubscription } from '../../../../../../types/subscription/dashboard/subscription'
import { sendMB } from '../../../../infrastructure/event-tracking'
+import starIcon from '../../images/star-gradient.svg'
function AvailableWithGroupProfessionalBadge() {
const { t } = useTranslation()
@@ -22,13 +23,7 @@ function AvailableWithGroupProfessionalBadge() {
return (
- }
+ prepend={

}
contentProps={{
className: bsVersion({ bs5: 'mw-100' }),
onClick: handleUpgradeClick,
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx
index b23ea490e8..5d767d5fb6 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx
@@ -13,7 +13,7 @@ import Button from '@/features/ui/components/bootstrap-5/button'
import { Stack } from 'react-bootstrap-5'
import { debugConsole } from '@/utils/debugging'
import * as eventTracking from '../../../../infrastructure/event-tracking'
-import PauseDuck from './pause-duck.svg'
+import PauseDuck from '../../images/pause-duck.svg'
import GenericErrorAlert from './generic-error-alert'
import { RecurlySubscription } from '../../../../../../types/subscription/dashboard/subscription'
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/pause-duck.svg b/services/web/frontend/js/features/subscription/images/pause-duck.svg
similarity index 100%
rename from services/web/frontend/js/features/subscription/components/dashboard/pause-duck.svg
rename to services/web/frontend/js/features/subscription/images/pause-duck.svg
diff --git a/services/web/frontend/js/features/subscription/images/star-gradient.svg b/services/web/frontend/js/features/subscription/images/star-gradient.svg
new file mode 100644
index 0000000000..0f979e31c1
--- /dev/null
+++ b/services/web/frontend/js/features/subscription/images/star-gradient.svg
@@ -0,0 +1,15 @@
+
diff --git a/services/web/frontend/js/shared/components/interstitial.tsx b/services/web/frontend/js/shared/components/interstitial.tsx
index 1ec1830098..da3386ba2e 100644
--- a/services/web/frontend/js/shared/components/interstitial.tsx
+++ b/services/web/frontend/js/shared/components/interstitial.tsx
@@ -1,4 +1,5 @@
import classNames from 'classnames'
+import overleafLogo from '@/shared/svgs/overleaf.svg'
type InterstitialProps = {
className?: string
@@ -17,9 +18,7 @@ export function Interstitial({
}: InterstitialProps) {
return (
- {showLogo && (
-

- )}
+ {showLogo &&

}
{title &&
{title}
}
{children}
diff --git a/services/web/frontend/js/shared/svgs/overleaf-a-ds-solution-mallard.svg b/services/web/frontend/js/shared/svgs/overleaf-a-ds-solution-mallard.svg
new file mode 100644
index 0000000000..a0e156545f
--- /dev/null
+++ b/services/web/frontend/js/shared/svgs/overleaf-a-ds-solution-mallard.svg
@@ -0,0 +1 @@
+
diff --git a/services/web/frontend/js/shared/svgs/overleaf.svg b/services/web/frontend/js/shared/svgs/overleaf.svg
new file mode 100644
index 0000000000..0204321849
--- /dev/null
+++ b/services/web/frontend/js/shared/svgs/overleaf.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/services/web/test/frontend/bootstrap.js b/services/web/test/frontend/bootstrap.js
index d39dfffffc..cdc9300138 100644
--- a/services/web/test/frontend/bootstrap.js
+++ b/services/web/test/frontend/bootstrap.js
@@ -1,6 +1,6 @@
// Run babel on tests to allow support for import/export statements in Node
require('@babel/register')({
- extensions: ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.svg'],
+ extensions: ['.ts', '.tsx', '.js', '.jsx', '.mjs'],
plugins: [['module-resolver', { alias: { '^@/(.+)': './frontend/js/\\1' } }]],
})
@@ -85,9 +85,12 @@ globalThis.fetch =
window.fetch =
(url, ...options) => fetch(new URL(url, 'http://127.0.0.1'), ...options)
-// ignore CSS/LESS files
+// ignore style/image files
const { addHook } = require('pirates')
-addHook(() => '', { exts: ['.css', '.less'], ignoreNodeModules: false })
+addHook(() => '', {
+ exts: ['.css', '.less', '.svg', '.png', '.gif', '.mp4'],
+ ignoreNodeModules: false,
+})
globalThis.HTMLElement.prototype.scrollIntoView = () => {}
diff --git a/services/web/types/assets.d.ts b/services/web/types/assets.d.ts
index b44bc6a29c..1aa1a145b6 100644
--- a/services/web/types/assets.d.ts
+++ b/services/web/types/assets.d.ts
@@ -8,6 +8,16 @@ declare module '*.png' {
export default src
}
+declare module '*.gif' {
+ const src: string
+ export default src
+}
+
+declare module '*.mp4' {
+ const src: string
+ export default src
+}
+
declare module '*.wasm' {
const src: string
export default src
diff --git a/services/web/webpack.config.js b/services/web/webpack.config.js
index 634e57de57..3917985461 100644
--- a/services/web/webpack.config.js
+++ b/services/web/webpack.config.js
@@ -247,8 +247,8 @@ module.exports = {
},
},
{
- // Load images (static files)
- test: /\.(svg|gif|png|jpg|pdf)$/,
+ // Load images and videos (static files)
+ test: /\.(svg|gif|png|jpg|pdf|mp4)$/,
type: 'asset/resource',
generator: {
filename: 'images/[name]-[contenthash][ext]',