diff --git a/front-end/src/App.js b/front-end/src/App.js index a03b0a1..0742076 100644 --- a/front-end/src/App.js +++ b/front-end/src/App.js @@ -7,6 +7,9 @@ import styled from 'styled-components' import Home from './components/Home'; import Plant from './components/Plant'; import PlantList from './components/PlantList'; + +import Login from './components/Login'; + import SignupPage from './components/SignupPage'; import PrivateRoute from './components/PrivateRoute'; import UserProfile from './components/UserProfile'; @@ -15,6 +18,7 @@ import UserProfile from './components/UserProfile'; const StyleHeader = styled.header` background-color: #e8dfe3;` + const initialFormValues = { nickname: '', species: '', diff --git a/front-end/src/components/Home.js b/front-end/src/components/Home.js index 77874cc..4bd9ca4 100644 --- a/front-end/src/components/Home.js +++ b/front-end/src/components/Home.js @@ -30,6 +30,23 @@ export default function Home() { return( +
+

Never kill a plant again (hopefully)

+ + +

Ok, so we can’t really guarantee you won’t kill your houseplants.

Plants have different needs and react to sunlight, water, and fertilizer in a variety of ways. Learn about their needs and you might be able to stop the damage in time. Use a little extra TLC, and they might even flourish.

+ +

Not sure where to start?

Our app is here to help you figure out what your plants need and how you can nurture them.

+ +

Identify Your Plant

+

Manually enter your plant babies' species into the app and you'll get a brief description of what your plants should look like when they're healthy, care instructions with their water and light preferences, as well as a list of common issues that cause them to fall ill.

+ +

Smart Tracking

+

By logging the different species of plants you have at home, you can manually keep track of the light intensity of the room in which they're placed and get push notifications about when you should water them based on the weather in your area.

+

+
+ +

Water My Plants

@@ -41,6 +58,7 @@ return( + ) } diff --git a/front-end/src/components/Login.js b/front-end/src/components/Login.js index e69de29..8b13789 100644 --- a/front-end/src/components/Login.js +++ b/front-end/src/components/Login.js @@ -0,0 +1 @@ + diff --git a/front-end/src/index.css b/front-end/src/index.css index 9187828..8c0f5f4 100644 --- a/front-end/src/index.css +++ b/front-end/src/index.css @@ -5,6 +5,8 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: #cebdb3; + /* background-image: url("https://images.pexels.com/photos/2266845/pexels-photo-2266845.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); */ } code { @@ -15,7 +17,10 @@ code { nav { display: flex; justify-content: space-evenly; - margin-bottom: 1%; + margin: 1% 20%; + border: 2px solid black; + padding: 0.5%; + border-radius: 12px; } nav a { @@ -27,6 +32,31 @@ nav a:hover { font-weight: bold; } +header { + color: #485a36; + font-weight: bold; +} + +/* HOMEPAGE STYLING */ +.home-container { + max-width: 68%; + margin: auto; +} + +.home-container img { + width: 825px; + height: 407px; + border: 2px solid black; + border-radius: 3px; + opacity: 0.85; +} + +.home-container h2 { + color: #485a36; + font-style: italic; +} + +/* PLANTLIST STYLING */ #plant-form { background-image: url("https://images.pexels.com/photos/4503823/pexels-photo-4503823.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); background-repeat: no-repeat;