feat(homepage): surface VeKit Playground in hero and header

.github/workflows/deploy-cloudfront.yaml

@@ -1,5 +1,5 @@
 # Simple workflow for deploying static content to Cloudfront
-name: Deploy to Cloudfront
+name: Deploy Homepage to Cloudfront
 
 on:
     # Runs on pushes targeting the default branch

README.md

@@ -3,7 +3,7 @@
 #### An all-in-one library for building VeChain applications.
 
 <div align="center">
-    <img src="https://i.ibb.co/NgDN6XD3/kit-preview.png" alt="VeChain Kit Banner">
+    <img src="https://prod-vechainkit-docs-images-bucket.s3.eu-west-1.amazonaws.com/vechain-kit-v2-shocase.png" alt="VeChain Kit Banner">
 </div>
 
 ## Introduction
@@ -27,7 +27,8 @@ It offers:
 
 ## Demo & Examples
 
--   [Live Demo](https://vechainkit.vechain.org/)
+-   [Homepage](https://vechainkit.vechain.org/)
+-   [VeKit Playground](https://playground.vechainkit.vechain.org/) — interactive playground with live demos, code snippets and ready-made AI prompts for every kit feature
 -   [Sample Next.js App](https://github.com/vechain/vechain-kit/tree/main/examples/next-template)
 -   [Smart Account Factory](https://vechain.github.io/smart-accounts/)
 -   [Docs](https://docs.vechainkit.vechain.org/)

examples/homepage/src/app/components/features/HeroSection/HeroSection.tsx

@@ -1,8 +1,17 @@
 'use client';
 
-import { VStack, Text, Heading, useColorMode, Button } from '@chakra-ui/react';
+import {
+    Stack,
+    VStack,
+    Text,
+    Heading,
+    useColorMode,
+    Button,
+} from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 
+const PLAYGROUND_URL = 'https://playground.vechainkit.vechain.org';
+
 export function HeroSection() {
     const { colorMode } = useColorMode();
     const { t } = useTranslation();
@@ -47,13 +56,29 @@ export function HeroSection() {
                 )}
             </Text>
 
-            <Button
-                onClick={scrollToQuickStart}
-                variant="homepagePrimary"
-                size="lg"
+            <Stack
+                direction={{ base: 'column', sm: 'row' }}
+                spacing={3}
+                align="center"
             >
-                {t('Get Started')} 🚀
-            </Button>
+                <Button
+                    onClick={scrollToQuickStart}
+                    variant="homepagePrimary"
+                    size="lg"
+                >
+                    {t('Get Started')} 🚀
+                </Button>
+                <Button
+                    as="a"
+                    href={PLAYGROUND_URL}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    variant="homepageSecondary"
+                    size="lg"
+                >
+                    {t('Try the playground')} ▸
+                </Button>
+            </Stack>
         </VStack>
     );
 }

examples/homepage/src/app/components/layout/Header/Header.tsx

@@ -1,11 +1,19 @@
 'use client';
 
-import { HStack, Image, Text, Card, useMediaQuery } from '@chakra-ui/react';
+import {
+    HStack,
+    Image,
+    Link,
+    Text,
+    Card,
+    useMediaQuery,
+} from '@chakra-ui/react';
 import { WalletButton, useWallet } from '@vechain/vechain-kit';
 import { LanguageDropdown } from './LanguageDropdown';
 import { useTranslation } from 'react-i18next';
 
 const basePath = process.env.basePath ?? '';
+const PLAYGROUND_URL = 'https://playground.vechainkit.vechain.org';
 
 export function Header() {
     // const { colorMode } = useColorMode();
@@ -121,8 +129,28 @@ export function Header() {
                         </HStack>
                     )} */}
 
-                    {/* Language dropdown and WalletButton at end */}
+                    {/* Playground link, language dropdown and WalletButton at end */}
                     <HStack spacing={3} flexShrink={0}>
+                        {!isMobile && (
+                            <Link
+                                href={PLAYGROUND_URL}
+                                isExternal
+                                fontSize="sm"
+                                fontWeight="medium"
+                                color="gray.700"
+                                px={3}
+                                py={2}
+                                borderRadius="md"
+                                _hover={{
+                                    bg: 'gray.100',
+                                    color: 'gray.900',
+                                    textDecoration: 'none',
+                                }}
+                                transition="all 0.2s"
+                            >
+                                {t('Playground')}
+                            </Link>
+                        )}
                         <WalletButton
                             mobileVariant="iconAndDomain"
                             desktopVariant="iconAndDomain"