Feature/homepage

package.json

@@ -10,6 +10,7 @@
     "jest-dom": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -36,3 +36,18 @@
     transform: rotate(360deg);
   }
 }
+
+.root-container {
+  background-color: rgb(172, 168, 168);
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; /* Full height of viewport */
+}
+
+.content {
+  flex: 1; /* Grow to fill remaining space */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

src/App.js

@@ -1,8 +1,21 @@
 import './App.css';
 import React from 'react';
+import Navbar from './components/Navbar/Navbar';
+import Footer from './components/footer/Footer';
+import Content from './components/Content/Content';
+import Table from './components/Table/Table';
+import Info from './components/Info/Info';
 
 function App() {
-  return React.createElement('h1', null, 'Welcome to Kinsta!');
+  return (
+    <div className="root-container">
+      <Navbar />
+      <Content />
+      <Table />
+      <Info />
+      <Footer />
+    </div>
+  );
 }
 
 export default App;

src/__tests__/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from '../App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  // const linkElement = screen.getByText(/Welcome to Kinsta!/i);
+  // expect(linkElement).toBeInTheDocument();
+});

src/__tests__/Footer.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Footer from '../components/footer/Footer';
+import '@testing-library/jest-dom/extend-expect';
+
+
+describe('Footer Component', () => {
+
+  test('renders INFORMATION section', () => {
+    render(<Footer />);
+    const informationHeading = screen.getByRole('heading', { name: /information/i });
+    expect(informationHeading).toBeInTheDocument();
+    const informationText = screen.getByText(/Ut enim ad minima veniam/i);
+    expect(informationText).toBeInTheDocument();
+  });
+
+  test('renders social media icons', () => {
+    render(<Footer />);
+    const instagramIcon = screen.getByLabelText('Instagram');
+    const twitterIcon = screen.getByLabelText('Twitter');
+    const linkedinIcon = screen.getByLabelText('LinkedIn');
+    expect(instagramIcon).toBeInTheDocument();
+    expect(twitterIcon).toBeInTheDocument();
+    expect(linkedinIcon).toBeInTheDocument();
+  });
+
+  test('renders BallSmart 2024 footer text', () => {
+    render(<Footer />);
+    const ballSmartFooter = screen.getByText(/BallSmart 2024 ©/i);
+    expect(ballSmartFooter).toBeInTheDocument();
+  });
+
+  test('renders disclaimer, privacy policy, and terms of use links', () => {
+    render(<Footer />);
+    const disclaimerLink = screen.getByText(/Disclaimer/i);
+    const privacyPolicyLink = screen.getByText(/Privacy Policy/i);
+    const termsOfUseLink = screen.getByText(/Terms of Use/i);
+    expect(disclaimerLink).toBeInTheDocument();
+    expect(privacyPolicyLink).toBeInTheDocument();
+    expect(termsOfUseLink).toBeInTheDocument();
+  });
+
+  test('renders Contact Us section', () => {
+    render(<Footer />);
+    const contactUsHeading = screen.getByRole('heading', { name: /contact us/i });
+    expect(contactUsHeading).toBeInTheDocument();
+    const address = screen.getByText(/123 Street,City,Country/i);
+    const email = screen.getByText(/[email protected]/i);
+    expect(address).toBeInTheDocument();
+    expect(email).toBeInTheDocument();
+  });
+
+});

src/__tests__/Info.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Info from '../components/Info/Info';
+
+describe('Info Component', () => {
+  test('renders all boxes with headings, paragraphs, and buttons', () => {
+    render(<Info />);
+
+    // Check that there are three headings
+    const headings = screen.getAllByRole('heading', { level: 2 });
+    expect(headings.length).toBe(3);
+
+    // Check that there are three paragraphs
+    const paragraphs = screen.getAllByText((content, element) => {
+      return element.tagName.toLowerCase() === 'p';
+    });
+    expect(paragraphs.length).toBe(3);
+
+    // Check that there are three buttons
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBe(3);
+
+    // Check that each button contains an SVG
+    buttons.forEach(button => {
+      const svg = button.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+  });
+});

src/__tests__/Navbar.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Navbar from '../components/Navbar/Navbar';
+
+describe('Navbar Component', () => {
+  test('renders logo image', () => {
+    render(<Navbar />);
+    const logoImg = screen.getByAltText('Logo');
+    expect(logoImg).toBeInTheDocument();
+  });
+
+  test('renders search box', () => {
+    render(<Navbar />);
+    const searchBox = screen.getByPlaceholderText('Search');
+    expect(searchBox).toBeInTheDocument();
+  });
+
+  test('renders navigation links', () => {
+    render(<Navbar />);
+    const links = ['Home', 'Stat', 'Players', 'Teams', 'Game', 'SIGN IN', 'SIGN UP'];
+    links.forEach(linkText => {
+      const link = screen.getByText(linkText);
+      expect(link).toBeInTheDocument();
+    });
+  });
+
+  test('menu opens and closes correctly', () => {
+    render(<Navbar />);
+    const openMenuButton = screen.getByRole('button', { name: /hamburger menu/i });
+    fireEvent.click(openMenuButton);
+
+    const overlay = screen.getByRole('dialog');
+    expect(overlay).toHaveClass('navbar-smallscreen_overlay');
+
+    const closeButton = screen.getByRole('button', { name: /close menu/i });
+    fireEvent.click(closeButton);
+    expect(overlay).not.toBeInTheDocument();
+  });
+
+});

src/__tests__/Table.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Table from '../components/Table/Table';
+
+describe('Table Component', () => {
+  test('renders conference headers', () => {
+    render(<Table />);
+
+    const nbaHeader = screen.getByText('NBA Standings');
+    expect(nbaHeader).toBeInTheDocument();
+
+    const westernHeader = screen.getByText('Western Conference');
+    expect(westernHeader).toBeInTheDocument();
+
+    const easternHeader = screen.getByText('Eastern Conference');
+    expect(easternHeader).toBeInTheDocument();
+  });
+  test('renders standings tables', () => {
+    render(<Table />);
+
+    // Check for the two standings tables
+    const tables = screen.getAllByRole('table');
+    expect(tables.length).toBe(2);
+
+    const headers = screen.getAllByRole('columnheader');
+    expect(headers.length).toBe(12); // TEAM, W, L, PCT, L10, STRK for 2 tables
+
+    // Check for the table rows
+    const rows = screen.getAllByRole('row');
+    expect(rows.length).toBe(12); // 2 header rows , 10 data rows (5 per table)
+  });
+
+});

src/__tests__/content.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Content from '../components/Content/Content';
+
+describe('Content Component', () => {
+  test('renders welcome message', () => {
+    render(<Content />);
+    const welcomeMessage = screen.getByRole('heading', { level: 4 });
+    expect(welcomeMessage).toBeInTheDocument();
+  });
+
+  test('renders the first passage', () => {
+    render(<Content />);
+    // const firstPassage = screen.getByText(/IPSUM, OG FANDT GHDG DUHS SKHFV dfjsdh/i);
+    // expect(firstPassage).toBeInTheDocument();
+    const paragraphs = screen.getAllByRole('paragraph');
+    expect(paragraphs[0]).toBeInTheDocument();
+  });
+
+  test('renders the second passage', () => {
+    render(<Content />);
+    // const secondPassage = screen.getByText(/Lorem ipsum dolor sit amet, consectetur adipiscing elit/i);
+    // expect(secondPassage).toBeInTheDocument();
+    const paragraphs = screen.getAllByRole('paragraph');
+    expect(paragraphs[1]).toBeInTheDocument();
+  });
+
+  test('renders the "Our Project" button', () => {
+    render(<Content />);
+    const button = screen.getByRole('button', { name: /our project/i });
+    expect(button).toBeInTheDocument();
+  });
+
+  test('renders the logo image', () => {
+    render(<Content />);
+    const logoImg = screen.getByAltText('Logo');
+    expect(logoImg).toBeInTheDocument();
+  });
+
+});

src/components/Content/Content.css

@@ -0,0 +1,41 @@
+.content-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 20%;
+    margin-right: 10%;
+  }
+
+  .first-passage {
+    color: white; 
+    font-size: 3rem;
+    font-weight: bold; 
+    margin: 0;
+  }
+
+  .info {
+    flex: 50%;
+  }
+
+  .logo img {
+    margin-left: 5%;
+    width: 60%; 
+    height: auto; 
+  }
+
+  .btnInfo {
+    background-color: #6c757d; 
+    color: #fff;
+    border-radius: 0.9rem;
+    width: 20%;
+    padding: 2%;
+    margin-top: 2%;
+  }
+  @media screen and (max-width: 768px) {
+    .logo img {
+      display: none;
+    }
+    .info {
+      width: 100%; 
+    }
+  }

src/components/Content/Content.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import './Content.css'; 
+import logoPic from '../Ball.png'; 
+
+function Content() {
+  return (
+    <div className="content-container">
+      <div className="info">
+        <h4>Welcome to BallSmart</h4>
+        <p className="first-passage" role="paragraph">
+          IPSUM, OG FANDT GHDG DUHS SKHFV dfjsdh
+        </p>
+        <p role="paragraph">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
+          enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat
+        </p>
+        <button className="btnInfo"> Our Project </button>
+      </div>
+      <div className="logo">
+        <img src={logoPic} alt="Logo" />
+      </div>
+    </div>
+  );
+}
+
+export default Content;