Merge pull request #6 from aswathy-deriv/aswathy/principles

Aswathy/Added the principle page

src/features/pages/principles/index.tsx

@@ -3,6 +3,7 @@ import { BreakpointProvider, ThemeProvider, FluidContainer, Section } from '@der
 import { PageLayout, Breadcrumbs } from '@deriv-com/components'
 import Layout from 'features/components/templates/layout'
 import HeroBanner from './hero-banner'
+import Reliable from './reliable'
 import MainRowNavigation from 'features/components/templates/navigation/main-nav'
 import MainFooter from 'features/components/templates/footer'
 
@@ -32,6 +33,7 @@ const OurPrincipalsComponent = () => {
                         </Section>
 
                         <HeroBanner />
+                        <Reliable />
                     </PageLayout>
                     <MainFooter />
                 </Layout>

src/features/pages/principles/reliable/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Features } from '@deriv-com/blocks'
+import { StaticImage } from 'gatsby-plugin-image'
+
+const Reliable = () => {
+    return (
+        <>
+            <Features.ContentRight
+                title="Be reliable"
+                description="We provide secure and robust systems so you can trade with confidence. Whether settling contracts promptly, processing transactions efficiently, or offering responsive 24/7 customer support, we strive to be reliable at every step of your trading experience."
+                content={() => (
+                    <StaticImage
+                        src="../../../../images/migration/principle/reliable.png"
+                        alt="hero bg image"
+                        placeholder="none"
+                        formats={['auto', 'webp']}
+                        loading="eager"
+                    />
+                )}
+            >
+                <div></div>
+            </Features.ContentRight>
+        </>
+    )
+}
+
+export default Reliable