diff --git a/src/components/SDKsPage/data.ts b/src/components/SDKsPage/data.ts
index c09638321f..2147e2d79e 100644
--- a/src/components/SDKsPage/data.ts
+++ b/src/components/SDKsPage/data.ts
@@ -1,3 +1,25 @@
+import js from './images/js.svg';
+import java from './images/java.svg';
+import python from './images/python.svg';
+import react from './images/react.svg';
+import csharp from './images/csharp.svg';
+import go from './images/go.svg';
+import nodejs from './images/nodejs.svg';
+import ruby from './images/ruby.svg';
+import swift from './images/swift.svg';
+import objectivec from './images/objectivec.svg';
+import flutter from './images/flutter.svg';
+import php from './images/php.svg';
+import laravel from './images/laravel.svg';
+import android from './images/android.svg';
+import kotlin from './images/kotlin.svg';
+import unity from './images/unity.svg';
+import xamarin from './images/xamarin.svg';
+import nativescript from './images/nativescript.svg';
+import cordova from './images/cordova.svg';
+import clojure from './images/clojure.svg';
+import scala from './images/scala.svg';
+
export const data = {
hero: {
title: 'Available SDKs',
@@ -10,147 +32,147 @@ export const data = {
{
title: 'JavaScript',
text: 'Ably SDK for JavaScript.',
- image: { src: '/images/sdks/js.svg', isWide: false },
+ image: { src: js, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-js',
setupLink: '/getting-started/setup?lang=javascript',
},
{
title: 'Java',
text: 'Ably SDK for Java.',
- image: { src: '/images/sdks/java.svg', isWide: false },
+ image: { src: java, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-java',
setupLink: '/getting-started/setup?lang=java',
},
{
title: 'Python',
text: 'Ably SDK for Python.',
- image: { src: '/images/sdks/python.svg', isWide: false },
+ image: { src: python, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-python',
setupLink: '/getting-started/setup?lang=python',
},
{
title: 'React',
text: 'Ably React Hooks package.',
- image: { src: '/images/sdks/react.svg', isWide: false },
+ image: { src: react, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-js',
setupLink: '/getting-started/react',
},
{
title: 'C#.NET',
text: 'Ably SDK for C#.NET.',
- image: { src: '/images/sdks/csharp.svg', isWide: false },
+ image: { src: csharp, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-dotnet',
setupLink: '/getting-started/setup?lang=csharp',
},
{
title: 'Go',
text: 'Ably SDK for Go.',
- image: { src: '/images/sdks/go.svg', isWide: false },
+ image: { src: go, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-go',
setupLink: '/getting-started/setup?lang=go',
},
{
title: 'Node.js',
text: 'Ably SDK for Node.js.',
- image: { src: '/images/sdks/nodejs.svg', isWide: false },
+ image: { src: nodejs, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-js',
setupLink: '/getting-started/setup?lang=nodejs',
},
{
title: 'Ruby',
text: 'Ably SDK for Ruby.',
- image: { src: '/images/sdks/ruby.svg', isWide: false },
+ image: { src: ruby, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-ruby',
setupLink: '/getting-started/setup?lang=ruby',
},
{
title: 'Swift',
text: 'Ably SDK for Swift.',
- image: { src: '/images/sdks/swift.svg', isWide: false },
+ image: { src: swift, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-cocoa',
setupLink: '/getting-started/setup?lang=swift',
},
{
title: 'Objective-C',
text: 'Ably SDK for Objective-C.',
- image: { src: '/images/sdks/objectivec.svg', isWide: false },
+ image: { src: objectivec, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-cocoa',
setupLink: '/getting-started/setup?lang=objc',
},
{
title: 'Flutter',
text: 'Ably SDK for Flutter.',
- image: { src: '/images/sdks/flutter.svg', isWide: false },
+ image: { src: flutter, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-flutter',
setupLink: '/getting-started/setup?lang=flutter',
},
{
title: 'PHP',
text: 'Ably SDK for PHP.',
- image: { src: '/images/sdks/php.svg', isWide: false },
+ image: { src: php, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-php',
setupLink: '/getting-started/setup?lang=php',
},
{
title: 'PHP Laravel',
text: 'Ably SDK for PHP Laravel.',
- image: { src: '/images/sdks/laravel.svg', isWide: false },
+ image: { src: laravel, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-php#laravel-realtime-broadcasting',
setupLink: 'https://github.com/ably/ably-php#laravel-realtime-broadcasting',
},
{
title: 'Android',
text: 'Ably SDK for Android.',
- image: { src: '/images/sdks/android.svg', isWide: false },
+ image: { src: android, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-java',
setupLink: '/getting-started/setup?lang=java',
},
{
title: 'Kotlin',
text: 'Ably SDK for Kotlin.',
- image: { src: '/images/sdks/kotlin.svg', isWide: false },
+ image: { src: kotlin, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-java',
setupLink: '/getting-started/setup?lang=java',
},
{
title: 'Unity',
text: 'Ably SDK for Unity.',
- image: { src: '/images/sdks/unity.svg', isWide: false },
+ image: { src: unity, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-dotnet',
setupLink: 'https://github.com/ably/ably-dotnet/blob/main/unity/README.md',
},
{
title: 'Xamarin',
text: 'Ably SDK for Xamarin.',
- image: { src: '/images/sdks/xamarin.svg', isWide: false },
+ image: { src: xamarin, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-dotnet',
setupLink: '/getting-started/setup?lang=csharp',
},
{
title: 'NativeScript',
text: 'Ably SDK for NativeScript.',
- image: { src: '/images/sdks/nativescript.svg', isWide: false },
+ image: { src: nativescript, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-js-nativescript',
setupLink: 'https://github.com/ably/ably-js-nativescript#how-to-use-this-library',
},
{
title: 'Cordova',
text: 'Ably SDK for Cordova.',
- image: { src: '/images/sdks/cordova.svg', isWide: false },
+ image: { src: cordova, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-js',
setupLink: '/getting-started/setup?lang=javascript',
},
{
title: 'Clojure',
text: 'Ably SDK for Clojure.',
- image: { src: '/images/sdks/clojure.svg', isWide: false },
+ image: { src: clojure, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-java',
setupLink: '/getting-started/setup?lang=java',
},
{
title: 'Scala',
text: 'Ably SDK for Scala.',
- image: { src: '/images/sdks/scala.svg', isWide: false },
+ image: { src: scala, isWide: false },
githubRepoURL: 'https://github.com/ably/ably-java',
setupLink: '/getting-started/setup?lang=java',
},
@@ -162,14 +184,14 @@ export const data = {
{
title: 'JavaScript',
text: 'Ably Spaces SDK for JavaScript.',
- image: { src: '/images/sdks/js.svg', isWide: false },
+ image: { src: js, isWide: false },
githubRepoURL: 'https://github.com/ably/spaces',
setupLink: '/spaces/setup',
},
{
title: 'React',
text: 'Ably Spaces React Hooks package.',
- image: { src: '/images/sdks/react.svg', isWide: false },
+ image: { src: react, isWide: false },
githubRepoURL: 'https://github.com/ably/spaces',
setupLink: '/spaces/react',
},
diff --git a/static/images/sdks/android.svg b/src/components/SDKsPage/images/android.svg
similarity index 100%
rename from static/images/sdks/android.svg
rename to src/components/SDKsPage/images/android.svg
diff --git a/static/images/sdks/clojure.svg b/src/components/SDKsPage/images/clojure.svg
similarity index 100%
rename from static/images/sdks/clojure.svg
rename to src/components/SDKsPage/images/clojure.svg
diff --git a/static/images/sdks/cordova.svg b/src/components/SDKsPage/images/cordova.svg
similarity index 100%
rename from static/images/sdks/cordova.svg
rename to src/components/SDKsPage/images/cordova.svg
diff --git a/static/images/sdks/csharp.svg b/src/components/SDKsPage/images/csharp.svg
similarity index 100%
rename from static/images/sdks/csharp.svg
rename to src/components/SDKsPage/images/csharp.svg
diff --git a/static/images/sdks/flutter.svg b/src/components/SDKsPage/images/flutter.svg
similarity index 100%
rename from static/images/sdks/flutter.svg
rename to src/components/SDKsPage/images/flutter.svg
diff --git a/static/images/sdks/go.svg b/src/components/SDKsPage/images/go.svg
similarity index 100%
rename from static/images/sdks/go.svg
rename to src/components/SDKsPage/images/go.svg
diff --git a/static/images/sdks/java.svg b/src/components/SDKsPage/images/java.svg
similarity index 100%
rename from static/images/sdks/java.svg
rename to src/components/SDKsPage/images/java.svg
diff --git a/static/images/sdks/js.svg b/src/components/SDKsPage/images/js.svg
similarity index 100%
rename from static/images/sdks/js.svg
rename to src/components/SDKsPage/images/js.svg
diff --git a/static/images/sdks/kotlin.svg b/src/components/SDKsPage/images/kotlin.svg
similarity index 100%
rename from static/images/sdks/kotlin.svg
rename to src/components/SDKsPage/images/kotlin.svg
diff --git a/static/images/sdks/laravel.svg b/src/components/SDKsPage/images/laravel.svg
similarity index 100%
rename from static/images/sdks/laravel.svg
rename to src/components/SDKsPage/images/laravel.svg
diff --git a/static/images/sdks/nativescript.svg b/src/components/SDKsPage/images/nativescript.svg
similarity index 100%
rename from static/images/sdks/nativescript.svg
rename to src/components/SDKsPage/images/nativescript.svg
diff --git a/static/images/sdks/nodejs.svg b/src/components/SDKsPage/images/nodejs.svg
similarity index 100%
rename from static/images/sdks/nodejs.svg
rename to src/components/SDKsPage/images/nodejs.svg
diff --git a/static/images/sdks/objectivec.svg b/src/components/SDKsPage/images/objectivec.svg
similarity index 100%
rename from static/images/sdks/objectivec.svg
rename to src/components/SDKsPage/images/objectivec.svg
diff --git a/static/images/sdks/php.svg b/src/components/SDKsPage/images/php.svg
similarity index 100%
rename from static/images/sdks/php.svg
rename to src/components/SDKsPage/images/php.svg
diff --git a/static/images/sdks/python.svg b/src/components/SDKsPage/images/python.svg
similarity index 100%
rename from static/images/sdks/python.svg
rename to src/components/SDKsPage/images/python.svg
diff --git a/static/images/sdks/react.svg b/src/components/SDKsPage/images/react.svg
similarity index 100%
rename from static/images/sdks/react.svg
rename to src/components/SDKsPage/images/react.svg
diff --git a/static/images/sdks/ruby.svg b/src/components/SDKsPage/images/ruby.svg
similarity index 100%
rename from static/images/sdks/ruby.svg
rename to src/components/SDKsPage/images/ruby.svg
diff --git a/static/images/sdks/scala.svg b/src/components/SDKsPage/images/scala.svg
similarity index 100%
rename from static/images/sdks/scala.svg
rename to src/components/SDKsPage/images/scala.svg
diff --git a/static/images/sdks/sdk-hero.png b/src/components/SDKsPage/images/sdk-hero.png
similarity index 100%
rename from static/images/sdks/sdk-hero.png
rename to src/components/SDKsPage/images/sdk-hero.png
diff --git a/static/images/sdks/swift.svg b/src/components/SDKsPage/images/swift.svg
similarity index 100%
rename from static/images/sdks/swift.svg
rename to src/components/SDKsPage/images/swift.svg
diff --git a/static/images/sdks/unity.svg b/src/components/SDKsPage/images/unity.svg
similarity index 100%
rename from static/images/sdks/unity.svg
rename to src/components/SDKsPage/images/unity.svg
diff --git a/static/images/sdks/xamarin.svg b/src/components/SDKsPage/images/xamarin.svg
similarity index 100%
rename from static/images/sdks/xamarin.svg
rename to src/components/SDKsPage/images/xamarin.svg
diff --git a/src/components/SDKsPage/index.tsx b/src/components/SDKsPage/index.tsx
index b095359ba0..2497996e3d 100644
--- a/src/components/SDKsPage/index.tsx
+++ b/src/components/SDKsPage/index.tsx
@@ -1,8 +1,9 @@
-import { StaticImage } from '../StaticImage';
import MainSection, { Tab } from './MainSection';
import { data } from './data';
import { container } from './sdks.module.css';
+import hero from './images/sdk-hero.png';
+
const Content = ({ tab }: { tab: string }) => {
return (
<>
@@ -12,7 +13,7 @@ const Content = ({ tab }: { tab: string }) => {
{data.hero.title}
{data.hero.subtitle}
-