diff --git a/public/aigrader.mp4 b/public/aigrader.mp4 new file mode 100644 index 00000000..793b26e2 Binary files /dev/null and b/public/aigrader.mp4 differ diff --git a/public/graphics/cyber-101.png b/public/graphics/cyber-101.png new file mode 100644 index 00000000..faac7392 Binary files /dev/null and b/public/graphics/cyber-101.png differ diff --git a/public/graphics/cyber-101.svg b/public/graphics/cyber-101.svg new file mode 100644 index 00000000..b2df156e --- /dev/null +++ b/public/graphics/cyber-101.svg @@ -0,0 +1,632 @@ + + + + diff --git a/public/graphics/mock2.png b/public/graphics/mock2.png new file mode 100644 index 00000000..c044e11d Binary files /dev/null and b/public/graphics/mock2.png differ diff --git a/public/graphics/mockup.svg b/public/graphics/mockup.svg new file mode 100644 index 00000000..b2749a52 --- /dev/null +++ b/public/graphics/mockup.svg @@ -0,0 +1,588 @@ + + + +$icon/24/icon-settingsCreated with Sketch. diff --git a/public/terminalproof.mp4 b/public/terminalproof.mp4 new file mode 100644 index 00000000..e694ecf8 Binary files /dev/null and b/public/terminalproof.mp4 differ diff --git a/public/videoproof.mp4 b/public/videoproof.mp4 new file mode 100644 index 00000000..de29125d Binary files /dev/null and b/public/videoproof.mp4 differ diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 0f5bcf16..dc807c4c 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -48,23 +48,7 @@ export function Footer() { - - - - - + + + + + + + + + + ) + }, + }, + { + name: 'Submission Playback', + summary: + 'Review recorded student lab sessions.', + description: + 'We automatically records lab sessions, so you can review them later.', + image: '../../videoproof.mp4', + icon: function InventoryIcon() { + return ( + <> + + + + + + + + + + ) + }, + }, + { + name: 'Virtual Machines', + summary: + 'Cloud machines streamed to the browser.', + description: + 'Easily access cloud machines from your browser, no need to install anything.', + image: '../../terminalproof.mp4', + icon: function ContactsIcon() { + return ( + <> + + + + + + + + + + + ) + }, + }, +] + +function Feature({ feature, isActive, className, ...props }) { + return ( +
+
+ +
+

+ {feature.name} +

+

+ {feature.summary} +

+

{feature.description}

+
+ ) +} + +function FeaturesMobile() { + return ( +
+ {features.map((feature) => ( +
+ + + + + +
+ ))} +
+ ) +} + +function FeaturesDesktop() { + return ( + + {({ selectedIndex }) => ( + <> + + {features.map((feature, featureIndex) => ( + + + {feature.name} + + ), + }} + isActive={featureIndex === selectedIndex} + className="relative" + /> + ))} + + +
+ {features.map((feature, featureIndex) => ( + +
+ + + + + +
+ + ))} +
+
+ + + )} + + ) +} + +export function SecondaryFeatures() { + return ( +
+ +
+

+ We're the best platform for teaching cybersecurity. +

+ +
+
+ + +
+ +
+ ) +} diff --git a/src/images/screenshots/cyber-101.png b/src/images/screenshots/cyber-101.png new file mode 100644 index 00000000..faac7392 Binary files /dev/null and b/src/images/screenshots/cyber-101.png differ diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 596ad156..33608106 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -6,7 +6,7 @@ import { FeaturesPanel } from '@/components/home/FeaturePanel'; import { Stats } from '@/components/home/Stats'; import { LearningPanel } from '@/components/home/LearningPanel'; import { Enterprise } from '@/components/home/Enterprise'; - +import { SecondaryFeatures } from '@/components/home/SecondaryFeatures'; export default function Home() { return ( <> @@ -39,7 +39,8 @@ export default function Home() { - + +