add styles

package-lock.json

@@ -8,12 +8,16 @@
       "name": "lesson-51",
       "version": "0.0.0",
       "dependencies": {
+        "@types/radium": "^0.24.8",
+        "motion": "^11.11.17",
         "react": "^18.3.1",
+        "react-animations": "^1.0.0",
         "react-dom": "^18.3.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.13.0",
         "@types/react": "^18.3.12",
+        "@types/react-animations": "^1.0.3",
         "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^4.3.3",
         "eslint": "^9.13.0",
@@ -1321,20 +1325,34 @@
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
       "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/radium": {
+      "version": "0.24.8",
+      "resolved": "https://registry.npmjs.org/@types/radium/-/radium-0.24.8.tgz",
+      "integrity": "sha512-/jkKHC8kNSYlK0rKmiSPU76sKgUR/kAUyXncwqOwq+NtRpOrsJ1dZ9cI4s+Lf0Cc1nEs24/Pr0qWwt7zW7A1pQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "18.3.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
       "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-animations": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-animations/-/react-animations-1.0.3.tgz",
+      "integrity": "sha512-mQNYCtLtemP9KtM8jCtjop2tj2alwZN7ImrzX+f3RxbzF7qaqgjOQ5YwF+qPJOEe/Mo6z+VlMjwBXuwCe/muLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
@@ -1830,7 +1848,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -2229,6 +2246,31 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/framer-motion": {
+      "version": "11.11.17",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.17.tgz",
+      "integrity": "sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2546,6 +2588,32 @@
         "node": "*"
       }
     },
+    "node_modules/motion": {
+      "version": "11.11.17",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-11.11.17.tgz",
+      "integrity": "sha512-y6mXYElvJ5HHwPBUpYG/5wclKVGW4hJhqPkTjWccib5/WrcRM185adg3+4aSmG5iD10XKFt5uBOAiKwuzMHPPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^11.11.17",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2771,6 +2839,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-animations": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-animations/-/react-animations-1.0.0.tgz",
+      "integrity": "sha512-ePPpVgdKnNEXm+LP1ww5s3n0JzebBw9QdRfxRqogzeg1PDIn6kf0pmvgeTeVZQXXpGmHImkIeTiaQR1O6xjntA==",
+      "license": "MIT"
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -2981,6 +3055,12 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "motion": "^11.11.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

src/App.css

+.App {
+    width: 1100px;
+    margin: 0 auto;
+}
\ No newline at end of file

src/App.tsx

-import Card from './components/Card/Card'
+import { Header } from './components/Header/Header'
+import { Promo } from './components/Promo/Promo'
 import './App.css'
+import { Cards } from './components/Cards/Cards'
 
 function App() {
   return (
-    <>
-      <Card title='Hello react'/>
-    </>
+    <div className='App'>
+      <Header/>
+      <Promo/>
+      <Cards/>
+    </div>
   )
 }
 

src/components/Card/Card.tsx

-import Text from '../Text/Text'
-import './Card.css'
-
-type TProps = {
-    title: string
-}
-
-const Card = ({title}: TProps) => {
-    return (
-        <div className='Card'>
-            <Text title={title}/>
-        </div>
-    )
-}
-
-export default Card
\ No newline at end of file

src/components/Card/Card.css → src/components/Cards/Card/Card.css

-.Card {
-    height: 150px;
-    width: 150px;
+.card {
+    width: 100px;
+    height: 100%;
     border-radius: 15px;
-    border: 1px solid gray;
-    background-color: gray;
+    border: 2px solid brown;
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    font-size: 40px;
 }
\ No newline at end of file

src/components/Cards/Card/Card.tsx

+import { motion } from "motion/react"
+import './Card.css'
+
+type TProps = {
+    content: number
+}
+
+export const Card = ({content}: TProps) => {
+    return (
+        <motion.div className="card" animate={{ x: [0, 100, 0] }}>
+            {content}
+        </motion.div>
+    )
+}
\ No newline at end of file

src/components/Cards/Cards.css

+.cards {
+    width: 100%;
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
\ No newline at end of file

src/components/Cards/Cards.tsx

+import { Card } from './Card/Card'
+import './Cards.css'
+
+export const Cards = () => {
+    const cards = [1, 2, 3, 4, 5]
+    
+    return (
+        <div className='cards'>
+            {
+                cards.map(item => {
+                    return <Card content={item}/>
+                })
+            }
+        </div>
+    )
+}
\ No newline at end of file

src/components/Header/Header.css

+.header {
+    height: 60px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
\ No newline at end of file

src/components/Header/Header.tsx

+import { Link } from './Link/Link'
+import './Header.css'
+
+export const Header = () => {
+    const links = ['home', 'contacts', 'team', 'products', 'about me']
+    
+    return (
+        <header className='header'>
+            {
+                links.map(item => {
+                    return <Link text={item}/>
+                })
+            }
+        </header>
+    )
+}
\ No newline at end of file

src/components/Header/Link/Link.css

+.Link {
+    text-decoration: none;
+    color: rgb(107, 97, 97);
+    font-size: 20px;
+    font-weight: 600;
+    text-shadow: 0px 0px 0px 12px black;
+    margin: 0;
+    text-transform: capitalize;
+}
\ No newline at end of file

src/components/Header/Link/Link.tsx

+import './Link.css'
+
+type TProps = {
+    text: string
+}
+
+export const Link = ({text}: TProps) => {
+    return (
+        <a href='#' className='Link'>
+            {text}
+        </a>
+    )
+}
\ No newline at end of file

src/components/Promo/Promo.css

+.promo {
+    background-color: antiquewhite;
+    height: 350px;
+    margin-bottom: 50px;
+}
\ No newline at end of file

src/components/Promo/Promo.tsx

+import './Promo.css'
+
+export const Promo = () => {
+    return (
+        <div className='promo'>
+
+        </div>
+    )
+}
\ No newline at end of file

src/components/Text/Text.css

-.text {
-    color: white;
-    font-size: 18px;
-}
\ No newline at end of file

src/components/Text/Text.tsx

-import './Text.css'
-
-type TProps = {
-    title: string
-}
-
-const Text = ({title}: TProps) => {
-    return (
-        <p className='text'>
-            {title}
-        </p>
-    )   
-}
-
-export default Text
\ No newline at end of file