+
+ );
+}
+
+export default CloudIntegrationPage;
diff --git a/frontend/src/container/CloudIntegrationPage/Header/Header.styles.scss b/frontend/src/container/CloudIntegrationPage/Header/Header.styles.scss
new file mode 100644
index 000000000000..2fe46962129a
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/Header/Header.styles.scss
@@ -0,0 +1,65 @@
+.cloud-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 8px 18px;
+ border-bottom: 1px solid var(--bg-slate-400);
+
+ &__navigation {
+ display: flex;
+ align-items: center;
+ padding: 6px 0px 6px;
+ }
+
+ &__breadcrumb-link {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ &__breadcrumb-title {
+ color: var(--bg-vanilla-400);
+ font-size: 14px;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ }
+
+ &__help {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 6px;
+ gap: 6px;
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-ink-300);
+ border-radius: 2px;
+ color: var(--bg-vanilla-400);
+ font-size: 12px;
+ line-height: 10px; /* 83.333% */
+ letter-spacing: 0.12px;
+ width: 113px;
+ height: 32px;
+ cursor: pointer;
+ }
+}
+
+.lightMode {
+ .cloud-header {
+ border-bottom: 1px solid var(--bg-slate-300);
+
+ &__breadcrumb-title {
+ color: var(--bg-ink-400);
+ }
+
+ &__help {
+ border-color: var(--bg-slate-300);
+ background: var(--bg-vanilla-100);
+ color: var(--bg-ink-400);
+
+ &:hover {
+ border-color: var(--bg-slate-400);
+ color: var(--bg-ink-500);
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/CloudIntegrationPage/Header/Header.tsx b/frontend/src/container/CloudIntegrationPage/Header/Header.tsx
new file mode 100644
index 000000000000..13842d18ae20
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/Header/Header.tsx
@@ -0,0 +1,43 @@
+import './Header.styles.scss';
+
+import Breadcrumb from 'antd/es/breadcrumb';
+import ROUTES from 'constants/routes';
+import { Blocks, LifeBuoy } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+function Header(): JSX.Element {
+ return (
+
+
+ );
+}
+
+export default Header;
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.style.scss b/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.style.scss
new file mode 100644
index 000000000000..28b5b864c60c
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.style.scss
@@ -0,0 +1,72 @@
+.hero-section {
+ height: 308px;
+ padding: 26px 16px;
+ display: flex;
+ gap: 24px;
+ position: relative;
+ overflow: hidden;
+ background-position: right;
+ background-size: cover;
+ background-repeat: no-repeat;
+ border-bottom: 1px solid var(--bg-slate-500);
+
+ &__icon {
+ height: fit-content;
+ background-color: var(--bg-ink-400);
+ padding: 12px;
+ border: 1px solid var(--bg-ink-300);
+ border-radius: 6px;
+ width: 60px;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ img {
+ width: 100%;
+ }
+ }
+
+ &__details {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ .title {
+ color: var(--bg-vanilla-100);
+ font-size: 24px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: -0.12px;
+ }
+
+ .description {
+ color: var(--bg-vanilla-400);
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 18px;
+ }
+ }
+}
+
+.lightMode {
+ .hero-section {
+ border-bottom: 1px solid var(--bg-vanilla-300);
+
+ &__icon {
+ background-color: var(--bg-vanilla-100);
+ border-color: var(--bg-vanilla-300);
+ }
+
+ &__details {
+ .title {
+ color: var(--bg-ink-500);
+ }
+
+ .description {
+ color: var(--bg-ink-400);
+ }
+ }
+ }
+}
+.integrations-select {
+ height: 44px;
+}
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.tsx
new file mode 100644
index 000000000000..16be03ffd055
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.tsx
@@ -0,0 +1,34 @@
+import './HeroSection.style.scss';
+
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import AccountActions from './components/AccountActions';
+
+function HeroSection(): JSX.Element {
+ const isDarkMode = useIsDarkMode();
+ return (
+
+
+
+
+ AWS web services
+ ),
+ },
+ ]}
+ />
+
+
+
+
+
+ );
+}
+
+export default HeroSection;
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.style.scss b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.style.scss
new file mode 100644
index 000000000000..b1f36654ced7
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.style.scss
@@ -0,0 +1,127 @@
+.hero-section__actions {
+ margin-top: 12px;
+
+ &-with-account {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
+}
+.hero-section__action-buttons {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.hero-section__action-button {
+ font-family: 'Inter';
+ border-radius: 2px;
+ cursor: pointer;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 16px;
+ padding: 8px 17px;
+
+ &.primary {
+ background: var(--bg-robin-500);
+ border: none;
+ color: var(--bg-vanilla-100);
+ }
+
+ &.secondary {
+ display: flex;
+ align-items: center;
+ border: 1px solid var(--bg-ink-300);
+ color: var(--bg-vanilla-100);
+ border-radius: 2px;
+ background: var(--bg-slate-400);
+ box-shadow: none;
+ }
+}
+
+.cloud-account-selector {
+ border-radius: 2px;
+ border: 1px solid var(--bg-ink-300);
+ background: linear-gradient(
+ 139deg,
+ rgba(18, 19, 23, 0.8) 0%,
+ rgba(18, 19, 23, 0.9) 98.68%
+ );
+ box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+ -webkit-backdrop-filter: blur(20px);
+ backdrop-filter: blur(20px);
+ .ant-select-selector {
+ border-color: var(--bg-slate-400) !important;
+ background: var(--bg-ink-300) !important;
+ padding: 6px 8px !important;
+ }
+ .ant-select-selection-item {
+ color: var(--bg-vanilla-400);
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 16px;
+ }
+
+ .account-option-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ &__selected {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 14px;
+ width: 14px;
+ background-color: rgba(192, 193, 195, 0.2); /* #C0C1C3 with 0.2 opacity */
+ border-radius: 2px;
+ }
+ }
+}
+.lightMode {
+ .hero-section__action-button {
+ &.primary {
+ background: var(--bg-robin-500);
+ color: var(--bg-vanilla-100);
+ }
+
+ &.secondary {
+ border-color: var(--bg-vanilla-300);
+ color: var(--bg-ink-400);
+ background: var(--bg-vanilla-100);
+
+ &:hover {
+ border-color: var(--bg-vanilla-400);
+ color: var(--bg-ink-500);
+ }
+ }
+ }
+
+ .cloud-account-selector {
+ background: var(--bg-vanilla-100);
+ .ant-select-selector {
+ background: var(--bg-vanilla-100) !important;
+ border-color: var(--bg-vanilla-400) !important;
+ }
+ .ant-select-item-option-active {
+ background: var(--bg-vanilla-400) !important;
+ }
+
+ .ant-select-selection-item {
+ color: var(--bg-ink-400);
+ }
+
+ &:hover {
+ .ant-select-selector {
+ border-color: var(--bg-vanilla-400) !important;
+ }
+ }
+ }
+
+ .account-option-item {
+ color: var(--bg-ink-400);
+
+ &__selected {
+ background: var(--bg-robin-500);
+ }
+ }
+}
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.tsx
new file mode 100644
index 000000000000..fd5e246e7d89
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.tsx
@@ -0,0 +1,159 @@
+import './AccountActions.style.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button, Select } from 'antd';
+import { SelectProps } from 'antd/lib';
+import { useAwsAccounts } from 'hooks/integrations/aws/useAwsAccounts';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { Check, ChevronDown } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom-v5-compat';
+
+import { CloudAccount } from '../../ServicesSection/types';
+import AccountSettingsModal from './AccountSettingsModal';
+import CloudAccountSetupModal from './CloudAccountSetupModal';
+
+interface AccountOptionItemProps {
+ label: React.ReactNode;
+ isSelected: boolean;
+}
+
+function AccountOptionItem({
+ label,
+ isSelected,
+}: AccountOptionItemProps): JSX.Element {
+ return (
+
+ 
+
+
+
+
+ AWS Web Services
+
+ One-click setup for AWS monitoring with SigNoz
+
+
+ {label}
+ {isSelected && (
+
+ );
+}
+
+function renderOption(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ option: any,
+ activeAccountId: string | undefined,
+): JSX.Element {
+ return (
+
+
+ )}
+
+ {accounts?.length ? (
+ setIsIntegrationModalOpen(false)}
+ />
+
+ setIsAccountSettingsModalOpen(false)}
+ account={activeAccount as CloudAccount}
+ setActiveAccount={setActiveAccount}
+ />
+
+ );
+}
+
+export default AccountActions;
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.style.scss b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.style.scss
new file mode 100644
index 000000000000..f2d1fd66fdf3
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.style.scss
@@ -0,0 +1,189 @@
+.account-settings-modal {
+ &__title-account-id {
+ color: var(--bg-vanilla-100);
+ font-family: 'Geist Mono';
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 20px;
+ }
+
+ &__body {
+ display: flex;
+ flex-direction: column;
+ gap: 17px;
+ border-radius: 3px;
+ border: 1px solid var(--bg-slate-500);
+ padding: 14px;
+ &-account-info {
+ &-connected-account-details {
+ &-title {
+ color: var(--bg-vanilla-100);
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ }
+ &-account-id {
+ color: var(--bg-vanilla-400);
+ font-size: 12px;
+ line-height: 18px;
+ letter-spacing: -0.06px;
+ &-account-id {
+ font-family: 'Geist Mono';
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 18px;
+ letter-spacing: -0.06px;
+ }
+ }
+ }
+ }
+ &-regions-switch {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ &-title {
+ color: var(--bg-vanilla-100);
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: -0.07px;
+ }
+ &-switch {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ &-label {
+ color: var(--bg-vanilla-400);
+ background-color: transparent;
+ border: none;
+ font-family: Inter;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 18px;
+ letter-spacing: -0.005em;
+ cursor: pointer;
+ }
+ }
+ }
+ &-regions-select {
+ margin-top: 8px;
+ }
+ }
+
+ &__footer {
+ &-close-button,
+ &-save-button {
+ color: var(--bg-vanilla-100);
+ font-family: Inter;
+ font-size: 12px;
+ font-weight: 500;
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+ &-close-button {
+ border-radius: 2px;
+ background: var(--bg-slate-400);
+ border: none;
+ }
+ &-save-button {
+ &:disabled {
+ background: var(--bg-robin-500);
+ color: var(--bg-vanilla-100);
+ opacity: 0.6;
+ border: none;
+ }
+ border-radius: 2px;
+ margin: 0 !important;
+ }
+ }
+ .ant-modal-body {
+ padding-bottom: 0 !important;
+ }
+ .ant-modal-footer {
+ margin: 0;
+ padding: 24px 24px 12px;
+ }
+
+ .integration-detail-content {
+ margin: 0;
+ }
+}
+
+.lightMode {
+ .account-settings-modal {
+ &__title-account-id {
+ color: var(--bg-ink-500);
+ }
+
+ &__body {
+ border-color: var(--bg-vanilla-300);
+
+ &-account-info {
+ &-connected-account-details {
+ &-title {
+ color: var(--bg-ink-500);
+ }
+
+ &-account-id {
+ color: var(--bg-ink-400);
+
+ &-account-id {
+ color: var(--bg-ink-500);
+ }
+ }
+ }
+ }
+
+ &-regions-switch {
+ &-title {
+ color: var(--bg-ink-500);
+ }
+
+ &-switch {
+ &-label {
+ color: var(--bg-ink-400);
+
+ &:hover {
+ color: var(--bg-ink-500);
+ }
+ }
+ }
+ }
+ }
+
+ &__footer {
+ &-close-button,
+ &-save-button {
+ color: var(--bg-vanilla-100);
+ }
+
+ &-close-button {
+ background: var(--bg-vanilla-100);
+ border: 1px solid var(--bg-vanilla-300);
+ color: var(--bg-ink-400);
+
+ &:hover {
+ border-color: var(--bg-vanilla-400);
+ color: var(--bg-ink-500);
+ }
+ }
+
+ &-save-button {
+ // Keep primary button same as dark mode
+ background: var(--bg-robin-500);
+ color: var(--bg-vanilla-100);
+
+ &:disabled {
+ background: var(--bg-robin-500);
+ color: var(--bg-vanilla-100);
+ opacity: 0.6;
+ }
+
+ &:not(:disabled):hover {
+ background: var(--bg-robin-400);
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx
new file mode 100644
index 000000000000..bbbced4a522f
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx
@@ -0,0 +1,181 @@
+import './AccountSettingsModal.style.scss';
+
+import { Form, Select, Switch } from 'antd';
+import SignozModal from 'components/SignozModal/SignozModal';
+import {
+ getRegionPreviewText,
+ useAccountSettingsModal,
+} from 'hooks/integrations/aws/useAccountSettingsModal';
+import IntergrationsUninstallBar from 'pages/Integrations/IntegrationDetailPage/IntegrationsUninstallBar';
+import { ConnectionStates } from 'pages/Integrations/IntegrationDetailPage/TestConnection';
+import { AWS_INTEGRATION } from 'pages/Integrations/IntegrationsList';
+import { Dispatch, SetStateAction, useCallback } from 'react';
+
+import { CloudAccount } from '../../ServicesSection/types';
+import { RegionSelector } from './RegionSelector';
+
+interface AccountSettingsModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ account: CloudAccount;
+ setActiveAccount: Dispatch
+ }
+ optionRender={(option): JSX.Element =>
+ renderOption(option, activeAccount?.cloud_account_id)
+ }
+ onChange={(value): void => {
+ setActiveAccount(getAccountById(accounts, value));
+ urlQuery.set('accountId', value);
+ navigate({ search: urlQuery.toString() });
+ }}
+ />
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+