React

by Abdul Ahmad

HTML

<div id="app"></div>

SCSS

html, body {
  padding: 0;
  font-family: Helvetica;
  width: 100%;
  height: 100%;
}

#app {
}

.page-section {
  border: 1px dashed #ccc;
  padding: 100px 0;
}

.max-page-width {
  margin: 0 auto;
  max-width: 500px;
}

.sticky-header-with-content {
  border: 1px dashed #ccc;
  position: relative;
  min-height: 1000px;
  background: #eee;
  
  .nav {
    background: white;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
    // border: 1px dashed #aaa;
    position: sticky;
    top: 0;
  }
  
  .content {
    // border: 1px dashed #aaa;
    
  }
}

h1 {
  font-size: 50px;
  font-weight: bold;
}

h2 {
  font-size: 30px;
  font-weight: bold;
}

p {
}

button {
  border-radius: 20px;
  padding: 7px 20px;
  border: none;
  background: teal;
  color: white;
  font-weight: bold;
}

React

function SplitContent({ children }) {
	return (
  	<section style={{ display: 'flex' }}>
  	  { children }
  	</section>
  );
}

function SplitContentSection({ width, children }) {
	return (
  	<section style={{ width, border: '1px dashed #eee' }}>
      { children }
    </section>
  );
}

SplitContentSection.defaultProps = { width: '50%' };

const contentForType = {
	reading: () => (<ReadingContent />),
  math: () => (<MathContent />),
};

function App() {
	const [contentType, setContentType] = React.useState('reading');
  
  return (
  	<React.Fragment>
      <PageSection background='teal'>
        <SplitContent>
          <SplitContentSection width='70%'>
            <MaxPageWidth customStyle={{ maxWidth: '700px' }}>
              <h1>
                A World of Learning To Explore
              </h1>
              <p style={{ marginTop: 20 }}>
                Reading, math, creativity, and more!
              </p>
            </MaxPageWidth>
          </SplitContentSection>
          <SplitContentSection />
        </SplitContent>
      </PageSection>
      <PageSection>
        <MaxPageWidth customStyle={{ maxWidth: 900 }}>
          <Card color='tomato'>
            <SplitContent>
              <SplitContentSection>
                <h2 style={{ marginTop: 50 }}>
                  Follow The Journey
                </h2>
                <p style={{ marginTop: 20 }}>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </SplitContentSection>
              <SplitContentSection>
                <Card>
                  <h2>
                    Follow The Journey
                  </h2>
                  <p style={{ marginTop: 20 }}>
                    Lorem ipsum dolor sit amet
                  </p>
                  <p style={{ marginTop: 20 }}>
                    Lorem ipsum dolor sit amet
                  </p>
                  <p...