From 28c1ab975e012d9046d14417504a980249125a5a Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Fri, 17 Jan 2020 09:57:07 +0700
Subject: [PATCH] Add Curved background pattern

---
 client/constants/Pattern.ts                   |  1 +
 client/pages/ExplorePage.tsx                  |  1 +
 client/patterns/curved-background/Cover.tsx   | 33 ++++++++++
 client/patterns/curved-background/Details.tsx | 64 +++++++++++++++++++
 client/patterns/diagonal-section/Details.tsx  |  4 ++
 public/sitemap.xml                            |  1 +
 6 files changed, 104 insertions(+)
 create mode 100644 client/patterns/curved-background/Cover.tsx
 create mode 100644 client/patterns/curved-background/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 2da6d25..36c774e 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -18,6 +18,7 @@ enum Pattern {
     CloseButton = 'Close button',
     CookieBanner = 'Cookie banner',
     CornerRibbon = 'Corner ribbon',
+    CurvedBackground = 'Curved background',
     CustomCheckboxButton = 'Custom checkbox button',
     CustomRadioButton = 'Custom radio button',
     DiagonalSection = 'Diagonal section',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 92d2ccb..1df6279 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -156,6 +156,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.CloseButton} />
                         <CoverCard pattern={Pattern.CookieBanner} />
                         <CoverCard pattern={Pattern.CornerRibbon} />
+                        <CoverCard pattern={Pattern.CurvedBackground} />
                         <CoverCard pattern={Pattern.DiagonalSection} />
                         <CoverCard pattern={Pattern.DockedAtCorner} />
                         <CoverCard pattern={Pattern.DotLeader} />
diff --git a/client/patterns/curved-background/Cover.tsx b/client/patterns/curved-background/Cover.tsx
new file mode 100644
index 0000000..d2c86c1
--- /dev/null
+++ b/client/patterns/curved-background/Cover.tsx
@@ -0,0 +1,33 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    height: '100%',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        borderBottomLeftRadius: '50% 40%',
+                        borderBottomRightRadius: '50% 40%',
+                        height: '50%',
+                        width: '100%',
+                    }}
+                />
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/curved-background/Details.tsx b/client/patterns/curved-background/Details.tsx
new file mode 100644
index 0000000..1b73e69
--- /dev/null
+++ b/client/patterns/curved-background/Details.tsx
@@ -0,0 +1,64 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Curved background">
+            <Helmet>
+                <meta name="description" content="Create an element with curved background" />
+                <meta name="keywords" content="css border radius, css curved background" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                height: '100%',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    borderBottomLeftRadius: '50% 40%',
+                                    borderBottomRightRadius: '50% 40%',
+                                    height: '50%',
+                                    width: '100%',
+                                }}
+                            />
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Background color */
+    background-color: rgba(0, 0, 0, 0.3);
+
+    /* You can use gradient background color such as
+    background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); */
+
+    /* Curved corners */
+    border-bottom-left-radius: 50% 40%;
+    border-bottom-right-radius: 50% 40%;
+">
+    ...
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.DiagonalSection]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/diagonal-section/Details.tsx b/client/patterns/diagonal-section/Details.tsx
index 4851965..cb36676 100644
--- a/client/patterns/diagonal-section/Details.tsx
+++ b/client/patterns/diagonal-section/Details.tsx
@@ -6,6 +6,8 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -90,6 +92,8 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+
+            <RelatedPatterns patterns={[Pattern.CurvedBackground]} />
         </DetailsLayout>
     );
 };
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 92d74da..4f0b426 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -14,6 +14,7 @@
     <url><loc>https://csslayout.io/patterns/close-button</loc></url>
     <url><loc>https://csslayout.io/patterns/cookie-banner</loc></url>
     <url><loc>https://csslayout.io/patterns/corner-ribbon</loc></url>
+    <url><loc>https://csslayout.io/patterns/curved-background</loc></url>
     <url><loc>https://csslayout.io/patterns/custom-checkbox-button</loc></url>
     <url><loc>https://csslayout.io/patterns/custom-radio-button</loc></url>
     <url><loc>https://csslayout.io/patterns/diagonal-section</loc></url>