diff --git a/public/Powered_by_Xebia.svg b/public/Powered_by_Xebia.svg new file mode 100644 index 0000000..4a0b4dc --- /dev/null +++ b/public/Powered_by_Xebia.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/data.json b/public/data.json index 0f84775..50b4efd 100644 --- a/public/data.json +++ b/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, diff --git a/src/App.jsx b/src/App.jsx index 56a78d7..281e878 100644 --- a/src/App.jsx +++ b/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() { } /> + + ); } diff --git a/src/PoweredBy.jsx b/src/PoweredBy.jsx new file mode 100644 index 0000000..1adcc68 --- /dev/null +++ b/src/PoweredBy.jsx @@ -0,0 +1,12 @@ +import React, { useEffect } from 'react'; + +function PoweredBy() { + // return an image with the powered by xebia log + return ( + + Powered by Xebia + + ); +} + +export default PoweredBy; \ No newline at end of file diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index 483cbbe..3594744 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -63,7 +63,7 @@ const Detail = () => { )}
-

{videoDetails.description}

+

{videoDetails.description}

); diff --git a/src/pages/Index.jsx b/src/pages/Index.jsx index 9e5a9df..1c48c90 100644 --- a/src/pages/Index.jsx +++ b/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 = () => {
Logo of a pilot with a headset and a leather jacket +
diff --git a/src/pages/Skus.jsx b/src/pages/Skus.jsx index 8fb70d9..8d5ebf2 100644 --- a/src/pages/Skus.jsx +++ b/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 = () => {
-

GitHub Copilot Individual

+

GitHub Copilot Free / Pro

{ diff --git a/src/styles.css b/src/styles.css index aa3f228..be5b2f7 100644 --- a/src/styles.css +++ b/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 {