Merge branch 'main' into feature/cae-93

src/components/SeInteressouPeloProjeto/index.jsx

@@ -1,6 +1,5 @@
 import './styles.css';
 import imagemAmigos from '../../assets/amigos.jpeg';
-import Chip from '../Chip';
 import { TextInput, TextArea, SubmitButton } from '../Form';
 import ImagePill from '../ImagePill';
 import MailIcon from '../MailIcon';
@@ -13,49 +12,49 @@ export default function SeInteressouPeloProjeto() {
 
       <MarginDecoration
         element={
-          <Chip
+          <Pill
             width="400px"
             height="130px"
-            backgroundColor="#17B270"
+            backgroundColor="rgba(23, 178, 112, 1)"
           />
         }
         rotation="-25deg"
-        xOffset="-300px"
-        yOffset="-100px"
+        left="-300px"
+        top="-140px"
       />
 
       <MarginDecoration
         element={<MailIcon size="140px" backgroundColor="#2B388A" />}
         rotation="30deg"
-        xOffset="-200px"
-        yOffset="70px"
+        left="-200px"
+        top="100px"
       />
 
       <MarginDecoration
         element={<MailIcon size="140px" backgroundColor="#EB3D38" />}
         rotation="-20deg"
-        xOffset="1130px"
-        yOffset="-180px"
+        right="-100px"
+        top="-180px"
       />
 
       <MarginDecoration
         element={
-          <Chip
+          <Pill
             width="400px"
             height="130px"
-            backgroundColor="#6E361F"
+            backgroundColor="rgba(110, 54, 31, 1)"
           />
         }
         rotation="25deg"
-        xOffset="1170px"
-        yOffset="70px"
+        right="-450px"
+        top="80px"
       />
 
       <MarginDecoration
         element={<MailIcon size="175px" backgroundColor="#ED8024" />}
         rotation="30deg"
-        xOffset="1200px"
-        yOffset="200px"
+        right="-250px"
+        bottom="0px"
       />
     </div>
   );
@@ -111,17 +110,26 @@ function SeInteressouForm() {
   );
 }
 
-function MarginDecoration({ element, rotation, xOffset, yOffset }) {
+function MarginDecoration(props) {
   return (
     <div
       style={{
         position: 'absolute',
-        transform: `rotate(${rotation})`,
-        left: xOffset,
-        top: yOffset
+        transform: `rotate(${props.rotation})`,
+        right: props.right,
+        left: props.left,
+        top: props.top,
+        bottom: props.bottom
       }}
     >
-      {element}
+      {props.element}
     </div>
   );
 }
+
+const Pill = (props) => {
+  return (
+      <div style={{ height: props.height, width: props.width, backgroundColor: props.backgroundColor,
+        borderRadius: props.height }} />
+  );
+};

src/components/VaDeCaronae/index.jsx

@@ -0,0 +1,169 @@
+import appleLogo from '../../assets/apple_logo.svg';
+import iphoneFront from '../../assets/iphone_front.png';
+import iphoneSide from '../../assets/iphone_side.png';
+import jeepIcon from '../../assets/jeep-icon.svg';
+import leafIcon from '../../assets/leaf_white.svg';
+import peopleIcon from '../../assets/people_blue.svg';
+import playStoreLogo from '../../assets/play_store_logo.svg';
+import shieldIcon from '../../assets/shield_white.svg';
+import windIcon from '../../assets/wind-icon.svg';
+import { colors, styles } from './styles';
+
+const URLCaronaeAppleAppStore = 'https://www.apple.com/app-store/';
+const URLCaronaeGooglePlayStore = 'https://play.google.com/';
+
+export default function VaDeCaronae () {
+  return (
+    <div style={ styles.vaDeCaronae }>
+      <Headings />
+      <BackgroundCircles />
+      <Roads />
+      <Icon src={ peopleIcon }
+            backgroundColor={ colors.peopleIconBackground }
+            imgSize="40px"
+            width="140px"
+            top="80px"
+            left="750px" />
+      <Icon src={ shieldIcon }
+            backgroundColor={ colors.shieldIconBackground }
+            imgSize="27px"
+            top="400px"
+            left="760px" />
+      <Icon src={ leafIcon }
+            backgroundColor={ colors.leafIconBackground }
+            top="110px"
+            left="1180px" />
+      <IphoneFront />
+      <IphoneSide />
+      <DoubleIcon src={ [windIcon, jeepIcon] }
+                  backgroundColor={ colors.jeepIconBackground }
+                  width="180px"
+                  top="460px"
+                  left="1080px" />
+    </div>
+  );
+}
+
+const Headings = () => {
+  return (
+    <div style={ styles.heading }>
+      <h2 style={ styles.h2 }>Juntos vamos mais longe,</h2>
+      <h1 style={ styles.h1 }>Vá de Caronaê!</h1>
+    </div>
+  );
+};
+
+const BackgroundCircles = () => {
+  return (
+    <>
+      <div style={ styles.circleOuter }>
+        <div style={ styles.circleInner } />
+      </div>
+    </>
+  );
+};
+
+const StoreButton = (props) => {
+  return (
+    <a style={ styles.storeButton } href={ props.href }>
+      <img src={ props.storeLogo } />
+      <div>
+        <p style={ styles.buttonSmallText }>Disponível na</p>
+        <p style={ styles.buttonLargeText }>{ props.storeName }</p>
+      </div>
+    </a>
+  );
+};
+
+const Roads = () => {
+  return (
+    <div style={ styles.roads }>
+      <VerticalRoad />
+      <div style={{ display: 'flex', gap: '40px', position: 'relative', left: '-60px' }} >
+        <StoreButton storeName="App Store" storeLogo={ appleLogo }
+                     href={ URLCaronaeAppleAppStore } />
+        <StoreButton storeName="Google Play" storeLogo={ playStoreLogo }
+                     href={ URLCaronaeGooglePlayStore } />
+      </div>
+      <div style={{ position: 'relative', left: '-65px' }} >
+        <HorizontalRoad />
+      </div>
+    </div>
+  );
+};
+
+const VerticalRoad = () => {
+  return (
+    <div style={ styles.verticalRoad } >
+      <div style={ styles.verticalDash } />
+      <div style={ styles.verticalDash } />
+      <div style={ styles.verticalRoadBackground } />
+    </div>
+  );
+};
+
+const HorizontalRoad = () => {
+  return (
+    <div style={ styles.horizontalRoad } >
+      <div style={ styles.horizontalDash } />
+      <div style={ styles.horizontalDash } />
+      <div style={ styles.horizontalDash } />
+      <div style={ styles.horizontalDash } />
+    </div>
+  );
+};
+
+const Icon = (props) => {
+  return (
+    <div style={{ position: 'absolute',
+                  top: props.top,
+                  left: props.left,
+                  display: 'flex',
+                  backgroundColor: props.backgroundColor,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  height: '90px',
+                  width: props.width,
+                  minWidth: '90px',
+                  borderRadius: '90px' }} >
+      <img style={{ width: props.imgSize }} src={ props.src } />
+    </div>
+  );
+};
+
+const DoubleIcon = (props) => {
+  return (
+    <div style={{ position: 'absolute',
+                  display: 'flex',
+                  top: props.top,
+                  left: props.left,
+                  backgroundColor: props.backgroundColor,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  height: '90px',
+                  width: 'fit-content',
+                  minWidth: props.width,
+                  padding: '0 40px',
+                  borderRadius: '90px' }} >
+      <img style={{ width: props.imgSize }} src={ props.src[0] } />
+      <img style={{ width: props.imgSize }} src={ props.src[1] } />
+    </div>
+  );
+};
+
+const IphoneFront = () => {
+  return (
+    <div style={ styles.iphoneFront } >
+      <img src={ iphoneFront } />
+    </div>
+  );
+};
+
+const IphoneSide = () => {
+  return (
+    <div style={ styles.iphoneSide } >
+      <img src={ iphoneSide } />
+    </div>
+  );
+};
+