MESSMATE/intern.html at main · kunwarshivamjsr/MESSMATE · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html><head>
<meta charset="utf-8"/>
<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Plus+Jakarta+Sans%3Awght%40400%3B500%3B700%3B800" onload="this.rel='stylesheet'" rel="stylesheet"/>
<title>Stitch Design</title>
<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
</head>
<body>
<div class="relative flex h-auto min-h-screen w-full flex-col bg-[#f8fcf8] group/design-root overflow-x-hidden" style='font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;'>
<div class="layout-container flex h-full grow flex-col">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#e7f3e7] px-10 py-3">
<div class="flex items-center gap-4 text-[#0d1b0d]">
<div class="size-4">
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<img src="logo.png" alt="Description of image">
<defs>
<clipPath id="clip0_6_319"><rect fill="white" height="48" width="48"></rect></clipPath>
</defs>
</svg>
</div>
<h2 class="text-[#0d1b0d] text-lg font-bold leading-tight tracking-[-0.015em]">MESSMATE</h2>
</div>
<div class="flex flex-1 justify-end gap-8">
<div class="flex items-center gap-9">
<a class="text-[#0d1b0d] text-sm font-medium leading-normal" href="menu.html">Menu</a>
<!-- <a class="text-[#0d1b0d] text-sm font-medium leading-normal" href="">How it works</a> -->
<a class="text-[#0d1b0d] text-sm font-medium leading-normal" href="support.html">Contact</a>
</div>
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-[#e7f3e7] text-[#0d1b0d] text-sm font-bold leading-normal tracking-[0.015em]">
</button>
</div>
</header>
<div class="px-40 flex flex-1 justify-center py-5">
<div class="layout-content-container flex flex-col max-w-[960px] flex-1">
<div class="@container">
<div class="@[480px]:p-4">
<div class="flex min-h-[480px] flex-col gap-6 bg-cover bg-center bg-no-repeat @[480px]:gap-8 @[480px]:rounded-lg items-start justify-end px-4 pb-10 @[480px]:px-10" style='background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuCF-DWe52RtPMzj1GVX57yuzpq4iH7wKfycV6lMu0WSI_vbBscN8tvE42uy54C5y2XF14_MlJRSmRI3yY1V4orfKccPVnKR_OEjftbZ-_o37cMs-sWYk3kaqldTXNZxOX7quetIOy4JLm25ZPceJLxQ1oi2ACZKNMk92ukub2ytKO5PB9Do8q2GVcea3p98t4g9QlnUxj1GQVYGVUqpGGbLhbka-ui1mINekNqsQG_vR1J4YGA704lslklYT8uDMhRwk20wK_0r8qB7");'>
<div class="flex flex-col gap-2 text-left">
<h1 class="text-white text-4xl font-black leading-tight tracking-[-0.033em] @[480px]:text-6xl @[480px]:font-black @[480px]:leading-tight @[480px]:tracking-[-0.033em]">
                      Become a MESSMATE Delivery Partner
                    </h1>
<h2 class="text-white text-lg font-normal leading-normal @[480px]:text-lg @[480px]:font-normal @[480px]:leading-normal">
                      Deliver food on your own schedule and earn extra points. Get 5 to 20 points per delivery, depending on distance and time of day.
                    </h2>
</div>
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 @[480px]:h-12 @[480px]:px-5 bg-[#13ec13] text-[#0d1b0d] text-sm font-bold leading-normal tracking-[0.015em] @[480px]:text-base @[480px]:font-bold @[480px]:leading-normal @[480px]:tracking-[0.015em]">
<span class="truncate">Sign Up Now</span>
</button>
</div>
</div>
</div>
<h2 class="text-[#0d1b0d] text-4xl font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">How It Works</h2>
<div class="grid grid-cols-[40px_1fr] gap-x-2 px-4">
<div class="flex flex-col items-center gap-1 pt-3">
<div class="text-[#0d1b0d]" data-icon="PencilSimple" data-size="24px" data-weight="regular">
<svg fill="currentColor" height="24px" viewBox="0 0 256 256" width="24px" xmlns="http://www.w3.org/2000/svg">
<path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"></path>
</svg>
</div>
<div class="w-[1.5px] bg-[#cfe7cf] h-2 grow"></div>
</div>
<div class="flex flex-1 flex-col py-3">
<p class="text-[#0d1b0d] text-lg font-medium leading-normal">Sign Up</p>
<p class="text-[#4c9a4c] text-base font-normal leading-normal">Fill out the form below to get started.</p>
</div>
<div class="flex flex-col items-center gap-1">
<div class="w-[1.5px] bg-[#cfe7cf] h-2"></div>
<div class="text-[#0d1b0d]" data-icon="Presentation" data-size="24px" data-weight="regular">
<svg fill="currentColor" height="24px" viewBox="0 0 256 256" width="24px" xmlns="http://www.w3.org/2000/svg">
<path d="M216,40H136V24a8,8,0,0,0-16,0V40H40A16,16,0,0,0,24,56V176a16,16,0,0,0,16,16H79.36L57.75,219a8,8,0,0,0,12.5,10l29.59-37h56.32l29.59,37a8,8,0,1,0,12.5-10l-21.61-27H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,136H40V56H216V176Z"></path>
</svg>
</div>
<div class="w-[1.5px] bg-[#cfe7cf] h-2 grow"></div>
</div>
<div class="flex flex-1 flex-col py-3">
<p class="text-[#0d1b0d] text-lg font-medium leading-normal">Complete Training</p>
<p class="text-[#4c9a4c] text-base font-normal leading-normal">Attend a brief training session to learn the delivery process.</p>
</div>
<div class="flex flex-col items-center gap-1 pb-3">
<div class="w-[1.5px] bg-[#cfe7cf] h-2"></div>
<div class="text-[#0d1b0d]" data-icon="Bicycle" data-size="24px" data-weight="regular">
<svg fill="currentColor" height="24px" viewBox="0 0 256 256" width="24px" xmlns="http://www.w3.org/2000/svg">
<path d="M208,112a47.81,47.81,0,0,0-16.93,3.09L165.93,72H192a8,8,0,0,1,8,8,8,8,0,0,0,16,0,24,24,0,0,0-24-24H152a8,8,0,0,0-6.91,12l11.65,20H99.26L82.91,60A8,8,0,0,0,76,56H48a8,8,0,0,0,0,16H71.41L85.12,95.51,69.41,117.06a48.13,48.13,0,1,0,12.92,9.44l11.59-15.9L125.09,164A8,8,0,1,0,138.91,156l-30.32-52h57.48l11.19,19.17A48,48,0,1,0,208,112ZM80,160a32,32,0,1,1-20.21-29.74l-18.25,25a8,8,0,1,0,12.92,9.42l18.25-25A31.88,31.88,0,0,1,80,160Zm128,32a32,32,0,0,1-22.51-54.72L201.09,164A8,8,0,1,0,214.91,156L199.3,129.21A32,32,0,1,1,208,192Z"></path>
</svg>
</div>
</div>
<div class="flex flex-1 flex-col py-3">
<p class="text-[#0d1b0d] text-lg font-medium leading-normal">Start Delivering</p>
<p class="text-[#4c9a4c] text-base font-normal leading-normal">Accept orders and deliver food to students on campus.</p>
</div>
</div>
<h2 class="text-[#0d1b0d] text-4xl font-bold leading-tight tracking-[-0.015em] px-4 pb-3 pt-5">Sign Up Form</h2>
<div class="flex max-w-[480px] flex-col gap-4 px-4 py-3">
<label class="flex w-full flex-col">
<p class="text-[#0d1b0d] text-sm font-medium leading-normal pb-2">Full Name</p>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-[#0d1b0d] focus:outline-0 focus:ring-0 border-none bg-[#e7f3e7] focus:border-none h-14 placeholder:text-[#4c9a4c] p-4 text-base font-normal leading-normal" placeholder="Enter your full name" value=""/>
</label>
<label class="flex w-full flex-col">
<p class="text-[#0d1b0d] text-sm font-medium leading-normal pb-2">Student ID</p>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-[#0d1b0d] focus:outline-0 focus:ring-0 border-none bg-[#e7f3e7] focus:border-none h-14 placeholder:text-[#4c9a4c] p-4 text-base font-normal leading-normal" placeholder="Enter your student ID" value=""/>
</label>
<label class="flex w-full flex-col">
<p class="text-[#0d1b0d] text-sm font-medium leading-normal pb-2">Email</p>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-[#0d1b0d] focus:outline-0 focus:ring-0 border-none bg-[#e7f3e7] focus:border-none h-14 placeholder:text-[#4c9a4c] p-4 text-base font-normal leading-normal" placeholder="Enter your email" value=""/>
</label>
<label class="flex w-full flex-col">
<p class="text-[#0d1b0d] text-sm font-medium leading-normal pb-2">Phone Number</p>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-[#0d1b0d] focus:outline-0 focus:ring-0 border-none bg-[#e7f3e7] focus:border-none h-14 placeholder:text-[#4c9a4c] p-4 text-base font-normal leading-normal" placeholder="Enter your phone number" value=""/>
</label>
</div>
<div class="flex px-4 py-3 justify-start">
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-12 px-5 bg-[#13ec13] text-[#0d1b0d] text-base font-bold leading-normal tracking-[0.015em] w-full">
<span class="truncate">Submit Application</span>
</button>
</div>
</div>
</div>
<footer class="flex justify-center">
<div class="flex max-w-[960px] flex-1 flex-col">
<footer class="flex flex-col gap-6 px-5 py-10 text-center @container">
<div class="flex flex-wrap items-center justify-center gap-6 @[480px]:flex-row @[480px]:justify-around">
<a class="text-[#4c9a4c] text-base font-normal leading-normal min-w-40" href="#">About</a>
<a class="text-[#4c9a4c] text-base font-normal leading-normal min-w-40" href="#">Contact</a>
<a class="text-[#4c9a4c] text-base font-normal leading-normal min-w-40" href="#">Terms of Service</a>
<a class="text-[#4c9a4c] text-base font-normal leading-normal min-w-40" href="#">Privacy Policy</a>
</div>
<p class="text-[#4c9a4c] text-base font-normal leading-normal">©2025 MESSMATE . All rights reserved.</p>
</footer>
</div>
</footer>
</div>
</div>

</body></html>