[explorer][wip]: update redirect

apps/explorer/src/components/Layout/PageLayout.tsx

@@ -22,11 +22,12 @@ export type PageLayoutProps = {
 	isError?: boolean;
 	content: ReactNode;
 	loading?: boolean;
+	hideHeader?: boolean;
 };
 
 const DEFAULT_HEADER_HEIGHT = 68;
 
-export function PageLayout({ gradient, content, loading, isError }: PageLayoutProps) {
+export function PageLayout({ gradient, content, hideHeader, loading, isError }: PageLayoutProps) {
 	const [network] = useNetworkContext();
 	const { request } = useAppsBackend();
 	const outageOverride = useFeatureIsOn('network-outage-override');
@@ -61,7 +62,7 @@ export function PageLayout({ gradient, content, loading, isError }: PageLayoutPr
 						<div className="break-normal">{networkDegradeBannerCopy}</div>
 					</Banner>
 				)}
-				<Header />
+				{!hideHeader && <Header />}
 			</section>
 			{loading && (
 				<div className="absolute left-1/2 right-0 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform justify-center">

apps/explorer/src/pages/home/Home.tsx

@@ -17,14 +17,86 @@ import { useNetwork } from '~/context';
 import { Card } from '~/ui/Card';
 import { TabHeader } from '~/ui/Tabs';
 import { Network } from '~/utils/api/DefaultRpcClient';
+import { useFeatureIsOn } from '@growthbook/growthbook-react';
+import { Image } from '~/ui/image/Image';
+import { Heading, Text } from '@mysten/ui';
+import { ArrowRight12, Sui, SuiLogoTxt } from '../../../../icons';
+import { ButtonOrLink } from '~/ui/utils/ButtonOrLink';
 
 const ValidatorMap = lazy(() => import('../../components/validator-map'));
 
 const TRANSACTIONS_LIMIT = 25;
 
+function ExternalLink({ href, label }: { href: string; label: string }) {
+	return (
+		<ButtonOrLink
+			className="flex w-full items-center justify-center gap-2 rounded-3xl bg-sui-dark px-3 py-2"
+			href={href}
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			<Text variant="body/semibold" color="white">
+				{label}
+			</Text>
+			<ArrowRight12 className="h-3 w-3 -rotate-45 text-white" />
+		</ButtonOrLink>
+	);
+}
+
 function Home() {
 	const [network] = useNetwork();
 	const isSuiTokenCardEnabled = network === Network.MAINNET;
+	// const enableExplorerRedirect = useFeatureIsOn('explorer-redirect');
+	// TODO: Change back to use feature flag before merging
+	const enableExplorerRedirect = true;
+
+	if (enableExplorerRedirect) {
+		return (
+			<PageLayout
+				hideHeader
+				content={
+					<section className="flex flex-col gap-24">
+						<section
+							className="flex flex-col items-center justify-center gap-5 py-20"
+							style={{
+								background: 'linear-gradient(159deg, #FAF8D2 50.65%, #F7DFD5 86.82%)',
+							}}
+						>
+							<div className="flex items-center gap-1">
+								<Sui className="h-11 w-9" />
+								<SuiLogoTxt className="h-7 w-11" />
+							</div>
+
+							<Heading variant="heading2/bold">
+								Experience two amazing blockchain explorers on Sui!
+							</Heading>
+						</section>
+						<section className="flex justify-center gap-10">
+							<div className="relative">
+								<Image
+									src="src/assets/explorer-suivision.jpg"
+									srcSet="src/assets/explorer-suivision@2x.jpg"
+								/>
+								<div className="absolute bottom-14 left-1/2 right-0 flex w-96 -translate-x-1/2">
+									<ExternalLink href="https://suivision.xyz/" label="Visit Suivision.xyz" />
+								</div>
+							</div>
+							<div className="relative">
+								<Image
+									src="src/assets/explorer-suiscan.jpg"
+									srcSet="src/assets/explorer-suiscan@2x.jpg"
+								/>
+								<div className="absolute bottom-14 left-1/2 right-0 flex w-96 -translate-x-1/2">
+									<ExternalLink href="https://suiscan.xyz" label="Visit Suiscan.xyz" />
+								</div>
+							</div>
+						</section>
+					</section>
+				}
+			/>
+		);
+	}
+
 	return (
 		<PageLayout
 			gradient={{