diff --git a/package.json b/package.json index bc5ef7e..caca4ac 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "html templates", "website design", "html5", - "trending design" + "trending design", + "react" ], "homepage": "https://www.froala.com/design-blocks", "license": "https://github.com/froala/react-froala-design-blocks/blob/master/LICENSE", @@ -25,13 +26,13 @@ } ], "dependencies": { - "bootstrap": "^4.1.3", + "bootstrap": "^5.1.3", "capitalize": "^2.0.0", "froala-design-blocks": "~2.0.0", "react": "^16.6.1", "react-dom": "^16.6.1", "react-iframe": "^1.3.3", - "react-router-dom": "^4.3.1", + "react-router-dom": "^6.0.2", "react-scripts": "2.1.1", "replace-in-file": "^3.4.2" }, diff --git a/public/imgs/carousels/slide1.jpg b/public/imgs/carousels/slide1.jpg new file mode 100644 index 0000000..c79c35c Binary files /dev/null and b/public/imgs/carousels/slide1.jpg differ diff --git a/public/imgs/carousels/slide2.jpg b/public/imgs/carousels/slide2.jpg new file mode 100644 index 0000000..17d2b0b Binary files /dev/null and b/public/imgs/carousels/slide2.jpg differ diff --git a/public/imgs/carousels/slide3.jpg b/public/imgs/carousels/slide3.jpg new file mode 100644 index 0000000..d972141 Binary files /dev/null and b/public/imgs/carousels/slide3.jpg differ diff --git a/public/imgs/shapes/6dark.svg b/public/imgs/shapes/6dark.svg new file mode 100644 index 0000000..a72784c --- /dev/null +++ b/public/imgs/shapes/6dark.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/public/imgs/shapes/8dark.svg b/public/imgs/shapes/8dark.svg new file mode 100644 index 0000000..11fb413 --- /dev/null +++ b/public/imgs/shapes/8dark.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/src/App.css b/src/App.css index 30bc2e5..6b1661b 100644 --- a/src/App.css +++ b/src/App.css @@ -20,4 +20,8 @@ #navigator + section { padding: 250px 0; +} + +.bg-dark .fdb-box { + background: gray; } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 4d403e5..ca8dbe3 100644 --- a/src/App.js +++ b/src/App.js @@ -2,8 +2,8 @@ import './App.css'; import '../node_modules/bootstrap/dist/css/bootstrap.css'; import '../node_modules/froala-design-blocks/dist/css/froala_blocks.css'; -import { Link, Route, BrowserRouter as Router } from "react-router-dom"; -import React, { Component } from 'react'; +import { Link, Route, Routes, BrowserRouter as Router } from "react-router-dom"; +import React from 'react'; import CallToAction from './CallToAction.jsx'; import Contacts from './Contacts.jsx'; @@ -15,9 +15,13 @@ import Headers from './Headers.jsx'; import Pricings from './Pricings.jsx'; import Teams from './Teams.jsx'; import Testimonials from './Testimonials.jsx'; +import Lists from './Lists.jsx'; +import Carousels from './Carousels.jsx'; +import Gallery from "./Gallery.jsx"; +import Sample1 from './Sample1.jsx'; +import Sample2 from './Sample2.jsx'; -class App extends Component { - render() { +function App() { return (
@@ -54,32 +58,39 @@ class App extends Component { Pricings Teams Testimonials + Lists + Carousels + Gallery + Sample + Sample 2
- - - - - - - - - - + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + } /> +
); - } -} - -function Home() { - return ( - '' - ); } export default App; diff --git a/src/CallToAction.jsx b/src/CallToAction.jsx index 2e4fabd..a3ac5d7 100644 --- a/src/CallToAction.jsx +++ b/src/CallToAction.jsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import CallToAction01 from './call-to-action/CallToAction01.jsx'; import CallToAction02 from './call-to-action/CallToAction02.jsx'; @@ -23,9 +23,8 @@ import CallToAction20 from './call-to-action/CallToAction20.jsx'; import CallToAction21 from './call-to-action/CallToAction21.jsx'; import CallToAction22 from './call-to-action/CallToAction22.jsx'; -class CallToAction extends Component { - render() { - return ( +function CallToAction(props) { + return (
@@ -51,7 +50,6 @@ class CallToAction extends Component {
) - } } export default CallToAction \ No newline at end of file diff --git a/src/Carousels.jsx b/src/Carousels.jsx new file mode 100644 index 0000000..d98e6bb --- /dev/null +++ b/src/Carousels.jsx @@ -0,0 +1,18 @@ +import React from 'react'; + +import Carousel01 from './carousels/Carousel01.jsx'; +import Carousel02 from './carousels/Carousel02.jsx'; + +function Contents(props) { + + let dark=true; + + return ( +
+ + +
+ ) +} + +export default Contents \ No newline at end of file diff --git a/src/Contacts.jsx b/src/Contacts.jsx index 33399a0..3171868 100644 --- a/src/Contacts.jsx +++ b/src/Contacts.jsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import Contacts01 from './contacts/Contacts01.jsx'; import Contacts02 from './contacts/Contacts02.jsx'; @@ -11,23 +11,24 @@ import Contacts08 from './contacts/Contacts08.jsx'; import Contacts09 from './contacts/Contacts09.jsx'; import Contacts10 from './contacts/Contacts10.jsx'; -class Contacts extends Component { - render() { - return ( +function Contacts(props) { + + let dark=true; + + return (
- - - - - - - - - - + + + + + + + + + +
) - } } export default Contacts \ No newline at end of file diff --git a/src/Contents.jsx b/src/Contents.jsx index 21d08ac..1c24041 100644 --- a/src/Contents.jsx +++ b/src/Contents.jsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import Contents01 from './contents/Contents01.jsx'; import Contents02 from './contents/Contents02.jsx'; @@ -35,49 +35,52 @@ import Contents32 from './contents/Contents32.jsx'; import Contents33 from './contents/Contents33.jsx'; import Contents34 from './contents/Contents34.jsx'; import Contents35 from './contents/Contents35.jsx'; +import Contents36 from './contents/Contents36.jsx'; -class Contents extends Component { - render() { - return ( +function Contents(props) { + + let dark=true; + + return (
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
) - } } export default Contents \ No newline at end of file diff --git a/src/Features.jsx b/src/Features.jsx index 6e0b210..bd885cd 100644 --- a/src/Features.jsx +++ b/src/Features.jsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import Features01 from './features/Features01.jsx'; import Features02 from './features/Features02.jsx'; @@ -34,9 +34,8 @@ import Features31 from './features/Features31.jsx'; import Features32 from './features/Features32.jsx'; import Features33 from './features/Features33.jsx'; -class Features extends Component { - render() { - return ( +function Features(props) { + return (
@@ -73,7 +72,6 @@ class Features extends Component {
) - } } export default Features \ No newline at end of file diff --git a/src/Footers.jsx b/src/Footers.jsx index d0dab6a..aaabb79 100644 --- a/src/Footers.jsx +++ b/src/Footers.jsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import Footers01 from './footers/Footers01.jsx'; import Footers02 from './footers/Footers02.jsx'; @@ -13,25 +13,24 @@ import Footers10 from './footers/Footers10.jsx'; import Footers11 from './footers/Footers11.jsx'; import Footers12 from './footers/Footers12.jsx'; -class Footers extends Component { - render() { - return ( +function Footers(props) { + let dark=false; + return (
- - - - - - - - - - - - + + + + + + + + + + + +
) - } } export default Footers \ No newline at end of file diff --git a/src/Forms.jsx b/src/Forms.jsx index b9f593b..dee2049 100644 --- a/src/Forms.jsx +++ b/src/Forms.jsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import Forms01 from './forms/Forms01.jsx'; import Forms02 from './forms/Forms02.jsx'; @@ -13,9 +13,8 @@ import Forms10 from './forms/Forms10.jsx'; import Forms11 from './forms/Forms11.jsx'; import Forms12 from './forms/Forms12.jsx'; -class Forms extends Component { - render() { - return ( +function Forms(props) { + return (
@@ -31,7 +30,6 @@ class Forms extends Component {
) - } } export default Forms \ No newline at end of file diff --git a/src/Gallery.jsx b/src/Gallery.jsx new file mode 100644 index 0000000..3af99d4 --- /dev/null +++ b/src/Gallery.jsx @@ -0,0 +1,18 @@ +import React from 'react'; + +import Gallery01 from './gallery/Gallery01.jsx'; +import Gallery02 from './gallery/Gallery02.jsx'; + +function Gallery(props) { + + let dark=true; + + return ( +
+ + +
+ ) +} + +export default Gallery \ No newline at end of file diff --git a/src/Headers.jsx b/src/Headers.jsx index 3e9efbc..569b241 100644 --- a/src/Headers.jsx +++ b/src/Headers.jsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import Headers01 from './headers/Headers01.jsx'; import Headers02 from './headers/Headers02.jsx'; @@ -10,44 +10,25 @@ import Headers07 from './headers/Headers07.jsx'; import Headers08 from './headers/Headers08.jsx'; import Headers09 from './headers/Headers09.jsx'; import Headers10 from './headers/Headers10.jsx'; -import Headers11 from './headers/Headers11.jsx'; -import Headers12 from './headers/Headers12.jsx'; -import Headers13 from './headers/Headers13.jsx'; -import Headers14 from './headers/Headers14.jsx'; -import Headers15 from './headers/Headers15.jsx'; -import Headers16 from './headers/Headers16.jsx'; -import Headers17 from './headers/Headers17.jsx'; -import Headers18 from './headers/Headers18.jsx'; -import Headers19 from './headers/Headers19.jsx'; -import Headers20 from './headers/Headers20.jsx'; -class Headers extends Component { - render() { - return ( +function Headers(props) { + + let dark=true; + + return (
- - - - - - - - - - - - - - - - - - - - + + + + + + + + + +
) - } } export default Headers \ No newline at end of file diff --git a/src/Lists.jsx b/src/Lists.jsx new file mode 100644 index 0000000..7f4737b --- /dev/null +++ b/src/Lists.jsx @@ -0,0 +1,25 @@ +import React, { Component } from 'react'; + +import Lists01 from './lists/Lists01.jsx'; +import Lists02 from './lists/Lists02.jsx'; +import Lists03 from './lists/Lists03.jsx'; +import Lists04 from './lists/Lists04.jsx'; +import Lists05 from './lists/Lists05.jsx'; +import Lists06 from './lists/Lists06.jsx'; + +class Contents extends Component { + render() { + return ( +
+ + + + + + +
+ ) + } +} + +export default Contents \ No newline at end of file diff --git a/src/Sample1.jsx b/src/Sample1.jsx new file mode 100644 index 0000000..4ecb638 --- /dev/null +++ b/src/Sample1.jsx @@ -0,0 +1,28 @@ +import React, { Component } from 'react'; + +import Header from './headers/Headers01.jsx'; +import Footer from './footers/Footers01.jsx'; +import CallToAction from './call-to-action/CallToAction01.jsx'; +import Contents from './contents/Contents01.jsx'; +import Contacts from './contacts/Contacts01.jsx'; +import Features from './features/Features01.jsx'; +import Forms from './forms/Forms01.jsx'; + +class Headers extends Component { + render() { + return ( +
+
+
+ + + + + +
+ ) + } +} + +export default Headers \ No newline at end of file diff --git a/src/Sample2.jsx b/src/Sample2.jsx new file mode 100644 index 0000000..2e98495 --- /dev/null +++ b/src/Sample2.jsx @@ -0,0 +1,28 @@ +import React, { Component } from 'react'; + +import Header from './headers/Headers02.jsx'; +import Footer from './footers/Footers05.jsx'; +import CallToAction from './call-to-action/CallToAction02.jsx'; +import Contents from './contents/Contents02.jsx'; +import Contacts from './contacts/Contacts02.jsx'; +import Features from './features/Features02.jsx'; +import Forms from './forms/Forms02.jsx'; + +class Headers extends Component { + render() { + return ( +
+
+
+ + + + + +
+ ) + } +} + +export default Headers \ No newline at end of file diff --git a/src/call-to-action/CallToAction01.jsx b/src/call-to-action/CallToAction01.jsx index c9cf8e3..af2aae4 100644 --- a/src/call-to-action/CallToAction01.jsx +++ b/src/call-to-action/CallToAction01.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction01 extends Component { - render() { - return
+function CallToAction01(props) { + return (
@@ -17,9 +15,7 @@ class CallToAction01 extends Component {
-
- - } +
) } export default CallToAction01 diff --git a/src/call-to-action/CallToAction02.jsx b/src/call-to-action/CallToAction02.jsx index 4716ddb..2493784 100644 --- a/src/call-to-action/CallToAction02.jsx +++ b/src/call-to-action/CallToAction02.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction02 extends Component { - render() { - return
+function CallToAction02(props) { + return (
@@ -17,9 +15,7 @@ class CallToAction02 extends Component {
-
- - } +
) } export default CallToAction02 diff --git a/src/call-to-action/CallToAction03.jsx b/src/call-to-action/CallToAction03.jsx index f396b10..b83d823 100644 --- a/src/call-to-action/CallToAction03.jsx +++ b/src/call-to-action/CallToAction03.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction03 extends Component { - render() { - return
+function CallToAction03(props) { + return (
@@ -16,9 +14,7 @@ class CallToAction03 extends Component {
-
- - } +
) } export default CallToAction03 diff --git a/src/call-to-action/CallToAction04.jsx b/src/call-to-action/CallToAction04.jsx index 0f3371a..f84641e 100644 --- a/src/call-to-action/CallToAction04.jsx +++ b/src/call-to-action/CallToAction04.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction04 extends Component { - render() { - return
+function CallToAction04(props) { + return (
@@ -24,18 +22,16 @@ class CallToAction04 extends Component {
- image - image - image - image - image - image + adobe + amazon + ebay + samsung + orange + salesforce
-
- - } +
) } export default CallToAction04 diff --git a/src/call-to-action/CallToAction05.jsx b/src/call-to-action/CallToAction05.jsx index 94224eb..49a3144 100644 --- a/src/call-to-action/CallToAction05.jsx +++ b/src/call-to-action/CallToAction05.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction05 extends Component { - render() { - return
+function CallToAction05(props) { + return (
@@ -14,9 +12,7 @@ class CallToAction05 extends Component {
-
- - } +
) } export default CallToAction05 diff --git a/src/call-to-action/CallToAction06.jsx b/src/call-to-action/CallToAction06.jsx index e5adee1..1f28d44 100644 --- a/src/call-to-action/CallToAction06.jsx +++ b/src/call-to-action/CallToAction06.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction06 extends Component { - render() { - return
+function CallToAction06(props) { + return (
@@ -20,9 +18,7 @@ class CallToAction06 extends Component {
-
- - } +
) } export default CallToAction06 diff --git a/src/call-to-action/CallToAction07.jsx b/src/call-to-action/CallToAction07.jsx index 584a604..ec499be 100644 --- a/src/call-to-action/CallToAction07.jsx +++ b/src/call-to-action/CallToAction07.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction07 extends Component { - render() { - return
+function CallToAction07(props) { + return (
@@ -12,23 +10,21 @@ class CallToAction07 extends Component {
- image + gift

First Action

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts

Button

- image + cloud

Second Action

Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Button

-
- - } +
) } export default CallToAction07 diff --git a/src/call-to-action/CallToAction08.jsx b/src/call-to-action/CallToAction08.jsx index ca347dd..0b8d274 100644 --- a/src/call-to-action/CallToAction08.jsx +++ b/src/call-to-action/CallToAction08.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction08 extends Component { - render() { - return
+function CallToAction08(props) { + return (
@@ -19,9 +17,7 @@ class CallToAction08 extends Component {
-
- - } +
) } export default CallToAction08 diff --git a/src/call-to-action/CallToAction09.jsx b/src/call-to-action/CallToAction09.jsx index be79ed3..a41cced 100644 --- a/src/call-to-action/CallToAction09.jsx +++ b/src/call-to-action/CallToAction09.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction09 extends Component { - render() { - return
+function CallToAction09(props) { + return (
@@ -14,9 +12,7 @@ class CallToAction09 extends Component {
-
- - } +
) } export default CallToAction09 diff --git a/src/call-to-action/CallToAction10.jsx b/src/call-to-action/CallToAction10.jsx index ff4abf0..b1dbfc4 100644 --- a/src/call-to-action/CallToAction10.jsx +++ b/src/call-to-action/CallToAction10.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction10 extends Component { - render() { - return
+function CallToAction10(props) { + return (
@@ -19,9 +17,7 @@ class CallToAction10 extends Component {
-
- - } +
) } export default CallToAction10 diff --git a/src/call-to-action/CallToAction11.jsx b/src/call-to-action/CallToAction11.jsx index 397c2cd..4462eb6 100644 --- a/src/call-to-action/CallToAction11.jsx +++ b/src/call-to-action/CallToAction11.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction11 extends Component { - render() { - return
+function CallToAction11(props) { + return (
@@ -15,9 +13,7 @@ class CallToAction11 extends Component {
-
- - } +
) } export default CallToAction11 diff --git a/src/call-to-action/CallToAction12.jsx b/src/call-to-action/CallToAction12.jsx index 1cf2ff6..4a842cc 100644 --- a/src/call-to-action/CallToAction12.jsx +++ b/src/call-to-action/CallToAction12.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction12 extends Component { - render() { - return
+function CallToAction12(props) { + return (
@@ -22,13 +20,11 @@ class CallToAction12 extends Component {
- image + git
-
- - } +
) } export default CallToAction12 diff --git a/src/call-to-action/CallToAction13.jsx b/src/call-to-action/CallToAction13.jsx index 95ad2e7..13fab24 100644 --- a/src/call-to-action/CallToAction13.jsx +++ b/src/call-to-action/CallToAction13.jsx @@ -1,22 +1,18 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction13 extends Component { - render() { - return
+function CallToAction13(props) { + return (
- image + coffee

Froala Design Blocks

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Call to Action

-
- - } +
) } export default CallToAction13 diff --git a/src/call-to-action/CallToAction14.jsx b/src/call-to-action/CallToAction14.jsx index 448227e..4552f36 100644 --- a/src/call-to-action/CallToAction14.jsx +++ b/src/call-to-action/CallToAction14.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction14 extends Component { - render() { - return
+function CallToAction14(props) { + return (
@@ -17,9 +15,7 @@ class CallToAction14 extends Component {
-
- - } +
) } export default CallToAction14 diff --git a/src/call-to-action/CallToAction15.jsx b/src/call-to-action/CallToAction15.jsx index be08a3b..6a637ba 100644 --- a/src/call-to-action/CallToAction15.jsx +++ b/src/call-to-action/CallToAction15.jsx @@ -1,13 +1,11 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction15 extends Component { - render() { - return
+function CallToAction15(props) { + return (
- image + smile
@@ -18,9 +16,7 @@ class CallToAction15 extends Component {
-
- - } +
) } export default CallToAction15 diff --git a/src/call-to-action/CallToAction16.jsx b/src/call-to-action/CallToAction16.jsx index 8560823..8801601 100644 --- a/src/call-to-action/CallToAction16.jsx +++ b/src/call-to-action/CallToAction16.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction16 extends Component { - render() { - return
+function CallToAction16(props) { + return (
@@ -12,9 +10,7 @@ class CallToAction16 extends Component {
-
- - } +
) } export default CallToAction16 diff --git a/src/call-to-action/CallToAction17.jsx b/src/call-to-action/CallToAction17.jsx index b7e454a..be60340 100644 --- a/src/call-to-action/CallToAction17.jsx +++ b/src/call-to-action/CallToAction17.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction17 extends Component { - render() { - return
+function CallToAction17(props) { + return (
@@ -17,7 +15,7 @@ class CallToAction17 extends Component {
- image + code

Bootstrap

@@ -30,9 +28,7 @@ class CallToAction17 extends Component {
-
- - } +
) } export default CallToAction17 diff --git a/src/call-to-action/CallToAction18.jsx b/src/call-to-action/CallToAction18.jsx index 56b3407..1d987d3 100644 --- a/src/call-to-action/CallToAction18.jsx +++ b/src/call-to-action/CallToAction18.jsx @@ -1,26 +1,22 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction18 extends Component { - render() { - return
+function CallToAction18(props) { + return (
-

image

+

logo

Design Blocks

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Call to Action

- image + sync
-
- - } +
) } export default CallToAction18 diff --git a/src/call-to-action/CallToAction19.jsx b/src/call-to-action/CallToAction19.jsx index db876a5..1630cc6 100644 --- a/src/call-to-action/CallToAction19.jsx +++ b/src/call-to-action/CallToAction19.jsx @@ -1,13 +1,11 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction19 extends Component { - render() { - return
+function CallToAction19(props) { + return (
- image + sync
@@ -17,9 +15,7 @@ class CallToAction19 extends Component {
-
- - } +
) } export default CallToAction19 diff --git a/src/call-to-action/CallToAction20.jsx b/src/call-to-action/CallToAction20.jsx index bcb7ea1..7bedf4b 100644 --- a/src/call-to-action/CallToAction20.jsx +++ b/src/call-to-action/CallToAction20.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction20 extends Component { - render() { - return
+function CallToAction20(props) { + return (
@@ -17,13 +15,11 @@ class CallToAction20 extends Component {
- image + rocket
-
- - } +
) } export default CallToAction20 diff --git a/src/call-to-action/CallToAction21.jsx b/src/call-to-action/CallToAction21.jsx index 9b737bf..6e28465 100644 --- a/src/call-to-action/CallToAction21.jsx +++ b/src/call-to-action/CallToAction21.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction21 extends Component { - render() { - return
+function CallToAction21(props) { + return (
@@ -16,9 +14,7 @@ class CallToAction21 extends Component {
-
- - } +
) } export default CallToAction21 diff --git a/src/call-to-action/CallToAction22.jsx b/src/call-to-action/CallToAction22.jsx index 0fe7d3e..fd3f65c 100644 --- a/src/call-to-action/CallToAction22.jsx +++ b/src/call-to-action/CallToAction22.jsx @@ -1,9 +1,7 @@ -import React, { Component } from 'react'; -import Iframe from 'react-iframe'; +import React from 'react'; -class CallToAction22 extends Component { - render() { - return
+function CallToAction22(props) { + return (
@@ -15,14 +13,14 @@ class CallToAction22 extends Component {
- image + cloud

Feature One

Far far away, behind the word mountains, far from the countries

- image + gift

Feature Two

@@ -30,7 +28,7 @@ class CallToAction22 extends Component {
- image + github

Feature Three

@@ -38,7 +36,7 @@ class CallToAction22 extends Component {
- image + compass

Feature Four

@@ -46,9 +44,7 @@ class CallToAction22 extends Component {
-
- - } +
) } export default CallToAction22 diff --git a/src/carousels/Carousel01.jsx b/src/carousels/Carousel01.jsx new file mode 100644 index 0000000..30d947e --- /dev/null +++ b/src/carousels/Carousel01.jsx @@ -0,0 +1,52 @@ +import React, { useState } from 'react'; + +function Carousel01(props) { + + const [slideNumber, setSlideNumber] = useState(0); + const maxSlide = 2; + + const nextSlide = () => { + if (slideNumber >= maxSlide) { + setSlideNumber(0); + } else { + setSlideNumber(slideNumber+1); + } + } + + const prevSlide = () => { + if (slideNumber <= 0) { + setSlideNumber(maxSlide); + } else { + setSlideNumber(slideNumber-1); + } + } + + return (
+
+
+
+
+ First slide +
+ {console.log("slideNumber",slideNumber)} +
+ Second slide +
+
+ Third slide +
+
+ + +
+
+
) +} + +export default Carousel01 diff --git a/src/carousels/Carousel02.jsx b/src/carousels/Carousel02.jsx new file mode 100644 index 0000000..b17c05d --- /dev/null +++ b/src/carousels/Carousel02.jsx @@ -0,0 +1,73 @@ +import React, { useState, useEffect } from 'react'; + +function Carousel02(props) { + + let [slideNumber, setSlideNumber] = useState(0); + const maxSlide = 2; + + useEffect(() => { + const intervalId = setInterval(() => { + nextSlide(); + }, 5000); + return () => { + clearInterval(intervalId); + } + }, []); + + const nextSlide = () => { + setSlideNumber((slideNumber) => (slideNumber >= maxSlide) ? 0 : slideNumber + 1); + } + + const prevSlide = () => { + setSlideNumber((slideNumber) => (slideNumber <= 0) ? maxSlide : slideNumber -1); + } + + const setSlide = (number) => { + setSlideNumber(number); + } + + return (
+
+
+
    +
  1. setSlide(0)} className={!slideNumber || slideNumber === 0 ? "active" : null }>
  2. +
  3. setSlide(1)} className={slideNumber === 1 ? "active" : null }>
  4. +
  5. setSlide(2)} className={slideNumber === 2 ? "active" : null }>
  6. +
+
+
+ First slide +
+
Slide One
+

An impressive attempt

+
+
+
+ Second slide +
+
Slide Two
+

A slightly darker tone

+
+
+
+ Third slide +
+
Slide Three
+

Our Darkest Tone

+
+
+
+ + +
+
+
) +} + +export default Carousel02 diff --git a/src/components/blockcopyright.jsx b/src/components/blockcopyright.jsx new file mode 100644 index 0000000..4d56de7 --- /dev/null +++ b/src/components/blockcopyright.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import CopyRight from "./copyright.jsx"; + +function BlockCopyRight(props) { + return (
+
+ +
+
) +} + +export default BlockCopyRight \ No newline at end of file diff --git a/src/components/blockheader.jsx b/src/components/blockheader.jsx new file mode 100644 index 0000000..a53068d --- /dev/null +++ b/src/components/blockheader.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +function BlockHeader(props) { + return (
+
+

{props.header}

+
+
) +} + +export default BlockHeader \ No newline at end of file diff --git a/src/components/blocksocial.jsx b/src/components/blocksocial.jsx new file mode 100644 index 0000000..a15ccac --- /dev/null +++ b/src/components/blocksocial.jsx @@ -0,0 +1,15 @@ +import React from 'react'; + +function BlockSocial(props) { + return (
+
+ twitter + facebook + instagram + pinterest + google +
+
) +} + +export default BlockSocial \ No newline at end of file diff --git a/src/components/copyright.jsx b/src/components/copyright.jsx new file mode 100644 index 0000000..2a2ac71 --- /dev/null +++ b/src/components/copyright.jsx @@ -0,0 +1,7 @@ +import React from 'react'; + +function CopyRight(props) { + return (

© 2018 Froala, 2021 cairnswm. All Rights Reserved

) +} + +export default CopyRight \ No newline at end of file diff --git a/src/components/social.jsx b/src/components/social.jsx new file mode 100644 index 0000000..05493b8 --- /dev/null +++ b/src/components/social.jsx @@ -0,0 +1,13 @@ +import React from 'react'; + +function Social(props) { + return (
+ twitter + facebook + instagram + pinterest + google +
) +} + +export default Social \ No newline at end of file diff --git a/src/contacts/Contacts01.jsx b/src/contacts/Contacts01.jsx index 5ac446f..43a4c03 100644 --- a/src/contacts/Contacts01.jsx +++ b/src/contacts/Contacts01.jsx @@ -1,12 +1,11 @@ -import React, { Component } from 'react'; +import React from 'react'; import Iframe from 'react-iframe'; -class Contacts01 extends Component { - render() { - return
+function Contacts01(props) { + return (