feat(MILESTONE2): website skeleton finished

Author: Roméo Maignal

src/App.css

@@ -1,25 +1,119 @@
 .section {
-	height: 100vh;
-	border: 1px solid #d1d5db;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #d1d5db;
+}
+
+.viz_container {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: center;
+  justify-items: center;
+  gap: 2rem;
+}
+
+.viz_container .paragraph {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  min-height: 100%;
+}
+
+.viz_container .paragraph p {
+  max-width: 60ch;
+}
+
+.viz_container .paragraph h2 {
+  margin-bottom: 1rem;
+  text-align: left;
+  margin: 0;
+  width: 100%;
+}
+
+.viz_container .widget {
+  justify-self: center;
 }
 
 footer {
-	height: 5%;
+  height: 5%;
+}
+
+.widget {
+  border: 1px solid #000;   /* width + style + color */
+  border-radius: 10px;
+  position: relative;
+  width: 100%;
+  max-width: 500px;
+  height: 500px;
+  box-sizing: border-box;
+  background-color: white;
+  border-radius: 20px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.interactive-svg {
+  width: 80%;
+  transition: transform 0.3s ease;
+}
+
+.hover-circle {
+  fill: #3498db;
+  cursor: pointer;
+  transition: fill 0.3s ease;
+}
+
+.hover-circle:hover {
+  fill: #e74c3c;
+}
+
+.fullscreen-btn {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  background: white;
+  border: none;
+  border-radius: 50%;
+  padding: 8px;
+  cursor: pointer;
+  display: flex;
 }
 
 .site-footer {
-	min-height: 100px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 0.75rem 1rem;
-	border-top: 1px solid #e5e7eb;
-	color: white;
-	font-size: 0.875rem;
-	background-color: #282523;
-	text-align: center;
+  min-height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid #d1d5db;
+  color: white;
+  font-size: 0.875rem;
+  background-color: #282523;
+  text-align: center;
 }
 
 .site-footer p {
-	margin: 0;
+  margin: 0;
+}
+
+@media (max-width: 1024px) {
+  .viz_container {
+    grid-template-columns: 1fr;
+  }
+
+  .widget {
+    max-width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
+  }
 }

src/components/About.css

@@ -0,0 +1,5 @@
+#about {
+    width: 100%;
+    height: 100vh;
+    background-color: #282523;
+}

src/components/About.tsx

@@ -2,7 +2,7 @@ import './About.css'
 
 const About: React.FC = () => {
   return (
-    <div>
+    <div id='about'>
 
     </div>
   )

src/components/Hero.css

@@ -1,5 +1,12 @@
 #hero {
-    width: 100vw;
+  width: 100%;
     height: 100vh;
     background-color: beige;
+}
+
+#hero-container {
+  display: flex;
+  align-items: center;      /* vertical center */
+  justify-content: center;  /* horizontal center */
+  height: 100vh
 }

src/components/Hero.tsx

@@ -2,7 +2,13 @@ import './Hero.css'
 
 const Hero: React.FC = () => {
   return (
-    <div id='hero'></div>
+    <div id='hero'>
+      <div id='hero-container'>
+        <h1>
+          How safe do you think flying is ?
+        </h1>
+      </div>
+    </div>
   )
 }
 export default Hero

src/components/Introduction.css

@@ -1,6 +1,7 @@
 .abstract-container {
   display: flex;
   justify-content: center;
+  align-items: center;
   width: 100%;
   height: 50vh;
   padding: 32px 20px;

src/components/Introduction.tsx

@@ -4,12 +4,10 @@ const Introduction: React.FC = () => {
   return (
     <div className="abstract-container">
       <div className="abstract">
-        <h1>Project of Data Visualization </h1>
+        <h1>COM-480 : Data Visualization</h1>
         <p>
           No matter how safe air travel might be, it's always difficult to
           completely shake off the feeling of insecurity of flying.
-        </p>
-        <p>
           In an attempt to address these concerns, we aim to provide an
           interactive platform to assess the safety of air travel and the
           variable risks associated with specific criteria such as routes,

src/components/Viz1.css

@@ -1,3 +1,12 @@
 #section1 {
-    background-color: whitesmoke;
-}
+    background-color: #2b2927;
+}
+
+#section1 h2, #section1 p{
+    color: white;
+}
+
+#section1 .widget h2 {
+    color: black;
+}
+

src/components/Viz1.tsx

@@ -2,10 +2,35 @@ import './Viz1.css'
 
 const Viz1: React.FC = () => {
     return (
-        <div id='section1' className='section'>
-
+      <div id="section1" className="section">
+        <div className="viz_container">
+          <div className="paragraph">
+            <h2>
+                VIZ 1
+            </h2>
+            <p>
+              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. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </div>
+          <div className="widget">
+            <button className="fullscreen-btn" aria-label="Toggle Fullscreen">
+              <svg viewBox="0 0 24 24" width="20" height="20">
+                <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+              </svg>
+            </button>
+            <h2>
+              data visualization will go here
+            </h2>
+          </div>
         </div>
-    )
+      </div>
+    );
 }
 
 export default Viz1

src/components/Viz2.css

@@ -1,3 +1,3 @@
 #section2 {
-    background-color: gainsboro;
+    background-color: #faf9f6;
 }