spectacle.index.js

// Import React
import React from "react";

// Import Spectacle Core tags
import {
  Appear,
  BlockQuote,
  Cite,
  CodePane,
  Deck,
  Fill,
  Heading,
  Image,
  Layout,
  Link,
  ListItem,
  List,
  Markdown,
  Quote,
  Slide,
  Spectacle,
  Text
} from "spectacle";

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Import custom component
import Interactive from "../assets/interactive";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");


const images = {
  city: require("../assets/city.jpg"),
  kat: require("../assets/kat.png"),
  logo: require("../assets/formidable-logo.svg"),
  markdown: require("../assets/markdown.png")
};

preloader(images);

const theme = createTheme({
  primary: "#ff4081"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Spectacle theme={theme}>
        <Deck transition={["zoom", "slide"]} transitionDuration={500}>
          <Slide transition={["fade"]} bgColor="secondary" textColor="primary">
            <div
              style={{
                height: '40rem', // adjust this height suit your slides
                display: 'flex',
                flexDirection: 'column'
              }}
            >
              <Heading size={1} caps fit textColor="tertiary">
                Your presentations are interactive
              </Heading>
              <List>
                <ListItem>Inline style based theme system</ListItem>
                <ListItem>Autofit text</ListItem>
                <ListItem>Flexbox layout system</ListItem>
                <ListItem>React-Router navigation</ListItem>
                <ListItem>PDF export</ListItem>
                <ListItem>And...</ListItem>
              </List>
              <div style={{ marginTop: `auto` }}>
                <Text textColor="white">1</Text>
              </div>
            </div>
          </Slide>
          <Slide transition={["fade"]} bgColor="secondary" textColor="primary">
            <div
              style={{
                height: '40rem',
                display: 'flex',
                flexDirection: 'column'
              }}
            >
            <Heading size={1} caps fit textColor="tertiary">
                Your presentations are interactive
              </Heading>
              <List>
                <ListItem>Inline style based theme system</ListItem>
                <ListItem>Autofit text</ListItem>
              </List>
              <div style={{ marginTop: `auto` }}>
                <Text textColor="white">2</Text>
              </div>
            </div>
          </Slide>
        </Deck>
      </Spectacle>
    );
  }
}