Update: finish homepage

frontend/src/molecules/AboutUsSection.js

@@ -2,7 +2,7 @@ import { Container, Row, Col } from "react-bootstrap";
 
 export default function AboutUsSection () {
     return (<>
-    <Container>
+    <Container id="about-us">
         <h1 className="my-4">CATS Shop
         <small> - We code for fun </small>
         </h1>

frontend/src/molecules/ContactSection.js

@@ -0,0 +1,32 @@
+import { Container, Row, Col } from "react-bootstrap";
+
+export default function ContactSection() {
+    return (
+            <Container id="contact" className="align-items-center">
+                <h1>Thông tin liên hệ</h1>
+                <Row md={3}>
+                    {/* Cột 1: Số điện thoại liên hệ */}
+                    <Col>
+                        <h5>Liên hệ</h5>
+                        <p>Số điện thoại: 0123-456-789</p>
+                    </Col>
+
+                    {/* Cột 2: Số đăng ký kinh doanh */}
+                    <Col>
+                        <h5>Thông tin công ty</h5>
+                        <p>Số ĐKKD: 123456789</p>
+                    </Col>
+
+                    {/* Cột 3: Fanpage link */}
+                    <Col>
+                        <h5>Fanpage</h5>
+                        <p>
+                            <a href="https://www.facebook.com/" target="_blank" rel="noreferrer">
+                                Facebook
+                            </a>
+                        </p>
+                    </Col>
+                </Row>
+            </Container>
+    );
+}

frontend/src/molecules/MenuItem.js

@@ -0,0 +1,16 @@
+// a card item represent a news in newsSection
+import { Card } from "react-bootstrap";
+
+export default function MenuItem( {dishName, description, imageSrc} ) {
+    return (
+        <Card className="align-items-center">
+          <Card.Img variant="top" src={imageSrc}/>
+          <Card.Body>
+            <Card.Title>{dishName}</Card.Title>
+            <Card.Text>
+                {description}
+            </Card.Text>
+          </Card.Body>
+        </Card>
+      );
+}

frontend/src/molecules/Navbar.js

@@ -34,7 +34,7 @@ export default function ANavbar( {isLoggedIn = false, user} ) {
     }
 
     return (
-        <Navbar expand="lg" className="bg-body-tertiary">
+        <Navbar expand="lg" className="bg-body-tertiary" sticky='top' >
             <Container>
                 <Navbar.Brand href="/">
                     <img

frontend/src/molecules/StoreItem.js

@@ -0,0 +1,16 @@
+// a card item represent a news in newsSection
+import { Card } from "react-bootstrap";
+
+export default function StoreItem( {storeName, address, imageSrc} ) {
+    return (
+        <Card className="align-items-center">
+          <Card.Img variant="top" src={imageSrc}/>
+          <Card.Body>
+            <Card.Title>{storeName}</Card.Title>
+            <Card.Text>
+                {address}
+            </Card.Text>
+          </Card.Body>
+        </Card>
+      );
+}

frontend/src/organisms/MenuSection.js

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { Container, Carousel, Row, Col } from 'react-bootstrap';
+import MenuItem from '../molecules/MenuItem';
+
+function MenuSection() {
+  const [index, setIndex] = useState(0);
+
+  const handleSelect = (selectedIndex) => {
+    setIndex(selectedIndex);
+  };
+
+  const menuItems = [
+    { name: 'Món 1', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
+    { name: 'Món 2', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
+    { name: 'Món 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
+  ];
+
+  const countCarouselSlides = 4;
+
+  return (
+    <Container id="menu" className="text-center justify-content-center align-items-center">
+      <h1>Menu</h1>
+      <Carousel activeIndex={index} onSelect={handleSelect} data-bs-theme="dark">
+        {Array.from({ length: countCarouselSlides }).map((_, slideIndex) => (
+          <Carousel.Item key={slideIndex}>
+            <div className="d-flex justify-content-center align-items-center" style={{ width: '100%' }}>
+              <img
+                className="img-fluid"
+                src="/placeholder4.jpg"
+                alt="a placeholder"
+                style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
+              />
+            </div>
+
+            <Carousel.Caption>
+              <div >
+                <Row md={3} className="g-4">
+                  {menuItems.map((item, idx) => (
+                    <Col key={idx}>
+                      <MenuItem
+                        dishName={item.name}
+                        description={item.description}
+                        imageSrc={item.imageSrc}
+                      />
+                    </Col>
+                  ))}
+                </Row>
+              </div>
+            </Carousel.Caption>
+          </Carousel.Item>
+        ))}
+      </Carousel>
+    </Container>
+  );
+}
+
+export default MenuSection;

frontend/src/organisms/NewsSection.js

@@ -3,7 +3,7 @@ import NewsItem from '../molecules/NewsItem';
 
 function NewsSection( {newsFeeds} ) {
     return (
-        <Container className="text-center justify-content-center align-items-center">
+        <Container id="news" className="text-center justify-content-center align-items-center">
             <h1>Tin tức</h1>
             <Row xs={1} md={2} xl={3} className="g-4">
                 {Array.from(newsFeeds).map((feed, idx) => (

frontend/src/organisms/StoreSection.js

@@ -0,0 +1,32 @@
+import { Container, Col, Row } from 'react-bootstrap';
+import StoreItem from '../molecules/StoreItem';
+
+function StoreSection({ stores }) {
+    return (
+        <Container id="store" className="text-center justify-content-center align-items-center">
+            <h1>Các chi nhánh</h1>
+            <Row className="align-items-center">
+                <Col xs={12} md={4} className="d-flex justify-content-center align-items-center">
+                    Đây là các chi nhánh đang mở, chưa mở, sắp mở và có thể là sẽ không mở
+                </Col>
+
+                <Col xs={12} md={8}>
+                    <Container>
+                        <Row xs={1} md={2} xl={3} className="g-4">
+                            {Array.from(stores).map((store, idx) => (
+                                <Col key={idx}>
+                                    <StoreItem storeName={store.storeName}
+                                        address={store.address}
+                                        imageSrc={store.imageSrc}>
+                                    </StoreItem>
+                                </Col>
+                            ))}
+                        </Row>
+                    </Container>
+                </Col>
+            </Row>
+        </Container>
+    );
+}
+
+export default StoreSection;

frontend/src/pages/HomePage.js

@@ -3,6 +3,9 @@
 import ANavbar from '../molecules/Navbar';
 import AboutUsSection from '../molecules/AboutUsSection';
 import NewsSection from '../organisms/NewsSection';
+import StoreSection from '../organisms/StoreSection';
+import MenuSection from '../organisms/MenuSection';
+import ContactSection from '../molecules/ContactSection';
 
 function HomePage () {
     // const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -13,19 +16,25 @@ function HomePage () {
         { title: 'Feed 2', text: 'This is the second feed', imageSrc: '/placeholder1.jpg', feedHref: '' }, 
         { title: 'Feed 3', text: 'This is the third feed', imageSrc: '/placeholder1.jpg', feedHref: ''}
     ];
-    // const stores = [{ name: 'Store 1', address: 'Address 1' }, { name: 'Store 2', address: 'Address 2' }];
-    // const menuItems = [
-    //     { name: 'Món 1', description: 'Mô tả món 1', price: '100.000 VND' },
-    //     { name: 'Món 2', description: 'Mô tả món 2', price: '150.000 VND' },
-    //     { name: 'Món 3', description: 'Mô tả món 3', price: '200.000 VND' }
-    // ];
+    const stores = [
+        { storeName: 'Store 1', address: 'Address 1', imageSrc: '/placeholder2.jpg' }, 
+        { storeName: 'Store 2', address: 'Address 2', imageSrc: '/placeholder2.jpg' },
+        { storeName: 'Store 3', address: 'Address 3', imageSrc: '/placeholder2.jpg' },
+    ];
+   
 
     return (
         <>
-            <ANavbar></ANavbar>
-            <AboutUsSection id="about-us"></AboutUsSection>
+            <ANavbar id="home"></ANavbar>
+            <AboutUsSection></AboutUsSection>
+            <br></br>
+            <NewsSection newsFeeds={newsFeeds}></NewsSection>
+            <br></br>
+            <StoreSection stores={stores}></StoreSection>
+            <br></br>
+            <MenuSection></MenuSection>
             <br></br>
-            <NewsSection id="news" newsFeeds={newsFeeds}></NewsSection>
+            <ContactSection></ContactSection>
         </>
     );
 };