Merge pull request #19 from Hackathon-Hacked2023/christina-frontend

merge merge pls :<

frontend/tone-teller/src/App.css

@@ -53,13 +53,13 @@ p {
 
 .heading-1 {
     font-family: Abyss;
-    font-size: 4.5rem; /* 72px */
+    font-size: 3.5rem;
     line-height: 1;
 }
 
 .heading-2 {
     font-family: Abyss;
-    font-size: 3.75rem; /* 60px */
+    font-size: 3.125rem; /* 60px */
     line-height: 1;
     margin-bottom: 30px;
 }
@@ -100,14 +100,14 @@ p {
 
 .body-text {
     font-family: 'Cantarell';
-    font-size: 1rem;
+    font-size: 1.125rem;
     line-height: 1.5rem;
 }
 
 .body-title {
     font-family: 'Cantarell';
     font-size: 1rem;
-    line-height: 1.5rem;
+    line-height: 1.125rem;
     font-weight: 700;
 }
 
@@ -120,7 +120,7 @@ p {
 .overline-text {
     font-family: 'Cantarell';
     font-weight: 700;
-    font-size: 0.75rem; /* 12px */
+    font-size: 0.875rem; /* 12px */
     line-height: 1rem; /* 16px */
     letter-spacing: 0.12em;
     text-transform: uppercase;
@@ -136,6 +136,12 @@ p {
     border-radius: 10px;
 }
 
+
+.button-sm {
+    padding: 8px 12px !important;
+    box-shadow: 4px 4px 0px #000000;
+}
+
 .background-white {
     background-color: var(--white);
 }
@@ -233,4 +239,4 @@ p {
     background-repeat: no-repeat;
     color: #fff;
     font-size: 100px;
-  }
+  }

frontend/tone-teller/src/App.js

@@ -1,17 +1,15 @@
 import React from "react";
-import Hero from "./components/Hero";
-import LandingContent from "./components/LandingContent";
 import "./App.css";
 
 // import the landing page from the components folder
 import NavHeader from "./components/NavHeader";
-import Footer from "./components/Footer";
+import Toneteller from "./components/Toneteller";
+import Home from "./components/Home";
 
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-// import About from './components/pages/About';
-import ChromeExtension from './components/pages/ChromeExtension';
-import FAQ from './components/pages/FAQ';
-import ToneTeller from './components/pages/ToneTeller';
+import About from "./components/pages/About";
+import ChromeExtension from "./components/pages/ChromeExtension";
+import FAQ from "./components/pages/FAQ";
 
 function App() {
   return (
@@ -21,13 +19,12 @@ function App() {
         {/* <Hero></Hero>
         <LandingContent></LandingContent> */}
         <Routes>
-          <Route path="/" element={<Hero />} />
-          <Route path="/about" element={<LandingContent/>} />
+          <Route path="/" element={<Home />} />
           <Route path="/chrome" element={<ChromeExtension />} />
-          <Route path="/faq" element={<FAQ />}> </Route>
-          <Route path="/toneteller" element={<ToneTeller />} />
+          <Route path="/faq" element={<FAQ />}></Route>
+          <Route path="/toneteller" element={<Toneteller />} />
         </Routes>
-        <Footer />
+        {/* <Footer /> */}
       </Router>
     </>
   );

frontend/tone-teller/src/components/Cards.js

@@ -1,30 +1,30 @@
-import React from 'react';
-import './Cards.css';
-import CardItem from './CardItem';
+import React from "react";
+import "./Cards.css";
+import CardItem from "./CardItem";
 
 function Cards() {
   return (
-    <div className='cards'>
+    <div className="cards">
       <h1>The Lore Behind ToneTeller</h1>
-      <div className='cards__container'>
-        <div className='cards__wrapper'>
-          <ul className='cards__items'>
+      <div className="cards__container">
+        <div className="cards__wrapper">
+          <ul className="cards__items">
             <CardItem
-              text='Accessible on desktop and mobile, anywhere'
-              label='Accesibility'
-              path='/'
+              text="Accessible on desktop and mobile, anywhere"
+              label="Accesibility"
+              path="/"
             />
             <CardItem
-              text='Straight forward to learn, easy to use'
-              label='Simple'
-              path='/'
+              text="Straight forward to learn, easy to use"
+              label="Simple"
+              path="/"
             />
           </ul>
-          <ul className='cards__items'>
+          <ul className="cards__items">
             <CardItem
-              text='Text analysis applicable in both professional and casual settings'
-              label='Helpful'
-              path='/'
+              text="Text analysis applicable in both professional and casual settings"
+              label="Helpful"
+              path="/"
             />
           </ul>
         </div>
@@ -33,4 +33,4 @@ function Cards() {
   );
 }
 
-export default Cards;
+export default Cards;

frontend/tone-teller/src/components/Footer.css

@@ -19,11 +19,6 @@
   color: #fff;
 }
 
-.footer-subscription > p {
-  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
-    'Lucida Sans', Arial, sans-serif;
-}
-
 .footer-subscription-heading {
   margin-bottom: 24px;
   font-size: 24px;

frontend/tone-teller/src/components/Footer.js

@@ -1,34 +1,35 @@
-import React from 'react';
-import './Footer.css';
-import { Button } from './Button';
-import { Link } from 'react-router-dom';
+import React from "react";
+import "./Footer.css";
+import { Button } from "./Button";
+import { Link } from "react-router-dom";
 
 function Footer() {
   return (
-    <div className='footer-container'>
-      <section className='footer-subscription'>
-        <p className='footer-subscription-heading'>
+    <div className="footer-container">
+      <section className="footer-subscription">
+        <p className="footer-subscription-heading heading-3">
           easy-to-use semantics analysis tool
         </p>
       </section>
-      <div class='footer-links'>
-        <div className='footer-link-wrapper'>
-        </div>
+      <div class="footer-links">
+        <div className="footer-link-wrapper"></div>
       </div>
-      <section class='social-media'>
-        <div class='social-media-wrap'>
-          <div class='footer-logo'>
-            <Link to='/' className='social-logo'>
+      <section class="social-media">
+        <div class="social-media-wrap">
+          <div class="footer-logo">
+            <Link to="/" className="social-logo">
               Tone Teller
-              <i class='fas fa-sms' />
+              <i class="fas fa-sms" />
             </Link>
           </div>
-          <small class='website-rights'>Hacked by Christina, Aniket, Ray, Julia, Trinity, Yui</small>
-          <small class='website-rights'>HackED © 2023</small>
+          <small class="website-rights">
+            Hacked by Christina, Aniket, Ray, Julia, Trinity, Yui
+          </small>
+          <small class="website-rights">HackED © 2023</small>
         </div>
       </section>
     </div>
   );
 }
 
-export default Footer;
+export default Footer;

frontend/tone-teller/src/components/Hero.js

@@ -6,13 +6,22 @@ export default function Hero() {
     <div className="landing-hero">
       <div class="hero-img">
         <img class="hero-img" src="/images/landing_image.png"></img>
-        <img class="hero-text" src="/images/landing_text.svg"></img>
       </div>
-      <p className="heading-7">
-        Tired of trying to decipher the tone of an email or text message? Do you
-        want to communicate with greater empathy and understanding?
-      </p>
-      <Link to="/toneteller" className="heading-6 primary-button" style={{ textDecoration: 'none' }}> Try Toneteller today</Link>
+
+      <div className="hero-heading-and-text">
+        <p className="heading-1">
+          Know what they <span className="highlighted heading-1">really </span>
+          mean
+        </p>
+        <p className="heading-7">
+          Tired of trying to decipher the tone of an email or text message? Do
+          you want to communicate with greater empathy and understanding?
+        </p>
+
+        <button className="heading-6 primary-button">
+          Try Toneteller today
+        </button>
+      </div>
     </div>
   );
 }

frontend/tone-teller/src/components/Home.js

@@ -0,0 +1,11 @@
+import Hero from "./Hero";
+import LandingContent from "./LandingContent";
+
+export default function Home() {
+  return (
+    <div>
+      <Hero></Hero>
+      <LandingContent></LandingContent>
+    </div>
+  );
+}