-
-
+
+
+
+ Rameelo
+ {/*
+ Welcome to the online platform for everything garba/raas.
+ */}
+
+
+
+ View
+
+
+
diff --git a/src/components/home/home.scss b/src/components/home/home.scss
index 5f4e4aa..6a419d9 100644
--- a/src/components/home/home.scss
+++ b/src/components/home/home.scss
@@ -3,6 +3,7 @@
.nav {
@extend %flex;
flex-direction: row;
+ margin-top: 10px;
ul {
@extend %flex;
@@ -37,6 +38,29 @@ div .pages {
.card {
height: 200px;
- width: 200px;
+ width: 300px;
+ padding: 30px;
+ }
+
+ .custom-card-content {
+ @extend %flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ flex: 1;
+
+ .main-text {
+ font-size: 30px;
+ }
+ }
+
+ .rameelo-card {
+ background-color: #ffe2e5;
+ color: red;
+
+ i {
+ color: red;
+ font-size: 3em;
+ }
}
}
diff --git a/src/components/rameelo/landing/index.js b/src/components/rameelo/landing/index.js
new file mode 100644
index 0000000..0319751
--- /dev/null
+++ b/src/components/rameelo/landing/index.js
@@ -0,0 +1 @@
+export { default } from './landing';
diff --git a/src/components/rameelo/landing/landing.js b/src/components/rameelo/landing/landing.js
new file mode 100644
index 0000000..c1503f1
--- /dev/null
+++ b/src/components/rameelo/landing/landing.js
@@ -0,0 +1,107 @@
+import React from 'react';
+
+// Styles
+import './landing.scss';
+
+export default class Landing extends React.Component {
+ render() {
+ return (
+
+
+
+
+
+ Rameelo
+ Raas Garba Forever.
+
+
+
+
+ About Us
+ Events
+ Registration
+ What is Raas Garba?
+
+
+
+
+ Welcome to the online platform for{' '}
+ everything Raas/Garba
+
+
+ If you love Raas/Garba, you are in the right place! Connect,
+ share, and grow with our community of passionate Raas/Garba
+ enthusiasts.
+
+ Learn More
+
+
+
+
+ Scroll
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src/components/rameelo/landing/landing.scss b/src/components/rameelo/landing/landing.scss
new file mode 100644
index 0000000..7e87f8a
--- /dev/null
+++ b/src/components/rameelo/landing/landing.scss
@@ -0,0 +1,163 @@
+@import '../../../styles/index';
+
+.wrapper {
+ max-width: 1920px !important;
+}
+
+.top-section {
+ background-color: blue;
+ height: 1078px;
+ max-height: 1078px;
+ @extend %flex;
+
+ .row {
+ height: 100%;
+ }
+
+ .graphic-side {
+ background: linear-gradient(0deg, #ff1d465d, #ff1d467e),
+ url('../../../images/rameelo/rameelo_cover_photo.png');
+ background-position: center;
+ padding: 20px;
+
+ @extend %flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .logo {
+ color: $white;
+ margin: 20px 20px;
+ font-size: 30px;
+ }
+ .motto {
+ font-size: 140px;
+ color: $white;
+ }
+ }
+
+ .info-side {
+ background-color: white;
+ display: flex;
+ flex-direction: column;
+
+ .nav {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ margin-top: 10px;
+
+ span {
+ color: $secondary-text;
+ margin: 20px 40px;
+ font-size: 20px;
+ }
+ }
+
+ .welcome {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ margin: 30px;
+ padding: 15px;
+ border-right: 1px solid red;
+ position: relative;
+
+ .title {
+ font-size: 70px;
+
+ .red-text {
+ color: red;
+ }
+ }
+
+ .subtitle {
+ color: $secondary-text;
+ @extend %font-inter;
+ }
+
+ .learn-more {
+ margin-top: 20px;
+ color: red;
+ font-size: 14px;
+ text-decoration: underline;
+ @extend %font-inter;
+ font-weight: 600;
+ }
+ }
+
+ .scroll-widget {
+ margin: 0 16px 10px 0;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ color: red;
+
+ .scroll-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ font {
+ font-size: 12px;
+ }
+
+ i {
+ font-size: 30px;
+ }
+ }
+ }
+ }
+}
+
+.quadrants-section {
+ background-color: red;
+
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ align-items: center;
+ flex-wrap: wrap;
+
+ padding: 60px 140px;
+
+ .quadrant {
+ height: 250px;
+ flex: 1;
+ border-right: 1px solid white;
+ margin: 0px;
+ padding: 20px 60px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .quadrant-header {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ .title {
+ color: $white;
+ font-size: 38px;
+ }
+
+ .subtitle {
+ @extend %font-inter;
+ color: $white;
+ font-size: 13px;
+ margin-top: 5px;
+ }
+ }
+
+ .quadrant-footer {
+ color: gold;
+ font-size: 14px;
+ text-decoration: underline;
+ @extend %font-inter;
+ }
+ }
+
+ :last-child {
+ border: none !important;
+ }
+}
diff --git a/src/images/rameelo/rameelo_cover_photo.png b/src/images/rameelo/rameelo_cover_photo.png
new file mode 100755
index 0000000..d8c3ffc
Binary files /dev/null and b/src/images/rameelo/rameelo_cover_photo.png differ
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
index c6d5c7a..0ac4bbe 100644
--- a/src/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@@ -1,7 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');
body {
- font-family: 'Fira Sans', sans-serif;
+ font-family: 'Bebas Neue', cursive;
}
h1 {
@@ -9,5 +10,12 @@ h1 {
}
h2 {
- color: $white;
+ font-size: 30px;
+}
+
+%font-bebas {
+ font-family: 'Bebas Neue', cursive;
+}
+%font-inter {
+ font-family: 'Inter', sans-serif;
}
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index ae3604b..8f0b4b6 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -4,18 +4,42 @@
display: flex !important;
}
+body {
+ margin: 0;
+}
+
+.flex-column {
+ display: flex !important;
+ flex-direction: column;
+}
+
+.flex-align-center {
+ align-items: center;
+}
+
.wrapper {
max-width: 1140px;
- margin: 20px auto;
+ margin: 0px auto;
}
.card {
+ @extend %flex;
background-color: white;
- border-radius: 25px;
+ border-radius: 5.460000038146973px;
margin: 10px;
-
- .card-header {
- @extend %flex;
- padding: 10px;
- }
+ padding: 5px;
+ box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.05);
+}
+
+button {
+ background-color: $primary-color;
+ color: $white;
+ padding: 8.449999809265137px 13px;
+ border-radius: 5.460000038146973px;
+ border: none;
+ text-align: center;
+ font-size: 13px;
+ box-sizing: border-box;
+ box-shadow: none;
+ cursor: pointer;
}