-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
343 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <section class="py-24"> | ||
| <div class="container mx-auto px-4"> | ||
| <p class="text-center uppercase text-orange-500 text-sm font-bold font-heading mb-6">HOW IT WORKS</p> | ||
| <h1 class="text-center text-3xl lg:text-5xl font-bold font-heading mb-24 max-w-sm lg:max-w-xl mx-auto">What steps do I need to take to join?</h1> | ||
| <div class="px-4 lg:px-16 rounded-2xl bg-no-repeat bg-cover" style="background-image:url('solstice-assets/images/how-it-works/picture1.png')"> | ||
| <div class="w-full lg:w-1/3 rounded-b-2xl bg-white bg-opacity-30 h-6"></div> | ||
| <div class="py-4"> | ||
| <div class="w-full lg:w-1/3 bg-white p-6 rounded-2xl mb-4"> | ||
| <div class="flex items-center gap-4 flex-wrap"> | ||
| <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center"> | ||
| <span class="text-lg text-white font-bold font-heading">1</span> | ||
| </div> | ||
| <h2 class="text-xl font-bold font-heading">Create Account</h2> | ||
| </div> | ||
| </div> | ||
| <div class="w-full lg:w-1/3 bg-white p-6 rounded-2xl mx-auto mb-4"> | ||
| <div class="flex items-center gap-4 flex-wrap"> | ||
| <div class="w-10 h-10 rounded-full bg-orange-50 flex items-center justify-center"> | ||
| <span class="text-lg font-bold font-heading">2</span> | ||
| </div> | ||
| <h2 class="text-xl font-bold font-heading">Join or Create Room</h2> | ||
| </div> | ||
| </div> | ||
| <div class="w-full lg:w-1/3 bg-white p-6 rounded-2xl ml-auto mb-4"> | ||
| <div class="flex items-center gap-4 flex-wrap"> | ||
| <div class="w-10 h-10 rounded-full bg-orange-500 flex items-center justify-center"> | ||
| <span class="text-lg text-white font-bold font-heading">3</span> | ||
| </div> | ||
| <h2 class="text-xl font-bold font-heading">Start Learning</h2> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="w-full lg:w-1/3 rounded-t-2xl bg-white bg-opacity-30 h-6 ml-auto"></div> | ||
| </div> | ||
| </div> | ||
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| <section class="py-24"> | ||
| <div class="container mx-auto px-4"> | ||
| <h1 class="text-center text-3xl lg:text-5xl font-bold font-heading mb-4">How it works</h1> | ||
| <p class="text-center text-gray-600 mb-20">What steps do I need to take to join?</p> | ||
| <div class="bg-orange-50 overflow-hidden rounded-3xl pt-12 pl-6"> | ||
| <div class="flex flex-wrap -mx-4"> | ||
| <div class="w-full lg:w-1/2 p-4"> | ||
| <div class="pb-6 pr-6 lg:pr-20"> | ||
| <a href="#"> | ||
| <div class="p-6 border-b border-orange-100 hover:border-orange-500 transition duration-200"> | ||
| <div class="flex gap-3 flex-wrap"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none"> | ||
| <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17Z" fill="#FF7100"></path> | ||
| <path d="M12 7V17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7Z" fill="#FF7100"></path> | ||
| </svg> | ||
| <div class="flex-1"> | ||
| <h2 class="font-bold font-heading mb-3">Join or Create Room</h2> | ||
| <p class="text-gray-600 text-sm">Join ongoing rooms for focus and connection or create your study space.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| <a href="#"> | ||
| <div class="p-6 border-b border-orange-500"> | ||
| <div class="flex gap-3 flex-wrap"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none"> | ||
| <path d="M16.8 2H14.2C11 2 9 4 9 7.2V11.25H13.44L11.37 9.18C11.22 9.03 11.15 8.84 11.15 8.65C11.15 8.46 11.22 8.27 11.37 8.12C11.66 7.83 12.14 7.83 12.43 8.12L15.78 11.47C16.07 11.76 16.07 12.24 15.78 12.53L12.43 15.88C12.14 16.17 11.66 16.17 11.37 15.88C11.08 15.59 11.08 15.11 11.37 14.82L13.44 12.75H9V16.8C9 20 11 22 14.2 22H16.79C19.99 22 21.99 20 21.99 16.8V7.2C22 4 20 2 16.8 2Z" fill="#FF7100"></path> | ||
| <path d="M2.75 11.25C2.34 11.25 2 11.59 2 12C2 12.41 2.34 12.75 2.75 12.75H9V11.25H2.75Z" fill="#FF7100"></path> | ||
| </svg> | ||
| <div class="flex-1"> | ||
| <h2 class="font-bold font-heading mb-3">Create Account</h2> | ||
| <p class="text-gray-600 text-sm">Click "Sign Up," enter your name, email, a secure password, and hit "Create Account."</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| <a href="#"> | ||
| <div class="p-6 border-b border-orange-100 hover:border-orange-500 transition duration-200"> | ||
| <div class="flex gap-3 flex-wrap"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none"> | ||
| <path d="M22 4.84999V16.74C22 17.71 21.21 18.6 20.24 18.72L19.93 18.76C18.29 18.98 15.98 19.66 14.12 20.44C13.47 20.71 12.75 20.22 12.75 19.51V5.59999C12.75 5.22999 12.96 4.88999 13.29 4.70999C15.12 3.71999 17.89 2.83999 19.77 2.67999H19.83C21.03 2.67999 22 3.64999 22 4.84999Z" fill="#FF7100"></path> | ||
| <path d="M10.71 4.70999C8.87999 3.71999 6.10999 2.83999 4.22999 2.67999H4.15999C2.95999 2.67999 1.98999 3.64999 1.98999 4.84999V16.74C1.98999 17.71 2.77999 18.6 3.74999 18.72L4.05999 18.76C5.69999 18.98 8.00999 19.66 9.86999 20.44C10.52 20.71 11.24 20.22 11.24 19.51V5.59999C11.24 5.21999 11.04 4.88999 10.71 4.70999ZM4.99999 7.73999H7.24999C7.65999 7.73999 7.99999 8.07999 7.99999 8.48999C7.99999 8.90999 7.65999 9.23999 7.24999 9.23999H4.99999C4.58999 9.23999 4.24999 8.90999 4.24999 8.48999C4.24999 8.07999 4.58999 7.73999 4.99999 7.73999ZM7.99999 12.24H4.99999C4.58999 12.24 4.24999 11.91 4.24999 11.49C4.24999 11.08 4.58999 10.74 4.99999 10.74H7.99999C8.40999 10.74 8.74999 11.08 8.74999 11.49C8.74999 11.91 8.40999 12.24 7.99999 12.24Z" fill="#FF7100"></path> | ||
| </svg> | ||
| <div class="flex-1"> | ||
| <h2 class="font-bold font-heading mb-3">Start Learning</h2> | ||
| <p class="text-gray-600 text-sm">Now that you're all set up! Get ready to enhance your skills, all at your own pace.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="w-full lg:w-1/2 lg:pl-12 xl:pl-18"> | ||
| <div class="flex flex-col justify-end h-full"> | ||
| <img class="w-full" src="https://shuffle.dev/solstice-assets/images/how-it-works/picture-half-primary2.png" alt=""> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <section class="py-24"> | ||
| <div class="container mx-auto px-4"> | ||
| <h1 class="text-center text-3xl lg:text-5xl font-bold font-heading mb-4">How it works</h1> | ||
| <p class="text-center text-gray-600 mb-20">What steps do I need to take to join?</p> | ||
| <div class="flex flex-wrap mb-12"> | ||
| <div class="w-full lg:w-1/3"> | ||
| <a href="#"> | ||
| <div class="px-4 pt-2 pb-7 flex items-center flex-wrap justify-center gap-4 group border-b-4 border-gray-100 hover:border-orange-500 mb-4"> | ||
| <div class="bg-gray-100 group-hover:bg-orange-500 w-10 h-10 flex items-center justify-center rounded-xl text-white transition duration-200"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none"> | ||
| <path d="M16.8 2H14.2C11 2 9 4 9 7.2V11.25H13.44L11.37 9.18C11.22 9.03 11.15 8.84 11.15 8.65C11.15 8.46 11.22 8.27 11.37 8.12C11.66 7.83 12.14 7.83 12.43 8.12L15.78 11.47C16.07 11.76 16.07 12.24 15.78 12.53L12.43 15.88C12.14 16.17 11.66 16.17 11.37 15.88C11.08 15.59 11.08 15.11 11.37 14.82L13.44 12.75H9V16.8C9 20 11 22 14.2 22H16.79C19.99 22 21.99 20 21.99 16.8V7.2C22 4 20 2 16.8 2Z" fill="white"></path> | ||
| <path d="M2.75 11.25C2.34 11.25 2 11.59 2 12C2 12.41 2.34 12.75 2.75 12.75H9V11.25H2.75Z" fill="currentColor"></path> | ||
| </svg> | ||
| </div> | ||
| <p class="text-gray-400 text-lg font-semibold group-hover: group-hover:font-bold font-heading transition duration-200">Step I</p> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="w-full lg:w-1/3"> | ||
| <a href="#"> | ||
| <div class="px-4 pt-2 pb-7 flex items-center flex-wrap justify-center gap-4 group border-b-4 border-orange-500 mb-4"> | ||
| <div class="bg-orange-500 w-10 h-10 flex items-center justify-center rounded-xl text-white transition duration-200"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none"> | ||
| <path d="M14.73 5.86V2.5C14.73 2.22 14.51 2 14.23 2H9.77002C9.49002 2 9.27002 2.22 9.27002 2.5V5.86C9.27002 6.14 9.49002 6.36 9.77002 6.36H14.23C14.51 6.36 14.73 6.14 14.73 5.86Z" fill="currentColor"></path> | ||
| <path d="M7.24998 2.01997C4.68998 2.17997 2.93998 3.49997 2.28998 5.69997C2.18998 6.02997 2.42998 6.35997 2.76998 6.35997H7.26998C7.54998 6.35997 7.76998 6.13997 7.76998 5.85997V2.51997C7.76998 2.23997 7.52998 1.99997 7.24998 2.01997Z" fill="currentColor"></path> | ||
| <path d="M16.75 2.00996C19.31 2.16996 21.06 3.48996 21.71 5.68996C21.81 6.01996 21.57 6.34996 21.23 6.34996H16.73C16.45 6.34996 16.23 6.12996 16.23 5.84996V2.50996C16.23 2.22996 16.47 1.98996 16.75 2.00996Z" fill="currentColor"></path> | ||
| <path d="M22 15.7C22 15.69 21.99 15.68 21.98 15.67C21.94 15.61 21.89 15.55 21.84 15.5C21.83 15.49 21.82 15.47 21.81 15.46C21 14.56 19.81 14 18.5 14C17.24 14 16.09 14.52 15.27 15.36C14.48 16.17 14 17.28 14 18.5C14 19.34 14.24 20.14 14.65 20.82C14.87 21.19 15.15 21.53 15.47 21.81C15.49 21.82 15.5 21.83 15.51 21.84C15.56 21.89 15.61 21.93 15.67 21.98C15.67 21.98 15.67 21.98 15.68 21.98C15.69 21.99 15.7 22 15.71 22C16.46 22.63 17.43 23 18.5 23C20.14 23 21.57 22.12 22.35 20.82C22.58 20.43 22.76 20 22.87 19.55C22.96 19.21 23 18.86 23 18.5C23 17.44 22.63 16.46 22 15.7ZM20.18 19.23H19.25V20.2C19.25 20.61 18.91 20.95 18.5 20.95C18.09 20.95 17.75 20.61 17.75 20.2V19.23H16.82C16.41 19.23 16.07 18.89 16.07 18.48C16.07 18.07 16.41 17.73 16.82 17.73H17.75V16.84C17.75 16.43 18.09 16.09 18.5 16.09C18.91 16.09 19.25 16.43 19.25 16.84V17.73H20.18C20.59 17.73 20.93 18.07 20.93 18.48C20.93 18.89 20.6 19.23 20.18 19.23Z" fill="currentColor"></path> | ||
| <path d="M22 8.36011V12.7401C22 13.1101 21.61 13.3501 21.28 13.1801C20.44 12.7401 19.48 12.5001 18.5 12.5001C16.89 12.5001 15.32 13.1601 14.2 14.3101C13.1 15.4301 12.5 16.9201 12.5 18.5001C12.5 19.3101 12.82 20.3501 13.22 21.2201C13.38 21.5701 13.14 22.0001 12.75 22.0001H7.81C4.6 22.0001 2 19.4001 2 16.1901V8.36011C2 8.08011 2.22 7.86011 2.5 7.86011H21.5C21.78 7.86011 22 8.08011 22 8.36011Z" fill="currentColor"></path> | ||
| </svg> | ||
| </div> | ||
| <p class="text-lg font-bold font-heading transition duration-200">Step II</p> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="w-full lg:w-1/3"> | ||
| <a href="#"> | ||
| <div class="px-4 pt-2 pb-7 flex items-center flex-wrap justify-center gap-4 group border-b-4 border-gray-100 hover:border-orange-500 mb-4"> | ||
| <div class="bg-gray-100 group-hover:bg-orange-500 w-10 h-10 flex items-center justify-center rounded-xl text-white transition duration-200"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none"> | ||
| <path d="M22 4.84999V16.74C22 17.71 21.21 18.6 20.24 18.72L19.93 18.76C18.29 18.98 15.98 19.66 14.12 20.44C13.47 20.71 12.75 20.22 12.75 19.51V5.59999C12.75 5.22999 12.96 4.88999 13.29 4.70999C15.12 3.71999 17.89 2.83999 19.77 2.67999H19.83C21.03 2.67999 22 3.64999 22 4.84999Z" fill="white"></path> | ||
| <path d="M10.7102 4.70999C8.88023 3.71999 6.11023 2.83999 4.23023 2.67999H4.16023C2.96023 2.67999 1.99023 3.64999 1.99023 4.84999V16.74C1.99023 17.71 2.78023 18.6 3.75023 18.72L4.06023 18.76C5.70023 18.98 8.01023 19.66 9.87023 20.44C10.5202 20.71 11.2402 20.22 11.2402 19.51V5.59999C11.2402 5.21999 11.0402 4.88999 10.7102 4.70999ZM5.00023 7.73999H7.25023C7.66023 7.73999 8.00023 8.07999 8.00023 8.48999C8.00023 8.90999 7.66023 9.23999 7.25023 9.23999H5.00023C4.59023 9.23999 4.25023 8.90999 4.25023 8.48999C4.25023 8.07999 4.59023 7.73999 5.00023 7.73999ZM8.00023 12.24H5.00023C4.59023 12.24 4.25023 11.91 4.25023 11.49C4.25023 11.08 4.59023 10.74 5.00023 10.74H8.00023C8.41023 10.74 8.75023 11.08 8.75023 11.49C8.75023 11.91 8.41023 12.24 8.00023 12.24Z" fill="white"></path> | ||
| </svg> | ||
| </div> | ||
| <p class="text-gray-400 text-lg font-semibold group-hover: group-hover:font-bold font-heading transition duration-200">Step III</p> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="flex flex-wrap -mx-4"> | ||
| <div class="w-full lg:w-1/2 p-4"> | ||
| <div class="flex flex-col justify-center items-start h-full"> | ||
| <h2 class="text-3xl font-bold font-heading mb-6">Join or Create Room</h2> | ||
| <p class="text-gray-600 text-lg mb-10 max-w-md">Join existing and ongoing rooms for focus and connection or create your personalized study space.</p> | ||
| <a class="w-full sm:w-auto h-14 inline-flex items-center justify-center text-center py-4 px-6 rounded-full bg-orange-500 border border-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Sign up now</a> | ||
| </div> | ||
| </div> | ||
| <div class="w-full lg:w-1/2 p-4"> | ||
| <img class="w-full" src="https://shuffle.dev/solstice-assets/images/how-it-works/picture-half-primary.png" alt=""> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> |
Oops, something went wrong.