├── CNAME ├── code ├── public │ ├── CNAME │ ├── favicon.ico │ ├── icons │ │ ├── Editor.png │ │ ├── quote.png │ │ ├── Grid List.png │ │ ├── Email Mention.png │ │ ├── Illustration.png │ │ ├── AI Flash Sparkle.png │ │ ├── Search Progress.png │ │ ├── learn.svg │ │ ├── docs.svg │ │ ├── youtube.svg │ │ ├── github.svg │ │ ├── figma.svg │ │ ├── Excel.svg │ │ ├── PowerPoint.svg │ │ ├── Word.svg │ │ └── pdf.svg │ ├── featured │ │ ├── multiagent.png │ │ ├── multiagent2.png │ │ ├── multiagent3.png │ │ ├── contentprocessing.png │ │ ├── contentprocessing2.png │ │ ├── conversationknowledgemining.png │ │ └── conversationknowledgemining2.png │ ├── success │ │ └── successGradient.png │ ├── differentiators │ │ ├── quickDeploy.png │ │ ├── costEstimate.png │ │ ├── solutionArch.png │ │ ├── accelerateValue.png │ │ ├── compDocumentation.png │ │ └── differentiatorGradient.png │ └── vite.svg ├── src │ ├── vite-env.d.ts │ ├── components │ │ ├── FeaturedSection │ │ │ ├── index.ts │ │ │ └── FeaturedSection.css │ │ ├── Header │ │ │ ├── index.ts │ │ │ ├── Header.css │ │ │ └── Header.tsx │ │ ├── Footer │ │ │ ├── index.ts │ │ │ ├── Footer.tsx │ │ │ ├── README.md │ │ │ └── Footer.css │ │ ├── VideoPlayer │ │ │ ├── index.ts │ │ │ ├── VideoPlayer.css │ │ │ ├── README.md │ │ │ └── VideoPlayer.tsx │ │ ├── HeroSection │ │ │ ├── index.ts │ │ │ ├── HeroSection.css │ │ │ ├── README.md │ │ │ └── HeroSection.tsx │ │ ├── TextSection │ │ │ ├── index.ts │ │ │ ├── TextSection.css │ │ │ ├── README.md │ │ │ └── TextSection.tsx │ │ ├── SuccessStoriesSection │ │ │ ├── index.ts │ │ │ ├── SuccessStoriesSection.css │ │ │ ├── README.md │ │ │ └── SuccessStoriesSection.tsx │ │ ├── CustomerTrustSection │ │ │ ├── index.ts │ │ │ ├── CustomerTrustSection.css │ │ │ └── CustomerTrustSection.tsx │ │ ├── HowItWorksSection │ │ │ ├── index.ts │ │ │ ├── README.md │ │ │ └── HowItWorksSection.tsx │ │ ├── DifferentiatorSection │ │ │ ├── index.ts │ │ │ ├── DifferentiatorSection.css │ │ │ └── README.md │ │ ├── Navigation │ │ │ ├── index.ts │ │ │ ├── NavigationSection.css │ │ │ ├── Navigation.css │ │ │ ├── README.md │ │ │ ├── Navigation.tsx │ │ │ └── NavigationSection.tsx │ │ ├── TagRow │ │ │ └── TagRow.css │ │ └── GsaCard │ │ │ ├── GsaCard.css │ │ │ └── GsaCard.tsx │ ├── assets │ │ ├── Whale.png │ │ ├── Octopus.png │ │ ├── TestTube.png │ │ ├── favicon.ico │ │ ├── LoveLetter.png │ │ ├── MicrosoftLogo.tsx │ │ ├── BeautyMark.tsx │ │ ├── MsftColor.tsx │ │ ├── GoldenStandardLogo.tsx │ │ ├── react.svg │ │ └── bundleicons.tsx │ ├── global.d.ts │ ├── hooks │ │ ├── index.ts │ │ ├── useSortDeepLink.ts │ │ ├── useSearchDeepLink.ts │ │ ├── useNavigation.ts │ │ ├── useSimpleUrlUpdate.ts │ │ ├── useIntersectionObserver.ts │ │ ├── useFilterDeepLink.ts │ │ ├── useScrollNavigation.ts │ │ ├── useUrlState.ts │ │ └── useNavigationWithUrl.ts │ ├── main.tsx │ ├── utils │ │ ├── sectionMapping.ts │ │ ├── getLinkIcon.ts │ │ └── validateCardData.ts │ ├── index.css │ ├── data │ │ └── cards │ │ │ ├── Real-Time_Intelligence_for_Operations.json │ │ │ ├── Unified_Data_Foundation_with_Fabric.json │ │ │ ├── Container_Migration.json │ │ │ ├── Agentic_Applications_for_Unified_Data_Foundation.json │ │ │ ├── Data_Agent_Governance_Security.json │ │ │ ├── Customer_Chatbot.json │ │ │ ├── Deploy_AI_applications_in_production.json │ │ │ ├── Build_your_own_copilot_-_Client_advisor.json │ │ │ ├── Code_modernization.json │ │ │ ├── Content_Processing.json │ │ │ ├── Conversation_Knowledge_Mining.json │ │ │ ├── Build_your_own_copilot_-_Document_Generation.json │ │ │ ├── Chat_with_your_data.json │ │ │ ├── Document_Knowledge_Mining.json │ │ │ └── Multi-agent_custom_automation_engine_.json │ ├── types │ │ └── index.ts │ └── App.css ├── postcss.config.js ├── tsconfig.json ├── .gitignore ├── eslint.config.js ├── tsconfig.node.json ├── vite.config.ts ├── tsconfig.app.json ├── scripts │ └── generate-card-data.js ├── tailwind.config.js ├── index.html ├── .github │ └── workflows │ │ └── deploy.yml ├── package.json ├── README.md └── README.SOLUTION.md ├── solution-accelerator-header.jpg ├── README.md ├── CODE_OF_CONDUCT.md ├── SUPPORT.md ├── LICENSE ├── .github └── workflows │ └── deploy.yml └── SECURITY.md /CNAME: -------------------------------------------------------------------------------- 1 | accelerators.ms -------------------------------------------------------------------------------- /code/public/CNAME: -------------------------------------------------------------------------------- 1 | accelerators.ms -------------------------------------------------------------------------------- /code/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /code/src/components/FeaturedSection/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './FeaturedSection'; -------------------------------------------------------------------------------- /code/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/favicon.ico -------------------------------------------------------------------------------- /code/src/assets/Whale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/src/assets/Whale.png -------------------------------------------------------------------------------- /code/src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.css" { 2 | const content: string; 3 | export default content; 4 | } 5 | -------------------------------------------------------------------------------- /code/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } -------------------------------------------------------------------------------- /code/public/icons/Editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/icons/Editor.png -------------------------------------------------------------------------------- /code/public/icons/quote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/icons/quote.png -------------------------------------------------------------------------------- /code/src/assets/Octopus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/src/assets/Octopus.png -------------------------------------------------------------------------------- /code/src/assets/TestTube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/src/assets/TestTube.png -------------------------------------------------------------------------------- /code/src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/src/assets/favicon.ico -------------------------------------------------------------------------------- /code/src/components/Header/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Header'; 2 | export type { HeaderProps } from './Header'; -------------------------------------------------------------------------------- /code/src/assets/LoveLetter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/src/assets/LoveLetter.png -------------------------------------------------------------------------------- /code/public/icons/Grid List.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/icons/Grid List.png -------------------------------------------------------------------------------- /code/src/components/Footer/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Footer'; 2 | export type { FooterProps, FooterLink } from './Footer'; -------------------------------------------------------------------------------- /solution-accelerator-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/solution-accelerator-header.jpg -------------------------------------------------------------------------------- /code/public/featured/multiagent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/featured/multiagent.png -------------------------------------------------------------------------------- /code/public/icons/Email Mention.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/icons/Email Mention.png -------------------------------------------------------------------------------- /code/public/icons/Illustration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/icons/Illustration.png -------------------------------------------------------------------------------- /code/public/featured/multiagent2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/featured/multiagent2.png -------------------------------------------------------------------------------- /code/public/featured/multiagent3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/featured/multiagent3.png -------------------------------------------------------------------------------- /code/public/icons/AI Flash Sparkle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/icons/AI Flash Sparkle.png -------------------------------------------------------------------------------- /code/public/icons/Search Progress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/icons/Search Progress.png -------------------------------------------------------------------------------- /code/src/components/VideoPlayer/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './VideoPlayer'; 2 | export type { VideoPlayerProps } from './VideoPlayer'; -------------------------------------------------------------------------------- /code/public/success/successGradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/success/successGradient.png -------------------------------------------------------------------------------- /code/public/differentiators/quickDeploy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/differentiators/quickDeploy.png -------------------------------------------------------------------------------- /code/public/featured/contentprocessing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/featured/contentprocessing.png -------------------------------------------------------------------------------- /code/public/featured/contentprocessing2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/featured/contentprocessing2.png -------------------------------------------------------------------------------- /code/src/components/HeroSection/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './HeroSection'; 2 | export type { HeroSectionProps, LinkConfig } from './HeroSection'; -------------------------------------------------------------------------------- /code/src/components/TextSection/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './TextSection'; 2 | export type { TextSectionProps, LinkConfig } from './TextSection'; -------------------------------------------------------------------------------- /code/public/differentiators/costEstimate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/differentiators/costEstimate.png -------------------------------------------------------------------------------- /code/public/differentiators/solutionArch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/differentiators/solutionArch.png -------------------------------------------------------------------------------- /code/public/differentiators/accelerateValue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/differentiators/accelerateValue.png -------------------------------------------------------------------------------- /code/public/differentiators/compDocumentation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/differentiators/compDocumentation.png -------------------------------------------------------------------------------- /code/src/components/SuccessStoriesSection/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './SuccessStoriesSection'; 2 | export type { SuccessStoriesSectionProps } from '../../types'; -------------------------------------------------------------------------------- /code/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /code/public/featured/conversationknowledgemining.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/featured/conversationknowledgemining.png -------------------------------------------------------------------------------- /code/public/featured/conversationknowledgemining2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/featured/conversationknowledgemining2.png -------------------------------------------------------------------------------- /code/public/differentiators/differentiatorGradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Solution-Accelerators/HEAD/code/public/differentiators/differentiatorGradient.png -------------------------------------------------------------------------------- /code/src/components/CustomerTrustSection/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './CustomerTrustSection'; 2 | export type { CustomerTrustSectionProps, LinkConfig } from './CustomerTrustSection'; -------------------------------------------------------------------------------- /code/src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export { useIntersectionObserver } from './useIntersectionObserver'; 2 | export { useUrlState } from './useUrlState'; 3 | export { useNavigation } from './useNavigation'; -------------------------------------------------------------------------------- /code/src/components/HowItWorksSection/index.ts: -------------------------------------------------------------------------------- 1 | export { default as HowItWorksSection } from './HowItWorksSection'; 2 | export type { HowItWorksSectionProps, HowItWorksStep } from './HowItWorksSection'; -------------------------------------------------------------------------------- /code/src/components/DifferentiatorSection/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './DifferentiatorSection'; 2 | export type { DifferentiatorSectionProps, DifferentiatorAccordionItem } from './DifferentiatorSection'; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🐙 Website upgraded and relocated 2 | 3 | Slide on over to our new site for a better, brighter experience. 4 | Visit [https://accelerators.ms](https://accelerators.ms) to see a full list of our solution accelerators. -------------------------------------------------------------------------------- /code/public/icons/learn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /code/public/icons/docs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /code/src/components/Navigation/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Navigation'; 2 | export type { NavigationTab, NavigationProps } from './Navigation'; 3 | export { default as NavigationSection } from './NavigationSection'; 4 | export type { NavigationSectionProps } from './NavigationSection'; -------------------------------------------------------------------------------- /code/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.tsx' 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /code/src/assets/MicrosoftLogo.tsx: -------------------------------------------------------------------------------- 1 | export const MicrosoftLogo = () => ( 2 | 3 | 4 | 5 | 6 | 7 | 8 | ); -------------------------------------------------------------------------------- /code/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /code/src/components/DifferentiatorSection/DifferentiatorSection.css: -------------------------------------------------------------------------------- 1 | /* Enhanced background image styling for DifferentiatorSection */ 2 | .differentiator-section { 3 | background-image: url('/differentiators/differentiatorGradient.png'); 4 | background-size: cover; 5 | background-position: center center; 6 | background-repeat: no-repeat; 7 | padding: 4rem 0 5rem 0; 8 | position: relative; 9 | } -------------------------------------------------------------------------------- /code/public/icons/youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Microsoft Open Source Code of Conduct 2 | 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 4 | 5 | Resources: 6 | 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns 10 | -------------------------------------------------------------------------------- /code/src/components/Header/Header.css: -------------------------------------------------------------------------------- 1 | /* Header component styles */ 2 | .header { 3 | position: relative; 4 | z-index: 10; 5 | } 6 | 7 | /* Ensure no default solid background interrupts the shared gradient */ 8 | header { 9 | background: transparent; 10 | } 11 | 12 | .header-content { 13 | display: flex; 14 | align-items: center; 15 | gap: 0.5rem; 16 | } 17 | 18 | /* Responsive header styles */ 19 | @media (max-width: 768px) { 20 | .header { 21 | padding: 0.75rem 1rem; 22 | } 23 | 24 | .header-content { 25 | gap: 0.25rem; 26 | } 27 | } -------------------------------------------------------------------------------- /code/src/assets/BeautyMark.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const CindyCrawford: React.FC = () => { 4 | return ( 5 | 12 | 16 | 17 | ); 18 | }; 19 | 20 | export default CindyCrawford; 21 | -------------------------------------------------------------------------------- /code/src/components/SuccessStoriesSection/SuccessStoriesSection.css: -------------------------------------------------------------------------------- 1 | /* SuccessStoriesSection component styles */ 2 | .success-stories-section { 3 | /* Additional custom styles can be added here if needed */ 4 | } 5 | 6 | /* Ensure proper spacing and alignment */ 7 | .testimonial-card { 8 | display: flex; 9 | flex-direction: column; 10 | justify-content: space-between; 11 | } 12 | 13 | /* Quote text styling */ 14 | .quote-text { 15 | line-height: 1.6; 16 | margin-bottom: 1rem; 17 | } 18 | 19 | /* Author name styling */ 20 | .author-name { 21 | margin-top: auto; 22 | } -------------------------------------------------------------------------------- /code/src/components/TextSection/TextSection.css: -------------------------------------------------------------------------------- 1 | /* TextSection component styles */ 2 | .text-section { 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: center; 6 | width: 100%; 7 | } 8 | 9 | .text-content { 10 | max-width: 80rem; 11 | margin: 0 auto; 12 | padding: 0 1.5rem; 13 | } 14 | 15 | /* Responsive text section styles */ 16 | @media (max-width: 768px) { 17 | .text-section { 18 | padding: 2rem 1rem; 19 | } 20 | 21 | .text-content { 22 | padding: 0 1rem; 23 | } 24 | 25 | .text-content h2 { 26 | font-size: 2.5rem; 27 | } 28 | } -------------------------------------------------------------------------------- /SUPPORT.md: -------------------------------------------------------------------------------- 1 | # Support 2 | 3 | ## How to file issues and get help 4 | 5 | This project uses GitHub Issues to track bugs and feature requests. Please search the existing 6 | issues before filing new issues to avoid duplicates. For new issues, file your bug or 7 | feature request as a new issue. 8 | 9 | For help and questions about using this project, you may also file a new issue. 10 | 11 | ## Microsoft Support Policy 12 | 13 | Support for this repository is limited and Microsoft does not guarantee the quality, performance, reliability, or availability of this release or its output, and does not provide any warranty or support for it. 14 | -------------------------------------------------------------------------------- /code/src/components/VideoPlayer/VideoPlayer.css: -------------------------------------------------------------------------------- 1 | /* VideoPlayer component styles */ 2 | .video-player-container { 3 | /* Additional custom styles can be added here if needed */ 4 | } 5 | 6 | /* Ensure the video container maintains its aspect ratio */ 7 | .video-player-container iframe { 8 | border: none; 9 | } 10 | 11 | /* Smooth transitions for the play button hover effect */ 12 | .video-player-container .play-button { 13 | transition: all 0.2s ease-in-out; 14 | } 15 | 16 | /* Ensure the thumbnail image covers the entire container properly */ 17 | .video-player-container .thumbnail-image { 18 | object-fit: cover; 19 | object-position: center; 20 | } -------------------------------------------------------------------------------- /code/src/assets/MsftColor.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MicrosoftLogo: React.FC = () => { 4 | return ( 5 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default MicrosoftLogo; 21 | -------------------------------------------------------------------------------- /code/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | import { globalIgnores } from 'eslint/config' 7 | 8 | export default tseslint.config([ 9 | globalIgnores(['dist']), 10 | { 11 | files: ['**/*.{ts,tsx}'], 12 | extends: [ 13 | js.configs.recommended, 14 | tseslint.configs.recommended, 15 | reactHooks.configs['recommended-latest'], 16 | reactRefresh.configs.vite, 17 | ], 18 | languageOptions: { 19 | ecmaVersion: 2020, 20 | globals: globals.browser, 21 | }, 22 | }, 23 | ]) 24 | -------------------------------------------------------------------------------- /code/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2023", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "verbatimModuleSyntax": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "erasableSyntaxOnly": true, 21 | "noFallthroughCasesInSwitch": true, 22 | "noUncheckedSideEffectImports": true 23 | }, 24 | "include": ["vite.config.ts"] 25 | } 26 | -------------------------------------------------------------------------------- /code/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | base: './', 8 | build: { 9 | outDir: 'dist', 10 | minify: 'esbuild', 11 | rollupOptions: { 12 | output: { 13 | manualChunks: { 14 | 'react-vendor': ['react', 'react-dom'], 15 | }, 16 | }, 17 | }, 18 | target: 'es2015', 19 | cssCodeSplit: true, 20 | sourcemap: false, 21 | }, 22 | resolve: { 23 | alias: { 24 | '@': '/src', 25 | '@components': '/src/components', 26 | '@assets': '/src/assets', 27 | '@data': '/src/data', 28 | '@utils': '/src/utils' 29 | } 30 | } 31 | }) 32 | -------------------------------------------------------------------------------- /code/public/icons/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /code/src/utils/sectionMapping.ts: -------------------------------------------------------------------------------- 1 | export const SECTION_MAPPING: Record = { 2 | 'featured': 'featured', 3 | 'accelerators': 'accelerators', 4 | 'differentiators': 'differentiators', 5 | 'how-it-works': 'how-it-works', 6 | 'success-stories': 'customer-trust' 7 | }; 8 | 9 | export const REVERSE_SECTION_MAPPING: Record = { 10 | 'featured': 'featured', 11 | 'accelerators': 'accelerators', 12 | 'differentiators': 'differentiators', 13 | 'how-it-works': 'how-it-works', 14 | 'customer-trust': 'success-stories' 15 | }; 16 | 17 | export const getSectionFromId = (sectionId: string): string => { 18 | return REVERSE_SECTION_MAPPING[sectionId] || sectionId; 19 | }; 20 | 21 | export const getSectionIdFromSection = (section: string): string => { 22 | return SECTION_MAPPING[section] || section; 23 | }; -------------------------------------------------------------------------------- /code/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2022", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2022", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "verbatimModuleSyntax": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "erasableSyntaxOnly": true, 23 | "noFallthroughCasesInSwitch": true, 24 | "noUncheckedSideEffectImports": true 25 | }, 26 | "include": ["src"] 27 | } 28 | -------------------------------------------------------------------------------- /code/src/components/HeroSection/HeroSection.css: -------------------------------------------------------------------------------- 1 | /* HeroSection component styles */ 2 | .hero-section { 3 | min-height: calc(100vh - 80px); /* Account for header height */ 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | width: 100%; 8 | } 9 | 10 | .hero-content { 11 | max-width: 80rem; 12 | margin: 0 auto; 13 | padding: 0 1.5rem; 14 | } 15 | 16 | /* Responsive hero styles */ 17 | @media (max-width: 768px) { 18 | .hero-section { 19 | min-height: calc(100vh - 60px); 20 | padding: 2rem 1rem; 21 | } 22 | 23 | .hero-content { 24 | padding: 0 1rem; 25 | } 26 | 27 | .hero-title { 28 | font-size: 2.75rem !important; 29 | } 30 | } 31 | 32 | @media (max-width: 480px) { 33 | .hero-section { 34 | padding: 1.5rem 0.75rem; 35 | } 36 | 37 | .hero-title { 38 | font-size: 2.25rem !important; 39 | } 40 | } -------------------------------------------------------------------------------- /code/public/icons/figma.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /code/scripts/generate-card-data.js: -------------------------------------------------------------------------------- 1 | // scripts/generate-card-data.js 2 | import fs from 'fs'; 3 | import path from 'path'; 4 | 5 | const inputDir = path.resolve('src/data/cards'); // folder with individual .json files 6 | const outputDir = path.resolve('src/data/generated'); 7 | const outputFile = path.resolve('src/data/generated/cards.json'); 8 | 9 | // Create the generated directory if it doesn't exist 10 | if (!fs.existsSync(outputDir)) { 11 | fs.mkdirSync(outputDir, { recursive: true }); 12 | } 13 | 14 | const cardFiles = fs.readdirSync(inputDir).filter((file) => file.endsWith('.json')); 15 | 16 | const cards = cardFiles.map((file) => { 17 | const content = fs.readFileSync(path.join(inputDir, file), 'utf-8'); 18 | return JSON.parse(content); 19 | }); 20 | 21 | fs.writeFileSync(outputFile, JSON.stringify(cards, null, 2)); 22 | console.log(`✅ Generated cards.json with ${cards.length} entries`); 23 | -------------------------------------------------------------------------------- /code/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: { 9 | colors: { 10 | 'neutral-1': 'var(--colorNeutralBackground1)', 11 | 'neutral-2': 'var(--colorNeutralBackground2)', 12 | 'neutral-3': 'var(--colorNeutralBackground3)', 13 | 'neutral-stroke-1': 'var(--colorNeutralStroke1)', 14 | 'neutral-stroke-2': 'var(--colorNeutralStroke2)', 15 | 'neutral-foreground-1': 'var(--colorNeutralForeground1)', 16 | 'neutral-foreground-2': 'var(--colorNeutralForeground2)', 17 | 'neutral-foreground-3': 'var(--colorNeutralForeground3)', 18 | 'neutral-foreground-disabled': 'var(--colorNeutralForegroundDisabled)', 19 | 'brand-stroke': 'var(--colorBrandStroke1)', 20 | 'brand-background': 'var(--colorBrandBackground)', 21 | }, 22 | }, 23 | }, 24 | plugins: [], 25 | } -------------------------------------------------------------------------------- /code/src/components/SuccessStoriesSection/README.md: -------------------------------------------------------------------------------- 1 | # SuccessStoriesSection Component 2 | 3 | A reusable component for displaying testimonial quotes in a grid layout with a gradient background. 4 | 5 | ## Props 6 | 7 | - `title?: string` - The section title (defaults to "Loved by developers") 8 | - `quotes: TestimonialQuote[]` - Array of quote objects containing quote text and author 9 | 10 | ## Usage 11 | 12 | ```tsx 13 | import SuccessStoriesSection from './components/SuccessStoriesSection'; 14 | 15 | const quotes = [ 16 | { 17 | quote: "Customers have been amazed at how quickly we went from scoping to testing something.", 18 | author: "Cloud Solution Architect" 19 | }, 20 | // ... more quotes 21 | ]; 22 | 23 | 27 | ``` 28 | 29 | ## Features 30 | 31 | - Responsive grid layout (1 column on mobile, 2 on tablet, 5 on desktop) 32 | - Gradient background 33 | - Quote icon for visual appeal 34 | - Configurable title and quotes 35 | - Consistent with Fluent UI design system -------------------------------------------------------------------------------- /code/src/components/Header/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text } from '@fluentui/react-components'; 3 | import './Header.css'; 4 | 5 | export interface HeaderProps { 6 | /** Logo component or image URL */ 7 | logo: React.ReactNode; 8 | /** Main title text */ 9 | title: string; 10 | /** Subtitle text (optional) */ 11 | subtitle?: string; 12 | /** Additional CSS classes */ 13 | className?: string; 14 | } 15 | 16 | const Header: React.FC = ({ 17 | logo, 18 | title, 19 | subtitle, 20 | className = '' 21 | }) => { 22 | return ( 23 |
24 |
25 | {logo} 26 | 27 | {title} 28 | {subtitle && ( 29 | | {subtitle} 30 | )} 31 | 32 |
33 |
34 | ); 35 | }; 36 | 37 | export default Header; -------------------------------------------------------------------------------- /code/src/components/TagRow/TagRow.css: -------------------------------------------------------------------------------- 1 | @tailwind components; 2 | 3 | @layer components { 4 | .tag-row-header { 5 | @apply flex justify-between items-center gap-1 max-h-4; 6 | } 7 | 8 | .tag-row-scroll { 9 | @apply flex flex-nowrap overflow-x-auto gap-2 mt-2 select-none min-h-8 max-h-4; 10 | scrollbar-width: none; 11 | -ms-overflow-style: none; 12 | } 13 | 14 | .tag-row-wrap { 15 | @apply flex flex-wrap overflow-visible gap-2 mt-2 select-none min-h-8; 16 | max-height: none; 17 | scrollbar-width: none; 18 | -ms-overflow-style: none; 19 | } 20 | 21 | .tag-row-scroll::-webkit-scrollbar { 22 | display: none; 23 | } 24 | 25 | .text-neutral-disabled { 26 | @apply text-neutral-foreground-disabled; 27 | } 28 | 29 | .fade-left { 30 | @apply absolute left-0 top-0 bottom-0 w-[60px] pointer-events-none; 31 | background: linear-gradient(to left, transparent, var(--colorNeutralBackground1)); 32 | } 33 | 34 | .fade-right { 35 | @apply absolute right-0 top-0 bottom-0 w-[60px] pointer-events-none; 36 | background: linear-gradient(to right, transparent, var(--colorNeutralBackground1)); 37 | } 38 | } -------------------------------------------------------------------------------- /code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Microsoft - AI Solution Accelerators 8 | 9 | 10 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /code/public/icons/Excel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /code/public/icons/PowerPoint.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Microsoft Corporation. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE 22 | -------------------------------------------------------------------------------- /code/src/assets/GoldenStandardLogo.tsx: -------------------------------------------------------------------------------- 1 | export const GoldenStandardLogo = () => ( 2 | 3 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ); -------------------------------------------------------------------------------- /code/.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: [ website ] 6 | pull_request: 7 | branches: [ website ] 8 | 9 | jobs: 10 | build-and-deploy: 11 | runs-on: ubuntu-latest 12 | 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | steps: 19 | - name: Checkout 20 | uses: actions/checkout@v4 21 | 22 | - name: Setup Node.js 23 | uses: actions/setup-node@v4 24 | with: 25 | node-version: '20' 26 | cache: 'npm' 27 | cache-dependency-path: './code/package-lock.json' 28 | 29 | - name: Install dependencies 30 | run: | 31 | cd code 32 | npm ci 33 | 34 | - name: Build 35 | run: | 36 | cd code 37 | npm run build 38 | 39 | - name: Setup Pages 40 | uses: actions/configure-pages@v4 41 | 42 | - name: Upload artifact 43 | uses: actions/upload-pages-artifact@v3 44 | with: 45 | path: './code/dist' 46 | 47 | - name: Deploy to GitHub Pages 48 | id: deployment 49 | uses: actions/deploy-pages@v4 -------------------------------------------------------------------------------- /code/src/components/Navigation/NavigationSection.css: -------------------------------------------------------------------------------- 1 | .navigation-section { 2 | /* This section participates in normal flow like the Teams page */ 3 | background: transparent; 4 | } 5 | 6 | .navigation-sentinel { 7 | position: relative; 8 | height: 1px; /* minimal, just for IntersectionObserver */ 9 | margin-top: -1px; /* keep layout unaffected */ 10 | } 11 | 12 | .navigation-sticky { 13 | position: sticky; 14 | top: 0; 15 | background-color: white; 16 | z-index: 40; /* below floating dialogs but above content */ 17 | transition: box-shadow 200ms ease; 18 | } 19 | 20 | .navigation-sticky.is-stuck { 21 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 22 | } 23 | 24 | /* Robust fallback: when JavaScript toggles fixed mode after crossing the sentinel */ 25 | .navigation-sticky.is-fixed { 26 | position: fixed; 27 | top: 0; 28 | left: 0; 29 | right: 0; 30 | z-index: 50; 31 | } 32 | 33 | /* Provide a default nav height in case ResizeObserver hasn't run yet */ 34 | :root { 35 | --nav-height: 64px; 36 | } 37 | 38 | /* Utility to apply to content sections so scrollIntoView lands neatly below sticky */ 39 | .section-anchor { 40 | scroll-margin-top: var(--nav-height); 41 | } 42 | 43 | .navigation-spacer { 44 | height: 0; 45 | } 46 | 47 | .navigation-spacer.active { 48 | height: var(--nav-height); 49 | } 50 | 51 | -------------------------------------------------------------------------------- /code/src/hooks/useSortDeepLink.ts: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useCallback } from 'react'; 2 | import { getSortFromUrl, updateUrlWithSort, isValidSortParam } from '../utils/sortDeepLink'; 3 | 4 | export const useSortDeepLink = (defaultSort: string = "releaseNewest") => { 5 | const [sortBy, setSortBy] = useState(() => { 6 | const urlSort = getSortFromUrl(); 7 | return isValidSortParam(urlSort) ? urlSort : defaultSort; 8 | }); 9 | 10 | const updateSort = useCallback((newSort: string) => { 11 | if (isValidSortParam(newSort) && newSort !== sortBy) { 12 | setSortBy(newSort); 13 | updateUrlWithSort(newSort); 14 | } 15 | }, [sortBy]); 16 | 17 | useEffect(() => { 18 | const handlePopState = () => { 19 | const urlSort = getSortFromUrl(); 20 | if (isValidSortParam(urlSort) && urlSort !== sortBy) { 21 | setSortBy(urlSort); 22 | } 23 | }; 24 | 25 | window.addEventListener('popstate', handlePopState); 26 | return () => window.removeEventListener('popstate', handlePopState); 27 | }, [sortBy]); 28 | 29 | useEffect(() => { 30 | const urlSort = getSortFromUrl(); 31 | if (isValidSortParam(urlSort) && urlSort !== sortBy) { 32 | updateUrlWithSort(sortBy); 33 | } 34 | }, [sortBy]); 35 | 36 | return { 37 | sortBy, 38 | updateSort, 39 | }; 40 | }; -------------------------------------------------------------------------------- /code/public/icons/Word.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /code/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "microsoft-ai-accelerators-landing", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "npm run generate-cards && vite", 8 | "build": "npm run generate-cards && tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview", 11 | "generate-cards": "node scripts/generate-card-data.js", 12 | "predeploy": "npm run build", 13 | "deploy": "gh-pages -d dist" 14 | }, 15 | "dependencies": { 16 | "@fluentui/react-components": "^9.46.0", 17 | "@fluentui/react-icons": "^2.0.224", 18 | "framer-motion": "^10.18.0", 19 | "react": "^18.2.0", 20 | "react-dom": "^18.2.0" 21 | }, 22 | "devDependencies": { 23 | "@eslint/js": "^8.56.0", 24 | "@types/node": "^20.11.0", 25 | "@types/react": "^18.2.48", 26 | "@types/react-dom": "^18.2.18", 27 | "@typescript-eslint/eslint-plugin": "^6.19.0", 28 | "@typescript-eslint/parser": "^6.19.0", 29 | "@vitejs/plugin-react": "^4.2.1", 30 | "autoprefixer": "^10.4.17", 31 | "eslint": "^8.56.0", 32 | "eslint-plugin-react-hooks": "^4.6.0", 33 | "eslint-plugin-react-refresh": "^0.4.5", 34 | "gh-pages": "^6.1.1", 35 | "globals": "^13.24.0", 36 | "postcss": "^8.4.33", 37 | "tailwindcss": "^3.4.1", 38 | "typescript": "^5.3.3", 39 | "vite": "^5.0.11" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /code/src/components/TextSection/README.md: -------------------------------------------------------------------------------- 1 | # TextSection Component 2 | 3 | A text-focused section component similar to HeroSection but without video content. Features a title (h2), content description, and a call-to-action button. 4 | 5 | ## Props 6 | 7 | - `title` (string): Main title with support for HTML `
` tags 8 | - `content` (string): Content description text 9 | - `link` (LinkConfig): Button configuration 10 | - `text` (string): Button text 11 | - `url` (string): Target URL (supports internal anchors and external links) 12 | - `target` (optional): Link target ('_blank' for external links) 13 | - `className` (optional): Additional CSS classes 14 | - `onNavigate` (optional): Navigation callback for deep linking 15 | 16 | ## Usage 17 | 18 | ```tsx 19 | import TextSection from '../components/TextSection'; 20 | 21 | 30 | ``` 31 | 32 | ## Features 33 | 34 | - Responsive design with mobile optimization 35 | - Support for internal anchor links and external URLs 36 | - HTML line break support in titles 37 | - Consistent styling with other section components 38 | - Deep linking support for internal navigation -------------------------------------------------------------------------------- /code/src/hooks/useSearchDeepLink.ts: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useCallback } from 'react'; 2 | import { 3 | getKeywordFromUrl, 4 | updateUrlWithKeyword, 5 | isValidKeyword 6 | } from '../utils/sortDeepLink'; 7 | 8 | export const useSearchDeepLink = (defaultKeyword: string = "") => { 9 | const [searchQuery, setSearchQuery] = useState(() => { 10 | const urlKeyword = getKeywordFromUrl(); 11 | return isValidKeyword(urlKeyword) ? urlKeyword : defaultKeyword; 12 | }); 13 | 14 | const updateSearch = useCallback((newKeyword: string) => { 15 | if (!isValidKeyword(newKeyword)) { 16 | return; 17 | } 18 | 19 | setSearchQuery(newKeyword); 20 | updateUrlWithKeyword(newKeyword); 21 | }, []); 22 | 23 | const clearSearch = useCallback(() => { 24 | setSearchQuery(""); 25 | updateUrlWithKeyword(""); 26 | }, []); 27 | 28 | useEffect(() => { 29 | const handlePopState = () => { 30 | const urlKeyword = getKeywordFromUrl(); 31 | if (isValidKeyword(urlKeyword) && urlKeyword !== searchQuery) { 32 | setSearchQuery(urlKeyword); 33 | } 34 | }; 35 | 36 | window.addEventListener('popstate', handlePopState); 37 | return () => { 38 | window.removeEventListener('popstate', handlePopState); 39 | }; 40 | }, [searchQuery]); 41 | 42 | return { 43 | searchQuery, 44 | updateSearch, 45 | clearSearch, 46 | }; 47 | }; -------------------------------------------------------------------------------- /code/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /code/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; 7 | line-height: 1.5; 8 | font-weight: 400; 9 | 10 | color-scheme: light dark; 11 | color: rgba(255, 255, 255, 0.87); 12 | background-color: #242424; 13 | 14 | font-synthesis: none; 15 | text-rendering: optimizeLegibility; 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-font-smoothing: grayscale; 18 | } 19 | 20 | a { 21 | font-weight: 500; 22 | color: #646cff; 23 | text-decoration: inherit; 24 | } 25 | a:hover { 26 | color: #535bf2; 27 | } 28 | 29 | body { 30 | margin: 0; 31 | display: flex; 32 | place-items: center; 33 | min-width: 320px; 34 | min-height: 100vh; 35 | overflow-x: hidden; 36 | } 37 | 38 | h1 { 39 | font-size: 3.2em; 40 | line-height: 1.1; 41 | } 42 | 43 | button { 44 | border-radius: 8px; 45 | border: 1px solid transparent; 46 | padding: 0.6em 1.2em; 47 | font-size: 1em; 48 | font-weight: 500; 49 | font-family: inherit; 50 | background-color: #1a1a1a; 51 | cursor: pointer; 52 | transition: border-color 0.25s; 53 | } 54 | button:hover { 55 | border-color: #646cff; 56 | } 57 | button:focus, 58 | button:focus-visible { 59 | outline: 4px auto -webkit-focus-ring-color; 60 | } 61 | 62 | @media (prefers-color-scheme: light) { 63 | :root { 64 | color: #213547; 65 | background-color: #ffffff; 66 | } 67 | a:hover { 68 | color: #747bff; 69 | } 70 | button { 71 | background-color: #f9f9f9; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /code/public/icons/pdf.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /code/src/components/Navigation/Navigation.css: -------------------------------------------------------------------------------- 1 | /* Navigation component styles */ 2 | .navigation-header { 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | right: 0; 7 | background-color: white; 8 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); 9 | transform: translateY(0); 10 | transition: transform 300ms ease; 11 | z-index: 50; 12 | } 13 | 14 | .navigation-header.hidden { 15 | transform: translateY(-100%); 16 | } 17 | 18 | .navigation-container { 19 | max-width: 80rem; 20 | margin: 0 auto; 21 | padding: 0 1.5rem; 22 | } 23 | 24 | .navigation-content { 25 | display: flex; 26 | justify-content: space-between; 27 | align-items: center; 28 | height: 4rem; 29 | } 30 | 31 | .desktop-nav { 32 | display: flex; 33 | } 34 | 35 | .mobile-nav { 36 | display: none; 37 | } 38 | 39 | .feedback-button { 40 | display: flex; 41 | align-items: center; 42 | gap: 0.5rem; 43 | } 44 | 45 | .hamburger-button { 46 | min-width: auto; 47 | padding: 0.5rem; 48 | } 49 | 50 | /* Responsive breakpoints */ 51 | @media (max-width: 768px) { 52 | .desktop-nav { 53 | display: none; 54 | } 55 | 56 | .mobile-nav { 57 | display: flex; 58 | align-items: center; 59 | gap: 1rem; 60 | } 61 | 62 | .feedback-button .feedback-text-full { 63 | display: none; 64 | } 65 | 66 | .feedback-button .feedback-text-mobile { 67 | display: inline; 68 | } 69 | } 70 | 71 | @media (min-width: 769px) { 72 | .feedback-button .feedback-text-full { 73 | display: inline; 74 | } 75 | 76 | .feedback-button .feedback-text-mobile { 77 | display: none; 78 | } 79 | } -------------------------------------------------------------------------------- /code/src/data/cards/Real-Time_Intelligence_for_Operations.json: -------------------------------------------------------------------------------- 1 | { 2 | "solutionPlays": ["Unify your data platform"], 3 | "solutionAreas": ["Cloud & AI Platforms"], 4 | "stability": "Live", 5 | "key": ["real-time-intel-for-ops"], 6 | "accelerator": "Real-Time Intelligence for Operations", 7 | "featured": false, 8 | "programmingLanguages": ["Python", "KQL", "PowerShell", "Bicep"], 9 | "excerpt": "Harness Real-Time Intelligence on the unified data foundation with Microsoft Fabric to minimize downtime, maximize asset productivity, and optimize operations.", 10 | "productsAndServices": ["Microsoft Fabric", "OneLake", "Real-Time Intelligence", "Fabric Data Agent", "Eventstream in Microsoft Fabric", "Eventhouse in Microsoft Fabric", "Azure Event Hubs", "Fabric Activator"], 11 | "githubUrl": "https://aka.ms/RTIOps", 12 | "assets": [ 13 | { 14 | "label": "Walkthrough", 15 | "href": "https://aka.ms/RTIOps_Overview", 16 | "fileType": "pptx" 17 | } 18 | ], 19 | "technicalPattern": "Unify your Data", 20 | "foundryTemplateName": "", 21 | "useCases": ["Manufacturing", "Operations", "Data Agents", "AI", "Analytics", "Real-Time Intelligence"], 22 | "keywords": ["AI", "Real-Time Intelligence", "Microsoft Fabric", "OneLake", "analytics", "enterprise data", "data agent", "agentic AI", "kql", "azd template", "Eventstream in Microsoft Fabric", "Eventhouse in Microsoft Fabric", "Fabric Activator", "Azure Event Hubs", "operational data", "real-time simulator"], 23 | "industries": ["Industrials and Manufacturing"], 24 | "releaseDate": "2025-12-10", 25 | "updatedDate": "2025-12-10" 26 | } -------------------------------------------------------------------------------- /code/src/data/cards/Unified_Data_Foundation_with_Fabric.json: -------------------------------------------------------------------------------- 1 | { 2 | "solutionPlays": ["Unify your data platform"], 3 | "solutionAreas": ["Cloud & AI Platforms"], 4 | "stability": "Live", 5 | "key": ["Multi-agent Custom Automation Engine", "Content Processing", "Conversation Knowledge Mining"], 6 | "accelerator": "Unified Data Foundation with Fabric", 7 | "excerpt": "Establish a unified data foundation in Fabric to enable decision making and achieve scalable insights by leveraging the Modern Analytics, AI and Governance framework (MAAG) for your enterprise data assets", 8 | "productsAndServices": ["Microsoft Fabric", "OneLake", "Azure Databricks", "Purview"], 9 | "programmingLanguages": ["Python", "SQL"], 10 | "githubUrl": "https://github.com/microsoft/unified-data-foundation-with-fabric-solution-accelerator", 11 | "assets": [ 12 | { 13 | "label": "Walkthrough", 14 | "href": "https://aka.ms/UnifiedData_Overview", 15 | "fileType": "pptx" 16 | } 17 | ], 18 | "technicalPattern": "Unify your Data", 19 | "foundryTemplateName": "", 20 | "useCases": ["Sales Analysis", "Data Governance", "Data Integration", "Data Engineering", "Analytics", "AI"], 21 | "keywords": ["AI", "data foundation", "modern data platform", "Azure Databricks", "Microsoft Fabric", "OneLake", "Microsoft Purview", "Power BI", "medallion architecture", "data engineering", "python", "pyspark", "jupyter", "azd template", "analytics", "enterprise data", "data mirroring"], 22 | "industries": ["Retail"], 23 | "releaseDate": "2025-09-26", 24 | "updatedDate": "2025-09-26" 25 | } -------------------------------------------------------------------------------- /code/src/types/index.ts: -------------------------------------------------------------------------------- 1 | // Asset type for card resources 2 | export interface AcceleratorAsset { 3 | label: string; 4 | href: string; 5 | fileType?: string; 6 | } 7 | 8 | // Main accelerator card interface 9 | export interface AcceleratorCard { 10 | solutionPlays: string[]; 11 | solutionAreas: string[]; 12 | keys: string[]; 13 | stability: string; 14 | accelerator: string; 15 | excerpt: string; 16 | productsAndServices: string[]; 17 | programmingLanguages: string[]; 18 | githubUrl: string; 19 | assets?: AcceleratorAsset[]; 20 | technicalPattern?: string; 21 | foundryTemplateName?: string; 22 | useCases?: string[]; 23 | keywords?: string[]; 24 | industries?: string[]; 25 | releaseDate: string; 26 | } 27 | 28 | // Navigation section interface 29 | export interface NavigationSection { 30 | id: string; 31 | title: string; 32 | component: React.ComponentType; 33 | } 34 | 35 | // Filter options interface 36 | export interface FilterOptions { 37 | [key: string]: string[]; 38 | } 39 | 40 | // Card variant types 41 | export type CardVariant = 'featured' | 'standard' | 'compact'; 42 | export type CardSize = 'small' | 'medium' | 'large'; 43 | 44 | // Extended card props interface for components 45 | export interface CardProps extends AcceleratorCard { 46 | variant?: CardVariant; 47 | size?: CardSize; 48 | searchQuery?: string; 49 | onClick?: () => void; 50 | } 51 | 52 | // Success Stories Section interfaces 53 | export interface TestimonialQuote { 54 | quote: string; 55 | author: string; 56 | } 57 | 58 | export interface SuccessStoriesSectionProps { 59 | title?: string; 60 | quotes: TestimonialQuote[]; 61 | } -------------------------------------------------------------------------------- /code/src/data/cards/Container_Migration.json: -------------------------------------------------------------------------------- 1 | { 2 | "solutionPlays": ["Innovate with AI apps & agents", "Migrate and modernize your estate"], 3 | "solutionAreas": ["Cloud & AI Platforms"], 4 | "stability": "Live", 5 | "key": ["Container-Mi"], 6 | "accelerator": "Container-Migration", 7 | "programmingLanguages": ["Python", "TypeScript"], 8 | "excerpt": "Leverage AI to streamline container platform migration by automating tasks empowering organizations to focus on high-value tasks.", 9 | "productsAndServices": ["Azure AI Services", "Azure Cosmos DB", "Azure Container Apps", "Azure Configuration Service"], 10 | "githubUrl": "https://github.com/microsoft/Container-Migration-Solution-Accelerator", 11 | "assets": [ 12 | { 13 | "label": "Walkthrough", 14 | "href": "https://aka.ms/ContainerMigrationDeck", 15 | "fileType": "pptx" 16 | } 17 | ], 18 | "technicalPattern": "Modernize your code", 19 | "foundryTemplateName": "", 20 | "useCases": ["kubernetes container workloads cloud platform migration"], 21 | "keywords": ["containers", "migration", "kubernetes", "multi-layer", "multi-agent", "o3", "orchestration", "MCP", "Semantic Kernel", "reasoning", "React"], 22 | "industries": [ 23 | "Automotive", 24 | "Defense and Intelligence", 25 | "Education", 26 | "Energy", 27 | "Financial Services", 28 | "Government", 29 | "Healthcare", 30 | "Industrials and Manufacturing", 31 | "Non-profit", 32 | "Professional Services", 33 | "Retail", 34 | "Telecommunications", 35 | "Media and Entertainment" 36 | ], 37 | "releaseDate": "2025-09-24", 38 | "updatedDate": "2025-09-24" 39 | } -------------------------------------------------------------------------------- /code/src/data/cards/Agentic_Applications_for_Unified_Data_Foundation.json: -------------------------------------------------------------------------------- 1 | { 2 | "solutionPlays": ["Unify your data platform", "Innovate with AI apps & agents"], 3 | "solutionAreas": ["Cloud & AI Platforms"], 4 | "stability": "Live", 5 | "key": "Agentic-Applications-Unified-Data", 6 | "accelerator": "Agentic Applications for Unified Data Foundation", 7 | "programmingLanguages": ["Python", "SQL", "TypeScript"], 8 | "excerpt": "Accelerate decision making at scale with secure, agentic AI built on a unified data foundation with two use cases for sales performance and customer insights.", 9 | "productsAndServices": ["Microsoft Fabric", "SQL DB in Fabric", "Microsoft Foundry", "Microsoft Agent Framework", "Azure App Service"], 10 | "githubUrl": "https://github.com/microsoft/agentic-applications-for-unified-data-foundation-solution-accelerator", 11 | "assets": [ 12 | { 13 | "label": "Walkthrough", 14 | "href": "https://aka.ms/UnifiedDataAgent_Overview", 15 | "fileType": "pptx" 16 | }, 17 | { 18 | "label": "Insurance", 19 | "href": "https://aka.ms/UnifiedDataAgent_Insurance", 20 | "fileType": "pptx" 21 | } 22 | ], 23 | "technicalPattern": "Unify your Data", 24 | "foundryTemplateName": "agentic-applications-for-unified-data-foundation", 25 | "useCases": ["Sales Analysis", "Customer Analysis", "Retail", "Insurance", "Data Agents", "AI", "Analytics"], 26 | "keywords": ["AI", "Microsoft Foundry", "Microsoft Agent Framework", "Azure SQL DB", "Microsoft Fabric", "analytics", "App Service", "enterprise data", "data agent", "agentic AI", "sql", "azd template"], 27 | "industries": ["Retail", "Financial Services"], 28 | "releaseDate": "2025-09-26", 29 | "updatedDate": "2025-12-17" 30 | } -------------------------------------------------------------------------------- /code/src/data/cards/Data_Agent_Governance_Security.json: -------------------------------------------------------------------------------- 1 | { 2 | "solutionPlays": ["Protect Cloud, AI Platforms, & Apps"], 3 | "solutionAreas": ["Security"], 4 | "stability": "Live", 5 | "key": "Data-Agent-Governance-Security", 6 | "accelerator": "Data & Agent Governance and Security", 7 | "programmingLanguages": ["PowerShell", "Bicep"], 8 | "excerpt": "Confidently adopt AI by automating Microsoft Purview and compliance guardrails - capturing prompts and responses, enforcing data protection policies, and streamlining governance across Copilot, Foundry, Fabric, and custom AI agents.", 9 | "productsAndServices": ["Purview", "OneLake", "Microsoft Fabric", "Data Security Posture Management For AI", "Defender for AI"], 10 | "githubUrl": "https://aka.ms/DAGSA", 11 | "assets": [ 12 | { 13 | "label": "Walkthrough", 14 | "href": "https://aka.ms/DAGSAOverview", 15 | "fileType": "pptx" 16 | } 17 | ], 18 | "technicalPattern": "Govern AI Data and Agents", 19 | "foundryTemplateName": "agentic-applications-for-unified-data-foundation", 20 | "useCases": ["AI Application Governance", "Data Governance for Analytics Platforms", "Security & Compliance Enablement", "AI", "Agentic Workflows", "Manufacturing & Operations", "Day 2 Operations / Hardening"], 21 | "keywords": ["AI Security", "AI Governance", "Purview", "Data Security Posture Management for AI","Defender for AI","Sensitivity Labels","Copilot Governance"], 22 | "industries": ["Automotive", "Defense and Intelligence", "Education", "Energy", "Financial Services", "Government", "Healthcare", "Industrials and Manufacturing", "Non-profit", "Professional Services", "Retail", "Telecommunications", "Media and Entertainment"], 23 | "releaseDate": "2025-12-15", 24 | "updatedDate": "2025-12-15" 25 | } -------------------------------------------------------------------------------- /code/src/utils/getLinkIcon.ts: -------------------------------------------------------------------------------- 1 | const fileTypeIconMap: Record = { 2 | pptx: "/csa-sas-ext-landingpage/icons/PowerPoint.svg", 3 | ppt: "/csa-sas-ext-landingpage/icons/PowerPoint.svg", 4 | xlsx: "/csa-sas-ext-landingpage/icons/Excel.svg", 5 | xls: "/csa-sas-ext-landingpage/icons/Excel.svg", 6 | docx: "/csa-sas-ext-landingpage/icons/Word.svg", 7 | doc: "/csa-sas-ext-landingpage/icons/Word.svg", 8 | pdf: "/csa-sas-ext-landingpage/icons/pdf.svg", 9 | default: null, 10 | }; 11 | 12 | export const getLinkIcon = (href: string, fileType?: string): string | null => { 13 | try { 14 | if (fileType && fileTypeIconMap[fileType.toLowerCase()]) { 15 | return fileTypeIconMap[fileType.toLowerCase()]; 16 | } 17 | 18 | // Check for service-specific icons 19 | try { 20 | const urlObj = new URL(href); 21 | const hostname = urlObj.hostname.toLowerCase(); 22 | 23 | if (hostname.includes('github.com')) return '/csa-sas-ext-landingpage/icons/github.svg'; 24 | if (hostname.includes('figma.com')) return '/csa-sas-ext-landingpage/icons/figma.svg'; 25 | if (hostname.includes('youtube.com')) return '/csa-sas-ext-landingpage/icons/youtube.svg'; 26 | if (hostname.includes('docs.microsoft.com')) return '/csa-sas-ext-landingpage/icons/docs.svg'; 27 | if (hostname.includes('learn.microsoft.com')) return '/csa-sas-ext-landingpage/icons/learn.svg'; 28 | } catch { 29 | // Ignore URL parsing errors 30 | } 31 | 32 | // Check file extension 33 | const extMatch = href.match(/\.(pptx?|xlsx?|docx?|pdf)$/i); 34 | if (extMatch) { 35 | const ext = extMatch[1].toLowerCase(); 36 | return fileTypeIconMap[ext] || null; 37 | } 38 | 39 | return null; 40 | } catch { 41 | return null; 42 | } 43 | }; -------------------------------------------------------------------------------- /code/src/data/cards/Customer_Chatbot.json: -------------------------------------------------------------------------------- 1 | { 2 | "solutionPlays": ["Innovate with AI Platform", "Build and Modernize Apps" ], 3 | "solutionAreas": ["Cloud & AI Platforms"], 4 | "stability": "Live", 5 | "key": ["customer-chatbot"], 6 | "accelerator": "Customer Chatbot", 7 | "featured": false, 8 | "excerpt": "Create a customer chatbot that enables natural interactions for external customers, provides real-time assistance, and improves overall customer satisfaction leveraging AI.", 9 | "productsAndServices": ["Microsoft Foundry", "Azure OpenAI Service", "Foundry IQ", "Microsoft Agent Service", "Azure Cosmos DB", "Azure App Service"], 10 | "programmingLanguages": ["Python", "React", "TypeScript"], 11 | "githubUrl": "https://aka.ms/CSAGoldStandards/CustomerChatbot", 12 | "assets": [ 13 | { 14 | "label": "Walkthrough", 15 | "href": "https://aka.ms/CustomerChatbotDeck", 16 | "fileType": "pptx" 17 | } 18 | ], 19 | "technicalPattern": "Customer Chatbot", 20 | "foundryTemplateName": "", 21 | "useCases": ["Enable Retail product discovery through AI powered chat ", "Extract key product information from unstructured data using AI-powered chat", "Provide relevant information about company policy for product return", "Provide AI-driven chat response based on conversational queries", "Enable interactive data exploration through natural language queries", "Improve customer interaction with AI-powered knowledge retrieval"], 22 | "keywords": [ "Customer chatbot", "Data and AI", "Digital and App Innovation", "Hero Demo", "Product Discovery", "Customer Interaction", "Multiagent", "Agent Framework", "AI Powered Conversation", "Conversational AI"], 23 | "industries": ["Retail"], 24 | "releaseDate": "2025-12-08", 25 | "updatedDate": "2025-12-08" 26 | } 27 | -------------------------------------------------------------------------------- /code/src/components/VideoPlayer/README.md: -------------------------------------------------------------------------------- 1 | # VideoPlayer Component 2 | 3 | A reusable YouTube video player component with thumbnail preview and play button overlay. 4 | 5 | ## Props 6 | 7 | ### `videoUrl: string` 8 | YouTube video URL (supports embed, watch, and short URLs). 9 | 10 | ### `autoplay?: boolean` 11 | Whether the video should autoplay when loaded. Defaults to `false`. 12 | 13 | ### `className?: string` 14 | Optional additional CSS classes. 15 | 16 | ### `aspectRatio?: string` 17 | Optional aspect ratio override. Defaults to `aspect-[16/9]`. 18 | 19 | ## Features 20 | 21 | - **Smart URL Parsing**: Automatically extracts video ID from various YouTube URL formats 22 | - **Thumbnail Preview**: Shows video thumbnail with play button overlay 23 | - **Click to Play**: Click the play button to start the video 24 | - **Autoplay Support**: Configurable autoplay behavior 25 | - **Responsive Design**: Maintains aspect ratio across screen sizes 26 | - **Customizable Styling**: Supports custom CSS classes and aspect ratios 27 | 28 | ## Usage Examples 29 | 30 | ### Basic Usage 31 | ```tsx 32 | import VideoPlayer from './components/VideoPlayer'; 33 | 34 | 37 | ``` 38 | 39 | ### With Autoplay 40 | ```tsx 41 | 45 | ``` 46 | 47 | ### Custom Styling 48 | ```tsx 49 | 54 | ``` 55 | 56 | ### Different YouTube URL Formats 57 | The component supports various YouTube URL formats: 58 | - `https://www.youtube.com/watch?v=VIDEO_ID` 59 | - `https://youtu.be/VIDEO_ID` 60 | - `https://www.youtube.com/embed/VIDEO_ID` 61 | 62 | ## Integration with HeroSection 63 | 64 | This component is designed to work seamlessly with the HeroSection component. The HeroSection can now use this VideoPlayer instead of having embedded video logic. -------------------------------------------------------------------------------- /code/src/data/cards/Deploy_AI_applications_in_production.json: -------------------------------------------------------------------------------- 1 | { 2 | "solutionPlays": [ 3 | "Innovate with AI apps & agents", 4 | "Migrate & modernize your estate"], 5 | "solutionAreas": ["Cloud & AI Platforms"], 6 | "stability": "Live", 7 | "key": ["Multi-agent Custom Automation Engine", "Content Processing", "Conversation Knowledge Mining"], 8 | "accelerator": "Deploy Your AI Application in Production", 9 | "programmingLanguages": ["Bicep", "Shell", "PowerShell", "Python"], 10 | "excerpt": "Create a secure, extensible and integrated environment for deploying and running AI Foundry workloads in production.", 11 | "productsAndServices": [ 12 | "Azure AI Foundry Models", 13 | "Azure AI Search", 14 | "Azure Cosmos DB", 15 | "Azure Container Apps" 16 | ], 17 | "githubUrl": "https://github.com/microsoft/deploy-your-ai-application-in-production", 18 | "assets": [ 19 | { 20 | "label": "Walkthrough", 21 | "href": "http://aka.ms/aitoprodppt", 22 | "fileType": "pptx" 23 | } 24 | ], 25 | "technicalPattern": "", 26 | "foundryTemplateName": "Deploy Your AI application in Production", 27 | "useCases": [ 28 | "Create a secure environment for AI workload deployment", 29 | "Integrate AI applications with existing enterprise systems", 30 | "Optimize AI model performance for production environments", 31 | "Ensure compliance with security and governance standards", 32 | "Automate monitoring and scaling of AI applications", 33 | "Enable seamless collaboration between AI and business teams" 34 | ], 35 | "keywords": ["Data and AI", "Digital and App Innovation"], 36 | "industries": [ 37 | "Automotive", 38 | "Defense and Intelligence", 39 | "Education", 40 | "Energy", 41 | "Financial Services", 42 | "Government", 43 | "Healthcare", 44 | "Industrials and Manufacturing", 45 | "Non-profit", 46 | "Professional Services", 47 | "Retail", 48 | "Telecommunications", 49 | "Media and Entertainment" 50 | ], 51 | "releaseDate": "2024-03-31", 52 | "updatedDate": "2025-08-15" 53 | } 54 | -------------------------------------------------------------------------------- /code/src/data/cards/Build_your_own_copilot_-_Client_advisor.json: -------------------------------------------------------------------------------- 1 | { 2 | "solutionPlays": [ 3 | "Innovate with AI apps & agents", 4 | "Unify your data platform" 5 | ], 6 | "solutionAreas": [ 7 | "Cloud & AI Platforms" 8 | ], 9 | "stability": "Live", 10 | "key": ["Multi-agent Custom Automation Engine", "Content Processing", "Conversation Knowledge Mining"], 11 | "accelerator": "Build your own copilot – Client Advisor", 12 | "programmingLanguages": ["Bicep", "TypeScript", "Python"], 13 | "excerpt": "Save time and prepare relevant discussion topics for scheduled client meetings with an overview of daily schedules and easy navigation between client profiles and a chat interface.", 14 | "productsAndServices": [ 15 | "Azure AI Search", 16 | "Azure AI Foundry Models", 17 | "Azure Cosmos DB", 18 | "Azure SQL Database", 19 | "Azure Container Apps" 20 | ], 21 | "githubUrl": "https://aka.ms/CSAGoldStandards/BuildYourOwncopilot", 22 | "assets": [ 23 | { 24 | "label": "Walkthrough", 25 | "href": "https://aka.ms/BYCDeck-ClientAdvisor", 26 | "fileType": "pptx" 27 | } 28 | ], 29 | "technicalPattern": "Build your own copilot", 30 | "foundryTemplateName": "Improve client meetings with agents", 31 | "useCases": [ 32 | "Improve customer meetings", 33 | "Client meeting preparation", 34 | 35 | "Prepare discussion topics for scheduled client meetings", 36 | "Provide AI-driven insights on client profiles and history", 37 | "Automate meeting scheduling and reminders", 38 | "Generate personalized recommendations based on client interactions", 39 | "Enable seamless navigation between client profiles and chat interfaces", 40 | "Summarize key takeaways from client meetings for follow-up actions" 41 | ], 42 | "keywords": [ 43 | "Meeting preparation", 44 | "Data and AI", 45 | "Digital and App Innovation", 46 | "BYOC" 47 | ], 48 | "industries": [ 49 | "Financial Services", 50 | "Government", 51 | "Professional Services", 52 | "Retail", 53 | "Media and Entertainment" 54 | ], 55 | "releaseDate": "2024-12-31", 56 | "updatedDate": "2025-08-15" 57 | } -------------------------------------------------------------------------------- /code/src/utils/validateCardData.ts: -------------------------------------------------------------------------------- 1 | type CardData = { 2 | accelerator: string; 3 | solutionPlays: string[]; 4 | solutionAreas: string[]; 5 | productsAndServices: string[]; 6 | assets?: { label: string; href: string }[]; 7 | }; 8 | 9 | export const validateCardData = (data: CardData) => { 10 | // Validate required fields 11 | if (!data.accelerator) { 12 | throw new Error('Card data missing required field: accelerator'); 13 | } 14 | if (!Array.isArray(data.solutionPlays)) { 15 | throw new Error('Card data missing required field: solutionPlays (must be array)'); 16 | } 17 | if (!Array.isArray(data.solutionAreas)) { 18 | throw new Error('Card data missing required field: solutionAreas (must be array)'); 19 | } 20 | if (!Array.isArray(data.productsAndServices)) { 21 | throw new Error('Card data missing required field: productsAndServices (must be array)'); 22 | } 23 | 24 | // Validate assets if present 25 | if (data.assets) { 26 | if (!Array.isArray(data.assets)) { 27 | throw new Error('Card data assets must be an array'); 28 | } 29 | data.assets.forEach((asset, index) => { 30 | if (!asset.label) { 31 | throw new Error(`Asset at index ${index} missing required field: label`); 32 | } 33 | if (!asset.href) { 34 | throw new Error(`Asset at index ${index} missing required field: href`); 35 | } 36 | try { 37 | new URL(asset.href); 38 | } catch { 39 | throw new Error(`Asset at index ${index} has invalid href: ${asset.href}`); 40 | } 41 | }); 42 | } 43 | 44 | // Validate array contents 45 | data.solutionPlays.forEach((item, index) => { 46 | if (typeof item !== 'string') { 47 | throw new Error(`Solution play at index ${index} must be a string`); 48 | } 49 | }); 50 | 51 | data.solutionAreas.forEach((item, index) => { 52 | if (typeof item !== 'string') { 53 | throw new Error(`Solution area at index ${index} must be a string`); 54 | } 55 | }); 56 | 57 | data.productsAndServices.forEach((item, index) => { 58 | if (typeof item !== 'string') { 59 | throw new Error(`Product/service at index ${index} must be a string`); 60 | } 61 | }); 62 | }; -------------------------------------------------------------------------------- /code/src/components/CustomerTrustSection/CustomerTrustSection.css: -------------------------------------------------------------------------------- 1 | .customer-trust-section { 2 | background-image: url('/success/successGradient.png'); 3 | background-size: 100% 100%; 4 | background-attachment: scroll; 5 | background-position: center center; 6 | padding: 4rem 0; 7 | } 8 | 9 | .trusted-customers-section { 10 | margin-bottom: 0; 11 | } 12 | 13 | .trusted-customers-section .title-spacing { 14 | margin-bottom: 3rem; 15 | } 16 | 17 | .loved-developers-section { 18 | padding-top: 0; 19 | } 20 | 21 | .quotes-grid { 22 | display: grid; 23 | grid-template-columns: repeat(4, 1fr); 24 | gap: 1.5rem; 25 | max-width: 1200px; 26 | margin: 0 auto; 27 | } 28 | 29 | .testimonial-card { 30 | background-color: white; 31 | padding: 2rem; 32 | border-radius: 8px; 33 | height: 280px; 34 | width: 100%; 35 | position: relative; 36 | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 37 | display: flex; 38 | flex-direction: column; 39 | border: 1px solid #e5e7eb; 40 | min-height: 280px; 41 | overflow: hidden; 42 | } 43 | 44 | .quote-icon { 45 | margin-bottom: 1rem; 46 | display: flex; 47 | align-items: flex-start; 48 | } 49 | 50 | .quote-icon img { 51 | width: auto; 52 | height: auto; 53 | } 54 | 55 | .quote-text { 56 | flex: 1; 57 | font-weight: 600; 58 | line-height: 1.6; 59 | margin-bottom: 1rem; 60 | font-size: 0.9rem; 61 | overflow: hidden; 62 | display: -webkit-box; 63 | line-clamp: 4; 64 | -webkit-line-clamp: 4; 65 | -webkit-box-orient: vertical; 66 | } 67 | 68 | .author-title { 69 | margin-top: auto; 70 | font-weight: 400; 71 | color: #374151; 72 | font-size: 0.875rem; 73 | font-style: italic; 74 | align-self: flex-start; 75 | flex-shrink: 0; 76 | } 77 | 78 | /* Responsive grid adjustments */ 79 | @media (max-width: 1023px) { 80 | .quotes-grid { 81 | grid-template-columns: repeat(2, 1fr); 82 | gap: 1rem; 83 | } 84 | 85 | .testimonial-card { 86 | height: 240px; 87 | } 88 | } 89 | 90 | @media (max-width: 767px) { 91 | .quotes-grid { 92 | grid-template-columns: repeat(1, 1fr); 93 | gap: 1rem; 94 | } 95 | 96 | .testimonial-card { 97 | height: 200px; 98 | } 99 | } -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 9 | permissions: 10 | contents: write 11 | pages: write 12 | id-token: write 13 | 14 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 15 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 16 | concurrency: 17 | group: "pages" 18 | cancel-in-progress: false 19 | 20 | jobs: 21 | build: 22 | name: Build 23 | runs-on: ubuntu-latest 24 | 25 | steps: 26 | - name: Checkout repo 27 | uses: actions/checkout@v4 28 | 29 | - name: Setup Node 30 | uses: actions/setup-node@v4 31 | 32 | - name: Clean dist directory 33 | run: rm -rf ./code/dist 34 | 35 | - name: Install dependencies 36 | run: npm install 37 | working-directory: ./code 38 | 39 | - name: Build project 40 | run: npm run build 41 | working-directory: ./code 42 | 43 | - name: Upload production-ready build files 44 | uses: actions/upload-artifact@v4 45 | with: 46 | name: github-pages 47 | path: ./code/dist 48 | 49 | deploy: 50 | name: Deploy 51 | needs: build 52 | runs-on: ubuntu-latest 53 | if: github.ref == 'refs/heads/main' 54 | 55 | steps: 56 | - name: Download artifact 57 | uses: actions/download-artifact@v4 58 | with: 59 | name: github-pages 60 | path: ./code/dist 61 | 62 | - name: Create CNAME file 63 | run: echo accelerators.ms > ./code/dist/CNAME # Replace with your actual domain 64 | 65 | - name: Deploy to GitHub Pages 66 | run: | 67 | git config --global user.name "github-actions[bot]" 68 | git config --global user.email "github-actions[bot]@users.noreply.github.com" 69 | git init 70 | git remote add origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git 71 | git fetch origin 72 | git checkout -B gh-pages 73 | mv ./code/dist/* ./ # Move the contents of dist to the root 74 | git add . 75 | git commit -m "Deploy to GitHub Pages" 76 | git push origin gh-pages --force -------------------------------------------------------------------------------- /code/src/data/cards/Code_modernization.json: -------------------------------------------------------------------------------- 1 | { 2 | "solutionPlays": [ 3 | "Innovate with AI apps & agents", 4 | "Migrate & modernize your estate" 5 | ], 6 | "solutionAreas": [ 7 | "Cloud & AI Platforms" 8 | ], 9 | "stability": "Live", 10 | "key": ["Multi-agent Custom Automation Engine", "Content Processing", "Conversation Knowledge Mining"], 11 | "accelerator": "Modernize your Code", 12 | "programmingLanguages": ["Bicep", "TypeScript", "Python"], 13 | "excerpt": "Migrate legacy code to modern languages by leveraging a team of AI agents.", 14 | "productsAndServices": [ 15 | "Azure AI Foundry Models", 16 | "Azure AI Foundry Agent Service", 17 | "Semantic Kernel", 18 | "Azure Container Apps", 19 | "Azure Cosmos DB" 20 | ], 21 | "githubUrl": "https://aka.ms/CSAGoldStandards/ModernizeCode", 22 | "assets": [ 23 | { 24 | "label": "Walkthrough", 25 | "href": "https://aka.ms/ModernizeCodeDeck", 26 | "fileType": "pptx" 27 | } 28 | ], 29 | "technicalPattern": "Modernize your code", 30 | "foundryTemplateName": "Modernize your code with agents", 31 | "useCases": [ 32 | "Code translation\u200b \n\nGenerate initial code drafts\u202f\u200b \n\nCode correction and refactoring\u200b \n\nRoot-cause analysis\u200b \n\nGenerate new system designs", 33 | 34 | "Translate legacy code into modern programming languages", 35 | "Generate initial code drafts based on business logic", 36 | "Automate code correction and refactoring", 37 | "Perform root-cause analysis for debugging and optimization", 38 | "Generate new system designs using AI-driven recommendations", 39 | "Improve code efficiency with AI-powered transformation tools" 40 | ], 41 | "keywords": [ 42 | "Code language modernization", 43 | "summary and review of new code", 44 | "business logic analysis", 45 | "efficient code transformation", 46 | "Data and AI", 47 | "Digital and App Innovation" 48 | ], 49 | "industries": [ 50 | "Automotive", 51 | "Defense and Intelligence", 52 | "Education", 53 | "Energy", 54 | "Financial Services", 55 | "Government", 56 | "Healthcare", 57 | "Industrials and Manufacturing", 58 | "Non-profit", 59 | "Professional Services", 60 | "Retail", 61 | "Telecommunications", 62 | "Media and Entertainment" 63 | ], 64 | "releaseDate": "2025-03-15", 65 | "updatedDate": "2025-08-15" 66 | } -------------------------------------------------------------------------------- /code/src/data/cards/Content_Processing.json: -------------------------------------------------------------------------------- 1 | { 2 | "solutionPlays": [ 3 | "Innovate with AI apps & agents" 4 | ], 5 | "solutionAreas": [ 6 | "Cloud & AI Platforms" 7 | ], 8 | "stability": "Live", 9 | "key": ["Multi-agent Custom Automation Engine", "Content Processing", "Conversation Knowledge Mining"], 10 | "accelerator": "Content Processing", 11 | "programmingLanguages": ["Bicep", "TypeScript", "Python"], 12 | "excerpt": "Process claims, invoices, contracts and other documents quickly and accurately by extracting information from unstructured content and mapping it to a structured format. This template supports text, images, tables and graphs.", 13 | "productsAndServices": [ 14 | "Azure AI Foundry Models", 15 | "Azure AI Content Understanding", 16 | "Azure Cosmos DB", 17 | "Azure Container Apps" 18 | ], 19 | "githubUrl": "https://aka.ms/CSAGoldStandards/ContentProcessing", 20 | "assets": [ 21 | { 22 | "label": "Walkthrough", 23 | "href": "https://aka.ms/ContentProcessingDeck", 24 | "fileType": "pptx" 25 | } 26 | ], 27 | "technicalPattern": "Content processing", 28 | "foundryTemplateName": "Multi-modal content processing", 29 | "useCases": [ 30 | "Documentation of clinician-patient visit and entering summary into downstream systems", 31 | "Claims processing", 32 | "Invoice processing", 33 | "Contract processing", 34 | "ID Verification", 35 | 36 | "Extract structured data from unstructured documents", 37 | "Automate claims processing with AI-driven validation", 38 | "Streamline invoice processing by mapping extracted data to financial systems", 39 | "Enhance contract review with AI-powered clause analysis", 40 | "Perform ID verification using AI-driven document analysis", 41 | "Improve documentation workflows with automated content classification" 42 | ], 43 | "keywords": [ 44 | "Data ingestion and extraction", 45 | "Verification", 46 | "Review", 47 | "Data and AI", 48 | "Digital and App Innovation" 49 | ], 50 | "industries": [ 51 | "Automotive", 52 | "Defense and Intelligence", 53 | "Education", 54 | "Energy", 55 | "Financial Services", 56 | "Government", 57 | "Healthcare", 58 | "Industrials and Manufacturing", 59 | "Non-profit", 60 | "Professional Services", 61 | "Retail", 62 | "Telecommunications", 63 | "Media and Entertainment" 64 | ], 65 | "releaseDate": "2025-03-31", 66 | "updatedDate": "2025-08-15" 67 | } -------------------------------------------------------------------------------- /code/src/App.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | /* Additional spacing so sections land slightly lower than the header */ 7 | --nav-extra-offset: 12px; 8 | } 9 | 10 | #root { 11 | width: 100%; 12 | margin: 0; 13 | padding: 0; 14 | text-align: left; 15 | } 16 | 17 | .logo { 18 | height: 6em; 19 | padding: 1.5em; 20 | will-change: filter; 21 | transition: filter 300ms; 22 | } 23 | .logo:hover { 24 | filter: drop-shadow(0 0 2em #646cffaa); 25 | } 26 | .logo.react:hover { 27 | filter: drop-shadow(0 0 2em #61dafbaa); 28 | } 29 | 30 | @keyframes logo-spin { 31 | from { 32 | transform: rotate(0deg); 33 | } 34 | to { 35 | transform: rotate(360deg); 36 | } 37 | } 38 | 39 | @media (prefers-reduced-motion: no-preference) { 40 | a:nth-of-type(2) .logo { 41 | animation: logo-spin infinite 20s linear; 42 | } 43 | } 44 | 45 | .card { 46 | padding: 2em; 47 | } 48 | 49 | .read-the-docs { 50 | color: #888; 51 | } 52 | 53 | /* Fluid gradient background shared by Header + Hero */ 54 | .home-hero-gradient { 55 | position: relative; 56 | isolation: isolate; /* ensure header backdrop-blur only blurs this background */ 57 | /* Layered, responsive gradients */ 58 | --accent-pink: 255 182 193; /* light rose */ 59 | --accent-lilac: 205 180 219; /* soft lilac */ 60 | --accent-sky: 173 216 230; /* light sky */ 61 | 62 | background-image: 63 | radial-gradient(60vw 60vw at 15% 10%, rgba(var(--accent-pink) / 0.35), rgba(255 255 255 / 0) 60%), 64 | radial-gradient(50vw 50vw at 85% 5%, rgba(var(--accent-lilac) / 0.35), rgba(255 255 255 / 0) 55%), 65 | radial-gradient(65vw 50vw at 80% 70%, rgba(var(--accent-sky) / 0.30), rgba(255 255 255 / 0) 60%); 66 | 67 | /* Give hero breathing room so gradient is visible */ 68 | padding-bottom: 2rem; 69 | } 70 | 71 | @media (max-width: 768px) { 72 | .home-hero-gradient { 73 | background-image: 74 | radial-gradient(80vw 80vw at 20% 8%, rgba(var(--accent-pink) / 0.38), rgba(255 255 255 / 0) 62%), 75 | radial-gradient(70vw 70vw at 85% 0%, rgba(var(--accent-lilac) / 0.34), rgba(255 255 255 / 0) 58%), 76 | radial-gradient(90vw 70vw at 60% 75%, rgba(var(--accent-sky) / 0.28), rgba(255 255 255 / 0) 62%); 77 | padding-bottom: 1.5rem; 78 | } 79 | } 80 | 81 | /* Ensure in-flow sections account for sticky navigation height when scrolled into view */ 82 | .section-anchor { 83 | scroll-margin-top: calc(var(--nav-height, 64px) + var(--nav-extra-offset, 0px)); 84 | } 85 | -------------------------------------------------------------------------------- /code/src/components/Footer/Footer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Title2, Text, Link } from '@fluentui/react-components'; 3 | import './Footer.css'; 4 | 5 | export interface FooterLink { 6 | text: string; 7 | url: string; 8 | target?: '_blank' | '_self' | '_parent' | '_top'; 9 | } 10 | 11 | export interface FooterProps { 12 | /** Main headline text (left-aligned) */ 13 | headline: string; 14 | /** URL to the icon image (will use Illustration.png from icons folder) */ 15 | iconUrl?: string; 16 | /** HTML content for the right side content block */ 17 | content: string; 18 | /** Array of footer navigation links */ 19 | links: FooterLink[]; 20 | /** Custom copyright text (optional, will auto-generate with current year if not provided) */ 21 | copyright?: string; 22 | /** Additional CSS classes */ 23 | className?: string; 24 | } 25 | 26 | const Footer: React.FC = ({ 27 | headline, 28 | iconUrl = "/icons/Illustration.png", 29 | content, 30 | links, 31 | copyright, 32 | className = '' 33 | }) => { 34 | // Generate copyright text with current year if not provided 35 | const copyrightText = copyright || `© Microsoft ${new Date().getFullYear()}`; 36 | 37 | return ( 38 |
39 |
40 |
41 |
42 | {headline} 43 |
44 |
45 |
46 | Contact us 47 |
48 |
52 |
53 |
54 | 55 |
56 |
57 | {links.map((link, index) => ( 58 | 64 | {link.text} 65 | 66 | ))} 67 |
68 |
69 | {copyrightText} 70 |
71 |
72 |
73 |
74 | ); 75 | }; 76 | 77 | export default Footer; -------------------------------------------------------------------------------- /code/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: 13 | 14 | ```js 15 | export default tseslint.config([ 16 | globalIgnores(['dist']), 17 | { 18 | files: ['**/*.{ts,tsx}'], 19 | extends: [ 20 | // Other configs... 21 | 22 | // Remove tseslint.configs.recommended and replace with this 23 | ...tseslint.configs.recommendedTypeChecked, 24 | // Alternatively, use this for stricter rules 25 | ...tseslint.configs.strictTypeChecked, 26 | // Optionally, add this for stylistic rules 27 | ...tseslint.configs.stylisticTypeChecked, 28 | 29 | // Other configs... 30 | ], 31 | languageOptions: { 32 | parserOptions: { 33 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 34 | tsconfigRootDir: import.meta.dirname, 35 | }, 36 | // other options... 37 | }, 38 | }, 39 | ]) 40 | ``` 41 | 42 | You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: 43 | 44 | ```js 45 | // eslint.config.js 46 | import reactX from 'eslint-plugin-react-x' 47 | import reactDom from 'eslint-plugin-react-dom' 48 | 49 | export default tseslint.config([ 50 | globalIgnores(['dist']), 51 | { 52 | files: ['**/*.{ts,tsx}'], 53 | extends: [ 54 | // Other configs... 55 | // Enable lint rules for React 56 | reactX.configs['recommended-typescript'], 57 | // Enable lint rules for React DOM 58 | reactDom.configs.recommended, 59 | ], 60 | languageOptions: { 61 | parserOptions: { 62 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 63 | tsconfigRootDir: import.meta.dirname, 64 | }, 65 | // other options... 66 | }, 67 | }, 68 | ]) 69 | ``` 70 | -------------------------------------------------------------------------------- /code/src/data/cards/Conversation_Knowledge_Mining.json: -------------------------------------------------------------------------------- 1 | { 2 | "solutionPlays": [ 3 | "Innovate with AI apps & agents" 4 | ], 5 | "solutionAreas": [ 6 | "Cloud & AI Platforms" 7 | ], 8 | "stability": "Live", 9 | "accelerator": "Conversation Knowledge Mining", 10 | "programmingLanguages": ["Python", "TypeScript", "Bicep"], 11 | "featured": true, 12 | "excerpt": "Improve contact center efficiency by uncovering insights from large audio and text-based data sets using advanced content understanding capabilities with two use cases for telco and IT helpdesk.", 13 | "productsAndServices": [ 14 | "Azure AI Content Understanding", 15 | "Azure OpenAI Service", 16 | "Azure AI Search", 17 | "Azure AI Agent Service", 18 | "Azure Container Apps", 19 | "Azure SQL Database", 20 | "Azure Functions" 21 | ], 22 | "githubUrl": "https://aka.ms/CSAGoldStandards/ConversationKnowledgeMining", 23 | "assets": [ 24 | { 25 | "label": "Walkthrough - Telco", 26 | "href": "https://aka.ms/CKMTelcodeck", 27 | "fileType": "pptx" 28 | }, 29 | { 30 | "label": "IT Helpdesk", 31 | "href": "https://aka.ms/CKMITHelpdeskdeck", 32 | "fileType": "pptx" 33 | }, 34 | { 35 | "label": "Overview Video", 36 | "href": "https://aka.ms/SAS_CKM_L200", 37 | "fileType": "mp4" 38 | } 39 | ], 40 | "technicalPattern": "Knowledge Mining", 41 | "foundryTemplateName": "Unlock insights from conversational data", 42 | "useCases": [ 43 | "Mining call center conversations for patterns / insights", 44 | "Call center ops improvement", 45 | "Call transcription and summarization", 46 | 47 | "Analyze call center conversations for customer sentiment insights", 48 | "Summarize customer interactions for improved service efficiency", 49 | "Identify recurring issues in customer support calls", 50 | "Optimize call center operations with AI-driven analytics", 51 | "Automate transcription and summarization of customer conversations", 52 | "Provide actionable insights for improving customer engagement" 53 | ], 54 | "keywords": [ 55 | "Call Center", 56 | "Transcription", 57 | "Call summarization", 58 | "Content understanding", 59 | "Call center operations", 60 | "Data and AI", 61 | "Digital and App Innovation" 62 | ], 63 | "industries": [ 64 | "Financial Services", 65 | "Government", 66 | "Healthcare", 67 | "Retail", 68 | "Telecommunications" 69 | ], 70 | "releaseDate": "2024-12-01", 71 | "updatedDate": "2025-12-17" 72 | } -------------------------------------------------------------------------------- /code/src/components/HeroSection/README.md: -------------------------------------------------------------------------------- 1 | # HeroSection Component 2 | 3 | A reusable hero section component that displays a title, content, call-to-action button, and YouTube video player. 4 | 5 | ## Props 6 | 7 | ### `title: string` 8 | The main title with support for line breaks using `
` tags. 9 | 10 | ### `content: string` 11 | The descriptive content text. 12 | 13 | ### `link: LinkConfig` 14 | Configuration for the call-to-action button: 15 | ```typescript 16 | interface LinkConfig { 17 | text: string; // Button text 18 | url: string; // URL or anchor link 19 | target?: '_blank' | '_self'; // Optional target for external links 20 | } 21 | ``` 22 | 23 | ### `videoUrl: string` 24 | YouTube video URL (supports embed, watch, and short URLs). 25 | 26 | ### `videoAutoplay?: boolean` 27 | Whether the video should autoplay when loaded. Defaults to `false`. 28 | 29 | ### `className?: string` 30 | Optional additional CSS classes. 31 | 32 | ## Usage Examples 33 | 34 | ### Basic Usage 35 | ```tsx 36 | 45 | ``` 46 | 47 | ### External Link 48 | ```tsx 49 | 60 | ``` 61 | 62 | ### Anchor Link (Smooth Scroll) 63 | ```tsx 64 | 74 | ``` 75 | 76 | ## Features 77 | 78 | - **Smart Link Handling**: Automatically detects anchor links (`#section`) vs external URLs 79 | - **Smooth Scrolling**: Anchor links smoothly scroll to the target section 80 | - **Video Player**: YouTube video with thumbnail preview and play button (now uses the reusable VideoPlayer component) 81 | - **Responsive Design**: Maintains visual consistency across screen sizes 82 | - **TypeScript Support**: Full type safety with proper interfaces -------------------------------------------------------------------------------- /code/src/components/Footer/README.md: -------------------------------------------------------------------------------- 1 | # Footer Component 2 | 3 | A configurable footer component that displays a headline, contact information with an icon, navigation links, and copyright information. 4 | 5 | ## Usage 6 | 7 | ```tsx 8 | import Footer from './components/Footer'; 9 | 10 | const footerLinks = [ 11 | { text: "Sitemap", url: "#" }, 12 | { text: "Contact Microsoft", url: "#" }, 13 | { text: "Privacy", url: "#" }, 14 | { text: "Terms of use", url: "#" }, 15 | { text: "Trademarks", url: "#" }, 16 | { text: "Safety & eco", url: "#" }, 17 | { text: "Recycling", url: "#" }, 18 | { text: "About our ads", url: "#" } 19 | ]; 20 | 21 |