Merge branch 'main' into fix-title

package.json

@@ -17,8 +17,10 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "react": "^18.3.1",
+    "react-awesome-slider": "^4.1.0",
     "react-dom": "^18.3.1",
     "react-scripts": "^5.0.1",
+    "sass": "^1.81.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -48,8 +48,8 @@ h2 {
 }
 
 .info {
-  height: 600px;
-  background-color:#61dafb;
+  /* height: 600px;
+  background-color:#000000; */
 }
 
 .schedule {

src/App.tsx

@@ -6,6 +6,8 @@ import Prospectus from "./components/Prospectus"
 import Faqs from "./components/Faqs";
 import Title from "./components/Title";
 import Schedule from "./components/Schedule";
+import InfoPage from './components/InfoPage';
+import Carousel from "./components/Carousel";
 
 function App() {
   const home = useRef(null);
@@ -50,7 +52,8 @@ function App() {
           <Title></Title>
         </div>
         <div className="info" ref={info}>
-          <h2>INFO</h2>
+          <InfoPage></InfoPage>
+          <Carousel></Carousel>
         </div>
         <div className="schedule" ref={schedule}>
           <Schedule></Schedule>

src/components/Carousel.tsx

@@ -0,0 +1,19 @@
+import AwesomeSlider from "react-awesome-slider";
+import "react-awesome-slider/dist/styles.css";
+
+const slider = (
+  <AwesomeSlider
+    className="slider"
+    bullets={false} /*cssModule={AwesomeSliderStyles}*/
+  >
+    <div data-src="/presentation.jpg" />
+    <div data-src="/mrnguyen.jpg" />
+    <div data-src="/hackers.jpg" />
+    <div data-src="/food.jpg" />
+    <div data-src="/awards.jpg" />
+  </AwesomeSlider>
+);
+
+export default function Carousel() {
+  return slider;
+}