雲端：https://drive.google.com/drive/folders/1Uj8J2c7ICW-NkSsFOPyL-laQbHsCh5Gt?usp=drive_link

## footer

* components > Footer > index.js

export function Footer(){
    return(
        <footer>
            <div>
                <div>
                    <h3>CONTACT</h3>
                    <h2>Reach Out to us</h2>
                    <p>Church Streat Station, P.O. Box 7083 </p>
                    <p>New York, NY 10008-7082 </p>
                    <p>[e-mail]</p>
                </div>
                <div>
                    <div>
                        <a href="">TWIIER</a>
                        <a href="">FACEBOOK</a>
                    </div>
                    <div>
                        <a href="">INSTAGRAM</a>
                        <a href="">YOUTUBE</a>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div>
                        <h3>JOIN THE COMMUNITY</h3>
                        <button>↑</button>
                    </div>
                    <h2>Sign up for newsletter</h2>
                    <div>
                        <input/>
                        <button>Submit<span>→</span></button>
                    </div>
                </div>
                <div>
                    <div>
                        <a href="">TIPPE TRISE CENTER</a>
                        <a href="">INDEX OVERVIEW</a>
                    </div>
                    <a href="">PRIVACY POLICY</a>
                    <div>
                        <p>DESIGN:<a href="">BIELK&YANG</a></p>
                        <p>CODE:<a href="">VÆRSÅGOD</a></p>
                    </div>
                </div>
            </div>
        </footer>
    );
}

* styles > common > footer.css

## [Json](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Objects/JSON)
* JSON 是依照 JavaScript 物件語法的資料格式
* 陣列作為 JSON

[
  { 
      'title': 'Low Tide at St. Andrewstit',
      'content': [
          'Radiation resistance',
          'Turning tiny',
          'Radiation blast'
      ]
  },
  { 
      'title': 'Low Tide at St. Andrews',
      'content': [
          'Radiation resistance',
          'Turning tiny',
          'Radiation blast'
      ]
  },
  { 
      'title': 'Low Tide at St. Andrews',
      'content': [
          'Radiation resistance',
          'Turning tiny',
          'Radiation blast'
      ]
  }
]

consolo.log([0][content][0]);

## [列表與key](https://zh-hant.legacy.reactjs.org/docs/lists-and-keys.html)

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

* 在 JS 中嵌入 map()

const list = [
  { 
      'title': 'Low Tide at St. Andrews',
      'content': 'BY E. PAULINE JOHNSON'
  },
  { 
      'title': 'Low Tide at St. Andrews',
      'content': 'BY E. PAULINE JOHNSON'
  },
  { 
      'title': 'Low Tide at St. Andrews',
      'content': 'BY E. PAULINE JOHNSON'
  },
 ];

{list.map((item, index) =>
    <div className="container" key={index}>
      <h3>{item.title}</h3>
      <p>{item.content}</p>
    </div>)
}

## pomes

* components > Pomes > index.js

* components > common > PomeList > index.js

* styles > common > pomes.css

## partner

* components > Partner > index.js

* components > common > PartnerList > index.js

* styles > common > partner.css