diff --git a/common/img/Coconut Land 1 (1).png b/common/img/Coconut Land 1 (1).png new file mode 100644 index 00000000..54820a70 Binary files /dev/null and b/common/img/Coconut Land 1 (1).png differ diff --git a/common/img/Coconut Land 1.png b/common/img/Coconut Land 1.png new file mode 100644 index 00000000..7ad0ae4f Binary files /dev/null and b/common/img/Coconut Land 1.png differ diff --git a/common/img/step-1.png b/common/img/step-1.png new file mode 100644 index 00000000..701a4bcc Binary files /dev/null and b/common/img/step-1.png differ diff --git a/common/img/step-2.png b/common/img/step-2.png new file mode 100644 index 00000000..b60fb22c Binary files /dev/null and b/common/img/step-2.png differ diff --git a/common/img/step-3.png b/common/img/step-3.png new file mode 100644 index 00000000..1d35061a Binary files /dev/null and b/common/img/step-3.png differ diff --git a/common/img/step-4.png b/common/img/step-4.png new file mode 100644 index 00000000..47e4e73c Binary files /dev/null and b/common/img/step-4.png differ diff --git a/common/img/step-5.png b/common/img/step-5.png new file mode 100644 index 00000000..d19e4a34 Binary files /dev/null and b/common/img/step-5.png differ diff --git a/landing/process.css b/landing/process.css new file mode 100644 index 00000000..912fdf71 --- /dev/null +++ b/landing/process.css @@ -0,0 +1,137 @@ +/* Content */ +.content { + background-image: url("../common/img/Coconut Land 1 (1).png"); +} + +.step-container { + max-width: 1200px; + margin: auto; + padding: 5rem 1rem; +} + +.step-sub-header { + position: relative; + isolation: isolate; + margin-bottom: 1rem; + padding-left: 5rem; + font-size: 0.9rem; + font-weight: 600; + letter-spacing: 2px; + color: #e9c675; +} + +.step-sub-header::before { + position: absolute; + content: ""; + top: 50%; + left: 0; + transform: translateY(-50%); + height: 2px; + width: 4rem; + background-color: #e9c675; +} + +.step-sub-header::after { + position: absolute; + top: 50%; + left: 0; + transform: translate(-60%, -50%); + font-size: 8rem; + font-weight: 600; + color: #000000; + opacity: 0.1; + z-index: -1; +} + +.step-header { + margin-bottom: 1rem; + font-size: 3rem; + font-weight: 400; + color: #000000; +} + +img { + display: flex; + width: 100%; +} + +/* .steps { + background-image: linear-gradient( + to bottom, + rgba(255, 255, 255, 0), + #0a1e27 8rem + ); + overflow: hidden; +} */ + +.container { + padding-top: 0; + display: grid; + gap: 5rem 2rem; + overflow: hidden; +} + +.step-image img { + max-width: 400px; + margin-inline: auto; + border-radius: 5px; + /* box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.4); */ +} + +.step-content, +.step-image { + margin: 2rem 0; +} + +.step-content-1, +.step-image-1 { + margin-top: 7rem; +} + +.step-content-1 .step-sub-header::after { + content: "01"; +} + +.step-content-2 .step-sub-header::after { + content: "02"; +} + +.step-content-3 .step-sub-header::after { + content: "03"; +} + +.step-content-4 .step-sub-header::after { + content: "04"; +} + +.step-content-5 .step-sub-header::after { + content: "05"; +} + +.step-content p { + margin: 1.5rem; +} + +@media (width > 768px) { + .about__container { + grid-template-columns: repeat(2, 1fr); + align-items: center; + gap: 10rem 2rem; + } + + .step-image-1 { + grid-area: 1/2/2/3; + } + + .step-image-3 { + grid-area: 3/2/4/3; + } + + .step-image-5 { + grid-area: 5/2/6/3; + } + + .step-content { + margin-left: 6rem; + } +} diff --git a/landing/process.html b/landing/process.html new file mode 100644 index 00000000..2f0e4180 --- /dev/null +++ b/landing/process.html @@ -0,0 +1,188 @@ + + + + + + Process + + + + + + + + + + + +
+

+ From your Yard
+ to our Hand +

+

+ Glimpse of how the magic happens.
+ Explore and Learn more about our production pipeline. +

+
+ Scroll down + + +
+
+ +
+
+
+ step-image-1 +
+
+

GET STARTED

+

Create a Supply Request

+

+ Suppliers can create a supply request using web or mobile app once a + yield of coconut is collected. Supplier can specify the location, + collection amount and the preferred payment method. +

+
+ +
+ step-image-2 +
+
+

GET STARTED

+

Get a Collection Confirmation

+

+ Upon reviewing the request, a collector will be assigned for your + collection request. You can view the scheduled collection + information in your dashboard. +

+
+ +
+ step-image-3 +
+
+

GET STARTED

+

Supply Coconuts to the Collector

+

+ Once the collector reaches you, provide him with the coconuts and + help him with counting. +

+
+ +
+ step-image-4 +
+
+

GET STARTED

+

Verify the Coconut Amount

+

+ After counting the coconut amount, help the collector to verify the + amount using your device. +

+
+ +
+ step-image-5 +
+
+

GET STARTED

+

Get Paid

+

+ According to the payment method you specified, you can get paid at + collection or get your payment into the bank account you specify. +

+
+
+
+ + + + + diff --git a/landing/product.css b/landing/product.css new file mode 100644 index 00000000..e754f4cf --- /dev/null +++ b/landing/product.css @@ -0,0 +1,238 @@ +/* Header */ +.menu-btn { + color: #ffffff; + font-size: 23px; + cursor: pointer; + display: none; +} + +.navbar { + padding: 30px 0; + display: flex; + justify-content: space-between; + align-items: center; + position: absolute; + top: 0; + z-index: 999; + background: transparent; + /* box-shadow: 0 0 14px rgba(0, 0, 0, 0.3); */ + width: 100%; +} + +.navbar .menu { + padding-left: 8%; + width: 50vw; +} + +.navbar .menu li { + list-style: circle; + display: inline-block; +} + +.navbar .menu li a { + display: block; + margin-right: 50px; + color: white; + text-decoration: none; + font-size: 1rem; + padding-bottom: 4px; + border-bottom: 3px solid transparent; +} + +.navbar .menu li .active { + color: #bb9056; +} + +.navbar .menu li a:hover { + border-bottom: 3px solid #bb9056; + animation: border_anim 0.3s linear forwards; +} + +@keyframes border_anim { + 0% { + width: 0%; + } + 100% { + width: 60%; + } +} + +.navbar .button { + text-decoration: none; + margin-right: 30px; + padding: 8px 35px; + border: none; + background: #bb9056; + color: white; + font-size: 1rem; + border-radius: 5px; + cursor: pointer; +} + +.navbar .button:hover { + color: #bb9056; + background: white; + cursor: pointer; +} + +/* Content */ +.content { + background-image: url(../common/img/Coconut\ Land\ 1.png); + background-size: cover; + background-repeat: no-repeat; + padding: 0 8%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + color: #424144; + height: 100vh; +} + +.content h1 { + font-size: 3rem; + color: white; +} + +.content p { + font-size: 1rem; + margin-top: 30px; + color: white; + width: 30%; + font-weight: 300; +} + +.content .scroll-btn, +.content .scroll-btn a { + margin-top: 40px; + text-decoration: none; + color: #bb9056; +} + +.content .scroll-btn a span { + padding-left: 5px; +} + +.content .scroll-btn a:hover { + color: wheat; +} + +.pheading { + text-align: center; + margin: 50px 0; + color: #424144; +} + +/* Products */ +.sec { + padding: 10px 5%; +} + +.products { + display: grid; + gap: 25px; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); +} + +.products .card { + width: 300px; + background-color: #f5f5f5; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); + border-radius: 5px; + padding: 10px; + margin-bottom: 20px; +} + +.products .card img { + height: 280px; + width: 100%; +} + +.products .card .desc { + padding: 5px 20px; + opacity: 0.8; +} + +.products .card .title { + font-weight: 900; + font-size: 20px; + color: #424144; + padding: 0 20px; +} + +.products .card .box { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; +} + +.products .card .box .price { + color: #d6a360; + font-size: 20px; + font-weight: bold; +} + +.products .card .box .btn { + font-size: 13px; + color: #d6a360; + padding: 10px 18px; + font-weight: 900; + border: 1px solid #d6a360; + border-radius: 20px; +} + +.products .card .box .btn:hover { + cursor: pointer; + background-color: #d6a360; + color: white; +} + +footer { + background-color: #f3f4f6; + height: 10vh; +} + +footer p { + text-align: center; + line-height: 10vh; +} + +/* Responsive */ +@media (max-width: 820px) { + .menu-btn { + display: block; + z-index: 999; + } + + .menu-btn i.active::before { + content: "\f00d"; + } + + .navbar .menu, + .navbar .button { + position: fixed; + height: 100vh; + width: 100%; + left: -100%; + top: 0; + background-color: #111111; + text-align: center; + padding-top: 80px; + transition: all 0.3s ease; + } + + .navbar .menu.active { + left: 0; + } + + .navbar .menu li { + display: flex; + justify-content: center; + } + + .navbar .menu li a { + margin: 10px 0; + font-size: 25px; + } +} diff --git a/landing/products.html b/landing/products.html new file mode 100644 index 00000000..6fc03205 --- /dev/null +++ b/landing/products.html @@ -0,0 +1,174 @@ + + + + + + Products + + + + + + + + + + +
+

Explore our
Products

+

+ Immerse Yourself in the Richness of
+ Jayasinghe Oil Mills' Diverse Range of
+ Exceptional Coconut Oil Products.

+ Our products are crafted with
+ Precision and Passion for
+ Unmatched Purity and Quality. +

+
+ Scroll down + + +
+
+ +
+

Our Latest Produts

+ +
+
+ +
+
+ +
+
Food
+
Virgin Coconut Oil
+
+
100 LKR
+ +
+
+ + + +
+
+ +
+
Food
+
Virgin Coconut Oil
+
+
100 LKR
+ +
+
+ + + +
+
+ +
+
Food
+
Virgin Coconut Oil
+
+
100 LKR
+ +
+
+ + + +
+
+ +
+
Food
+
Virgin Coconut Oil
+
+
100 LKR
+ +
+
+ + + +
+
+ +
+
Food
+
Virgin Coconut Oil
+
+
100 LKR
+ +
+
+ +
+
+
+ + + + + + +