Add PoweredBy component and update video SKU references

public/data.json

@@ -2,7 +2,8 @@
   "features": {
     "videos": [
       {
-              "sku": "GitHub Copilot Individual",
+              "sku": "GitHub Copilot Free / Pro",
+              "sku_id": 1,
               "items": [
                 {
                   "id": 0,
@@ -11,25 +12,32 @@
                   "description": "Explainer of the demo repo we use in the videos.",
                   "ghes_support": true
                 },
+                {
+                  "id": 99,
+                  "title": "Getting started with GitHub Copilot Free",
+                  "videoUrl": "https://youtu.be/dMbOh114Vd4",
+                  "description": "To get started with GitHub Copilot Free you can go to https://gh.io/copilot and open the VS Code link from there. This will trigger your VS Code to install the Copilot extensions and ask you to get started with Copilot for free. This includes 2000 suggestions and 50 chat completions per month, for free.",
+                  "ghes_support": true	
+                },
                 {
                   "id": 1,
-                  "title": "Code completions",
+                  "title": "Code completions / suggestions",
                   "videoUrl": "",
-                  "description": "Enhance your coding experience with AI-powered code completions.",
+                  "description": "Enhance your coding experience with AI-powered code completions while you are typing. Also called 'suggestions'. These are the most common way of using Copilot as they show up as a suggestion while you are typing in your editor.",
                   "ghes_support": true
                 },
                 {
                   "id": 2,
                   "title": "Chat in IDE",
                   "videoUrl": "",
-                  "description": "Communicate with Copilot directly within your IDE for instant assistance.",
+                  "description": "Communicate with Copilot directly within your IDE for instant assistance. You can have multi turn conversations with Copilot on things in your code, or ask it questions on things surrounding your code, like 'how do I do this in Python', or 'how do I run the unit tests from my terminal'.",
                   "ghes_support": true
                 },
                 {
                   "id": 3,
                   "title": "Chat on mobile",
                   "videoUrl": "",
-                  "description": "Get coding assistance on-the-go with Copilot's mobile chat feature.",
+                  "description": "Get coding assistance on-the-go with Copilot's mobile chat feature. This lets you summarize issues/pull requests/discussions, or ask broader questions about a repository for example.",
                   "ghes_support": true
                 },
                 {
@@ -205,6 +213,7 @@
             },
             {
               "sku": "GitHub Copilot Business",
+              "sku_id": 2,
               "items": [
                 {
                   "id": 23,
@@ -238,6 +247,7 @@
             },
             {
               "sku": "GitHub Copilot Enterprise",
+              "sku_id": 3,
               "items": [                
                 {
                   "id": 16,

src/App.jsx

@@ -10,6 +10,7 @@ import Tutorials from './pages/Tutorials';
 import './styles.css';
 import basename from '../react-config';
 import NotFound from './pages/NotFound';
+import PoweredBy from './PoweredBy';
 
 function App() {
   return (
@@ -28,6 +29,8 @@ function App() {
           <Route path="*" element={<NotFound />} />
         </Routes>
       </Router>
+
+      <PoweredBy />
     </div>
   );
 }

src/PoweredBy.jsx

@@ -0,0 +1,12 @@
+import React, { useEffect } from 'react';
+
+function PoweredBy() {
+    // return an image with the powered by xebia log
+    return (
+        <a href="https://xebia.com/academy/nl/discipline/github/" target='_blank'>
+            <img src="Powered_by_Xebia.svg" className='poweredBy' alt="Powered by Xebia" />
+        </a>
+    );
+}
+
+export default PoweredBy;

src/pages/Detail.jsx

@@ -63,7 +63,7 @@ const Detail = () => {
         )}
       </div>
       <div id="description-container">
-        <p id="feature-description">{videoDetails.description}</p>
+        <p className="feature-description">{videoDetails.description}</p>
       </div>
     </div>
   );

src/pages/Index.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import '../styles.css';
+import PoweredBy from '../PoweredBy';
 
 const Index = () => {
   const [feeds, setFeeds] = useState([]);
@@ -137,6 +138,7 @@ const Index = () => {
           </div>
           <div className="box">
             <img src="copilot.jfif" alt="Logo of a pilot with a headset and a leather jacket" style={{ width: '100px', height: 'auto' }} />
+            <PoweredBy />
           </div>
         </div>
       </div>

src/pages/Skus.jsx

@@ -69,9 +69,9 @@ const Skus = () => {
   useEffect(() => {
     getData()
       .then(data => {
-        const individual = data.features.videos.find(feature => feature.sku === "GitHub Copilot Individual");
-        const business = data.features.videos.find(feature => feature.sku === "GitHub Copilot Business");
-        const enterprise = data.features.videos.find(feature => feature.sku === "GitHub Copilot Enterprise");
+        const individual = data.features.videos.find(feature => feature.sku_id === 1);
+        const business = data.features.videos.find(feature => feature.sku_id === 2);
+        const enterprise = data.features.videos.find(feature => feature.sku_id === 3);
         setFeatures({individual: individual.items, business: business.items, enterprise: enterprise.items, ghesFiltered: false });
         handleGHESToggle();
       })
@@ -93,7 +93,7 @@ const Skus = () => {
       <div id="main-container">
       <div>
           <div>
-            <h2>GitHub Copilot Individual</h2>
+            <h2>GitHub Copilot Free / Pro</h2>
           </div>
           <div id="individual-features" className="sku-grid individual">
           {

src/styles.css

@@ -1,6 +1,12 @@
 :root {
     --button-color: #007bff;
     --hover-button-color: #0056b3;
+    width: 100%;
+}
+
+.poweredBy {
+    width:100%;
+    max-width: 200px;
 }
 
 #main-container {
@@ -169,6 +175,11 @@ a {
     background-color: #0056b3;
 }
 
+.feature-description {
+    max-width: 300px;
+    text-align: left;
+}
+
 @media (max-width: 768px) {
     #main-container {
         flex-direction: column;
@@ -185,8 +196,10 @@ a {
     flex-direction: column;
     align-items: center;
     margin-top: 40px;
-    padding: 20px;
+    padding-left: 20px;
+    padding-right: 20px;
     border-radius: 8px;
+    width: 100%;
 }
 
 #copilot-news h2 {
@@ -207,8 +220,7 @@ a {
 }
 
 .news-item {
-    width: 45%;
-    min-width: 600px;
+    max-width: 600px;
     margin: 10px;
     padding: 15px;
     border-radius: 8px;
@@ -280,6 +292,7 @@ a {
     border-radius: 5px;
     border: 1px solid #6272a4;
     transition: transform 0.3s ease;
+    flex-direction: column;
 }
 
 #container .box a {