├── .github └── workflows │ └── build.yml ├── .gitignore ├── .idea ├── .gitignore ├── .name ├── inspectionProfiles │ └── Project_Default.xml ├── misc.xml └── vcs.xml ├── LICENSE ├── README.md ├── build.gradle.kts ├── gradle.properties ├── gradle ├── libs.versions.toml └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── readme-assets ├── main-section.png ├── our-values-section.png └── work-experience-section.png ├── settings.gradle.kts └── site ├── .gitignore ├── .kobweb ├── conf.yaml └── site │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── app.js │ ├── app.js.map │ ├── apple-touch-icon.png │ ├── ar │ ├── delete-account-instructions │ │ └── index.html │ ├── download-mobile-app │ │ └── index.html │ ├── index.html │ └── privacy-policy │ │ └── index.html │ ├── assets │ ├── images │ │ ├── about_image.webp │ │ ├── brands │ │ │ ├── caretium.webp │ │ │ ├── dirui_logo.webp │ │ │ ├── lifotronic_logo.webp │ │ │ ├── snibe_logo.webp │ │ │ └── urit_logo.webp │ │ ├── labs │ │ │ ├── medical_lab1.webp │ │ │ └── medical_lab2.webp │ │ ├── logo.webp │ │ └── mobile_app │ │ │ └── qr_code.webp │ └── svg │ │ ├── background.svg │ │ ├── main_image.svg │ │ ├── mobile_development1.svg │ │ └── waves │ │ ├── wave_1.svg │ │ ├── wave_2.svg │ │ ├── wave_3.svg │ │ ├── wave_4.svg │ │ └── wave_5.svg │ ├── delete-account-instructions │ └── index.html │ ├── download-mobile-app │ └── index.html │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── index.html │ ├── privacy-policy │ └── index.html │ ├── site.webmanifest │ └── sitemap.xml ├── build.gradle.kts └── src ├── jsMain ├── kotlin │ └── net │ │ └── freshplatform │ │ └── alrayada_web │ │ ├── AppEntry.kt │ │ ├── components │ │ ├── AppLogo.kt │ │ ├── BackToTopButton.kt │ │ ├── CheckIndicator.kt │ │ ├── CircularProgressIndicator.kt │ │ ├── LineStroke.kt │ │ ├── NavigationIcon.kt │ │ ├── SectionTitle.kt │ │ ├── core │ │ │ ├── Button.kt │ │ │ ├── Center.kt │ │ │ └── MyImage.kt │ │ ├── fa │ │ │ ├── Fa.kt │ │ │ └── FaIcons.kt │ │ └── stars │ │ │ ├── RatingBar.kt │ │ │ └── StarIcon.kt │ │ ├── core │ │ ├── data │ │ │ └── StringRes.kt │ │ ├── router │ │ │ └── Routes.kt │ │ └── services │ │ │ └── localization │ │ │ ├── ComposeLocalization.kt │ │ │ ├── Local.kt │ │ │ ├── Localization.kt │ │ │ ├── LocalizationImpl.kt │ │ │ └── LocalizationService.kt │ │ ├── js │ │ └── Uri.kt │ │ ├── models │ │ ├── HomePageSections.kt │ │ ├── NavigationLink.kt │ │ ├── SocialMediaLink.kt │ │ └── ThemeColors.kt │ │ ├── pages │ │ ├── Index.kt │ │ ├── ar │ │ │ ├── Index.kt │ │ │ ├── deleteAccountInstructions │ │ │ │ └── Index.kt │ │ │ ├── downloadMobileApp │ │ │ │ └── Index.kt │ │ │ └── privacyPolicy │ │ │ │ └── Index.kt │ │ ├── deleteAccountInstructions │ │ │ └── Index.kt │ │ ├── downloadMobileApp │ │ │ └── Index.kt │ │ └── privacyPolicy │ │ │ └── Index.kt │ │ ├── sections │ │ ├── about │ │ │ ├── AboutSection.kt │ │ │ ├── Styles.kt │ │ │ ├── components │ │ │ │ └── SkillBar.kt │ │ │ └── models │ │ │ │ └── Skill.kt │ │ ├── achievement │ │ │ ├── AchievementSection.kt │ │ │ ├── componenets │ │ │ │ └── AchievementCard.kt │ │ │ └── models │ │ │ │ └── Achievement.kt │ │ ├── assistance │ │ │ ├── AssistanceSection.kt │ │ │ └── componenets │ │ │ │ └── AssistanceHeaderContent.kt │ │ ├── contact │ │ │ ├── ContactSection.kt │ │ │ └── components │ │ │ │ ├── ContactForm.kt │ │ │ │ └── TextInput.kt │ │ ├── devices │ │ │ ├── DevicesSection.kt │ │ │ ├── componenets │ │ │ │ └── DeviceItem.kt │ │ │ └── models │ │ │ │ └── Device.kt │ │ ├── experience │ │ │ ├── ExperienceSection.kt │ │ │ ├── componenets │ │ │ │ └── ExperienceCard.kt │ │ │ └── models │ │ │ │ └── Experience.kt │ │ ├── footer │ │ │ └── FooterSection.kt │ │ ├── location │ │ │ ├── LocationSection.kt │ │ │ ├── components │ │ │ │ ├── ContactUsInformation.kt │ │ │ │ └── IframeMap.kt │ │ │ └── models │ │ │ │ └── ContactUsInfo.kt │ │ ├── main │ │ │ ├── MainSection.kt │ │ │ └── compoments │ │ │ │ ├── Header.kt │ │ │ │ ├── MobileNavigation.kt │ │ │ │ └── SocialBar.kt │ │ ├── mobile_app │ │ │ ├── MobileAppSection.kt │ │ │ ├── componenets │ │ │ │ ├── DownloadInfo.kt │ │ │ │ └── DownloadMobileAppButton.kt │ │ │ └── models │ │ │ │ └── MobileApp.kt │ │ ├── objective │ │ │ ├── ObjectiveSection.kt │ │ │ ├── components │ │ │ │ └── ObjectiveCard.kt │ │ │ └── models │ │ │ │ └── Objective.kt │ │ ├── our_customers │ │ │ ├── OurCustomersSection.kt │ │ │ ├── componenets │ │ │ │ └── OurCustomerItem.kt │ │ │ └── models │ │ │ │ └── OurCustomer.kt │ │ ├── our_suppliers │ │ │ ├── OurSuppliersSection.kt │ │ │ ├── componenets │ │ │ │ └── OurSupplierItem.kt │ │ │ └── models │ │ │ │ └── Supplier.kt │ │ ├── our_values │ │ │ ├── OurValuesSection.kt │ │ │ ├── components │ │ │ │ └── OurValueItem.kt │ │ │ └── models │ │ │ │ └── OurValueModel.kt │ │ ├── portfolio │ │ │ ├── PortfolioSection.kt │ │ │ ├── Styles.kt │ │ │ ├── components │ │ │ │ └── PortfolioCard.kt │ │ │ └── models │ │ │ │ └── Portfolio.kt │ │ ├── products │ │ │ ├── ProductsSection.kt │ │ │ ├── components │ │ │ │ └── ProductCard.kt │ │ │ └── models │ │ │ │ └── Product.kt │ │ ├── products_old │ │ │ ├── ProductsSection.kt │ │ │ ├── components │ │ │ │ ├── ProductCard.kt │ │ │ │ └── ProductsCategory.kt │ │ │ └── models │ │ │ │ └── Product.kt │ │ ├── quality_policy │ │ │ ├── QualityPolicySection.kt │ │ │ ├── componenets │ │ │ │ └── QualityPolicyCard.kt │ │ │ └── models │ │ │ │ └── QualityPolicy.kt │ │ ├── service │ │ │ ├── ServiceSection.kt │ │ │ ├── Styles.kt │ │ │ ├── components │ │ │ │ └── ServiceCard.kt │ │ │ └── models │ │ │ │ └── Service.kt │ │ └── testimonial │ │ │ ├── TestimonialSection.kt │ │ │ ├── componenets │ │ │ └── TestimonialCard.kt │ │ │ └── models │ │ │ └── Testimonial.kt │ │ ├── styles │ │ ├── ButtonStyles.kt │ │ ├── SelectStyles.kt │ │ └── TextStyles.kt │ │ └── utils │ │ ├── Animations.kt │ │ ├── DateUtils.kt │ │ ├── DocumentUtils.kt │ │ ├── Viewport.kt │ │ ├── constants │ │ ├── Constants.kt │ │ ├── PublicRes.kt │ │ └── SectionsConstants.kt │ │ └── extensions │ │ ├── ModifierExtensions.kt │ │ └── StringExtensions.kt └── resources │ └── public │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── assets │ ├── images │ │ ├── about_image.webp │ │ ├── brands │ │ │ ├── caretium.webp │ │ │ ├── dirui_logo.webp │ │ │ ├── lifotronic_logo.webp │ │ │ ├── snibe_logo.webp │ │ │ └── urit_logo.webp │ │ ├── labs │ │ │ ├── medical_lab1.webp │ │ │ └── medical_lab2.webp │ │ ├── logo.webp │ │ └── mobile_app │ │ │ └── qr_code.webp │ └── svg │ │ ├── background.svg │ │ ├── main_image.svg │ │ ├── mobile_development1.svg │ │ └── waves │ │ ├── wave_1.svg │ │ ├── wave_2.svg │ │ ├── wave_3.svg │ │ ├── wave_4.svg │ │ └── wave_5.svg │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── site.webmanifest │ └── sitemap.xml └── jsTest └── kotlin └── EncodeURIComponentTest.kt /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: 🏗️ Build 2 | 3 | on: 4 | push: 5 | branches: [ main ] 6 | pull_request: 7 | branches: [ main ] 8 | jobs: 9 | build: 10 | name: 🧱️ Build and Test 11 | runs-on: ubuntu-latest 12 | timeout-minutes: 5 13 | 14 | steps: 15 | - name: 📥 Clone Repository 16 | uses: actions/checkout@v4 17 | 18 | - name: ☕ Setup JDK 17 19 | uses: actions/setup-java@v4 20 | with: 21 | java-version: 17 22 | distribution: 'adopt' 23 | # https://github.com/gradle/actions/blob/main/docs/setup-gradle.md#incompatibility-with-other-caching-mechanisms 24 | 25 | - name: 🛠️ Setup Gradle 26 | uses: gradle/actions/setup-gradle@v4 27 | with: 28 | validate-wrappers: true 29 | cache-disabled: false 30 | 31 | # Without Test 🧪 32 | - name: 📥 Build 33 | run: ./gradlew build --stacktrace -x jsTest -x jsBrowserTest 34 | 35 | - name: 🚀 Deploy 36 | if: github.ref == 'refs/heads/main' 37 | env: 38 | deploy_url: ${{ secrets.RENDER_DEPLOY_HOOK_URL }} 39 | run: | 40 | curl "$deploy_url" 41 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # General ignores 2 | .DS_Store 3 | build 4 | out 5 | kotlin-js-store 6 | 7 | # IntelliJ ignores 8 | *.iml 9 | /*.ipr 10 | 11 | /.idea/caches 12 | /.idea/libraries 13 | /.idea/modules.xml 14 | /.idea/workspace.xml 15 | /.idea/gradle.xml 16 | /.idea/navEditor.xml 17 | /.idea/assetWizardSettings.xml 18 | /.idea/artifacts 19 | /.idea/compiler.xml 20 | /.idea/jarRepositories.xml 21 | /.idea/*.iml 22 | /.idea/modules 23 | /.idea/libraries-with-intellij-classes.xml 24 | 25 | # Gradle ignores 26 | .gradle 27 | 28 | .kotlin 29 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | -------------------------------------------------------------------------------- /.idea/.name: -------------------------------------------------------------------------------- 1 | AlrayadaWeb -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Fresh Kernel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🌐 Alrayada Web 2 | 3 | A production landing page for [**Alrayada Alarabiah**](https://alrayada.net/) 4 | built using [Kobweb](https://kobweb.varabyte.com/), 5 | a [Kotlin](https://kotlinlang.org/) web framework 6 | built on [Compose HTML](https://github.com/JetBrains/compose-multiplatform#compose-html) 7 | that targets [Kotlin/JS](https://kotlinlang.org/docs/js-overview.html). 8 | 9 | --- 10 | 11 |

12 | A screenshot of the main section on the website 13 | A screenshot of our values section on the website 14 |    15 | A screenshot of the work experience section on the website 16 |

17 | 18 | ## 📚 Table of contents 19 | 20 | - [▶️ Run](#-run) 21 | - [📋 Development Prerequisites](#-development-prerequisites) 22 | - [📦 Export](#-export) 23 | - [🐞 Known issues](#-known-issues) 24 | - [🍴Forking Guidelines](#forking-guidelines) 25 | - [📜 Acknowledgments](#-acknowledgments) 26 | 27 | ## 📋 Development Prerequisites 28 | 29 | * [Kobweb CLI](https://github.com/varabyte/kobweb#install-the-kobweb-binary). 30 | * JDK 11 or newer versions. 31 | Suggests [Adoptium](https://adoptium.net/) 32 | or [Amazon Corretto](https://aws.amazon.com/corretto/). 33 | * Suggests [IntelliJ IDEA Community Edition](https://www.jetbrains.com/idea/) installed 34 | using [JetBrains Toolbox](https://www.jetbrains.com/toolbox-app/). 35 | 36 | ## ▶️ Run 37 | 38 | **To run in development mode**: 39 | 40 | ```shell 41 | $ git clone --depth 1 https://github.com/FreshKernel/alrayada-web.git 42 | $ (cd alrayada-web && kobweb run -p site --layout static) 43 | ``` 44 | 45 | For more details, 46 | refer to [Kobweb static layout vs full stack sites](https://github.com/varabyte/kobweb#static-layout-vs-full-stack-sites). 47 | 48 | ## 📦 Export 49 | 50 | **To export the site for production**: 51 | 52 | ```shell 53 | $ cd site # Inside the repo root directory 54 | $ kobweb export --layout static # Output in site/.kobweb/site 55 | $ kobweb run --layout static --env prod # To run the exported site 56 | ``` 57 | 58 | For more details, refer to [Kobweb exporting and running](https://github.com/varabyte/kobweb#exporting-and-running). 59 | 60 | ## 🐞 Known issues 61 | 62 | * Navigate to the privacy policy page using the menu, scroll to the very end, a `NullPointerException` will be thrown 63 | from the sections of previous page if the animations are enabled, specifically from the `ObserveViewportEntered()`, 64 | all listeners and events should be disposed when no longer needed. 65 | * Rtl isn't supported yet, currently not a priority. 66 | * Open the localized page URL (`/en`), navigate to the privacy policy page, refresh the page and will load the site 67 | default language. 68 | 69 | ## 🍴Forking Guidelines 70 | 71 | This information is for internal use and should be replaced when forking or adapting this project. 72 | 73 | * The details in the 74 | file [SectionsConstants.kt](./site/src/jsMain/kotlin/net/freshplatform/alrayada_web/utils/constants/SectionsConstants.kt) 75 | especially the `FORM_URL`. 76 | * The images related to the brand are in the [assets](./site/src/jsMain/resources/public/assets) directory. 77 | * The naming in: 78 | * [site.webmanifest](./site/src/jsMain/resources/public/site.webmanifest), [sitemap.xml](./site/src/jsMain/resources/public/sitemap.xml). 79 | * The domain `alrayada.net`. 80 | * In the [site's source code](site/src/jsMain/kotlin/net/freshplatform/alrayada_web). 81 | * In the [site's build.gradle.kts](./site/build.gradle.kts). 82 | 83 | ## 📜 Acknowledgments 84 | 85 | * [Kobweb](https://kobweb.varabyte.com/) - For providing essential tools for building web applications. 86 | * [Jetbrains](https://www.jetbrains.com/) - For their development tools, 87 | including [IntelliJ IDEA Community Edition](https://github.com/JetBrains/intellij-community) 88 | and [Kotlin](https://kotlinlang.org/). 89 | * [FontAwesome](https://fontawesome.com/) - For the awesome icons. 90 | * [Tanbir Ahmed](https://www.behance.net/gallery/90079519/Resume-Landing-page/modules/520796495) - For the design 91 | inspiration. 92 | -------------------------------------------------------------------------------- /build.gradle.kts: -------------------------------------------------------------------------------- 1 | subprojects { 2 | repositories { 3 | mavenCentral() 4 | maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") 5 | google() 6 | maven("https://us-central1-maven.pkg.dev/varabyte-repos/public") 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /gradle.properties: -------------------------------------------------------------------------------- 1 | kotlin.code.style=official 2 | org.gradle.caching=true 3 | org.gradle.configuration-cache=true 4 | -------------------------------------------------------------------------------- /gradle/libs.versions.toml: -------------------------------------------------------------------------------- 1 | [versions] 2 | jetbrains-compose = "1.7.1" 3 | kobweb = "0.19.3" 4 | kotlin = "2.0.20" 5 | 6 | [libraries] 7 | compose-html-core = { module = "org.jetbrains.compose.html:html-core", version.ref = "jetbrains-compose" } 8 | compose-runtime = { module = "org.jetbrains.compose.runtime:runtime", version.ref = "jetbrains-compose" } 9 | kobweb-core = { module = "com.varabyte.kobweb:kobweb-core ", version.ref = "kobweb" } 10 | kobweb-silk = { module = "com.varabyte.kobweb:kobweb-silk", version.ref = "kobweb" } 11 | silk-icons-fa = { module = "com.varabyte.kobwebx:silk-icons-fa", version.ref = "kobweb" } 12 | silk-icons-mdi = { module = "com.varabyte.kobwebx:silk-icons-mdi", version.ref = "kobweb" } 13 | 14 | [plugins] 15 | compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" } 16 | kotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" } 17 | kobweb-application = { id = "com.varabyte.kobweb.application", version.ref = "kobweb" } 18 | -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.9-bin.zip 4 | networkTimeout=10000 5 | validateDistributionUrl=true 6 | zipStoreBase=GRADLE_USER_HOME 7 | zipStorePath=wrapper/dists 8 | -------------------------------------------------------------------------------- /gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | @rem SPDX-License-Identifier: Apache-2.0 17 | @rem 18 | 19 | @if "%DEBUG%"=="" @echo off 20 | @rem ########################################################################## 21 | @rem 22 | @rem Gradle startup script for Windows 23 | @rem 24 | @rem ########################################################################## 25 | 26 | @rem Set local scope for the variables with windows NT shell 27 | if "%OS%"=="Windows_NT" setlocal 28 | 29 | set DIRNAME=%~dp0 30 | if "%DIRNAME%"=="" set DIRNAME=. 31 | @rem This is normally unused 32 | set APP_BASE_NAME=%~n0 33 | set APP_HOME=%DIRNAME% 34 | 35 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 36 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 37 | 38 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 39 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 40 | 41 | @rem Find java.exe 42 | if defined JAVA_HOME goto findJavaFromJavaHome 43 | 44 | set JAVA_EXE=java.exe 45 | %JAVA_EXE% -version >NUL 2>&1 46 | if %ERRORLEVEL% equ 0 goto execute 47 | 48 | echo. 1>&2 49 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2 50 | echo. 1>&2 51 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2 52 | echo location of your Java installation. 1>&2 53 | 54 | goto fail 55 | 56 | :findJavaFromJavaHome 57 | set JAVA_HOME=%JAVA_HOME:"=% 58 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 59 | 60 | if exist "%JAVA_EXE%" goto execute 61 | 62 | echo. 1>&2 63 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2 64 | echo. 1>&2 65 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2 66 | echo location of your Java installation. 1>&2 67 | 68 | goto fail 69 | 70 | :execute 71 | @rem Setup the command line 72 | 73 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 74 | 75 | 76 | @rem Execute Gradle 77 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 78 | 79 | :end 80 | @rem End local scope for the variables with windows NT shell 81 | if %ERRORLEVEL% equ 0 goto mainEnd 82 | 83 | :fail 84 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 85 | rem the _cmd.exe /c_ return code! 86 | set EXIT_CODE=%ERRORLEVEL% 87 | if %EXIT_CODE% equ 0 set EXIT_CODE=1 88 | if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE% 89 | exit /b %EXIT_CODE% 90 | 91 | :mainEnd 92 | if "%OS%"=="Windows_NT" endlocal 93 | 94 | :omega 95 | -------------------------------------------------------------------------------- /readme-assets/main-section.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/readme-assets/main-section.png -------------------------------------------------------------------------------- /readme-assets/our-values-section.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/readme-assets/our-values-section.png -------------------------------------------------------------------------------- /readme-assets/work-experience-section.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/readme-assets/work-experience-section.png -------------------------------------------------------------------------------- /settings.gradle.kts: -------------------------------------------------------------------------------- 1 | pluginManagement { 2 | repositories { 3 | gradlePluginPortal() 4 | maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") 5 | maven("https://us-central1-maven.pkg.dev/varabyte-repos/public") 6 | } 7 | } 8 | 9 | rootProject.name = "AlrayadaWeb" 10 | 11 | include(":site") 12 | -------------------------------------------------------------------------------- /site/.gitignore: -------------------------------------------------------------------------------- 1 | # Kobweb ignores 2 | .kobweb/* 3 | !.kobweb/conf.yaml 4 | # Generated static website for production 5 | # Not the best solution but some web hosting 6 | # Don't have java installed 7 | !.kobweb/site -------------------------------------------------------------------------------- /site/.kobweb/conf.yaml: -------------------------------------------------------------------------------- 1 | site: 2 | title: "Alrayada" 3 | 4 | server: 5 | files: 6 | dev: 7 | contentRoot: "build/processedResources/js/main/public" 8 | script: "build/kotlin-webpack/js/developmentExecutable/app.js" 9 | api: "build/libs/app.jar" 10 | prod: 11 | script: "build/kotlin-webpack/js/productionExecutable/app.js" 12 | siteRoot: ".kobweb/site" 13 | 14 | port: 8080 -------------------------------------------------------------------------------- /site/.kobweb/site/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/android-chrome-192x192.png -------------------------------------------------------------------------------- /site/.kobweb/site/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/android-chrome-512x512.png -------------------------------------------------------------------------------- /site/.kobweb/site/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/apple-touch-icon.png -------------------------------------------------------------------------------- /site/.kobweb/site/assets/images/about_image.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/assets/images/about_image.webp -------------------------------------------------------------------------------- /site/.kobweb/site/assets/images/brands/caretium.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/assets/images/brands/caretium.webp -------------------------------------------------------------------------------- /site/.kobweb/site/assets/images/brands/dirui_logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/assets/images/brands/dirui_logo.webp -------------------------------------------------------------------------------- /site/.kobweb/site/assets/images/brands/lifotronic_logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/assets/images/brands/lifotronic_logo.webp -------------------------------------------------------------------------------- /site/.kobweb/site/assets/images/brands/snibe_logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/assets/images/brands/snibe_logo.webp -------------------------------------------------------------------------------- /site/.kobweb/site/assets/images/brands/urit_logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/assets/images/brands/urit_logo.webp -------------------------------------------------------------------------------- /site/.kobweb/site/assets/images/labs/medical_lab1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/assets/images/labs/medical_lab1.webp -------------------------------------------------------------------------------- /site/.kobweb/site/assets/images/labs/medical_lab2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/assets/images/labs/medical_lab2.webp -------------------------------------------------------------------------------- /site/.kobweb/site/assets/images/logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/assets/images/logo.webp -------------------------------------------------------------------------------- /site/.kobweb/site/assets/images/mobile_app/qr_code.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/assets/images/mobile_app/qr_code.webp -------------------------------------------------------------------------------- /site/.kobweb/site/assets/svg/background.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /site/.kobweb/site/assets/svg/waves/wave_1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /site/.kobweb/site/assets/svg/waves/wave_2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /site/.kobweb/site/assets/svg/waves/wave_3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /site/.kobweb/site/assets/svg/waves/wave_4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /site/.kobweb/site/assets/svg/waves/wave_5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /site/.kobweb/site/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/favicon-16x16.png -------------------------------------------------------------------------------- /site/.kobweb/site/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/favicon-32x32.png -------------------------------------------------------------------------------- /site/.kobweb/site/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/.kobweb/site/favicon.ico -------------------------------------------------------------------------------- /site/.kobweb/site/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"Alrayada Alarabiah","short_name":"Alrayada","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /site/.kobweb/site/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | https://alrayada.net/ 5 | 2023-10-15T12:57:19+00:00 6 | 1.00 7 | 11 | 15 | 19 | 20 | 21 | https://alrayada.net/privacy-policy 22 | 2023-10-15T12:57:20+00:00 23 | 0.80 24 | 28 | 32 | 36 | 37 | 38 | https://alrayada.net/download-mobile-app 39 | 2023-10-15T12:57:20+00:00 40 | 0.80 41 | 45 | 49 | 53 | 54 | -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/AppEntry.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.runtime.LaunchedEffect 5 | import com.varabyte.kobweb.compose.css.Overflow 6 | import com.varabyte.kobweb.compose.css.ScrollBehavior 7 | import com.varabyte.kobweb.compose.ui.Modifier 8 | import com.varabyte.kobweb.compose.ui.modifiers.backgroundColor 9 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth 10 | import com.varabyte.kobweb.compose.ui.modifiers.fontFamily 11 | import com.varabyte.kobweb.compose.ui.modifiers.height 12 | import com.varabyte.kobweb.compose.ui.modifiers.minHeight 13 | import com.varabyte.kobweb.compose.ui.modifiers.overflow 14 | import com.varabyte.kobweb.compose.ui.modifiers.rotate 15 | import com.varabyte.kobweb.compose.ui.modifiers.scrollBehavior 16 | import com.varabyte.kobweb.compose.ui.modifiers.width 17 | import com.varabyte.kobweb.core.App 18 | import com.varabyte.kobweb.silk.SilkApp 19 | import com.varabyte.kobweb.silk.components.layout.Surface 20 | import com.varabyte.kobweb.silk.init.InitSilk 21 | import com.varabyte.kobweb.silk.init.InitSilkContext 22 | import com.varabyte.kobweb.silk.init.registerStyleBase 23 | import com.varabyte.kobweb.silk.style.common.SmoothColorStyle 24 | import com.varabyte.kobweb.silk.style.toModifier 25 | import net.freshplatform.alrayada_web.core.data.StringRes 26 | import net.freshplatform.alrayada_web.core.services.localization.getStringResource 27 | import net.freshplatform.alrayada_web.utils.updateDocument 28 | import org.jetbrains.compose.web.css.CSSMediaQuery 29 | import org.jetbrains.compose.web.css.StylePropertyValue 30 | import org.jetbrains.compose.web.css.deg 31 | import org.jetbrains.compose.web.css.px 32 | import org.jetbrains.compose.web.css.rgba 33 | import org.jetbrains.compose.web.css.vh 34 | 35 | @InitSilk 36 | fun initSilk(ctx: InitSilkContext) { 37 | 38 | ctx.stylesheet.apply { 39 | registerKeyframes("spin") { 40 | from { Modifier.rotate(0.deg) } 41 | to { Modifier.rotate(360.deg) } 42 | } 43 | registerStyleBase("body") { 44 | Modifier.fontFamily( 45 | "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", 46 | "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif" 47 | ) 48 | } 49 | registerStyleBase(".visible") { 50 | Modifier 51 | .height(300.px) 52 | .fillMaxWidth() 53 | .backgroundColor(rgba(128, 128, 128, 0.5)) 54 | } 55 | registerStyleBase(".hidden") { 56 | Modifier 57 | .height(0.px) 58 | .width(0.px) 59 | .overflow(Overflow.Hidden) 60 | .backgroundColor(rgba(128, 128, 128, 0)) 61 | } 62 | } 63 | } 64 | 65 | // https://github.com/varabyte/kobweb/releases/tag/v0.19.2 66 | @InitSilk 67 | fun enableSiteWideSmoothScrolling(ctx: InitSilkContext) = ctx.stylesheet.apply { 68 | registerStyle("html") { 69 | cssRule(CSSMediaQuery.MediaFeature("prefers-reduced-motion", StylePropertyValue("no-preference"))) { 70 | Modifier.scrollBehavior(ScrollBehavior.Smooth) 71 | } 72 | } 73 | } 74 | 75 | @App 76 | @Composable 77 | fun AppEntry(content: @Composable () -> Unit) { 78 | SilkApp { 79 | LaunchedEffect(Unit) { 80 | updateDocument { 81 | title = getStringResource(StringRes.AlrayadaAlarabiah) 82 | description = getStringResource(StringRes.WebsiteDesc) 83 | } 84 | } 85 | 86 | Surface(SmoothColorStyle.toModifier().minHeight(100.vh)) { 87 | content() 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/components/AppLogo.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.components 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.core.MyImage 5 | import net.freshplatform.alrayada_web.core.data.StringRes 6 | import net.freshplatform.alrayada_web.core.services.localization.stringResource 7 | import net.freshplatform.alrayada_web.utils.constants.PublicRes 8 | import com.varabyte.kobweb.compose.ui.Modifier 9 | import com.varabyte.kobweb.compose.ui.modifiers.maxSize 10 | import org.jetbrains.compose.web.css.px 11 | 12 | @Composable 13 | fun AppLogo(modifier: Modifier = Modifier, lazyLoading: Boolean = true) { 14 | MyImage( 15 | modifier = Modifier 16 | .maxSize(250.px) 17 | .then(modifier), 18 | src = PublicRes.Assets.Images.LOGO, 19 | contentDescription = stringResource(StringRes.AlrayadaAlarabiah), 20 | lazyLoading = lazyLoading 21 | ) 22 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/components/BackToTopButton.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.components 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.runtime.LaunchedEffect 5 | import androidx.compose.runtime.getValue 6 | import androidx.compose.runtime.mutableStateOf 7 | import androidx.compose.runtime.remember 8 | import androidx.compose.runtime.setValue 9 | import com.varabyte.kobweb.compose.css.Cursor 10 | import com.varabyte.kobweb.compose.css.FontWeight 11 | import com.varabyte.kobweb.compose.css.Transition 12 | import com.varabyte.kobweb.compose.ui.Modifier 13 | import com.varabyte.kobweb.compose.ui.graphics.Colors 14 | import com.varabyte.kobweb.compose.ui.modifiers.backgroundColor 15 | import com.varabyte.kobweb.compose.ui.modifiers.borderRadius 16 | import com.varabyte.kobweb.compose.ui.modifiers.bottom 17 | import com.varabyte.kobweb.compose.ui.modifiers.color 18 | import com.varabyte.kobweb.compose.ui.modifiers.cursor 19 | import com.varabyte.kobweb.compose.ui.modifiers.fontSize 20 | import com.varabyte.kobweb.compose.ui.modifiers.fontWeight 21 | import com.varabyte.kobweb.compose.ui.modifiers.onClick 22 | import com.varabyte.kobweb.compose.ui.modifiers.padding 23 | import com.varabyte.kobweb.compose.ui.modifiers.position 24 | import com.varabyte.kobweb.compose.ui.modifiers.right 25 | import com.varabyte.kobweb.compose.ui.modifiers.rotate 26 | import com.varabyte.kobweb.compose.ui.modifiers.transition 27 | import com.varabyte.kobweb.compose.ui.styleModifier 28 | import com.varabyte.kobweb.compose.ui.toAttrs 29 | import com.varabyte.kobweb.silk.style.CssStyle 30 | import com.varabyte.kobweb.silk.style.selectors.hover 31 | import com.varabyte.kobweb.silk.style.toModifier 32 | import kotlinx.browser.document 33 | import kotlinx.browser.window 34 | import net.freshplatform.alrayada_web.components.fa.FaArrowUp 35 | import net.freshplatform.alrayada_web.components.fa.IconSize 36 | import net.freshplatform.alrayada_web.models.ThemeColors 37 | import org.jetbrains.compose.web.css.Position 38 | import org.jetbrains.compose.web.css.deg 39 | import org.jetbrains.compose.web.css.ms 40 | import org.jetbrains.compose.web.css.percent 41 | import org.jetbrains.compose.web.css.px 42 | import org.jetbrains.compose.web.dom.Span 43 | import org.w3c.dom.SMOOTH 44 | import org.w3c.dom.ScrollBehavior 45 | import org.w3c.dom.ScrollToOptions 46 | 47 | val BackToTopButtonStyle = CssStyle { 48 | base { 49 | Modifier.rotate(a = 180.deg) 50 | .backgroundColor(ThemeColors.Primary.colorValue) 51 | .transition( 52 | Transition.of(property = "rotate", duration = 200.ms), 53 | Transition.of(property = "background-color", duration = 150.ms) 54 | ) 55 | } 56 | hover { 57 | Modifier.rotate(a = 0.deg) 58 | .backgroundColor(ThemeColors.Secondary.colorValue) 59 | } 60 | } 61 | 62 | @Composable 63 | fun BackToTopButton() { 64 | var scrollTop: Double? by remember { mutableStateOf(null) } 65 | 66 | LaunchedEffect(Unit) { 67 | window.addEventListener(type = "scroll", callback = { 68 | scrollTop = document.documentElement?.scrollTop ?: 0.0 69 | }) 70 | } 71 | 72 | val shouldVisible = (scrollTop ?: 0.0) > 500 73 | 74 | Span( 75 | attrs = BackToTopButtonStyle 76 | .toModifier() 77 | .position(Position.Fixed) 78 | .styleModifier { 79 | property("transition", "0.1s") 80 | } 81 | .bottom(15.px) 82 | .right(if (shouldVisible) 20.px else (-55).px) 83 | .fontWeight(FontWeight.Bold) 84 | .fontSize(14.px) 85 | .padding(20.px) 86 | .cursor(Cursor.Pointer) 87 | .borderRadius(20.percent) 88 | .onClick { 89 | window.scrollTo( 90 | options = ScrollToOptions( 91 | top = 0.0, 92 | behavior = ScrollBehavior.SMOOTH 93 | ) 94 | ) 95 | } 96 | .toAttrs() 97 | ) { 98 | FaArrowUp( 99 | modifier = Modifier.color(Colors.White), 100 | size = IconSize.LG 101 | ) 102 | } 103 | 104 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/components/CheckIndicator.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.components 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.fa.FaCheck 5 | import net.freshplatform.alrayada_web.components.fa.IconSize 6 | import net.freshplatform.alrayada_web.models.ThemeColors 7 | import com.varabyte.kobweb.compose.css.Transition 8 | import com.varabyte.kobweb.compose.foundation.layout.Box 9 | import com.varabyte.kobweb.compose.ui.Modifier 10 | import com.varabyte.kobweb.compose.ui.modifiers.* 11 | import com.varabyte.kobweb.silk.style.CssStyle 12 | import com.varabyte.kobweb.silk.style.selectors.hover 13 | import com.varabyte.kobweb.silk.style.toModifier 14 | import org.jetbrains.compose.web.css.Color 15 | import org.jetbrains.compose.web.css.LineStyle 16 | import org.jetbrains.compose.web.css.ms 17 | import org.jetbrains.compose.web.css.px 18 | 19 | val CheckIndicatorStyle = CssStyle { 20 | val borderColor = Color("#7F7F7F") 21 | base { 22 | Modifier 23 | .color(ThemeColors.Primary.colorValue) 24 | .border(width = 2.px, style = LineStyle.Solid, color = borderColor) 25 | .transition( 26 | Transition.of( 27 | property = "color", 28 | duration = 200.ms, 29 | ), 30 | Transition.of( 31 | property = "border-color", 32 | duration = 200.ms, 33 | ), 34 | Transition.of( 35 | property = "border-width", 36 | duration = 200.ms, 37 | ), 38 | ) 39 | } 40 | hover { 41 | Modifier 42 | .color(borderColor) 43 | .borderRadius(r = 50.px) 44 | .border(width = 4.px, style = LineStyle.Solid, color = ThemeColors.Primary.colorValue) 45 | } 46 | } 47 | 48 | @Composable 49 | fun CheckIndicator( 50 | modifier: Modifier = Modifier, 51 | iconSize: IconSize = IconSize.X1, 52 | ) { 53 | Box( 54 | modifier = CheckIndicatorStyle 55 | .toModifier() 56 | .padding(3.px) 57 | .borderRadius(r = 2.px) 58 | .then(modifier) 59 | ) { 60 | FaCheck( 61 | size = iconSize 62 | ) 63 | } 64 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/components/CircularProgressIndicator.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.components 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.varabyte.kobweb.compose.css.Animation 5 | import net.freshplatform.alrayada_web.models.ThemeColors 6 | import com.varabyte.kobweb.compose.css.AnimationIterationCount 7 | import com.varabyte.kobweb.compose.ui.Modifier 8 | import com.varabyte.kobweb.compose.ui.modifiers.* 9 | import com.varabyte.kobweb.compose.ui.toAttrs 10 | import org.jetbrains.compose.web.css.* 11 | import org.jetbrains.compose.web.dom.Div 12 | 13 | @Composable 14 | fun CircularProgressIndicator(modifier: Modifier = Modifier) { 15 | Div( 16 | attrs = Modifier 17 | .size(100.px) 18 | .position(Position.Relative) 19 | .then(modifier) 20 | .toAttrs() 21 | ) { 22 | 23 | 24 | Div( 25 | attrs = Modifier 26 | .fillMaxSize() 27 | .border(8.px, LineStyle.Solid, ThemeColors.Primary.colorValue) 28 | .borderTop(color = Color("#007bff")) 29 | .borderRadius(50.percent) 30 | .animation( 31 | Animation.of( 32 | "spin", 33 | 1.1.s, 34 | AnimationTimingFunction.Linear, 35 | iterationCount = AnimationIterationCount.Infinite 36 | ) 37 | ) 38 | .toAttrs() 39 | ) 40 | } 41 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/components/LineStroke.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.components 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.models.ThemeColors 5 | import com.varabyte.kobweb.compose.foundation.layout.Box 6 | import com.varabyte.kobweb.compose.ui.Modifier 7 | import com.varabyte.kobweb.compose.ui.modifiers.backgroundColor 8 | import com.varabyte.kobweb.compose.ui.modifiers.borderRadius 9 | import com.varabyte.kobweb.compose.ui.modifiers.height 10 | import com.varabyte.kobweb.compose.ui.modifiers.width 11 | import org.jetbrains.compose.web.css.px 12 | 13 | @Composable 14 | fun LineStroke(modifier: Modifier = Modifier) { 15 | Box( 16 | modifier = Modifier.height(2.px) 17 | .width(80.px) 18 | .backgroundColor(ThemeColors.Primary.colorValue) 19 | .borderRadius(r = 50.px) 20 | .then(modifier) 21 | ) 22 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/components/NavigationIcon.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.components 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.fa.FaCircle 5 | import net.freshplatform.alrayada_web.components.fa.IconSize 6 | import net.freshplatform.alrayada_web.components.fa.IconStyle 7 | import net.freshplatform.alrayada_web.models.ThemeColors 8 | import com.varabyte.kobweb.compose.css.Cursor 9 | import com.varabyte.kobweb.compose.css.Transition 10 | import com.varabyte.kobweb.compose.ui.Modifier 11 | import com.varabyte.kobweb.compose.ui.modifiers.color 12 | import com.varabyte.kobweb.compose.ui.modifiers.cursor 13 | import com.varabyte.kobweb.compose.ui.modifiers.transition 14 | import com.varabyte.kobweb.silk.style.CssStyle 15 | import com.varabyte.kobweb.silk.style.selectors.hover 16 | import com.varabyte.kobweb.silk.style.toModifier 17 | import org.jetbrains.compose.web.css.ms 18 | 19 | val NavigationIconStyle = CssStyle { 20 | base { 21 | Modifier 22 | .color(ThemeColors.Primary.colorValue) 23 | .transition( 24 | Transition.of(property = "color", duration = 50.ms) 25 | ) 26 | } 27 | hover { 28 | Modifier 29 | .color(ThemeColors.Secondary.colorValue) 30 | } 31 | } 32 | 33 | @Composable 34 | fun NavigationIcon( 35 | modifier: Modifier = Modifier, 36 | selected: Boolean = false, 37 | size: IconSize? = null 38 | ) { 39 | FaCircle( 40 | style = if (selected) IconStyle.FILLED else IconStyle.OUTLINE, 41 | modifier = NavigationIconStyle.toModifier() 42 | .cursor(Cursor.Pointer) 43 | .then(modifier), 44 | size = size, 45 | ) 46 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/components/core/Button.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.components.core 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.styles.MainButtonStyle 5 | import com.varabyte.kobweb.compose.ui.Modifier 6 | import com.varabyte.kobweb.compose.ui.modifiers.title 7 | import com.varabyte.kobweb.compose.ui.toAttrs 8 | import com.varabyte.kobweb.silk.style.toModifier 9 | import org.jetbrains.compose.web.attributes.ButtonType 10 | import org.jetbrains.compose.web.dom.Button 11 | import org.jetbrains.compose.web.dom.Text 12 | 13 | @Composable 14 | fun MyButton( 15 | modifier: Modifier = Modifier, 16 | type: ButtonType = ButtonType.Button, 17 | content: @Composable () -> Unit, 18 | ) { 19 | Button( 20 | attrs = MainButtonStyle 21 | .toModifier() 22 | .then(modifier) 23 | .toAttrs { 24 | attr("type", type.str) 25 | }, 26 | ) { 27 | content() 28 | } 29 | } 30 | 31 | @Composable 32 | fun MyButtonWithText( 33 | modifier: Modifier = Modifier, 34 | text: String, 35 | type: ButtonType = ButtonType.Button, 36 | ) { 37 | Button( 38 | attrs = MainButtonStyle 39 | .toModifier() 40 | .then(modifier) 41 | .title(text) 42 | .toAttrs { 43 | attr("type", type.str) 44 | }, 45 | ) { 46 | Text(text) 47 | } 48 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/components/core/Center.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.components.core 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.varabyte.kobweb.compose.foundation.layout.Box 5 | import com.varabyte.kobweb.compose.ui.Alignment 6 | import com.varabyte.kobweb.compose.ui.Modifier 7 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxHeight 8 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxSize 9 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth 10 | 11 | @Composable 12 | fun Center( 13 | modifier: Modifier = Modifier, 14 | content: @Composable () -> Unit 15 | ) { 16 | Box( 17 | modifier = Modifier.fillMaxSize().then(modifier), 18 | contentAlignment = Alignment.Center 19 | ) { 20 | content() 21 | } 22 | } 23 | 24 | @Composable 25 | fun CenterHorizontally( 26 | modifier: Modifier = Modifier, 27 | content: @Composable () -> Unit 28 | ) { 29 | Box( 30 | modifier = Modifier.fillMaxWidth().then(modifier), 31 | contentAlignment = Alignment.Center 32 | ) { 33 | content() 34 | } 35 | } 36 | 37 | @Composable 38 | fun CenterVertically( 39 | modifier: Modifier = Modifier, 40 | content: @Composable () -> Unit 41 | ) { 42 | Box( 43 | modifier = Modifier.fillMaxHeight().then(modifier), 44 | contentAlignment = Alignment.Center 45 | ) { 46 | content() 47 | } 48 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/components/core/MyImage.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.components.core 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.varabyte.kobweb.compose.ui.Modifier 5 | import com.varabyte.kobweb.compose.ui.attrsModifier 6 | import com.varabyte.kobweb.silk.components.graphics.Image 7 | 8 | @Composable 9 | fun MyImage( 10 | src: String, 11 | contentDescription: String, 12 | modifier: Modifier = Modifier, 13 | lazyLoading: Boolean = true, 14 | ) { 15 | // var isLoading by remember { mutableStateOf(true) } 16 | // val imageId = "imageId${contentDescription}" 17 | 18 | // LaunchedEffect(Unit) { 19 | // document.getElementById(imageId)!! 20 | // .addEventListener("load", { 21 | // isLoading = false 22 | // }) 23 | // } 24 | 25 | // if (isLoading) { 26 | // Center(modifier = modifier) { 27 | // CircularProgressIndicator() 28 | // } 29 | // } 30 | 31 | Image( 32 | src = src, 33 | alt = contentDescription, 34 | modifier = modifier 35 | // .visibility( 36 | // if (isLoading) Visibility.Hidden 37 | // else Visibility.Visible 38 | // ) 39 | // .id(imageId) 40 | .attrsModifier { 41 | if (lazyLoading) { 42 | attr("loading", "lazy") 43 | } 44 | }, 45 | ) 46 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/components/fa/Fa.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.components.fa 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.varabyte.kobweb.compose.ui.Modifier 5 | import com.varabyte.kobweb.compose.ui.toAttrs 6 | import org.jetbrains.compose.web.dom.Span 7 | 8 | // From com.varabyte.kobweb.silk.components.icons.fa 9 | 10 | enum class IconCategory(internal val className: String) { 11 | REGULAR("far"), 12 | SOLID("fas"), 13 | BRAND("fab"); 14 | } 15 | 16 | enum class IconStyle(internal val category: IconCategory) { 17 | FILLED(IconCategory.SOLID), 18 | OUTLINE(IconCategory.REGULAR); 19 | } 20 | 21 | // See: https://fontawesome.com/docs/web/style/size 22 | enum class IconSize(internal val className: String) { 23 | // Relative sizes 24 | XXS("fa-2xs"), 25 | XS("fa-xs"), 26 | SM("fa-sm"), 27 | LG("fa-lg"), 28 | XL("fa-xl"), 29 | XXL("fa-2xl"), 30 | 31 | // Literal sizes 32 | X1("fa-1x"), 33 | X2("fa-2x"), 34 | X3("fa-3x"), 35 | X4("fa-4x"), 36 | X5("fa-5x"), 37 | X6("fa-6x"), 38 | X7("fa-7x"), 39 | X8("fa-8x"), 40 | X9("fa-9x"), 41 | X10("fa-10x"); 42 | } 43 | 44 | @Composable 45 | fun FaIcon( 46 | name: String, 47 | modifier: Modifier, 48 | style: IconCategory = IconCategory.REGULAR, 49 | size: IconSize? = null, 50 | ) { 51 | Span( 52 | attrs = modifier.toAttrs { 53 | classes(style.className, "fa-$name") 54 | if (size != null) { 55 | classes(size.className) 56 | } 57 | } 58 | ) 59 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/components/fa/FaIcons.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.components.fa 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.varabyte.kobweb.compose.ui.Modifier 5 | 6 | @Composable 7 | fun FaCheck(modifier: Modifier = Modifier, size: IconSize? = null) = FaIcon("check", modifier, IconCategory.SOLID, size) 8 | @Composable 9 | fun FaArrowUp(modifier: Modifier = Modifier, size: IconSize? = null) = 10 | FaIcon("arrow-up", modifier, IconCategory.SOLID, size) 11 | 12 | @Composable 13 | fun FaStarHalfStroke(modifier: Modifier = Modifier, style: IconStyle = IconStyle.OUTLINE, size: IconSize? = null) = 14 | FaIcon("star-half-stroke", modifier, style.category, size) 15 | 16 | @Composable 17 | fun FaStar(modifier: Modifier = Modifier, style: IconStyle = IconStyle.OUTLINE, size: IconSize? = null) = 18 | FaIcon("star", modifier, style.category, size) 19 | 20 | @Composable 21 | fun FaArrowUpRightFromSquare(modifier: Modifier = Modifier, size: IconSize? = null) = 22 | FaIcon("arrow-up-right-from-square", modifier, IconCategory.SOLID, size) 23 | 24 | @Composable 25 | fun FaCircle(modifier: Modifier = Modifier, style: IconStyle = IconStyle.OUTLINE, size: IconSize? = null) = 26 | FaIcon("circle", modifier, style.category, size) 27 | 28 | @Composable 29 | fun FaArrowLeft(modifier: Modifier = Modifier, size: IconSize? = null) = 30 | FaIcon("arrow-left", modifier, IconCategory.SOLID, size) 31 | 32 | @Composable 33 | fun FaArrowRight(modifier: Modifier = Modifier, size: IconSize? = null) = 34 | FaIcon("arrow-right", modifier, IconCategory.SOLID, size) 35 | 36 | @Composable 37 | fun FaGithub(modifier: Modifier = Modifier, size: IconSize? = null) = 38 | FaIcon("github", modifier, IconCategory.BRAND, size) 39 | 40 | @Composable 41 | fun FaWhatsapp(modifier: Modifier = Modifier, size: IconSize? = null) = 42 | FaIcon("whatsapp", modifier, IconCategory.BRAND, size) -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/components/stars/RatingBar.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.components.stars 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.varabyte.kobweb.compose.foundation.layout.Row 5 | import com.varabyte.kobweb.compose.ui.Modifier 6 | import com.varabyte.kobweb.compose.ui.modifiers.margin 7 | import org.jetbrains.compose.web.css.px 8 | 9 | @Composable 10 | fun RatingBar(modifier: Modifier = Modifier, value: Int = 5) { 11 | Row( 12 | modifier = Modifier.then(modifier), 13 | ) { 14 | repeat((1..value).count()) { 15 | StarIcon( 16 | modifier = Modifier 17 | .margin(right = if (it != value) 2.px else 0.px), 18 | halfStar = false 19 | ) 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/components/stars/StarIcon.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.components.stars 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.fa.FaStar 5 | import net.freshplatform.alrayada_web.components.fa.FaStarHalfStroke 6 | import net.freshplatform.alrayada_web.components.fa.IconSize 7 | import net.freshplatform.alrayada_web.components.fa.IconStyle 8 | import com.varabyte.kobweb.compose.ui.Modifier 9 | import com.varabyte.kobweb.compose.ui.modifiers.color 10 | import org.jetbrains.compose.web.css.Color 11 | 12 | private const val YELLOW_COLOR_HEX = "#FFD700" 13 | 14 | @Composable 15 | fun StarIcon( 16 | modifier: Modifier = Modifier, 17 | size: IconSize? = null, 18 | style: IconStyle? = null, 19 | halfStar: Boolean = false 20 | ) { 21 | if (halfStar) { 22 | FaStarHalfStroke( 23 | modifier = Modifier.color( 24 | Color(YELLOW_COLOR_HEX) 25 | ).then(modifier), 26 | size = size, 27 | style = style ?: IconStyle.OUTLINE 28 | ) 29 | return 30 | } 31 | FaStar( 32 | modifier = Modifier.color( 33 | Color(YELLOW_COLOR_HEX) 34 | ).then(modifier), 35 | size = size, 36 | style = style ?: IconStyle.FILLED 37 | ) 38 | } 39 | -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/core/router/Routes.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.core.router 2 | 3 | object Routes { 4 | // Unfortunately, we can't use those in the pages routeOverride, even though it's a constant in compile time 5 | const val PRIVACY_POLICY = "/privacy-policy" 6 | const val DOWNLOAD_MOBILE_APP = "/download-mobile-app" 7 | const val DELETE_ACCOUNT_INSTRUCTIONS = "/delete-account-instructions" 8 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/core/services/localization/ComposeLocalization.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.core.services.localization 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.core.data.StringRes 5 | import net.freshplatform.alrayada_web.core.services.localization.Local.Arabic 6 | import net.freshplatform.alrayada_web.core.services.localization.Local.English 7 | import kotlinx.browser.document 8 | import kotlinx.browser.window 9 | import org.w3c.dom.HTMLElement 10 | import org.w3c.dom.url.URLSearchParams 11 | 12 | private val defaultLocal: Local by lazy { 13 | var language = window.navigator.language 14 | 15 | val urlParams = URLSearchParams(window.location.search) 16 | val urlLang = urlParams.get("lang") 17 | urlLang?.let { 18 | val lang = it.trim() 19 | if (lang.isNotBlank()) { 20 | language = lang 21 | } 22 | } 23 | 24 | val local = when { 25 | language.startsWith("en") -> English 26 | language.startsWith("ar") -> Arabic 27 | else -> English 28 | } 29 | val htmlElement = document.documentElement as HTMLElement 30 | // htmlElement.dir = local.dir.dirStr 31 | htmlElement.lang = language 32 | 33 | local 34 | } 35 | 36 | @Composable 37 | fun stringResource(stringRes: StringRes): String { 38 | // No need for recomposition when update the language, the browser will handle that 39 | return LocalizationService 40 | .getInstance() 41 | .getLocalizedString(stringRes, defaultLocal) 42 | } 43 | 44 | /** 45 | * For composable events or non composable functions 46 | */ 47 | fun getStringResource(stringRes: StringRes): String { 48 | return LocalizationService 49 | .getInstance() 50 | .getLocalizedString(stringRes, defaultLocal) 51 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/core/services/localization/Local.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.core.services.localization 2 | 3 | import org.jetbrains.compose.web.attributes.DirType 4 | 5 | enum class Local( 6 | val value: String, 7 | val dir: DirType 8 | ) { 9 | English("en", DirType.Ltr), 10 | Arabic("ar", DirType.Rtl), 11 | Turkey("tr", DirType.Auto) 12 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/core/services/localization/Localization.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.core.services.localization 2 | 3 | import net.freshplatform.alrayada_web.core.data.StringRes 4 | 5 | interface Localization { 6 | fun getLocalizedString(resValue: StringRes, locale: Local): String 7 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/core/services/localization/LocalizationImpl.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.core.services.localization 2 | 3 | import net.freshplatform.alrayada_web.core.data.StringRes 4 | import net.freshplatform.alrayada_web.core.services.localization.Local.Arabic 5 | import net.freshplatform.alrayada_web.core.services.localization.Local.English 6 | 7 | class LocalizationImpl : Localization { 8 | override fun getLocalizedString(resValue: StringRes, locale: Local): String { 9 | return when (locale) { 10 | English -> resValue.en 11 | Arabic -> resValue.ar 12 | else -> resValue.en 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/core/services/localization/LocalizationService.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.core.services.localization 2 | 3 | import net.freshplatform.alrayada_web.core.data.StringRes 4 | 5 | class LocalizationService : Localization { 6 | private val service = LocalizationImpl() 7 | 8 | companion object { 9 | private val instance: LocalizationService by lazy { 10 | LocalizationService() 11 | } 12 | 13 | fun getInstance() = instance 14 | } 15 | 16 | override fun getLocalizedString(resValue: StringRes, locale: Local): String = 17 | service.getLocalizedString(resValue, locale) 18 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/js/Uri.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.js 2 | 3 | /** 4 | * Refer to [encodeURIComponent() docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent). 5 | * 6 | * @return A new string representing the provided [uriComponent] encoded as a URI component. 7 | * @param uriComponent A string to be encoded as a URI component (a path, query string, fragment, etc.). 8 | * */ 9 | external fun encodeURIComponent(uriComponent: String): String 10 | -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/models/NavigationLink.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.models 2 | 3 | import net.freshplatform.alrayada_web.core.data.StringRes 4 | import net.freshplatform.alrayada_web.utils.extensions.asFragmentIdentifier 5 | 6 | sealed class NavigationLink( 7 | val titleRes: StringRes, 8 | val path: String 9 | ) { 10 | data class HomePageSection( 11 | val section: HomePageSections 12 | ) : NavigationLink( 13 | path = section.id.asFragmentIdentifier(), 14 | titleRes = section.titleRes 15 | ) 16 | 17 | data class HomePageSectionWithAlternativeTitle( 18 | val section: HomePageSections, 19 | val alternativeTitleRes: StringRes 20 | ) : NavigationLink( 21 | path = section.id.asFragmentIdentifier(), 22 | titleRes = alternativeTitleRes 23 | ) 24 | 25 | data class Page( 26 | val pageTitle: StringRes, 27 | val pagePath: String 28 | ) : NavigationLink( 29 | path = pagePath, 30 | titleRes = pageTitle 31 | ) 32 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/models/SocialMediaLink.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.models 2 | 3 | import net.freshplatform.alrayada_web.utils.constants.Constants 4 | 5 | enum class SocialMediaLink( 6 | val path: String, 7 | val iconName: String 8 | ) { 9 | Facebook( 10 | Constants.SocialMediaLinks.FACEBOOK, 11 | "facebook" 12 | ), 13 | Twitter( 14 | Constants.SocialMediaLinks.TWITTER, 15 | "twitter" 16 | ), 17 | Instagram( 18 | Constants.SocialMediaLinks.INSTAGRAM, 19 | "instagram" 20 | ), 21 | Linkedin( 22 | Constants.SocialMediaLinks.LINKEDIN, 23 | "linkedin" 24 | ) 25 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/models/ThemeColors.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.models 2 | 3 | import org.jetbrains.compose.web.css.CSSColorValue 4 | import org.jetbrains.compose.web.css.Color 5 | 6 | enum class ThemeColors( 7 | val colorValue: CSSColorValue, 8 | ) { 9 | PreviousPrimary(Color("#00A78E")), 10 | Primary(Color("#4CA92F")), 11 | OnPrimary(Color("#39B127")), 12 | Secondary(Color("#121D34")), 13 | GoldenOlive(Color("#8C7A2E")), 14 | Gray(Color("#CFCFCF")), 15 | LightGray(Color("#EDEDED")), 16 | LighterGray(Color("#F9F9F9")) 17 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/pages/Index.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.pages 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.BackToTopButton 5 | import net.freshplatform.alrayada_web.models.HomePageSections 6 | import net.freshplatform.alrayada_web.sections.footer.FooterSection 7 | import net.freshplatform.alrayada_web.utils.constants.Constants 8 | import com.varabyte.kobweb.compose.foundation.layout.Arrangement 9 | import com.varabyte.kobweb.compose.foundation.layout.Box 10 | import com.varabyte.kobweb.compose.foundation.layout.Column 11 | import com.varabyte.kobweb.compose.ui.Alignment 12 | import com.varabyte.kobweb.compose.ui.Modifier 13 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxSize 14 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth 15 | import com.varabyte.kobweb.compose.ui.modifiers.id 16 | import com.varabyte.kobweb.compose.ui.modifiers.maxHeight 17 | import com.varabyte.kobweb.compose.ui.toAttrs 18 | import com.varabyte.kobweb.core.Page 19 | import org.jetbrains.compose.web.css.px 20 | import org.jetbrains.compose.web.dom.Footer 21 | import org.jetbrains.compose.web.dom.Section 22 | 23 | @Page 24 | @Composable 25 | fun HomePage() { 26 | Box( 27 | modifier = Modifier.fillMaxSize() 28 | ) { 29 | BackToTopButton() 30 | Column( 31 | Modifier.fillMaxSize(), 32 | verticalArrangement = Arrangement.Top, 33 | horizontalAlignment = Alignment.CenterHorizontally 34 | ) { 35 | HomePageSections.entries.forEach { 36 | Section( 37 | attrs = Modifier 38 | .maxHeight(Constants.SECTION_MAX_HEIGHT.px) 39 | .fillMaxWidth() 40 | .id(it.id) 41 | .toAttrs() 42 | ) { 43 | it.content() 44 | } 45 | } 46 | Footer( 47 | attrs = Modifier.fillMaxWidth().toAttrs() 48 | ) { 49 | FooterSection() 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/pages/ar/Index.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.pages.ar 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.varabyte.kobweb.core.Page 5 | import com.varabyte.kobweb.core.rememberPageContext 6 | 7 | @Composable 8 | @Page 9 | fun PrivacyPolicyPage_ar() { 10 | rememberPageContext().router.navigateTo("/?lang=ar") 11 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/pages/ar/deleteAccountInstructions/Index.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.pages.ar.deleteAccountInstructions 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.varabyte.kobweb.core.Page 5 | import com.varabyte.kobweb.core.rememberPageContext 6 | import net.freshplatform.alrayada_web.core.router.Routes 7 | 8 | @Composable 9 | @Page 10 | fun PrivacyPolicyPage_ar() { 11 | rememberPageContext().router.navigateTo("${Routes.DELETE_ACCOUNT_INSTRUCTIONS}/?lang=ar") 12 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/pages/ar/downloadMobileApp/Index.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.pages.ar.downloadMobileApp 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.varabyte.kobweb.core.Page 5 | import com.varabyte.kobweb.core.rememberPageContext 6 | import net.freshplatform.alrayada_web.core.router.Routes 7 | 8 | @Composable 9 | @Page 10 | fun PrivacyPolicyPage_ar() { 11 | rememberPageContext().router.navigateTo("${Routes.DOWNLOAD_MOBILE_APP}/?lang=ar") 12 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/pages/ar/privacyPolicy/Index.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.pages.ar.privacyPolicy 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.varabyte.kobweb.core.Page 5 | import com.varabyte.kobweb.core.rememberPageContext 6 | import net.freshplatform.alrayada_web.core.router.Routes 7 | 8 | @Composable 9 | @Page 10 | fun PrivacyPolicyPage_ar() { 11 | rememberPageContext().router.navigateTo("${Routes.PRIVACY_POLICY}/?lang=ar") 12 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/pages/deleteAccountInstructions/Index.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.pages.deleteAccountInstructions 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.runtime.LaunchedEffect 5 | import com.varabyte.kobweb.compose.foundation.layout.Box 6 | import com.varabyte.kobweb.compose.foundation.layout.Column 7 | import com.varabyte.kobweb.compose.ui.Modifier 8 | import com.varabyte.kobweb.compose.ui.graphics.Colors 9 | import com.varabyte.kobweb.compose.ui.modifiers.* 10 | import com.varabyte.kobweb.compose.ui.toAttrs 11 | import com.varabyte.kobweb.core.Page 12 | import com.varabyte.kobweb.silk.style.toModifier 13 | import net.freshplatform.alrayada_web.components.core.Center 14 | import net.freshplatform.alrayada_web.core.data.StringRes 15 | import net.freshplatform.alrayada_web.core.services.localization.getStringResource 16 | import net.freshplatform.alrayada_web.styles.ReadableTextStyleOnWhiteBackground 17 | import net.freshplatform.alrayada_web.utils.updateDocument 18 | import org.jetbrains.compose.web.css.Color 19 | import org.jetbrains.compose.web.css.percent 20 | import org.jetbrains.compose.web.css.px 21 | import org.jetbrains.compose.web.dom.H1 22 | import org.jetbrains.compose.web.dom.P 23 | import org.jetbrains.compose.web.dom.Text 24 | 25 | @Composable 26 | @Page 27 | fun DeleteAccountInstructions() { 28 | LaunchedEffect(Unit) { 29 | updateDocument { 30 | title = "${getStringResource(StringRes.DeleteAccountInstructions)} - ${getStringResource(StringRes.AlrayadaAlarabiah)}" 31 | description = getStringResource(StringRes.DeleteAccountInstructionsDesc) 32 | } 33 | } 34 | Box( 35 | modifier = Modifier 36 | .fillMaxSize() 37 | .backgroundColor(Color("#242B2E")) 38 | ) { 39 | Center { 40 | Box( 41 | modifier = Modifier 42 | .backgroundColor(Colors.White) 43 | .fillMaxWidth(95.percent) 44 | .borderRadius(r = 20.px) 45 | .minHeight(200.px), 46 | ) { 47 | Column( 48 | modifier = Modifier 49 | .padding(25.px) 50 | .fillMaxSize() 51 | ) { 52 | H1( 53 | attrs = Modifier 54 | .toAttrs() 55 | ) { 56 | Text(getStringResource(StringRes.DeleteAccountInstructions)) 57 | } 58 | P( 59 | attrs = ReadableTextStyleOnWhiteBackground 60 | .toModifier() 61 | .fillMaxWidth() 62 | .margin(topBottom = 0.px) 63 | .fontSize(18.px) 64 | .lineHeight(1.4) 65 | .toAttrs() 66 | ) { 67 | Text(getStringResource(StringRes.DeleteAccountInstructionsSteps)) 68 | } 69 | } 70 | } 71 | } 72 | } 73 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/pages/downloadMobileApp/Index.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.pages.downloadMobileApp 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.runtime.LaunchedEffect 5 | import com.varabyte.kobweb.compose.foundation.layout.Box 6 | import com.varabyte.kobweb.compose.foundation.layout.Column 7 | import com.varabyte.kobweb.compose.ui.Modifier 8 | import com.varabyte.kobweb.compose.ui.graphics.Colors 9 | import com.varabyte.kobweb.compose.ui.modifiers.* 10 | import com.varabyte.kobweb.compose.ui.toAttrs 11 | import net.freshplatform.alrayada_web.core.data.StringRes 12 | import net.freshplatform.alrayada_web.core.services.localization.getStringResource 13 | import net.freshplatform.alrayada_web.core.services.localization.stringResource 14 | import net.freshplatform.alrayada_web.utils.updateDocument 15 | import com.varabyte.kobweb.core.Page 16 | import com.varabyte.kobweb.silk.style.toModifier 17 | import kotlinx.browser.window 18 | import net.freshplatform.alrayada_web.components.core.Center 19 | import net.freshplatform.alrayada_web.styles.ReadableTextStyleOnWhiteBackground 20 | import net.freshplatform.alrayada_web.utils.constants.SectionsConstants 21 | import org.jetbrains.compose.web.css.Color 22 | import org.jetbrains.compose.web.css.percent 23 | import org.jetbrains.compose.web.css.px 24 | import org.jetbrains.compose.web.dom.H1 25 | import org.jetbrains.compose.web.dom.P 26 | import org.jetbrains.compose.web.dom.Text 27 | 28 | @Composable 29 | @Page 30 | fun DownloadMobileAppPage() { 31 | LaunchedEffect(Unit) { 32 | updateDocument { 33 | title = "${getStringResource(StringRes.MobileApp)} - ${getStringResource(StringRes.AlrayadaAlarabiah)}" 34 | description = getStringResource(StringRes.MobileAppDesc) 35 | } 36 | } 37 | val isiOS = 38 | Regex("iPad|iPhone|iPod").containsMatchIn(window.navigator.userAgent) && !window.asDynamic().MSStream as Boolean 39 | val isAndroid = Regex("Android").containsMatchIn(window.navigator.userAgent) 40 | if (isAndroid) { 41 | window.location.replace(SectionsConstants.MobileApp.GOOGLE_PLAY) 42 | } else if (isiOS) { 43 | window.location.replace(SectionsConstants.MobileApp.APPLE_APP_STORE) 44 | } else { 45 | Box( 46 | modifier = Modifier 47 | .fillMaxSize() 48 | .backgroundColor(Color("#242B2E")) 49 | ) { 50 | Center { 51 | Box( 52 | modifier = Modifier 53 | .backgroundColor(Colors.White) 54 | .fillMaxWidth(95.percent) 55 | .borderRadius(r = 20.px) 56 | .minHeight(150.px), 57 | ) { 58 | Column( 59 | modifier = Modifier 60 | .padding(25.px) 61 | .fillMaxSize() 62 | ) { 63 | H1( 64 | attrs = Modifier 65 | .toAttrs() 66 | ) { 67 | Text(stringResource(StringRes.MobileApp)) 68 | } 69 | P( 70 | attrs = ReadableTextStyleOnWhiteBackground 71 | .toModifier() 72 | .fillMaxWidth() 73 | .margin(topBottom = 0.px) 74 | .fontSize(18.px) 75 | .lineHeight(1.4) 76 | .toAttrs() 77 | ) { 78 | Text(stringResource(StringRes.PleaseOpenThisPageOnMobile)) 79 | } 80 | } 81 | } 82 | } 83 | } 84 | } 85 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/pages/privacyPolicy/Index.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.pages.privacyPolicy 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.runtime.LaunchedEffect 5 | import net.freshplatform.alrayada_web.components.core.Center 6 | import net.freshplatform.alrayada_web.core.data.StringRes 7 | import net.freshplatform.alrayada_web.core.services.localization.getStringResource 8 | import net.freshplatform.alrayada_web.core.services.localization.stringResource 9 | import net.freshplatform.alrayada_web.styles.ReadableTextStyleOnWhiteBackground 10 | import net.freshplatform.alrayada_web.utils.updateDocument 11 | import com.varabyte.kobweb.compose.css.TextAlign 12 | import com.varabyte.kobweb.compose.foundation.layout.Arrangement 13 | import com.varabyte.kobweb.compose.foundation.layout.Box 14 | import com.varabyte.kobweb.compose.foundation.layout.Column 15 | import com.varabyte.kobweb.compose.ui.Modifier 16 | import com.varabyte.kobweb.compose.ui.graphics.Colors 17 | import com.varabyte.kobweb.compose.ui.modifiers.* 18 | import com.varabyte.kobweb.compose.ui.toAttrs 19 | import com.varabyte.kobweb.core.Page 20 | import com.varabyte.kobweb.silk.style.toModifier 21 | import org.jetbrains.compose.web.css.Color 22 | import org.jetbrains.compose.web.css.percent 23 | import org.jetbrains.compose.web.css.px 24 | import org.jetbrains.compose.web.dom.H1 25 | import org.jetbrains.compose.web.dom.P 26 | import org.jetbrains.compose.web.dom.Text 27 | 28 | @Page 29 | @Composable 30 | fun PrivacyPolicyPage() { 31 | LaunchedEffect(Unit) { 32 | updateDocument { 33 | title = "${getStringResource(StringRes.PrivacyPolicy)} - ${getStringResource(StringRes.AlrayadaAlarabiah)}" 34 | description = getStringResource(StringRes.PrivacyPolicyText) 35 | } 36 | } 37 | Box( 38 | modifier = Modifier 39 | .fillMaxSize() 40 | .backgroundColor(Color("#242B2E")) 41 | ) { 42 | Center { 43 | Box( 44 | modifier = Modifier 45 | .backgroundColor(Colors.White) 46 | .fillMaxWidth(95.percent) 47 | .borderRadius(r = 20.px) 48 | .minHeight(300.px), 49 | ) { 50 | Column( 51 | modifier = Modifier 52 | .padding(25.px) 53 | .fillMaxSize(), 54 | verticalArrangement = Arrangement.Center 55 | ) { 56 | H1( 57 | attrs = Modifier.fillMaxWidth() 58 | .textAlign(TextAlign.Center) 59 | .toAttrs() 60 | ) { 61 | Text(stringResource(StringRes.PrivacyPolicy)) 62 | } 63 | P( 64 | attrs = ReadableTextStyleOnWhiteBackground 65 | .toModifier() 66 | .fillMaxWidth() 67 | .margin(topBottom = 0.px) 68 | .fontSize(18.px) 69 | .lineHeight(1.4) 70 | .toAttrs() 71 | ) { 72 | Text(stringResource(StringRes.PrivacyPolicyText)) 73 | } 74 | } 75 | } 76 | } 77 | } 78 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/about/Styles.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.about 2 | 3 | import com.varabyte.kobweb.compose.css.Transition 4 | import com.varabyte.kobweb.compose.css.TransitionProperty 5 | import com.varabyte.kobweb.compose.ui.Modifier 6 | import com.varabyte.kobweb.compose.ui.modifiers.borderRadius 7 | import com.varabyte.kobweb.compose.ui.modifiers.rotate 8 | import com.varabyte.kobweb.compose.ui.modifiers.transition 9 | import com.varabyte.kobweb.compose.ui.styleModifier 10 | import com.varabyte.kobweb.silk.style.CssStyle 11 | import com.varabyte.kobweb.silk.style.selectors.hover 12 | import org.jetbrains.compose.web.ExperimentalComposeWebApi 13 | import org.jetbrains.compose.web.css.* 14 | 15 | @OptIn(ExperimentalComposeWebApi::class) 16 | val AboutImageStyle = CssStyle { 17 | base { 18 | Modifier 19 | .styleModifier { filter { grayscale(100.percent) } } 20 | .borderRadius(r = 0.px) 21 | .rotate(0.deg) 22 | .transition( 23 | Transition.of( 24 | property = TransitionProperty.All, 25 | duration = 200.ms, 26 | delay = null 27 | ) 28 | ) 29 | } 30 | hover { 31 | Modifier 32 | .styleModifier { filter { grayscale(0.percent) } } 33 | .borderRadius(r = 100.px) 34 | .rotate(10.deg) 35 | } 36 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/about/components/SkillBar.kt: -------------------------------------------------------------------------------- 1 | import androidx.compose.runtime.Composable 2 | import net.freshplatform.alrayada_web.components.ParagraphText 3 | import net.freshplatform.alrayada_web.models.ThemeColors 4 | import com.varabyte.kobweb.compose.css.Transition 5 | import com.varabyte.kobweb.compose.foundation.layout.Arrangement 6 | import com.varabyte.kobweb.compose.foundation.layout.Box 7 | import com.varabyte.kobweb.compose.foundation.layout.Column 8 | import com.varabyte.kobweb.compose.foundation.layout.Row 9 | import com.varabyte.kobweb.compose.ui.Modifier 10 | import com.varabyte.kobweb.compose.ui.modifiers.* 11 | import org.jetbrains.compose.web.css.* 12 | 13 | @Composable 14 | fun SkillBar( 15 | name: String, 16 | index: Int, 17 | percentageValueBar: CSSLengthOrPercentageValue = 50.percent, 18 | animatedPercentageValueText: CSSLengthOrPercentageValue = 90.percent, 19 | progressBarHeight: CSSSizeValue = 5.px 20 | ) { 21 | Column( 22 | modifier = Modifier 23 | .fillMaxWidth() 24 | .margin(bottom = 10.px) 25 | .maxWidth(500.px) 26 | .padding(topBottom = 5.px) 27 | ) { 28 | Row( 29 | modifier = Modifier 30 | .margin(bottom = 5.px) 31 | .fillMaxWidth(), 32 | horizontalArrangement = Arrangement.SpaceBetween 33 | ) { 34 | ParagraphText( 35 | name, 36 | modifier = Modifier.margin(topBottom = 2.px) 37 | ) 38 | ParagraphText( 39 | if (animatedPercentageValueText.value > 0) "${animatedPercentageValueText.value.toInt()}${animatedPercentageValueText.unit}" else "0%", 40 | modifier = Modifier.margin(topBottom = 2.px), 41 | ) 42 | } 43 | Box( 44 | modifier = Modifier 45 | .fillMaxWidth() 46 | ) { 47 | Box( 48 | modifier = Modifier 49 | .fillMaxWidth() 50 | .height(progressBarHeight) 51 | .borderRadius(r = 12.px) 52 | .backgroundColor(ThemeColors.LightGray.colorValue) 53 | ) 54 | Box( 55 | modifier = Modifier.fillMaxWidth(percentageValueBar.value.percent) 56 | .height(progressBarHeight) 57 | .borderRadius(r = 12.px) 58 | .backgroundColor(ThemeColors.Primary.colorValue) 59 | .transition( 60 | Transition.of( 61 | property = "width", 62 | duration = 1000.ms, 63 | delay = (index + 1) * 100.ms 64 | ) 65 | ) 66 | ) 67 | } 68 | } 69 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/about/models/Skill.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.about.models 2 | 3 | import androidx.compose.runtime.mutableStateListOf 4 | import net.freshplatform.alrayada_web.core.data.StringRes 5 | import org.jetbrains.compose.web.css.CSSLengthOrPercentageValue 6 | import org.jetbrains.compose.web.css.percent 7 | 8 | enum class Skill( 9 | val titleRes: StringRes, 10 | val percentageValue: CSSLengthOrPercentageValue 11 | ) { 12 | Responsibility( 13 | StringRes.Responsibility, 14 | 87.percent 15 | ), 16 | HardWorking( 17 | StringRes.HardWorking, 18 | 97.percent 19 | ), 20 | Value( 21 | StringRes.ValueForMoney, 22 | 95.percent 23 | ), 24 | Delivery( 25 | StringRes.OnTimeDelivery, 26 | 75.percent 27 | ), 28 | AfterSalesServiceQuality( 29 | StringRes.AfterSalesServiceQuality, 30 | 80.percent 31 | ); 32 | 33 | companion object { 34 | // Should match the length of enum items 35 | val animationDefaultValues = mutableStateListOf(0, 0, 0, 0, 0) 36 | } 37 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/achievement/AchievementSection.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.achievement 2 | 3 | import androidx.compose.runtime.* 4 | import net.freshplatform.alrayada_web.models.HomePageSections 5 | import net.freshplatform.alrayada_web.models.ThemeColors 6 | import net.freshplatform.alrayada_web.sections.achievement.componenets.AchievementCard 7 | import net.freshplatform.alrayada_web.sections.achievement.models.Achievement 8 | import net.freshplatform.alrayada_web.utils.ObserveViewportEntered 9 | import net.freshplatform.alrayada_web.utils.animateNumber 10 | import net.freshplatform.alrayada_web.utils.constants.Constants 11 | import com.varabyte.kobweb.compose.foundation.layout.Box 12 | import com.varabyte.kobweb.compose.ui.Alignment 13 | import com.varabyte.kobweb.compose.ui.Modifier 14 | import com.varabyte.kobweb.compose.ui.modifiers.backgroundColor 15 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth 16 | import com.varabyte.kobweb.compose.ui.modifiers.margin 17 | import com.varabyte.kobweb.compose.ui.modifiers.padding 18 | import com.varabyte.kobweb.silk.components.layout.SimpleGrid 19 | import com.varabyte.kobweb.silk.components.layout.numColumns 20 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 21 | import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint 22 | import kotlinx.coroutines.launch 23 | import org.jetbrains.compose.web.css.px 24 | 25 | @Composable 26 | fun AchievementSection() = Box( 27 | modifier = Modifier 28 | .fillMaxWidth() 29 | .padding(topBottom = 100.px) 30 | .backgroundColor(ThemeColors.LighterGray.colorValue), 31 | contentAlignment = Alignment.Center 32 | ) { 33 | AchievementContent() 34 | } 35 | 36 | @Composable 37 | private fun AchievementContent() { 38 | val scope = rememberCoroutineScope() 39 | var viewportEntered by remember { mutableStateOf(false) } 40 | val animatedNumbers = remember { Achievement.animationDefaultValues } 41 | 42 | val achievements = Achievement.entries 43 | if (Constants.ANIMATION_ENABLED) { 44 | ObserveViewportEntered( 45 | sectionId = HomePageSections.Achievements.id, 46 | distanceFromTop = 700.0, 47 | ) { 48 | viewportEntered = true 49 | achievements.forEach { achievement -> 50 | scope.launch { 51 | animateNumber( 52 | number = achievement.number, 53 | delayTime = if (achievement.number < 5) 100L else 40L, // TODO: Update this with number 350 54 | onUpdate = { 55 | animatedNumbers[achievement.ordinal] = it 56 | } 57 | ) 58 | } 59 | } 60 | } 61 | } 62 | val breakpoint = rememberBreakpoint() 63 | SimpleGrid( 64 | numColumns = numColumns(base = 1, md = 2, lg = 4) 65 | ) { 66 | achievements.forEach { achievement -> 67 | AchievementCard( 68 | modifier = Modifier.margin( 69 | right = if (achievement == achievements.last()) 0.px 70 | else { 71 | if (breakpoint > Breakpoint.SM) 40.px else 0.px 72 | }, 73 | bottom = if (breakpoint > Breakpoint.MD) 0.px else 40.px 74 | ), 75 | animatedNumber = if (Constants.ANIMATION_ENABLED) ( 76 | if (viewportEntered) animatedNumbers[achievement.ordinal] else 0 77 | ) else achievement.number, 78 | achievement = achievement 79 | ) 80 | } 81 | } 82 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/achievement/componenets/AchievementCard.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.achievement.componenets 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.fa.FaIcon 5 | import net.freshplatform.alrayada_web.components.fa.IconCategory 6 | import net.freshplatform.alrayada_web.components.fa.IconSize 7 | import net.freshplatform.alrayada_web.core.services.localization.stringResource 8 | import net.freshplatform.alrayada_web.models.ThemeColors 9 | import net.freshplatform.alrayada_web.sections.achievement.models.Achievement 10 | import com.varabyte.kobweb.compose.css.FontWeight 11 | import com.varabyte.kobweb.compose.foundation.layout.Column 12 | import com.varabyte.kobweb.compose.foundation.layout.Row 13 | import com.varabyte.kobweb.compose.ui.Alignment 14 | import com.varabyte.kobweb.compose.ui.Modifier 15 | import com.varabyte.kobweb.compose.ui.attrsModifier 16 | import com.varabyte.kobweb.compose.ui.modifiers.* 17 | import com.varabyte.kobweb.compose.ui.toAttrs 18 | import org.jetbrains.compose.web.css.percent 19 | import org.jetbrains.compose.web.css.px 20 | import org.jetbrains.compose.web.dom.P 21 | import org.jetbrains.compose.web.dom.Text 22 | 23 | @Composable 24 | fun AchievementCard( 25 | modifier: Modifier = Modifier, 26 | animatedNumber: Int, 27 | achievement: Achievement 28 | ) { 29 | Row( 30 | modifier = Modifier.margin(leftRight = 20.px).then(modifier), 31 | verticalAlignment = Alignment.CenterVertically 32 | ) { 33 | FaIcon( 34 | name = achievement.icon, 35 | modifier = Modifier 36 | .title("Achievement icon") 37 | .margin(right = 20.px) 38 | .attrsModifier { 39 | attr("alt", "Achievement icon") 40 | }, 41 | style = IconCategory.SOLID, 42 | size = IconSize.X3 43 | ) 44 | Column { 45 | P( 46 | attrs = Modifier 47 | .fillMaxWidth() 48 | .margin(topBottom = 0.px) 49 | .fontSize(30.px) 50 | .fontWeight(FontWeight.Bolder) 51 | .color(ThemeColors.Primary.colorValue) 52 | .toAttrs() 53 | ) { 54 | Text( 55 | if (achievement == Achievement.Completed) 56 | "${animatedNumber}+" 57 | else "$animatedNumber" 58 | ) 59 | } 60 | P( 61 | attrs = Modifier 62 | .fillMaxWidth() 63 | .margin(topBottom = 0.px) 64 | .fontSize(16.px) 65 | .fontWeight(FontWeight.Normal) 66 | .color(ThemeColors.Secondary.colorValue) 67 | .opacity(50.percent) 68 | .toAttrs() 69 | ) { 70 | Text(stringResource(achievement.descriptionRes)) 71 | } 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/achievement/models/Achievement.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.achievement.models 2 | 3 | import androidx.compose.runtime.mutableStateListOf 4 | import net.freshplatform.alrayada_web.core.data.StringRes 5 | 6 | enum class Achievement( 7 | val icon: String, 8 | val number: Int, 9 | val descriptionRes: StringRes 10 | ) { 11 | Completed( 12 | icon = "square-check", 13 | number = 10, 14 | descriptionRes = StringRes.CompletedProjects 15 | ), 16 | Active( 17 | icon = "circle-dot", 18 | number = 3, 19 | descriptionRes = StringRes.ActiveProjects 20 | ), 21 | Satisfied( 22 | icon = "face-smile", 23 | number = 350, 24 | descriptionRes = StringRes.SatisfiedClients 25 | ), 26 | Team( 27 | icon = "user", 28 | number = 25, 29 | descriptionRes = StringRes.TeamMembers 30 | ); 31 | 32 | companion object { 33 | // should match the length of enum items 34 | val animationDefaultValues = mutableStateListOf(0, 0, 0, 0) 35 | } 36 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/assistance/AssistanceSection.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.assistance 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.core.data.StringRes 5 | import net.freshplatform.alrayada_web.core.services.localization.stringResource 6 | import net.freshplatform.alrayada_web.sections.assistance.componenets.AssistanceHeaderContent 7 | import net.freshplatform.alrayada_web.styles.ReadableTextStyleOnWhiteBackground 8 | import com.varabyte.kobweb.compose.css.TextAlign 9 | import com.varabyte.kobweb.compose.foundation.layout.Box 10 | import com.varabyte.kobweb.compose.foundation.layout.Column 11 | import com.varabyte.kobweb.compose.ui.Alignment 12 | import com.varabyte.kobweb.compose.ui.Modifier 13 | import com.varabyte.kobweb.compose.ui.modifiers.* 14 | import com.varabyte.kobweb.compose.ui.toAttrs 15 | import com.varabyte.kobweb.silk.style.toModifier 16 | import org.jetbrains.compose.web.css.percent 17 | import org.jetbrains.compose.web.css.px 18 | import org.jetbrains.compose.web.dom.P 19 | import org.jetbrains.compose.web.dom.Text 20 | 21 | @Composable 22 | fun AssistanceSection() = Box( 23 | modifier = Modifier 24 | .padding(topBottom = 100.px), 25 | contentAlignment = Alignment.Center 26 | ) { 27 | AssistanceContent() 28 | } 29 | 30 | @Composable 31 | private fun AssistanceContent() { 32 | Column( 33 | modifier = Modifier 34 | .fillMaxWidth(), 35 | horizontalAlignment = Alignment.CenterHorizontally 36 | ) { 37 | AssistanceHeaderContent() 38 | AssistanceDescText() 39 | } 40 | } 41 | 42 | @Composable 43 | private fun AssistanceDescText() { 44 | P( 45 | attrs = ReadableTextStyleOnWhiteBackground 46 | .toModifier() 47 | .textAlign(TextAlign.Center) 48 | .margin(topBottom = 0.px) 49 | .fillMaxWidth(60.percent) 50 | .lineHeight(1.6) 51 | .margin(top = 100.px) 52 | .toAttrs() 53 | ) { 54 | Text(stringResource(StringRes.AssistanceSectionDesc)) 55 | } 56 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/contact/ContactSection.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.contact 2 | 3 | import androidx.compose.runtime.* 4 | import net.freshplatform.alrayada_web.components.SectionTitle 5 | import net.freshplatform.alrayada_web.models.HomePageSections 6 | import net.freshplatform.alrayada_web.sections.contact.components.ContactForm 7 | import net.freshplatform.alrayada_web.utils.ObserveViewportEntered 8 | import net.freshplatform.alrayada_web.utils.constants.Constants 9 | import com.varabyte.kobweb.compose.css.Transition 10 | import com.varabyte.kobweb.compose.foundation.layout.Box 11 | import com.varabyte.kobweb.compose.foundation.layout.Column 12 | import com.varabyte.kobweb.compose.ui.Alignment 13 | import com.varabyte.kobweb.compose.ui.Modifier 14 | import com.varabyte.kobweb.compose.ui.modifiers.* 15 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 16 | import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint 17 | import kotlinx.coroutines.delay 18 | import kotlinx.coroutines.launch 19 | import org.jetbrains.compose.web.ExperimentalComposeWebApi 20 | import org.jetbrains.compose.web.css.deg 21 | import org.jetbrains.compose.web.css.ms 22 | import org.jetbrains.compose.web.css.percent 23 | import org.jetbrains.compose.web.css.px 24 | 25 | @Composable 26 | fun ContactSection() = Box( 27 | modifier = Modifier 28 | .padding(topBottom = 100.px), 29 | contentAlignment = Alignment.Center 30 | ) { 31 | ContactContent() 32 | } 33 | 34 | @OptIn(ExperimentalComposeWebApi::class) 35 | @Composable 36 | private fun ContactContent() { 37 | val breakpoint = rememberBreakpoint() 38 | val scope = rememberCoroutineScope() 39 | var animatedRotation by remember { mutableStateOf(0.0) } 40 | 41 | if (Constants.ANIMATION_ENABLED) { 42 | ObserveViewportEntered( 43 | sectionId = HomePageSections.Contact.id, 44 | distanceFromTop = 500.0 45 | ) { 46 | animatedRotation = 10.0 47 | scope.launch { 48 | delay(500) 49 | animatedRotation = 0.0 50 | } 51 | } 52 | } 53 | 54 | Column( 55 | modifier = Modifier 56 | .fillMaxWidth( 57 | if (breakpoint >= Breakpoint.MD) 100.percent 58 | else 90.percent 59 | ), 60 | horizontalAlignment = Alignment.CenterHorizontally 61 | ) { 62 | SectionTitle( 63 | modifier = Modifier 64 | .margin(bottom = 20.px) 65 | .transform { 66 | if (!Constants.ANIMATION_ENABLED) return@transform 67 | rotate(animatedRotation.deg) 68 | } 69 | .transition( 70 | Transition.of( 71 | property = "transform", 72 | duration = 500.ms, 73 | delay = null 74 | ) 75 | ), 76 | section = HomePageSections.Contact, 77 | alignment = Alignment.CenterHorizontally 78 | ) 79 | ContactForm() 80 | } 81 | } 82 | 83 | -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/contact/components/TextInput.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.contact.components 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.models.ThemeColors 5 | import com.varabyte.kobweb.compose.css.FontWeight 6 | import com.varabyte.kobweb.compose.css.Resize 7 | import com.varabyte.kobweb.compose.css.Transition 8 | import com.varabyte.kobweb.compose.foundation.layout.Column 9 | import com.varabyte.kobweb.compose.ui.Modifier 10 | import com.varabyte.kobweb.compose.ui.attrsModifier 11 | import com.varabyte.kobweb.compose.ui.modifiers.* 12 | import com.varabyte.kobweb.compose.ui.toAttrs 13 | import com.varabyte.kobweb.silk.style.CssStyle 14 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 15 | import com.varabyte.kobweb.silk.style.selectors.focus 16 | import com.varabyte.kobweb.silk.style.selectors.placeholderShown 17 | import com.varabyte.kobweb.silk.style.toModifier 18 | import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint 19 | import org.jetbrains.compose.web.attributes.InputType 20 | import org.jetbrains.compose.web.css.Color 21 | import org.jetbrains.compose.web.css.LineStyle 22 | import org.jetbrains.compose.web.css.ms 23 | import org.jetbrains.compose.web.css.px 24 | import org.jetbrains.compose.web.dom.Input 25 | import org.jetbrains.compose.web.dom.Label 26 | import org.jetbrains.compose.web.dom.Text 27 | import org.jetbrains.compose.web.dom.TextArea 28 | 29 | val MyTextInputStyle = CssStyle { 30 | base { 31 | Modifier 32 | .border(width = 2.px, style = LineStyle.Solid, color = ThemeColors.LightGray.colorValue) 33 | .backgroundColor(ThemeColors.LighterGray.colorValue) 34 | .borderRadius(r = 6.px) 35 | .fontSize(18.px) 36 | .padding(12.px) 37 | .transition( 38 | Transition.of(property = "border-color", duration = 150.ms), 39 | // CSSTransition(property = "border-width", duration = 150.ms), 40 | Transition.of(property = "border-shadow", duration = 200.ms), 41 | ) 42 | } 43 | placeholderShown { 44 | Modifier 45 | .color(Color("#6c757d")) 46 | // .fontSize(14.px) 47 | .fontWeight(FontWeight.Normal) 48 | } 49 | focus { 50 | Modifier 51 | .border(width = 3.px, style = LineStyle.Solid, color = ThemeColors.Primary.colorValue) 52 | .outline(style = LineStyle.None) 53 | .boxShadow( 54 | color = ThemeColors.Primary.colorValue, 55 | spreadRadius = 1.px 56 | ) 57 | } 58 | } 59 | 60 | @Composable 61 | fun MyTextInput( 62 | modifier: Modifier = Modifier, 63 | breakpoint: Breakpoint = rememberBreakpoint(), 64 | labelText: String = "", 65 | hintText: String = "", 66 | type: InputType.InputTypeWithStringValue = InputType.Text, // only for non-text area 67 | id: String, 68 | required: Boolean = true, 69 | value: String = "", 70 | formInputName: String? = null, 71 | textArea: Boolean = false, 72 | ) { 73 | Column { 74 | Label( 75 | forId = id, 76 | attrs = Modifier 77 | .margin(bottom = 8.px) 78 | .toAttrs() 79 | ) { 80 | Text(labelText) 81 | } 82 | val sharedModifier = MyTextInputStyle 83 | .toModifier() 84 | .width( 85 | if (breakpoint >= Breakpoint.MD) 400.px 86 | else 300.px 87 | ) 88 | .height(35.px) 89 | .id(id) 90 | .attrsModifier { 91 | attr("placeholder", hintText) 92 | if (required) { 93 | attr("required", "true") 94 | } 95 | attr("value", value) // doesn't work for TextArea 96 | if (formInputName != null) { 97 | attr("name", formInputName) 98 | } 99 | } 100 | .then(modifier) 101 | if (textArea) { 102 | TextArea( 103 | attrs = sharedModifier 104 | .resize(Resize.Vertical) 105 | .toAttrs() 106 | ) 107 | return@Column 108 | } 109 | Input( 110 | type = type, 111 | attrs = sharedModifier 112 | .toAttrs(), 113 | ) 114 | } 115 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/devices/DevicesSection.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.devices 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.SectionTitle 5 | import net.freshplatform.alrayada_web.models.HomePageSections 6 | import net.freshplatform.alrayada_web.sections.devices.componenets.DeviceItem 7 | import net.freshplatform.alrayada_web.sections.devices.models.Device 8 | import com.varabyte.kobweb.compose.foundation.layout.Box 9 | import com.varabyte.kobweb.compose.foundation.layout.Column 10 | import com.varabyte.kobweb.compose.ui.Alignment 11 | import com.varabyte.kobweb.compose.ui.Modifier 12 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth 13 | import com.varabyte.kobweb.compose.ui.modifiers.margin 14 | import com.varabyte.kobweb.compose.ui.modifiers.padding 15 | import com.varabyte.kobweb.silk.components.layout.SimpleGrid 16 | import com.varabyte.kobweb.silk.components.layout.numColumns 17 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 18 | import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint 19 | import org.jetbrains.compose.web.css.percent 20 | import org.jetbrains.compose.web.css.px 21 | 22 | @Composable 23 | fun DevicesSection() = Box( 24 | modifier = Modifier 25 | .padding(topBottom = 100.px), 26 | contentAlignment = Alignment.Center 27 | ) { 28 | DevicesContent() 29 | } 30 | 31 | @Composable 32 | private fun DevicesContent() { 33 | val breakpoint = rememberBreakpoint() 34 | 35 | Column( 36 | modifier = Modifier 37 | .fillMaxWidth( 38 | if (breakpoint >= Breakpoint.MD) 100.percent 39 | else 90.percent 40 | ), 41 | horizontalAlignment = Alignment.CenterHorizontally 42 | ) { 43 | SectionTitle( 44 | section = HomePageSections.Devices, 45 | modifier = Modifier 46 | .margin(bottom = 40.px) 47 | ) 48 | DevicesCards() 49 | } 50 | } 51 | 52 | @Composable 53 | private fun DevicesCards(modifier: Modifier = Modifier) { 54 | SimpleGrid( 55 | modifier = modifier, 56 | numColumns = numColumns(base = 1, xl = 2) 57 | ) { 58 | val devices = Device.entries 59 | devices.forEach { 60 | val isLast = devices.last() == it 61 | DeviceItem( 62 | device = it, 63 | modifier = Modifier.padding(12.px), 64 | isLast = isLast 65 | ) 66 | } 67 | } 68 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/devices/models/Device.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.devices.models 2 | 3 | import net.freshplatform.alrayada_web.core.data.StringRes 4 | import net.freshplatform.alrayada_web.utils.constants.PublicRes 5 | 6 | enum class Device( 7 | val imagePath: String, 8 | val companyName: String, 9 | val deviceName: String, 10 | val desc: String, 11 | val features: List 12 | ) { 13 | One( 14 | PublicRes.Assets.Images.Brands.SNIBE_LOGO, 15 | "Snibe", 16 | "Maglumi 800", 17 | "Chemiluminescence Immunoassay (CLIA) System", 18 | listOf( 19 | StringRes.ThroughputUpTo180TestHour, 20 | StringRes.TwentyFourHoursReadyToUse, 21 | StringRes.TimeToFirstResult17Minutes, 22 | StringRes.UpTo40SampleTubes, 23 | StringRes.NineReagentsOnBoard, 24 | StringRes.ReadyToUseNoPretreatmentRequired, 25 | ) 26 | ), 27 | Two( 28 | PublicRes.Assets.Images.Brands.SNIBE_LOGO, 29 | "Dirui", 30 | "CS-680 Auto", 31 | "Chemistry Analyze", 32 | listOf( 33 | StringRes.CompactSizeWithRobustFunction, 34 | StringRes.ReliableRefrigeratedSystemForReagentsAndSamplePositions, 35 | StringRes.BiDirectionalLISHISSystemToRealizeRemoteOperationAndMinimalMaintenance, 36 | StringRes.AutoDilutionAndAutoRerunFunction 37 | ) 38 | ), 39 | Three( 40 | PublicRes.Assets.Images.Brands.SNIBE_LOGO, 41 | "Urit-5160", 42 | "Biolab Diagnostics", 43 | "5-Part-Diff Hematology Analyzer", 44 | listOf( 45 | StringRes.ThirtyFourParametersIncludingRETICABSRETICIRF, 46 | StringRes.HourlyThroughputUpTo60Samples, 47 | StringRes.ResistantRBCMode, 48 | StringRes.GivesResultsWithinOneMinute, 49 | ) 50 | ), 51 | Four( 52 | PublicRes.Assets.Images.Brands.SNIBE_LOGO, 53 | "Lifotonic", 54 | "Device", 55 | "H8-Hemoglobin Analyzer (HPLC)", 56 | listOf( 57 | StringRes.TenSamplePosition, 58 | StringRes.SeventyTwoSecondsPerTest, 59 | StringRes.TestItemHbA1abLA1cHbFA1cAOHbVariant 60 | ) 61 | ), 62 | Five( 63 | PublicRes.Assets.Images.Brands.SNIBE_LOGO, 64 | "Lifotonic", 65 | "Device 2", 66 | "H9-Hemoglobin Analyzer", 67 | listOf( 68 | StringRes.OneHundredTenSamplePositions, 69 | StringRes.VariantModeThalassemiaMode, 70 | StringRes.VariantModeTestItemsHbA1abLA1cHbFA1cAOHbVariant, 71 | StringRes.ThalassemiaModeTestItemsHbA1abLA1cHbFA1cAOHbVariantHbA2 72 | ) 73 | ) 74 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/experience/ExperienceSection.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.experience 2 | 3 | import androidx.compose.runtime.* 4 | import net.freshplatform.alrayada_web.components.SectionTitle 5 | import net.freshplatform.alrayada_web.models.HomePageSections 6 | import net.freshplatform.alrayada_web.sections.experience.componenets.ExperienceCard 7 | import net.freshplatform.alrayada_web.sections.experience.models.Experience 8 | import net.freshplatform.alrayada_web.utils.ObserveViewportEntered 9 | import net.freshplatform.alrayada_web.utils.constants.Constants 10 | import com.varabyte.kobweb.compose.foundation.layout.Box 11 | import com.varabyte.kobweb.compose.foundation.layout.Column 12 | import com.varabyte.kobweb.compose.ui.Alignment 13 | import com.varabyte.kobweb.compose.ui.Modifier 14 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth 15 | import com.varabyte.kobweb.compose.ui.modifiers.margin 16 | import com.varabyte.kobweb.compose.ui.modifiers.padding 17 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 18 | import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint 19 | import org.jetbrains.compose.web.css.percent 20 | import org.jetbrains.compose.web.css.px 21 | 22 | @Composable 23 | fun ExperienceSection() = Box( 24 | modifier = Modifier 25 | .padding(topBottom = 100.px), 26 | contentAlignment = Alignment.Center 27 | ) { 28 | ExperienceContent() 29 | } 30 | 31 | @Composable 32 | private fun ExperienceContent() { 33 | val breakpoint = rememberBreakpoint() 34 | 35 | var animatedMargin by remember { mutableStateOf(200) } 36 | 37 | if (Constants.ANIMATION_ENABLED) { 38 | ObserveViewportEntered( 39 | sectionId = HomePageSections.Experience.id, 40 | distanceFromTop = 500.0, 41 | ) { 42 | animatedMargin = 50 43 | } 44 | } 45 | Column( 46 | modifier = Modifier 47 | .fillMaxWidth( 48 | if (breakpoint >= Breakpoint.MD) 100.percent 49 | else 90.percent 50 | ), 51 | horizontalAlignment = Alignment.CenterHorizontally 52 | ) { 53 | SectionTitle( 54 | modifier = Modifier 55 | .margin(bottom = 25.px) 56 | .fillMaxWidth( 57 | if (breakpoint >= Breakpoint.MD) 60.percent 58 | else 90.percent 59 | ), 60 | section = HomePageSections.Experience, 61 | ) 62 | val experiences = Experience.entries 63 | experiences.forEach { experience -> 64 | ExperienceCard( 65 | isActive = experience == experiences.first(), 66 | experience = experience, 67 | breakpoint = breakpoint, 68 | animatedMargin = animatedMargin.px 69 | ) 70 | } 71 | } 72 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/experience/models/Experience.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.experience.models 2 | 3 | import net.freshplatform.alrayada_web.utils.constants.Constants 4 | 5 | enum class Experience( 6 | val number: String, 7 | val jobPosition: String, 8 | val description: String, 9 | val company: String, 10 | val from: String, 11 | val to: String, 12 | ) { 13 | First( 14 | number = "01", 15 | jobPosition = "Kotlin Multi-Platform Developer", 16 | description = Constants.LOREM_IPSUM_LONG, 17 | company = "Google", 18 | from = "February 2022", 19 | to = "NOW" 20 | ), 21 | Second( 22 | number = "02", 23 | jobPosition = "Game developer", 24 | description = Constants.LOREM_IPSUM_LONG, 25 | company = "CD Red Project", 26 | from = "July 2019", 27 | to = "2022" 28 | ), 29 | Third( 30 | number = "03", 31 | jobPosition = "Web Developer", 32 | description = Constants.LOREM_IPSUM_LONG, 33 | company = "Fresh Kernel", 34 | from = "March 2015", 35 | to = "2019" 36 | ), 37 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/location/LocationSection.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.location 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.SectionTitle 5 | import net.freshplatform.alrayada_web.components.core.Center 6 | import net.freshplatform.alrayada_web.components.core.MyImage 7 | import net.freshplatform.alrayada_web.models.HomePageSections 8 | import net.freshplatform.alrayada_web.sections.location.components.ContactUsInformation 9 | import net.freshplatform.alrayada_web.sections.location.components.IframeMap 10 | import net.freshplatform.alrayada_web.utils.constants.PublicRes 11 | import com.varabyte.kobweb.compose.foundation.layout.Box 12 | import com.varabyte.kobweb.compose.foundation.layout.Column 13 | import com.varabyte.kobweb.compose.ui.Alignment 14 | import com.varabyte.kobweb.compose.ui.Modifier 15 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxSize 16 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth 17 | import com.varabyte.kobweb.compose.ui.modifiers.margin 18 | import com.varabyte.kobweb.compose.ui.modifiers.padding 19 | import com.varabyte.kobweb.silk.style.breakpoint.displayIfAtLeast 20 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 21 | import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint 22 | import org.jetbrains.compose.web.css.percent 23 | import org.jetbrains.compose.web.css.px 24 | 25 | @Composable 26 | fun LocationSection() = Box( 27 | modifier = Modifier 28 | .padding(topBottom = 100.px), 29 | contentAlignment = Alignment.Center 30 | ) { 31 | LocationContent() 32 | } 33 | 34 | @Composable 35 | private fun LocationContent() { 36 | val breakpoint = rememberBreakpoint() 37 | Column( 38 | modifier = Modifier 39 | .fillMaxWidth( 40 | if (breakpoint >= Breakpoint.MD) 100.percent 41 | else 90.percent 42 | ), 43 | horizontalAlignment = Alignment.CenterHorizontally 44 | ) { 45 | SectionTitle( 46 | modifier = Modifier 47 | .fillMaxWidth( 48 | if (breakpoint > Breakpoint.LG) 55.percent 49 | else if (breakpoint >= Breakpoint.MD) 70.percent 50 | else 100.percent 51 | ) 52 | .margin(bottom = 40.px), 53 | section = HomePageSections.Location, 54 | alignment = Alignment.Start 55 | ) 56 | Box( 57 | modifier = Modifier 58 | .fillMaxSize() 59 | ) { 60 | MyImage( 61 | src = PublicRes.Assets.Svg.Waves.WAVE_1, 62 | contentDescription = "Wave Image", 63 | modifier = Modifier 64 | .displayIfAtLeast(Breakpoint.MD) 65 | .fillMaxWidth() 66 | ) 67 | Center { 68 | IframeMap(breakpoint = breakpoint) 69 | } 70 | } 71 | ContactUsInformation( 72 | modifier = Modifier 73 | .margin(top = 60.px) 74 | ) 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/location/components/IframeMap.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.location.components 2 | 3 | import androidx.compose.runtime.* 4 | import net.freshplatform.alrayada_web.components.CircularProgressIndicator 5 | import net.freshplatform.alrayada_web.utils.constants.SectionsConstants 6 | import net.freshplatform.alrayada_web.utils.extensions.requireElementByThisId 7 | import com.varabyte.kobweb.compose.ui.Modifier 8 | import com.varabyte.kobweb.compose.ui.modifiers.* 9 | import com.varabyte.kobweb.compose.ui.toAttrs 10 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 11 | import org.jetbrains.compose.web.css.LineStyle 12 | import org.jetbrains.compose.web.css.percent 13 | import org.jetbrains.compose.web.css.px 14 | import org.jetbrains.compose.web.dom.Iframe 15 | 16 | @Composable 17 | fun IframeMap(modifier: Modifier = Modifier, breakpoint: Breakpoint) { 18 | var isLoading by remember { mutableStateOf(true) } 19 | val iframeMapId = "iframeMap" 20 | LaunchedEffect(Unit) { 21 | val iframeMap = iframeMapId.requireElementByThisId() 22 | 23 | iframeMap.addEventListener("load", { 24 | isLoading = false 25 | }) 26 | } 27 | if (isLoading) { 28 | CircularProgressIndicator() 29 | } 30 | Iframe( 31 | attrs = Modifier 32 | .id(iframeMapId) 33 | .title("Google map") 34 | .fillMaxWidth( 35 | if (breakpoint > Breakpoint.LG) 65.percent 36 | else if (breakpoint >= Breakpoint.MD) 70.percent 37 | else 100.percent 38 | ) 39 | .minHeight(800.px) 40 | .borderRadius(r = 8.px) 41 | .border { 42 | style(LineStyle.None) 43 | } 44 | .margin(top = 200.px) 45 | .then(modifier) 46 | .toAttrs { 47 | attr("loading", "lazy") 48 | attr("allowfullscreen", "") 49 | attr("referrerpolicy", "no-referrer-when-downgrade") 50 | attr( 51 | "src", 52 | SectionsConstants.Location.MAP_API 53 | ) 54 | }, 55 | ) 56 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/location/models/ContactUsInfo.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.location.models 2 | 3 | import net.freshplatform.alrayada_web.utils.constants.Constants 4 | 5 | sealed class ContactUsData { 6 | data class PlainText( 7 | val text: String 8 | ) : ContactUsData() 9 | 10 | data class EmailsText( 11 | val emails: List = emptyList(), 12 | ) : ContactUsData() 13 | 14 | data class PhoneNumbersText( 15 | val phoneNumbers: List = emptyList(), 16 | ) : ContactUsData() 17 | 18 | data class TextLink( 19 | val label: String, 20 | val link: String 21 | ) : ContactUsData() 22 | } 23 | 24 | enum class ContactUsInfo( 25 | val icon: String, 26 | val data: ContactUsData 27 | ) { 28 | One( 29 | "location-dot", 30 | ContactUsData.PlainText("بغداد / الحارثية / شارع الكندي / عمارة الفراتين / 2ط") 31 | ), 32 | Two( 33 | "phone", 34 | ContactUsData.PhoneNumbersText( 35 | listOf("+9647901520604") 36 | ) 37 | ), 38 | Three( 39 | "envelope", 40 | ContactUsData.EmailsText( 41 | listOf("support@alrayada.net", "a.zeki@alrayada.com") 42 | ) 43 | ), 44 | Four( 45 | "globe", 46 | ContactUsData.TextLink( 47 | "www.alrayada.net", 48 | Constants.SocialMediaLinks.WEBSITE, 49 | ) 50 | ) 51 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/main/compoments/MobileNavigation.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.main.compoments 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.varabyte.kobweb.compose.css.TextAlign 5 | import com.varabyte.kobweb.compose.css.Transition 6 | import com.varabyte.kobweb.compose.foundation.layout.Box 7 | import com.varabyte.kobweb.compose.foundation.layout.Column 8 | import com.varabyte.kobweb.compose.ui.Alignment 9 | import com.varabyte.kobweb.compose.ui.Modifier 10 | import com.varabyte.kobweb.compose.ui.modifiers.* 11 | import org.jetbrains.compose.web.css.Color 12 | import org.jetbrains.compose.web.css.ms 13 | import org.jetbrains.compose.web.css.px 14 | 15 | 16 | @Composable 17 | fun MobileNavigation(modifier: Modifier = Modifier) { 18 | Box( 19 | modifier = Modifier 20 | .id("mobileNavigationItems") 21 | // .minHeight(300.px) 22 | // .backgroundColor(rgba(128, 128, 128, 0.5)) 23 | // .fillMaxWidth() 24 | .transition( 25 | Transition.of( 26 | property = "height", duration = 330.ms, 27 | ), 28 | Transition.of( 29 | property = "background-color", duration = 300.ms 30 | ), 31 | ) 32 | .classNames("hidden") 33 | .then(modifier), 34 | contentAlignment = Alignment.Center 35 | ) { 36 | Column { 37 | NavigationLinks( 38 | eachItemModifier = Modifier 39 | .padding(topBottom = 8.px, leftRight = 0.px) 40 | .fontSize(16.px) 41 | .fillMaxWidth() 42 | .color(Color("#21252A")) 43 | .textAlign(TextAlign.Center) 44 | ) 45 | } 46 | } 47 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/main/compoments/SocialBar.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.main.compoments 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.fa.FaIcon 5 | import net.freshplatform.alrayada_web.components.fa.IconCategory 6 | import net.freshplatform.alrayada_web.components.fa.IconSize 7 | import net.freshplatform.alrayada_web.models.SocialMediaLink 8 | import net.freshplatform.alrayada_web.models.ThemeColors 9 | import com.varabyte.kobweb.compose.css.Transition 10 | import com.varabyte.kobweb.compose.foundation.layout.Arrangement 11 | import com.varabyte.kobweb.compose.foundation.layout.Column 12 | import com.varabyte.kobweb.compose.foundation.layout.Row 13 | import com.varabyte.kobweb.compose.ui.Alignment 14 | import com.varabyte.kobweb.compose.ui.Modifier 15 | import com.varabyte.kobweb.compose.ui.graphics.Colors 16 | import com.varabyte.kobweb.compose.ui.modifiers.* 17 | import com.varabyte.kobweb.navigation.OpenLinkStrategy 18 | import com.varabyte.kobweb.silk.components.navigation.Link 19 | import com.varabyte.kobweb.silk.style.CssStyle 20 | import com.varabyte.kobweb.silk.style.selectors.hover 21 | import com.varabyte.kobweb.silk.style.toModifier 22 | import org.jetbrains.compose.web.css.Color 23 | import org.jetbrains.compose.web.css.ms 24 | import org.jetbrains.compose.web.css.px 25 | 26 | @Composable 27 | fun SocialBar(modifier: Modifier = Modifier, isRow: Boolean = false) { 28 | val sharedModifier = Modifier.borderRadius(r = 20.px) 29 | .backgroundColor(Colors.White) 30 | if (isRow) { 31 | Row( 32 | modifier = Modifier 33 | .margin(top = 25.px) 34 | .padding(leftRight = 25.px) 35 | .minHeight(40.px) 36 | .then(sharedModifier) 37 | .then(modifier), 38 | horizontalArrangement = Arrangement.Center, 39 | verticalAlignment = Alignment.CenterVertically 40 | ) { 41 | SocialMediaLink.entries.forEach { 42 | SocialLink(it, true) 43 | } 44 | } 45 | return 46 | } 47 | Column( 48 | modifier = Modifier 49 | .margin(right = 25.px) 50 | .padding(topBottom = 25.px) 51 | .minWidth(40.px) 52 | .then(sharedModifier) 53 | .then(modifier), 54 | verticalArrangement = Arrangement.Center, 55 | horizontalAlignment = Alignment.CenterHorizontally 56 | ) { 57 | SocialMediaLink.entries.forEach { 58 | SocialLink(it, false) 59 | } 60 | } 61 | } 62 | 63 | val SocialLinkItemStyle = CssStyle { 64 | base { 65 | Modifier 66 | .color(Color("#999999")) 67 | // .fontSize(25.px) 68 | .transition( 69 | Transition.of( 70 | property = "color", 71 | duration = 100.ms, 72 | ) 73 | ) 74 | } 75 | hover { 76 | Modifier.color(ThemeColors.Primary.colorValue) 77 | } 78 | } 79 | 80 | @Composable 81 | private fun SocialLink(socialMediaLink: SocialMediaLink, row: Boolean) { 82 | Link( 83 | path = socialMediaLink.path, 84 | openExternalLinksStrategy = OpenLinkStrategy.IN_NEW_TAB, 85 | modifier = Modifier 86 | .title(socialMediaLink.name) 87 | ) { 88 | val isLastOne = socialMediaLink == SocialMediaLink.entries.last() 89 | FaIcon( 90 | modifier = SocialLinkItemStyle 91 | .toModifier() 92 | .margin( 93 | bottom = if (isLastOne) 0.px else if (row) 0.px else 40.px, 94 | right = if (isLastOne) 0.px else if (row) 40.px else 0.px 95 | ), 96 | size = IconSize.LG, 97 | style = IconCategory.BRAND, 98 | name = socialMediaLink.iconName, 99 | ) 100 | } 101 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/mobile_app/MobileAppSection.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.mobile_app 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.SectionTitle 5 | import net.freshplatform.alrayada_web.components.core.MyImage 6 | import net.freshplatform.alrayada_web.core.data.StringRes 7 | import net.freshplatform.alrayada_web.core.services.localization.stringResource 8 | import net.freshplatform.alrayada_web.models.HomePageSections 9 | import net.freshplatform.alrayada_web.sections.mobile_app.componenets.DownloadButtons 10 | import net.freshplatform.alrayada_web.sections.mobile_app.componenets.DownloadQrCode 11 | import net.freshplatform.alrayada_web.styles.ReadableTextStyleOnWhiteBackground 12 | import net.freshplatform.alrayada_web.utils.constants.PublicRes 13 | import com.varabyte.kobweb.compose.foundation.layout.Box 14 | import com.varabyte.kobweb.compose.foundation.layout.Column 15 | import com.varabyte.kobweb.compose.ui.Alignment 16 | import com.varabyte.kobweb.compose.ui.Modifier 17 | import com.varabyte.kobweb.compose.ui.modifiers.* 18 | import com.varabyte.kobweb.compose.ui.toAttrs 19 | import com.varabyte.kobweb.silk.components.layout.SimpleGrid 20 | import com.varabyte.kobweb.silk.components.layout.numColumns 21 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 22 | import com.varabyte.kobweb.silk.style.toModifier 23 | import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint 24 | import org.jetbrains.compose.web.css.percent 25 | import org.jetbrains.compose.web.css.px 26 | import org.jetbrains.compose.web.dom.P 27 | import org.jetbrains.compose.web.dom.Text 28 | 29 | @Composable 30 | fun MobileAppSection() = Box( 31 | modifier = Modifier 32 | .padding(topBottom = 100.px), 33 | contentAlignment = Alignment.Center 34 | ) { 35 | MobileAppContent() 36 | } 37 | 38 | @Composable 39 | private fun MobileAppContent() { 40 | val breakpoint = rememberBreakpoint() 41 | SimpleGrid( 42 | numColumns = numColumns(base = 1, xl = 2), 43 | modifier = Modifier.fillMaxWidth( 44 | if (breakpoint >= Breakpoint.MD) 80.percent 45 | else 90.percent 46 | ) 47 | ) { 48 | MobileAppData( 49 | modifier = Modifier.fillMaxWidth(70.percent) 50 | ) 51 | MobileAppImage( 52 | modifier = Modifier.fillMaxWidth() 53 | ) 54 | } 55 | } 56 | 57 | @Composable 58 | private fun MobileAppData(modifier: Modifier = Modifier) { 59 | Column( 60 | modifier = Modifier 61 | .then(modifier) 62 | ) { 63 | SectionTitle( 64 | section = HomePageSections.MobileApp, 65 | modifier = Modifier.margin(bottom = 16.px), 66 | // alignment = Alignment.CenterHorizontally 67 | ) 68 | P( 69 | attrs = ReadableTextStyleOnWhiteBackground 70 | .toModifier() 71 | .fillMaxWidth() 72 | .margin(topBottom = 0.px) 73 | .fontSize(20.px) 74 | .lineHeight(1.4) 75 | .toAttrs() 76 | ) { 77 | Text(stringResource(StringRes.MobileAppDesc)) 78 | } 79 | SimpleGrid( 80 | numColumns = numColumns(base = 1, lg = 2), 81 | modifier = Modifier 82 | .margin(top = 40.px), 83 | ) { 84 | DownloadButtons( 85 | modifier = Modifier 86 | .margin(top = 20.px) 87 | ) 88 | DownloadQrCode( 89 | modifier = Modifier.margin(left = 20.px) 90 | ) 91 | } 92 | } 93 | } 94 | 95 | @Composable 96 | fun MobileAppImage(modifier: Modifier = Modifier) { 97 | Box( 98 | modifier = Modifier 99 | .fillMaxWidth() 100 | .maxHeight(700.px) 101 | ) { 102 | MyImage( 103 | src = PublicRes.Assets.Svg.MOBILE_DEVELOPMENT1, 104 | contentDescription = "Mobile app", 105 | modifier = Modifier 106 | // .border(4.px, LineStyle.Solid, Colors.Black) 107 | .fillMaxSize() 108 | .then(modifier) 109 | ) 110 | } 111 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/mobile_app/componenets/DownloadInfo.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.mobile_app.componenets 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.core.MyImage 5 | import net.freshplatform.alrayada_web.sections.mobile_app.models.MobileApp 6 | import net.freshplatform.alrayada_web.utils.constants.PublicRes 7 | import com.varabyte.kobweb.compose.foundation.layout.Arrangement 8 | import com.varabyte.kobweb.compose.foundation.layout.Column 9 | import com.varabyte.kobweb.compose.ui.Alignment 10 | import com.varabyte.kobweb.compose.ui.Modifier 11 | import com.varabyte.kobweb.compose.ui.modifiers.margin 12 | import com.varabyte.kobweb.compose.ui.thenIf 13 | import com.varabyte.kobweb.compose.ui.toAttrs 14 | import com.varabyte.kobweb.silk.style.breakpoint.displayUntil 15 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 16 | import org.jetbrains.compose.web.css.px 17 | import org.jetbrains.compose.web.dom.Div 18 | 19 | @Composable 20 | fun DownloadButtons(modifier: Modifier = Modifier) { 21 | Column( 22 | modifier = Modifier.then(modifier), 23 | verticalArrangement = Arrangement.Center, 24 | horizontalAlignment = Alignment.CenterHorizontally 25 | ) { 26 | val downloads = MobileApp.entries 27 | downloads.forEach { 28 | val isLast = downloads.last() == it 29 | DownloadMobileAppButton( 30 | modifier = Modifier 31 | .thenIf( 32 | !isLast, 33 | Modifier.margin(bottom = 12.px) 34 | ), 35 | mobileApp = it 36 | ) 37 | } 38 | } 39 | } 40 | 41 | @Composable 42 | fun DownloadQrCode(modifier: Modifier = Modifier) { 43 | MyImage( 44 | src = PublicRes.Assets.Images.MobileApp.QR_CODE, 45 | contentDescription = "Download App by QR Code", 46 | modifier = Modifier 47 | // .displayIfAtLeast(Breakpoint.LG) 48 | .then(modifier) 49 | ) 50 | Div( 51 | attrs = Modifier 52 | .displayUntil(Breakpoint.LG) 53 | .margin(top = 40.px) 54 | .toAttrs() 55 | ) 56 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/mobile_app/componenets/DownloadMobileAppButton.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.mobile_app.componenets 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.fa.FaIcon 5 | import net.freshplatform.alrayada_web.components.fa.IconCategory 6 | import net.freshplatform.alrayada_web.components.fa.IconSize 7 | import net.freshplatform.alrayada_web.models.ThemeColors 8 | import net.freshplatform.alrayada_web.sections.mobile_app.models.MobileApp 9 | import com.varabyte.kobweb.compose.css.FontWeight 10 | import com.varabyte.kobweb.compose.css.TextDecorationLine 11 | import com.varabyte.kobweb.compose.css.Transition 12 | import com.varabyte.kobweb.compose.foundation.layout.Column 13 | import com.varabyte.kobweb.compose.foundation.layout.Row 14 | import com.varabyte.kobweb.compose.ui.Alignment 15 | import com.varabyte.kobweb.compose.ui.Modifier 16 | import com.varabyte.kobweb.compose.ui.graphics.Colors 17 | import com.varabyte.kobweb.compose.ui.modifiers.* 18 | import com.varabyte.kobweb.compose.ui.toAttrs 19 | import com.varabyte.kobweb.navigation.OpenLinkStrategy 20 | import com.varabyte.kobweb.silk.components.navigation.Link 21 | import com.varabyte.kobweb.silk.style.CssStyle 22 | import com.varabyte.kobweb.silk.style.selectors.hover 23 | import com.varabyte.kobweb.silk.style.toModifier 24 | import org.jetbrains.compose.web.css.Color 25 | import org.jetbrains.compose.web.css.LineStyle 26 | import org.jetbrains.compose.web.css.ms 27 | import org.jetbrains.compose.web.css.px 28 | import org.jetbrains.compose.web.dom.P 29 | import org.jetbrains.compose.web.dom.Text 30 | 31 | val DownloadMobileAppButtonStyle = CssStyle { 32 | base { 33 | Modifier 34 | .color(Colors.Black) 35 | .transition( 36 | Transition.of( 37 | property = "background-color", 38 | duration = 200.ms, 39 | ), 40 | Transition.of( 41 | property = "color", 42 | duration = 200.ms, 43 | ), 44 | ) 45 | } 46 | hover { 47 | Modifier 48 | .backgroundColor(Colors.Black) 49 | .color(ThemeColors.Primary.colorValue) 50 | } 51 | } 52 | 53 | @Composable 54 | fun DownloadMobileAppButton( 55 | modifier: Modifier = Modifier, 56 | mobileApp: MobileApp 57 | ) { 58 | Link( 59 | modifier = Modifier 60 | .width(220.px) 61 | .height(65.px) 62 | .textDecorationLine(TextDecorationLine.None) 63 | .title(mobileApp.title) 64 | then (modifier), 65 | path = mobileApp.downloadLink, 66 | openExternalLinksStrategy = OpenLinkStrategy.IN_NEW_TAB 67 | ) { 68 | Row( 69 | modifier = DownloadMobileAppButtonStyle 70 | .toModifier() 71 | .borderRadius(r = 20.px) 72 | .border(width = 1.px, LineStyle.Solid, Color("#EDEDED")) 73 | 74 | .fillMaxSize(), 75 | verticalAlignment = Alignment.CenterVertically 76 | ) { 77 | FaIcon( 78 | name = mobileApp.iconName, 79 | style = IconCategory.BRAND, 80 | modifier = Modifier 81 | // .fontSize(26.px) 82 | .margin(left = 16.px, right = 8.px), 83 | size = IconSize.X2 84 | ) 85 | Column { 86 | P( 87 | attrs = Modifier 88 | .fillMaxWidth() 89 | .margin(topBottom = 0.px) 90 | .fontSize(18.px) 91 | .fontWeight(FontWeight.Bold) 92 | .toAttrs() 93 | ) { 94 | Text(mobileApp.title) 95 | } 96 | Text(mobileApp.subtitle) 97 | } 98 | } 99 | } 100 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/mobile_app/models/MobileApp.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.mobile_app.models 2 | 3 | import net.freshplatform.alrayada_web.utils.constants.SectionsConstants 4 | 5 | enum class MobileApp( 6 | val title: String, 7 | val subtitle: String, 8 | val iconName: String, 9 | val downloadLink: String 10 | ) { 11 | GooglePlay( 12 | "GET IT ON", 13 | "Google play", 14 | "google-play", 15 | SectionsConstants.MobileApp.GOOGLE_PLAY 16 | ), 17 | AppleAppStore( 18 | "Download on The", 19 | "Apple Store", 20 | "apple", 21 | SectionsConstants.MobileApp.APPLE_APP_STORE 22 | ) 23 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/objective/components/ObjectiveCard.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.objective.components 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.core.services.localization.stringResource 5 | import net.freshplatform.alrayada_web.models.ThemeColors 6 | import net.freshplatform.alrayada_web.sections.objective.models.Objective 7 | import com.varabyte.kobweb.compose.css.FontWeight 8 | import com.varabyte.kobweb.compose.css.TextAlign 9 | import com.varabyte.kobweb.compose.css.Transition 10 | import com.varabyte.kobweb.compose.foundation.layout.Column 11 | import com.varabyte.kobweb.compose.ui.Modifier 12 | import com.varabyte.kobweb.compose.ui.graphics.Colors 13 | import com.varabyte.kobweb.compose.ui.modifiers.* 14 | import com.varabyte.kobweb.compose.ui.styleModifier 15 | import com.varabyte.kobweb.compose.ui.toAttrs 16 | import com.varabyte.kobweb.silk.components.layout.HorizontalDivider 17 | import com.varabyte.kobweb.silk.style.CssStyle 18 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 19 | import com.varabyte.kobweb.silk.style.selectors.hover 20 | import com.varabyte.kobweb.silk.style.toModifier 21 | import org.jetbrains.compose.web.css.ms 22 | import org.jetbrains.compose.web.css.percent 23 | import org.jetbrains.compose.web.css.px 24 | import org.jetbrains.compose.web.dom.P 25 | import org.jetbrains.compose.web.dom.Text 26 | 27 | val ObjectiveCardStyle = CssStyle { 28 | base { 29 | Modifier 30 | .backgroundColor(ThemeColors.Primary.colorValue) 31 | .color(Colors.White) 32 | .styleModifier { 33 | property("box-shadow", "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px") 34 | } 35 | .transition( 36 | Transition.of( 37 | property = "background-color", 38 | duration = 150.ms, 39 | ), 40 | Transition.of( 41 | property = "box-shadow", 42 | duration = 100.ms, 43 | ), 44 | Transition.of( 45 | property = "color", 46 | duration = 50.ms, 47 | ), 48 | ) 49 | } 50 | hover { 51 | Modifier 52 | // .color(Colors.DarkGray) 53 | .backgroundColor(ThemeColors.Secondary.colorValue) 54 | .styleModifier { 55 | property("box-shadow", "rgba(0, 0, 0, 0.35) 0px 5px 15px") 56 | } 57 | } 58 | } 59 | 60 | @Composable 61 | fun ObjectiveCard(modifier: Modifier = Modifier, objective: Objective, breakpoint: Breakpoint) { 62 | Column( 63 | modifier = ObjectiveCardStyle 64 | .toModifier() 65 | .minHeight(50.px) 66 | .padding(16.px) 67 | .fillMaxWidth( 68 | if (breakpoint > Breakpoint.MD) 30.percent 69 | else if (breakpoint >= Breakpoint.MD) 40.percent 70 | else 90.percent 71 | ) 72 | .borderRadius(r = 8.px) 73 | .then(modifier) 74 | ) { 75 | P( 76 | attrs = Modifier 77 | .fillMaxWidth() 78 | .margin(topBottom = 0.px) 79 | .fontSize(24.px) 80 | .fontWeight(FontWeight.Bold) 81 | // .color(Colors.White) 82 | .textAlign(TextAlign.Center) 83 | .toAttrs() 84 | ) { 85 | Text(stringResource(objective.titleRes)) 86 | } 87 | 88 | HorizontalDivider( 89 | modifier = Modifier 90 | .height(4.px) 91 | .width(120.px) 92 | .backgroundColor(Colors.White) 93 | .borderRadius(r = 8.px) 94 | ) 95 | 96 | P( 97 | attrs = Modifier 98 | .fillMaxWidth() 99 | .margin(topBottom = 0.px) 100 | .fontSize(14.px) 101 | .fontWeight(FontWeight.Normal) 102 | // .color(Colors.White) 103 | .lineHeight(1.6) 104 | .toAttrs() 105 | ) { 106 | Text(stringResource(objective.descRes)) 107 | } 108 | } 109 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/objective/models/Objective.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.objective.models 2 | 3 | import net.freshplatform.alrayada_web.core.data.StringRes 4 | 5 | enum class Objective( 6 | val titleRes: StringRes, 7 | val descRes: StringRes, 8 | ) { 9 | One( 10 | StringRes.OurVision, 11 | StringRes.OurVisionText 12 | ), 13 | Two( 14 | StringRes.OurMission, 15 | StringRes.OurMissionText 16 | ), 17 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/our_customers/OurCustomersSection.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.our_customers 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.SectionTitle 5 | import net.freshplatform.alrayada_web.components.core.CenterHorizontally 6 | import net.freshplatform.alrayada_web.models.HomePageSections 7 | import net.freshplatform.alrayada_web.sections.our_customers.componenets.OurCustomerItem 8 | import net.freshplatform.alrayada_web.sections.our_customers.models.OurCustomer 9 | import com.varabyte.kobweb.compose.foundation.layout.Box 10 | import com.varabyte.kobweb.compose.foundation.layout.Column 11 | import com.varabyte.kobweb.compose.ui.Alignment 12 | import com.varabyte.kobweb.compose.ui.Modifier 13 | import com.varabyte.kobweb.compose.ui.modifiers.alignContent 14 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth 15 | import com.varabyte.kobweb.compose.ui.modifiers.margin 16 | import com.varabyte.kobweb.compose.ui.modifiers.padding 17 | import com.varabyte.kobweb.silk.components.layout.SimpleGrid 18 | import com.varabyte.kobweb.silk.components.layout.numColumns 19 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 20 | import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint 21 | import org.jetbrains.compose.web.css.AlignContent 22 | import org.jetbrains.compose.web.css.percent 23 | import org.jetbrains.compose.web.css.px 24 | 25 | @Composable 26 | fun OurCustomersSection() = Box( 27 | modifier = Modifier 28 | .padding(topBottom = 100.px), 29 | contentAlignment = Alignment.Center 30 | ) { 31 | OurCustomersContent() 32 | } 33 | 34 | @Composable 35 | private fun OurCustomersContent() { 36 | val breakpoint = rememberBreakpoint() 37 | Column( 38 | modifier = Modifier 39 | .fillMaxWidth( 40 | if (breakpoint >= Breakpoint.MD) 100.percent 41 | else 90.percent 42 | ), 43 | horizontalAlignment = Alignment.CenterHorizontally 44 | ) { 45 | SectionTitle( 46 | section = HomePageSections.OurCustomers, 47 | modifier = Modifier.fillMaxWidth( 48 | if (breakpoint >= Breakpoint.MD) 60.percent 49 | else 90.percent 50 | ) 51 | ) 52 | OurCustomersItems( 53 | modifier = Modifier 54 | .margin(top = 20.px) 55 | .fillMaxWidth( 56 | if (breakpoint >= Breakpoint.MD) 60.percent 57 | else 90.percent 58 | ) 59 | ) 60 | } 61 | } 62 | 63 | @Composable 64 | private fun OurCustomersItems(modifier: Modifier = Modifier) { 65 | SimpleGrid( 66 | numColumns = numColumns(base = 1, lg = 2, xl = 3), 67 | modifier = Modifier 68 | .padding(16.px) 69 | .then(modifier) 70 | .alignContent(AlignContent.Center) 71 | ) { 72 | OurCustomer.entries.forEach { 73 | CenterHorizontally { 74 | OurCustomerItem( 75 | ourCustomer = it 76 | ) 77 | } 78 | } 79 | } 80 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/our_customers/componenets/OurCustomerItem.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.our_customers.componenets 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.core.CenterHorizontally 5 | import net.freshplatform.alrayada_web.components.fa.FaIcon 6 | import net.freshplatform.alrayada_web.components.fa.IconCategory 7 | import net.freshplatform.alrayada_web.components.fa.IconSize 8 | import net.freshplatform.alrayada_web.core.services.localization.stringResource 9 | import net.freshplatform.alrayada_web.models.ThemeColors 10 | import net.freshplatform.alrayada_web.sections.our_customers.models.OurCustomer 11 | import com.varabyte.kobweb.compose.css.FontWeight 12 | import com.varabyte.kobweb.compose.css.TextAlign 13 | import com.varabyte.kobweb.compose.foundation.layout.Box 14 | import com.varabyte.kobweb.compose.foundation.layout.Column 15 | import com.varabyte.kobweb.compose.ui.Alignment 16 | import com.varabyte.kobweb.compose.ui.Modifier 17 | import com.varabyte.kobweb.compose.ui.modifiers.* 18 | import com.varabyte.kobweb.compose.ui.toAttrs 19 | import org.jetbrains.compose.web.css.LineStyle 20 | import org.jetbrains.compose.web.css.px 21 | import org.jetbrains.compose.web.dom.P 22 | import org.jetbrains.compose.web.dom.Text 23 | 24 | @Composable 25 | fun OurCustomerItem( 26 | modifier: Modifier = Modifier, 27 | ourCustomer: OurCustomer 28 | ) { 29 | Column( 30 | modifier = Modifier 31 | .minHeight(300.px) 32 | .maxWidth(250.px) 33 | .padding(16.px) 34 | .then(modifier) 35 | ) { 36 | ImageBox( 37 | ourCustomer = ourCustomer, 38 | modifier = Modifier 39 | .margin(bottom = 12.px) 40 | ) 41 | CenterHorizontally { 42 | P( 43 | attrs = Modifier 44 | .margin(topBottom = 0.px) 45 | .fontSize(22.px) 46 | .color(ThemeColors.GoldenOlive.colorValue) 47 | .fontWeight(FontWeight.Normal) 48 | .lineHeight(1.4) 49 | .textAlign(TextAlign.Center) 50 | .toAttrs() 51 | ) { 52 | Text(stringResource(ourCustomer.title)) 53 | } 54 | } 55 | } 56 | } 57 | 58 | @Composable 59 | private fun ImageBox( 60 | modifier: Modifier = Modifier, 61 | ourCustomer: OurCustomer 62 | ) { 63 | val sharedModifier = Modifier 64 | .borderRadius(r = 100.px) 65 | Box( 66 | modifier = Modifier 67 | .border( 68 | width = 3.px, 69 | color = ThemeColors.Primary.colorValue, 70 | style = LineStyle.Solid 71 | ) 72 | .then(sharedModifier) 73 | .padding(6.px) 74 | .then(modifier), 75 | contentAlignment = Alignment.Center 76 | ) { 77 | Box( 78 | modifier = Modifier 79 | .border( 80 | width = 2.px, 81 | color = ThemeColors.GoldenOlive.colorValue, 82 | style = LineStyle.Solid 83 | ) 84 | .then(sharedModifier) 85 | .padding(64.px) 86 | ) { 87 | FaIcon( 88 | name = ourCustomer.icon, 89 | size = IconSize.X3, 90 | style = IconCategory.SOLID, 91 | modifier = Modifier 92 | .color(ThemeColors.Primary.colorValue) 93 | .fillMaxSize() 94 | ) 95 | } 96 | } 97 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/our_customers/models/OurCustomer.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.our_customers.models 2 | 3 | import net.freshplatform.alrayada_web.core.data.StringRes 4 | 5 | enum class OurCustomer( 6 | val icon: String, 7 | val title: StringRes 8 | ) { 9 | MinistryOfHealth( 10 | "tree", 11 | StringRes.MinistryOfHealth, 12 | ), 13 | OilMinistry( 14 | "oil-well", 15 | StringRes.OilMinistry, 16 | ), 17 | MinistryOfHigherEducationAndScientificResearch( 18 | "school", 19 | StringRes.MinistryOfHigherEducationAndScientificResearch, 20 | ), 21 | PrivateSector( 22 | "handshake", 23 | StringRes.PrivateSector, 24 | ), 25 | NonGovernmentalOrganization( 26 | "globe", 27 | StringRes.NonGovernmentalOrganization, 28 | ), 29 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/our_suppliers/OurSuppliersSection.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.our_suppliers 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.SectionTitle 5 | import net.freshplatform.alrayada_web.models.HomePageSections 6 | import net.freshplatform.alrayada_web.sections.our_suppliers.componenets.OurSupplierItem 7 | import net.freshplatform.alrayada_web.sections.our_suppliers.models.Supplier 8 | import com.varabyte.kobweb.compose.foundation.layout.Box 9 | import com.varabyte.kobweb.compose.foundation.layout.Column 10 | import com.varabyte.kobweb.compose.ui.Alignment 11 | import com.varabyte.kobweb.compose.ui.Modifier 12 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth 13 | import com.varabyte.kobweb.compose.ui.modifiers.margin 14 | import com.varabyte.kobweb.silk.components.layout.SimpleGrid 15 | import com.varabyte.kobweb.silk.components.layout.numColumns 16 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 17 | import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint 18 | import org.jetbrains.compose.web.css.percent 19 | import org.jetbrains.compose.web.css.px 20 | 21 | @Composable 22 | fun OurSuppliersSection() = Box( 23 | modifier = Modifier 24 | .margin(topBottom = 100.px), 25 | contentAlignment = Alignment.Center 26 | ) { 27 | OurSuppliersContent() 28 | } 29 | 30 | @Composable 31 | private fun OurSuppliersContent() { 32 | val breakpoint = rememberBreakpoint() 33 | Column( 34 | modifier = Modifier 35 | .fillMaxWidth( 36 | if (breakpoint >= Breakpoint.MD) 100.percent 37 | else 90.percent 38 | ), 39 | horizontalAlignment = Alignment.CenterHorizontally 40 | ) { 41 | SectionTitle( 42 | section = HomePageSections.OurSuppliers 43 | ) 44 | OurSuppliersItems( 45 | modifier = Modifier 46 | .fillMaxWidth(80.percent) 47 | .margin(top = 20.px) 48 | ) 49 | } 50 | } 51 | 52 | @Composable 53 | private fun OurSuppliersItems(modifier: Modifier = Modifier) { 54 | val breakpoint = rememberBreakpoint() 55 | SimpleGrid( 56 | numColumns = numColumns(base = 1, md = 2), 57 | modifier = Modifier 58 | .then(modifier) 59 | ) { 60 | val responsiveBreakpoint = Breakpoint.MD 61 | Supplier.entries.forEach { 62 | OurSupplierItem( 63 | supplier = it, 64 | responsiveBreakpoint = responsiveBreakpoint, 65 | breakpoint = breakpoint 66 | ) 67 | } 68 | } 69 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/our_suppliers/models/Supplier.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.our_suppliers.models 2 | 3 | import net.freshplatform.alrayada_web.core.data.StringRes 4 | import net.freshplatform.alrayada_web.utils.constants.PublicRes 5 | 6 | enum class Supplier( 7 | val supplierName: String, 8 | val imagePath: String, 9 | val supplierDesc: StringRes 10 | ) { 11 | Dirui( 12 | "Dirui", 13 | PublicRes.Assets.Images.Brands.DIRUI_LOGO, 14 | StringRes.DiruiDesc 15 | ), 16 | Snibe( 17 | "Snibe", 18 | PublicRes.Assets.Images.Brands.SNIBE_LOGO, 19 | StringRes.SnibeDesc 20 | ), 21 | Lifotronic( 22 | "Lifotronic", 23 | PublicRes.Assets.Images.Brands.LIFOTRONIC_LOGO, 24 | StringRes.LifotronicDesc 25 | ), 26 | Urit( 27 | "Urit", 28 | PublicRes.Assets.Images.Brands.URIT_LOGO, 29 | StringRes.UritDesc 30 | ), 31 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/our_values/OurValuesSection.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.our_values 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.SectionTitle 5 | import net.freshplatform.alrayada_web.core.data.StringRes 6 | import net.freshplatform.alrayada_web.core.services.localization.stringResource 7 | import net.freshplatform.alrayada_web.models.HomePageSections 8 | import net.freshplatform.alrayada_web.sections.our_values.components.OurValueItem 9 | import net.freshplatform.alrayada_web.sections.our_values.models.OurValueModel 10 | import net.freshplatform.alrayada_web.styles.ReadableTextStyleOnWhiteBackground 11 | import com.varabyte.kobweb.compose.css.FontStyle 12 | import com.varabyte.kobweb.compose.foundation.layout.Box 13 | import com.varabyte.kobweb.compose.foundation.layout.Column 14 | import com.varabyte.kobweb.compose.ui.Alignment 15 | import com.varabyte.kobweb.compose.ui.Modifier 16 | import com.varabyte.kobweb.compose.ui.modifiers.* 17 | import com.varabyte.kobweb.compose.ui.toAttrs 18 | import com.varabyte.kobweb.silk.components.layout.SimpleGrid 19 | import com.varabyte.kobweb.silk.components.layout.numColumns 20 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 21 | import com.varabyte.kobweb.silk.style.toModifier 22 | import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint 23 | import org.jetbrains.compose.web.css.percent 24 | import org.jetbrains.compose.web.css.px 25 | import org.jetbrains.compose.web.dom.Div 26 | import org.jetbrains.compose.web.dom.P 27 | import org.jetbrains.compose.web.dom.Text 28 | 29 | @Composable 30 | fun OurValuesSection() = Box( 31 | modifier = Modifier.padding(topBottom = 100.px), 32 | contentAlignment = Alignment.Center 33 | ) { 34 | OurValuesContent() 35 | } 36 | 37 | @Composable 38 | private fun OurValuesContent() { 39 | val breakpoint = rememberBreakpoint() 40 | Column( 41 | modifier = Modifier 42 | .fillMaxWidth( 43 | if (breakpoint >= Breakpoint.MD) 100.percent 44 | else 90.percent 45 | ), 46 | horizontalAlignment = Alignment.CenterHorizontally 47 | ) { 48 | Div( 49 | attrs = Modifier.fillMaxWidth( 50 | if (breakpoint >= Breakpoint.MD) 60.percent 51 | else 90.percent 52 | ).toAttrs() 53 | ) { 54 | SectionTitle( 55 | modifier = Modifier 56 | .margin(bottom = 40.px), 57 | section = HomePageSections.OurValues, 58 | alignment = Alignment.Start 59 | ) 60 | OurValuesDesc() 61 | 62 | OurValuesItems( 63 | modifier = Modifier.margin(top = 20.px) 64 | ) 65 | } 66 | } 67 | } 68 | 69 | @Composable 70 | private fun OurValuesDesc(modifier: Modifier = Modifier) { 71 | P( 72 | attrs = ReadableTextStyleOnWhiteBackground 73 | .toModifier() 74 | .fontStyle(FontStyle.Italic) 75 | .fillMaxWidth() 76 | .lineHeight(1.5) 77 | .margin(topBottom = 0.px) 78 | .fontSize(16.px) 79 | .then(modifier) 80 | .toAttrs() 81 | ) { 82 | Text(stringResource(StringRes.OurValuesDesc)) 83 | } 84 | } 85 | 86 | @Composable 87 | fun OurValuesItems(modifier: Modifier) { 88 | SimpleGrid( 89 | numColumns = numColumns( 90 | base = 1, 91 | md = 2 92 | ), 93 | modifier = Modifier 94 | .then(modifier) 95 | ) { 96 | OurValueModel.entries.forEach { 97 | OurValueItem(ourValueModel = it) 98 | } 99 | } 100 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/our_values/components/OurValueItem.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.our_values.components 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.CheckIndicator 5 | import net.freshplatform.alrayada_web.core.services.localization.stringResource 6 | import net.freshplatform.alrayada_web.models.ThemeColors 7 | import net.freshplatform.alrayada_web.sections.our_values.models.OurValueModel 8 | import com.varabyte.kobweb.compose.css.FontWeight 9 | import com.varabyte.kobweb.compose.foundation.layout.Row 10 | import com.varabyte.kobweb.compose.ui.Modifier 11 | import com.varabyte.kobweb.compose.ui.modifiers.* 12 | import com.varabyte.kobweb.compose.ui.toAttrs 13 | import com.varabyte.kobweb.silk.components.text.SpanText 14 | import org.jetbrains.compose.web.css.px 15 | import org.jetbrains.compose.web.dom.P 16 | import org.jetbrains.compose.web.dom.Text 17 | 18 | @Composable 19 | fun OurValueItem(modifier: Modifier = Modifier, ourValueModel: OurValueModel) { 20 | Row( 21 | modifier = Modifier 22 | .padding(16.px) 23 | .then(modifier), 24 | ) { 25 | CheckIndicator( 26 | modifier = Modifier 27 | .margin(right = 12.px) 28 | ) 29 | TextValue( 30 | ourValueModel = ourValueModel, 31 | ) 32 | } 33 | } 34 | 35 | @Composable 36 | private fun TextValue( 37 | modifier: Modifier = Modifier, 38 | ourValueModel: OurValueModel 39 | ) { 40 | P( 41 | attrs = Modifier 42 | .fillMaxWidth() 43 | .margin(topBottom = 0.px) 44 | .fontSize(14.px) 45 | .fontWeight(FontWeight.Normal) 46 | .lineHeight(1.6) 47 | .letterSpacing(1.2.px) 48 | .then(modifier) 49 | .toAttrs() 50 | ) { 51 | SpanText( 52 | text = "${stringResource(ourValueModel.value)}: ", 53 | modifier = Modifier 54 | .fontWeight(FontWeight.Light) 55 | .letterSpacing(0.px) 56 | .color(ThemeColors.Primary.colorValue) 57 | .fontSize(20.px) 58 | ) 59 | Text(stringResource(ourValueModel.desc)) 60 | } 61 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/our_values/models/OurValueModel.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.our_values.models 2 | 3 | import net.freshplatform.alrayada_web.core.data.StringRes 4 | 5 | enum class OurValueModel( 6 | val value: StringRes, 7 | val desc: StringRes 8 | ) { 9 | Quality( 10 | StringRes.Quality, 11 | StringRes.QualityValueDesc 12 | ), 13 | Leadership( 14 | StringRes.Leadership, 15 | StringRes.LeadershipValueDesc 16 | ), 17 | Diversity( 18 | StringRes.Diversity, 19 | StringRes.DiversityValueDesc 20 | ), 21 | Concentration( 22 | StringRes.Concentration, 23 | StringRes.ConcentrationValueDesc 24 | ) 25 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/portfolio/Styles.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.portfolio 2 | 3 | import net.freshplatform.alrayada_web.models.ThemeColors 4 | import net.freshplatform.alrayada_web.sections.portfolio.components.PORTFOLIO_CARD_HEIGHT 5 | import com.varabyte.kobweb.compose.css.Transition 6 | import com.varabyte.kobweb.compose.css.Visibility 7 | import com.varabyte.kobweb.compose.ui.Modifier 8 | import com.varabyte.kobweb.compose.ui.modifiers.* 9 | import com.varabyte.kobweb.silk.style.CssStyle 10 | import com.varabyte.kobweb.silk.style.selectors.hover 11 | import org.jetbrains.compose.web.css.ms 12 | import org.jetbrains.compose.web.css.percent 13 | import org.jetbrains.compose.web.css.px 14 | 15 | val PortfolioSectionStyle = CssStyle { 16 | /* Start of greenOverlay */ 17 | cssRule(" > #columnParent > #imageBox > #greenOverlay") { 18 | Modifier.width(0.px) 19 | .transition( 20 | Transition.of(property = "width", duration = 350.ms) 21 | ) 22 | } 23 | 24 | cssRule(":hover > #columnParent > #imageBox > #greenOverlay") { 25 | Modifier.width(PORTFOLIO_CARD_HEIGHT.px) 26 | } 27 | /* End of greenOverlay */ 28 | 29 | /* Start of linkIcon */ 30 | 31 | cssRule(" > #columnParent > #imageBox > #greenOverlay > #linkIcon") { 32 | val duration = 150.ms 33 | Modifier.visibility(Visibility.Hidden) 34 | .opacity(0.percent) 35 | .transition( 36 | Transition.of(property = "visibility", duration = duration), 37 | Transition.of(property = "opacity", duration = duration), 38 | ) 39 | } 40 | 41 | cssRule(":hover > #columnParent > #imageBox > #greenOverlay > #linkIcon") { 42 | Modifier.visibility(Visibility.Visible) 43 | .opacity(100.percent) 44 | } 45 | 46 | /* End of linkIcon */ 47 | 48 | /* Start of portfolioTitle */ 49 | 50 | cssRule(" > #columnParent > #portfolioTitle") { 51 | Modifier 52 | .color(ThemeColors.Secondary.colorValue) 53 | .translateX(0.percent) 54 | .transition( 55 | Transition.of(property = "color", duration = 200.ms), 56 | Transition.of(property = "translate", duration = 200.ms), 57 | ) 58 | } 59 | 60 | cssRule(":hover > #columnParent > #portfolioTitle") { 61 | Modifier 62 | .color(ThemeColors.Primary.colorValue) 63 | .translateX(5.percent) 64 | } 65 | 66 | /* End of portfolioTitle */ 67 | 68 | /* Start of portfolioDesc */ 69 | 70 | cssRule(" > #columnParent > #portfolioDesc") { 71 | Modifier 72 | .translateX(0.percent) 73 | .transition(Transition.of(property = "translate", duration = 200.ms)) 74 | } 75 | 76 | cssRule(":hover > #columnParent > #portfolioDesc") { 77 | Modifier 78 | .translateX(5.percent) 79 | } 80 | 81 | /* End of portfolioDesc */ 82 | } 83 | 84 | val PortfolioArrowIconStyle = CssStyle { 85 | base { 86 | Modifier 87 | .color(ThemeColors.Gray.colorValue) 88 | .transition(Transition.of(property = "color", duration = 100.ms)) 89 | } 90 | hover { 91 | Modifier.color(ThemeColors.Primary.colorValue) 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/portfolio/models/Portfolio.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.portfolio.models 2 | 3 | import net.freshplatform.alrayada_web.utils.constants.PublicRes 4 | 5 | enum class Portfolio( 6 | val image: String, 7 | val title: String, 8 | val description: String, 9 | val link: String 10 | ) { 11 | One( 12 | image = PublicRes.Assets.Images.LOGO, 13 | title = "Fresh Platform", 14 | description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae metus ac tortor faucibus tristique sit amet vel magna. Cras malesuada mi a urna varius, nec tempus justo suscipit. Integer pharetra felis sit amet magna scelerisque, in feugiat ante consequat. Donec fringilla enim vel risus tempor, at placerat purus rutrum. Phasellus sit amet augue ut ante vestibulum elementum. Aliquam erat volutpat. Ut quis felis id ligula pharetra gravida vel non purus. Sed sit amet purus id dui sollicitudin pharetra. Vivamus hendrerit lorem ut dolor maximus, et pharetra ipsum dictum.\n", 15 | link = "https://freshplatform.net" 16 | ), 17 | Two( 18 | image = PublicRes.Assets.Images.LOGO, 19 | title = "Dr.Riadh lab", 20 | description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae metus ac tortor faucibus tristique sit amet vel magna. Cras malesuada mi a urna varius, nec tempus justo suscipit. Integer pharetra felis sit amet magna scelerisque, in feugiat ante consequat. Donec fringilla enim vel risus tempor, at placerat purus rutrum. Phasellus sit amet augue ut ante vestibulum elementum. Aliquam erat volutpat. Ut quis felis id ligula pharetra gravida vel non purus. Sed sit amet purus id dui sollicitudin pharetra. Vivamus hendrerit lorem ut dolor maximus, et pharetra ipsum dictum.\n", 21 | link = "https://dr-riadhlab.com" 22 | ), 23 | Three( 24 | image = PublicRes.Assets.Images.LOGO, 25 | title = "Alrayada Company", 26 | description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae metus ac tortor faucibus tristique sit amet vel magna. Cras malesuada mi a urna varius, nec tempus justo suscipit. Integer pharetra felis sit amet magna scelerisque, in feugiat ante consequat. Donec fringilla enim vel risus tempor, at placerat purus rutrum. Phasellus sit amet augue ut ante vestibulum elementum. Aliquam erat volutpat. Ut quis felis id ligula pharetra gravida vel non purus. Sed sit amet purus id dui sollicitudin pharetra. Vivamus hendrerit lorem ut dolor maximus, et pharetra ipsum dictum.\n", 27 | link = "https://alrayada.net" 28 | ), 29 | Four( 30 | image = PublicRes.Assets.Images.LOGO, 31 | title = "Wallpaper engine port for linux", 32 | description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae metus ac tortor faucibus tristique sit amet vel magna. Cras malesuada mi a urna varius, nec tempus justo suscipit. Integer pharetra felis sit amet magna scelerisque, in feugiat ante consequat. Donec fringilla enim vel risus tempor, at placerat purus rutrum. Phasellus sit amet augue ut ante vestibulum elementum. Aliquam erat volutpat. Ut quis felis id ligula pharetra gravida vel non purus. Sed sit amet purus id dui sollicitudin pharetra. Vivamus hendrerit lorem ut dolor maximus, et pharetra ipsum dictum.\n", 33 | link = "https://github.com/freshtechtips/WallpaperEngineLinux" 34 | ), 35 | Five( 36 | image = PublicRes.Assets.Images.LOGO, 37 | title = "Other projects on github", 38 | description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae metus ac tortor faucibus tristique sit amet vel magna. Cras malesuada mi a urna varius, nec tempus justo suscipit. Integer pharetra felis sit amet magna scelerisque, in feugiat ante consequat. Donec fringilla enim vel risus tempor, at placerat purus rutrum. Phasellus sit amet augue ut ante vestibulum elementum. Aliquam erat volutpat. Ut quis felis id ligula pharetra gravida vel non purus. Sed sit amet purus id dui sollicitudin pharetra. Vivamus hendrerit lorem ut dolor maximus, et pharetra ipsum dictum.\n", 39 | link = "https://github.com/freshtechtips?tab=repositories" 40 | ) 41 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/products/ProductsSection.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.products 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.varabyte.kobweb.compose.foundation.layout.Box 5 | import com.varabyte.kobweb.compose.foundation.layout.Column 6 | import com.varabyte.kobweb.compose.ui.Alignment 7 | import com.varabyte.kobweb.compose.ui.Modifier 8 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth 9 | import com.varabyte.kobweb.compose.ui.modifiers.margin 10 | import com.varabyte.kobweb.compose.ui.modifiers.padding 11 | import com.varabyte.kobweb.silk.components.layout.SimpleGrid 12 | import com.varabyte.kobweb.silk.components.layout.numColumns 13 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 14 | import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint 15 | import net.freshplatform.alrayada_web.components.SectionTitle 16 | import net.freshplatform.alrayada_web.models.HomePageSections 17 | import net.freshplatform.alrayada_web.sections.products.components.ProductCard 18 | import net.freshplatform.alrayada_web.sections.products.models.Product 19 | import org.jetbrains.compose.web.css.percent 20 | import org.jetbrains.compose.web.css.px 21 | 22 | @Composable 23 | fun ProductsSection() = Box( 24 | modifier = Modifier 25 | .padding(topBottom = 100.px), 26 | contentAlignment = Alignment.Center 27 | ) { 28 | ProductsContent() 29 | } 30 | 31 | @Composable 32 | private fun ProductsContent() { 33 | val breakpoint = rememberBreakpoint() 34 | Column( 35 | modifier = Modifier 36 | .fillMaxWidth( 37 | if (breakpoint >= Breakpoint.MD) 100.percent 38 | else 90.percent 39 | ), 40 | horizontalAlignment = Alignment.CenterHorizontally 41 | ) { 42 | SectionTitle( 43 | modifier = Modifier.margin(bottom = 25.px), 44 | section = HomePageSections.Products, 45 | alignment = Alignment.CenterHorizontally 46 | ) 47 | 48 | ProductsCard() 49 | } 50 | } 51 | 52 | @Composable 53 | fun ProductsCard() { 54 | SimpleGrid( 55 | numColumns = numColumns(base = 1, md = 2, lg = 3) 56 | ) { 57 | Product.entries.forEach { 58 | ProductCard( 59 | product = it 60 | ) 61 | } 62 | } 63 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/products/components/ProductCard.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.products.components 2 | 3 | import androidx.compose.runtime.Composable 4 | import com.varabyte.kobweb.compose.css.* 5 | import com.varabyte.kobweb.compose.css.functions.grayscale 6 | import com.varabyte.kobweb.compose.foundation.layout.Box 7 | import com.varabyte.kobweb.compose.foundation.layout.Column 8 | import com.varabyte.kobweb.compose.ui.Modifier 9 | import com.varabyte.kobweb.compose.ui.modifiers.* 10 | import com.varabyte.kobweb.compose.ui.toAttrs 11 | import com.varabyte.kobweb.silk.components.navigation.Link 12 | import com.varabyte.kobweb.silk.style.CssStyle 13 | import com.varabyte.kobweb.silk.style.selectors.hover 14 | import com.varabyte.kobweb.silk.style.toModifier 15 | import net.freshplatform.alrayada_web.components.core.MyImage 16 | import net.freshplatform.alrayada_web.models.ThemeColors 17 | import net.freshplatform.alrayada_web.sections.products.models.Product 18 | import org.jetbrains.compose.web.css.ms 19 | import org.jetbrains.compose.web.css.percent 20 | import org.jetbrains.compose.web.css.px 21 | import org.jetbrains.compose.web.dom.P 22 | import org.jetbrains.compose.web.dom.Text 23 | 24 | 25 | val ProductImageStyle = CssStyle { 26 | base { 27 | Modifier 28 | .filter(grayscale(0.percent)) 29 | .transition(Transition.of(property = "filter", duration = 240.ms)) 30 | } 31 | hover { 32 | Modifier 33 | .filter(grayscale(100.percent)) 34 | } 35 | 36 | } 37 | 38 | @Composable 39 | fun ProductCard( 40 | modifier: Modifier = Modifier, 41 | product: Product 42 | ) { 43 | Link( 44 | modifier = Modifier 45 | .textDecorationLine(TextDecorationLine.None) 46 | .userSelect(UserSelect.None), 47 | path = product.link 48 | ) { 49 | Column( 50 | modifier = Modifier 51 | .margin(all = 6.px) 52 | .padding(leftRight = 12.px, topBottom = 16.px) 53 | .width(300.px) 54 | .then(modifier) 55 | ) { 56 | MyImage( 57 | modifier = ProductImageStyle 58 | .toModifier() 59 | .height(250.px) 60 | .fillMaxWidth() 61 | .borderRadius(r = 8.px), 62 | src = product.image, 63 | contentDescription = "${product.companyName} Image", 64 | ) 65 | Box(modifier = Modifier.height(12.px)) 66 | P( 67 | attrs = Modifier 68 | .fillMaxWidth() 69 | .margin(top = 7.px, bottom = 2.px) 70 | .fontSize(18.px) 71 | .fontWeight(FontWeight.Normal) 72 | .textAlign(TextAlign.Center) 73 | .color(ThemeColors.Primary.colorValue) 74 | .toAttrs() 75 | ) { 76 | Text(product.companyName) 77 | } 78 | } 79 | } 80 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/products/models/Product.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.products.models 2 | 3 | import net.freshplatform.alrayada_web.utils.constants.PublicRes 4 | 5 | enum class Product( 6 | val companyName: String, 7 | val link: String, 8 | val image: String 9 | ) { 10 | Snibe( 11 | companyName = "Snibe", 12 | link = "https://www.snibe.com/zh_en/en_products.aspx?id=65", 13 | image = PublicRes.Assets.Images.Brands.SNIBE_LOGO 14 | ), 15 | Dirui( 16 | companyName = "Dirui", 17 | link = "http://en.dirui.com.cn/list-22-1.html", 18 | image = PublicRes.Assets.Images.Brands.DIRUI_LOGO 19 | ), 20 | Lifotronic( 21 | companyName = "Lifotronic", 22 | link = "http://en.lifotronic.com/products/", 23 | image = PublicRes.Assets.Images.Brands.LIFOTRONIC_LOGO 24 | ), 25 | Urit( 26 | companyName = "Urit", 27 | link = "http://www.urit.com/en2/cpjjfa/list.aspx?lcid=15", 28 | image = PublicRes.Assets.Images.Brands.URIT_LOGO 29 | ), 30 | Caretium( 31 | companyName = "Caretium", 32 | link = "https://en.caretium.com/Product/989558469800067072.html", 33 | image = PublicRes.Assets.Images.Brands.CARETIUM_LOGO 34 | ) 35 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/products_old/ProductsSection.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.products_old 2 | 3 | import androidx.compose.runtime.* 4 | import com.varabyte.kobweb.compose.foundation.layout.Box 5 | import com.varabyte.kobweb.compose.foundation.layout.Column 6 | import com.varabyte.kobweb.compose.ui.Alignment 7 | import com.varabyte.kobweb.compose.ui.Modifier 8 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth 9 | import com.varabyte.kobweb.compose.ui.modifiers.margin 10 | import com.varabyte.kobweb.compose.ui.modifiers.padding 11 | import com.varabyte.kobweb.silk.components.layout.SimpleGrid 12 | import com.varabyte.kobweb.silk.components.layout.numColumns 13 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 14 | import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint 15 | import net.freshplatform.alrayada_web.components.SectionTitle 16 | import net.freshplatform.alrayada_web.components.core.CenterHorizontally 17 | import net.freshplatform.alrayada_web.models.HomePageSections 18 | import net.freshplatform.alrayada_web.sections.products_old.components.ProductCard 19 | import net.freshplatform.alrayada_web.sections.products_old.components.ProductsCategory 20 | import net.freshplatform.alrayada_web.sections.products_old.models.Product 21 | import net.freshplatform.alrayada_web.sections.products_old.models.ProductCategory 22 | import org.jetbrains.compose.web.css.percent 23 | import org.jetbrains.compose.web.css.px 24 | 25 | @Composable 26 | fun ProductsSection() = Box( 27 | modifier = Modifier 28 | .padding(topBottom = 100.px), 29 | contentAlignment = Alignment.Center 30 | ) { 31 | ProductsContent() 32 | } 33 | 34 | @Composable 35 | private fun ProductsContent() { 36 | val breakpoint = rememberBreakpoint() 37 | Column( 38 | modifier = Modifier 39 | .fillMaxWidth( 40 | if (breakpoint >= Breakpoint.MD) 100.percent 41 | else 90.percent 42 | ), 43 | horizontalAlignment = Alignment.CenterHorizontally 44 | ) { 45 | SectionTitle( 46 | modifier = Modifier.margin(bottom = 25.px), 47 | section = HomePageSections.Products, 48 | alignment = Alignment.CenterHorizontally 49 | ) 50 | 51 | ProductsWithCategoryFilter() 52 | 53 | } 54 | } 55 | 56 | @Composable 57 | fun ProductsWithCategoryFilter() { 58 | val categories = ProductCategory.entries 59 | var selectedItem by remember { mutableStateOf(categories.first()) } 60 | CenterHorizontally { 61 | ProductsCategory( 62 | onSelectedItemChanged = { newItem -> 63 | selectedItem = newItem 64 | } 65 | ) 66 | } 67 | ProductsCards( 68 | selectedCategory = selectedItem 69 | ) 70 | } 71 | 72 | @Composable 73 | private fun ProductsCards( 74 | modifier: Modifier = Modifier, 75 | selectedCategory: ProductCategory 76 | ) { 77 | SimpleGrid(numColumns = numColumns(base = 1, md = 2, lg = 3, xl = 4), modifier = modifier) { 78 | val filteredProducts = Product.entries.filter { selectedCategory.categoryName == it.category.categoryName } 79 | filteredProducts.forEach { product -> 80 | ProductCard(product = product) 81 | } 82 | } 83 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/products_old/components/ProductsCategory.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.products_old.components 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.runtime.LaunchedEffect 5 | import net.freshplatform.alrayada_web.sections.products_old.models.ProductCategory 6 | import net.freshplatform.alrayada_web.styles.MySelectStyle 7 | import com.varabyte.kobweb.compose.ui.Modifier 8 | import com.varabyte.kobweb.compose.ui.modifiers.id 9 | import com.varabyte.kobweb.compose.ui.modifiers.margin 10 | import com.varabyte.kobweb.compose.ui.toAttrs 11 | import com.varabyte.kobweb.silk.style.toModifier 12 | import kotlinx.browser.document 13 | import org.jetbrains.compose.web.css.px 14 | import org.jetbrains.compose.web.dom.Option 15 | import org.jetbrains.compose.web.dom.Select 16 | import org.jetbrains.compose.web.dom.Text 17 | import org.w3c.dom.HTMLSelectElement 18 | import org.w3c.dom.get 19 | 20 | @Composable 21 | fun ProductsCategory( 22 | modifier: Modifier = Modifier, 23 | onSelectedItemChanged: (newItem: ProductCategory) -> Unit 24 | ) { 25 | // Row( 26 | // modifier = Modifier 27 | // .fillMaxWidth() 28 | // .then(modifier) 29 | // ) { 30 | // val categories = ProductCategory.entries 31 | // categories.forEach { 32 | // 33 | // } 34 | // } 35 | val selectItemId = "selectProductCategoryId" 36 | LaunchedEffect(Unit) { 37 | val select = document.getElementById(selectItemId)!! as HTMLSelectElement 38 | select.addEventListener("change", { 39 | val selectedItem = select.options[select.selectedIndex]?.textContent ?: return@addEventListener 40 | onSelectedItemChanged(ProductCategory.valueOf(selectedItem)) 41 | }) 42 | } 43 | Select( 44 | attrs = MySelectStyle 45 | .toModifier() 46 | .id(selectItemId) 47 | .then(modifier) 48 | .margin(topBottom = 8.px) 49 | .toAttrs() 50 | ) { 51 | val categories = ProductCategory.entries 52 | categories.forEach { 53 | Option(it.categoryName) { 54 | Text(it.categoryName) 55 | } 56 | } 57 | } 58 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/quality_policy/QualityPolicySection.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.quality_policy 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.SectionTitle 5 | import net.freshplatform.alrayada_web.components.core.CenterHorizontally 6 | import net.freshplatform.alrayada_web.models.HomePageSections 7 | import net.freshplatform.alrayada_web.sections.quality_policy.componenets.QualityPolicyCard 8 | import net.freshplatform.alrayada_web.sections.quality_policy.models.QualityPolicy 9 | import com.varabyte.kobweb.compose.foundation.layout.Box 10 | import com.varabyte.kobweb.compose.foundation.layout.Column 11 | import com.varabyte.kobweb.compose.ui.Alignment 12 | import com.varabyte.kobweb.compose.ui.Modifier 13 | import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth 14 | import com.varabyte.kobweb.compose.ui.modifiers.padding 15 | import com.varabyte.kobweb.silk.components.layout.SimpleGrid 16 | import com.varabyte.kobweb.silk.components.layout.numColumns 17 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 18 | import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint 19 | import org.jetbrains.compose.web.css.percent 20 | import org.jetbrains.compose.web.css.px 21 | 22 | @Composable 23 | fun QualityPolicySection() = Box( 24 | modifier = Modifier 25 | .padding(bottom = 100.px, top = 50.px), 26 | contentAlignment = Alignment.Center 27 | ) { 28 | QualityPolicyContent() 29 | } 30 | 31 | @Composable 32 | private fun QualityPolicyContent() { 33 | val breakpoint = rememberBreakpoint() 34 | Column( 35 | modifier = Modifier 36 | .fillMaxWidth( 37 | if (breakpoint >= Breakpoint.MD) 100.percent 38 | else 90.percent 39 | ) 40 | ) { 41 | CenterHorizontally { 42 | SectionTitle( 43 | section = HomePageSections.QualityPolicy, 44 | alignment = Alignment.CenterHorizontally 45 | ) 46 | } 47 | CenterHorizontally { 48 | QualityPolicyCards( 49 | breakpoint = breakpoint, 50 | modifier = Modifier 51 | .padding(32.px) 52 | ) 53 | } 54 | } 55 | } 56 | 57 | @Composable 58 | private fun QualityPolicyCards(modifier: Modifier = Modifier, breakpoint: Breakpoint) { 59 | SimpleGrid( 60 | // should be synced with $shouldUseBorderRadius in each item 61 | numColumns = numColumns( 62 | base = 1, 63 | md = 2, 64 | lg = 3 65 | ), 66 | modifier = Modifier 67 | .fillMaxWidth( 68 | if (breakpoint >= Breakpoint.MD) 100.percent 69 | else 90.percent 70 | ) 71 | .then(modifier), 72 | ) { 73 | val values = QualityPolicy.entries 74 | val responsiveBreakpoint = Breakpoint.MD // also change the values from numColumn() to match this 75 | QualityPolicy.entries.forEach { qualityPolicy -> 76 | QualityPolicyCard( 77 | qualityPolicy = qualityPolicy, 78 | isFirst = values.first() == qualityPolicy, 79 | isLast = values.last() == qualityPolicy, 80 | shouldUseBorderRadius = breakpoint > responsiveBreakpoint, 81 | responsiveBreakpoint = responsiveBreakpoint 82 | ) 83 | } 84 | } 85 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/quality_policy/models/QualityPolicy.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.quality_policy.models 2 | 3 | import net.freshplatform.alrayada_web.core.data.StringRes 4 | 5 | enum class QualityPolicy( 6 | val number: String, 7 | val descRes: StringRes 8 | ) { 9 | One( 10 | number = "01", 11 | descRes = StringRes.QualityPolicyDesc1, 12 | ), 13 | Two( 14 | number = "02", 15 | descRes = StringRes.QualityPolicyDesc2, 16 | ), 17 | Three( 18 | number = "03", 19 | descRes = StringRes.QualityPolicyDesc3, 20 | ), 21 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/service/ServiceSection.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.service 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.SectionTitle 5 | import net.freshplatform.alrayada_web.core.data.StringRes 6 | import net.freshplatform.alrayada_web.core.services.localization.stringResource 7 | import net.freshplatform.alrayada_web.models.HomePageSections 8 | import net.freshplatform.alrayada_web.sections.service.components.ServiceCard 9 | import net.freshplatform.alrayada_web.sections.service.models.Service 10 | import net.freshplatform.alrayada_web.styles.ReadableTextStyleOnWhiteBackground 11 | import com.varabyte.kobweb.compose.css.FontWeight 12 | import com.varabyte.kobweb.compose.foundation.layout.Box 13 | import com.varabyte.kobweb.compose.foundation.layout.Column 14 | import com.varabyte.kobweb.compose.ui.Alignment 15 | import com.varabyte.kobweb.compose.ui.Modifier 16 | import com.varabyte.kobweb.compose.ui.modifiers.* 17 | import com.varabyte.kobweb.compose.ui.toAttrs 18 | import com.varabyte.kobweb.silk.components.layout.SimpleGrid 19 | import com.varabyte.kobweb.silk.components.layout.numColumns 20 | import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint 21 | import com.varabyte.kobweb.silk.style.toModifier 22 | import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint 23 | import org.jetbrains.compose.web.css.percent 24 | import org.jetbrains.compose.web.css.px 25 | import org.jetbrains.compose.web.dom.P 26 | import org.jetbrains.compose.web.dom.Text 27 | 28 | @Composable 29 | fun ServiceSection() = Box( 30 | modifier = Modifier.padding(topBottom = 100.px), 31 | contentAlignment = Alignment.Center 32 | ) { 33 | ServiceContent() 34 | } 35 | 36 | @Composable 37 | private fun ServiceContent() { 38 | val breakpoint = rememberBreakpoint() 39 | Column( 40 | modifier = Modifier 41 | .fillMaxWidth( 42 | if (breakpoint >= Breakpoint.MD) 100.percent 43 | else 90.percent 44 | ), 45 | horizontalAlignment = Alignment.CenterHorizontally 46 | ) { 47 | SectionTitle( 48 | modifier = Modifier.fillMaxWidth().margin(bottom = 25.px), 49 | section = HomePageSections.Service, 50 | alignment = Alignment.CenterHorizontally 51 | ) 52 | ServiceSectionText( 53 | modifier = Modifier 54 | .margin(bottom = 20.px) 55 | .fillMaxWidth(55.percent) 56 | ) 57 | ServiceCards() 58 | } 59 | } 60 | 61 | @Composable 62 | private fun ServiceCards() { 63 | SimpleGrid(numColumns = numColumns(base = 1, sm = 2, md = 3)) { 64 | Service.entries.forEach { ServiceCard(service = it) } 65 | } 66 | } 67 | 68 | @Composable 69 | private fun ServiceSectionText(modifier: Modifier = Modifier) { 70 | P( 71 | attrs = ReadableTextStyleOnWhiteBackground 72 | .toModifier() 73 | .margin(topBottom = 0.px) 74 | .fontSize(16.px) 75 | .fontWeight(FontWeight.Normal) 76 | .lineHeight(1.2) 77 | .then(modifier) 78 | .toAttrs() 79 | ) { 80 | Text(stringResource(StringRes.ServiceSectionDesc)) 81 | } 82 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/service/Styles.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.service 2 | 3 | import net.freshplatform.alrayada_web.models.ThemeColors 4 | import com.varabyte.kobweb.compose.css.Transition 5 | import com.varabyte.kobweb.compose.ui.Modifier 6 | import com.varabyte.kobweb.compose.ui.graphics.Colors 7 | import com.varabyte.kobweb.compose.ui.modifiers.* 8 | import com.varabyte.kobweb.compose.ui.styleModifier 9 | import com.varabyte.kobweb.silk.style.CssStyle 10 | import com.varabyte.kobweb.silk.style.selectors.hover 11 | import org.jetbrains.compose.web.css.LineStyle 12 | import org.jetbrains.compose.web.css.ms 13 | import org.jetbrains.compose.web.css.px 14 | 15 | val ServiceCardStyle = CssStyle { 16 | base { 17 | Modifier 18 | .border( 19 | width = 2.px, 20 | style = LineStyle.Solid, 21 | color = ThemeColors.LighterGray.colorValue 22 | ) 23 | .borderRadius(r = 6.px) 24 | .backgroundColor(Colors.White) 25 | .styleModifier { 26 | property("box-shadow", "rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px") 27 | } 28 | .transition( 29 | Transition.of(property = "border", duration = 100.ms), 30 | Transition.of(property = "background", duration = 100.ms), 31 | Transition.of(property = "box-shadow", duration = 100.ms), 32 | ) 33 | } 34 | hover { 35 | Modifier 36 | .border( 37 | width = 2.px, 38 | style = LineStyle.Solid, 39 | color = ThemeColors.Primary.colorValue 40 | ) 41 | .styleModifier { 42 | property("box-shadow", "rgba(0, 0, 0, 0.24) 0px 3px 8px") 43 | } 44 | .backgroundColor(ThemeColors.Primary.colorValue) 45 | } 46 | 47 | 48 | cssRule(" > #iconBox") { 49 | Modifier 50 | .backgroundColor(Colors.Transparent) 51 | .transition( 52 | Transition.of(property = "background", duration = 100.ms), 53 | ) 54 | } 55 | 56 | cssRule(":hover > #iconBox") { 57 | Modifier.backgroundColor(Colors.White) 58 | } 59 | 60 | cssRule(" > p") { 61 | Modifier 62 | .color(ThemeColors.Secondary.colorValue) 63 | .transition( 64 | Transition.of(property = "color", duration = 100.ms), 65 | ) 66 | } 67 | 68 | cssRule(":hover > p") { 69 | Modifier.color(Colors.White) 70 | } 71 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/service/components/ServiceCard.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.service.components 2 | 3 | import androidx.compose.runtime.Composable 4 | import net.freshplatform.alrayada_web.components.fa.FaIcon 5 | import net.freshplatform.alrayada_web.components.fa.IconSize 6 | import net.freshplatform.alrayada_web.core.services.localization.stringResource 7 | import net.freshplatform.alrayada_web.models.ThemeColors 8 | import net.freshplatform.alrayada_web.sections.service.ServiceCardStyle 9 | import net.freshplatform.alrayada_web.sections.service.models.Service 10 | import com.varabyte.kobweb.compose.css.FontWeight 11 | import com.varabyte.kobweb.compose.foundation.layout.Box 12 | import com.varabyte.kobweb.compose.foundation.layout.Column 13 | import com.varabyte.kobweb.compose.ui.Modifier 14 | import com.varabyte.kobweb.compose.ui.attrsModifier 15 | import com.varabyte.kobweb.compose.ui.modifiers.* 16 | import com.varabyte.kobweb.compose.ui.toAttrs 17 | import com.varabyte.kobweb.silk.style.toModifier 18 | import org.jetbrains.compose.web.css.LineStyle 19 | import org.jetbrains.compose.web.css.px 20 | import org.jetbrains.compose.web.dom.P 21 | import org.jetbrains.compose.web.dom.Text 22 | 23 | @Composable 24 | fun ServiceCard(modifier: Modifier = Modifier, service: Service) { 25 | Column( 26 | modifier = ServiceCardStyle.toModifier() 27 | .maxWidth(300.px) 28 | .margin(all = 20.px) 29 | .padding(all = 20.px) 30 | .then(modifier) 31 | ) { 32 | Box( 33 | modifier = Modifier 34 | .id("iconBox") 35 | .padding(all = 10.px) 36 | .margin(bottom = 20.px) 37 | .border(width = 2.px, style = LineStyle.Solid, color = ThemeColors.Primary.colorValue) 38 | .borderRadius( 39 | topLeft = 20.px, 40 | topRight = 20.px, 41 | bottomLeft = 20.px, 42 | bottomRight = 0.px 43 | ) 44 | ) { 45 | FaIcon( 46 | name = service.icon, 47 | modifier = Modifier 48 | .title(service.iconDesc) 49 | .color(ThemeColors.Primary.colorValue) 50 | .attrsModifier { 51 | attr("alt", service.iconDesc) 52 | }, 53 | style = service.iconCategory, 54 | size = IconSize.X2 55 | ) 56 | } 57 | P( 58 | attrs = Modifier 59 | .fillMaxWidth() 60 | .margin(bottom = 10.px, top = 0.px) 61 | .fontSize(18.px) 62 | .fontWeight(FontWeight.Bold) 63 | .toAttrs() 64 | ) { 65 | Text(stringResource(service.titleRes)) 66 | } 67 | P( 68 | attrs = Modifier 69 | .fillMaxWidth() 70 | .margin(topBottom = 0.px) 71 | .fontSize(14.px) 72 | .fontWeight(FontWeight.Normal) 73 | .toAttrs() 74 | ) { 75 | Text(stringResource(service.descriptionRes)) 76 | } 77 | } 78 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/service/models/Service.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.service.models 2 | 3 | import net.freshplatform.alrayada_web.components.fa.IconCategory 4 | import net.freshplatform.alrayada_web.core.data.StringRes 5 | 6 | enum class Service( 7 | val icon: String, 8 | val iconDesc: String, 9 | val iconCategory: IconCategory, 10 | val titleRes: StringRes, 11 | val descriptionRes: StringRes 12 | ) { 13 | MedicalLabScientificDevices( 14 | "flask", 15 | "Medical Lab Scientific Devices Icon", 16 | IconCategory.SOLID, 17 | StringRes.MedicalLabScientificDevices, 18 | StringRes.MedicalLabScientificDevicesDesc 19 | ), 20 | LabInstruments( 21 | "microscope", 22 | "Lab Instruments Icon", 23 | IconCategory.SOLID, 24 | StringRes.LabInstruments, 25 | StringRes.LabInstrumentsDesc 26 | ), 27 | LabGlassware( 28 | "whiskey-glass", 29 | "Lab Glassware Icon", 30 | IconCategory.SOLID, 31 | StringRes.LabGlassware, 32 | StringRes.LabGlasswareDesc 33 | ), 34 | AnalyticalChemicalSolutions( 35 | "flask-vial", 36 | "Analytical Chemical Solutions Icon", 37 | IconCategory.SOLID, 38 | StringRes.AnalyticalChemicalSolutions, 39 | StringRes.AnalyticalChemicalSolutionsDesc 40 | ), 41 | LabChemicals( 42 | "vial-virus", 43 | "Lab Chemicals Icon", 44 | IconCategory.SOLID, 45 | StringRes.LabChemicals, 46 | StringRes.LabChemicalsDesc, 47 | ), 48 | ResearchAndEducationProducts( 49 | "book", 50 | "Research & Education Products Icon", 51 | IconCategory.SOLID, 52 | StringRes.ResearchAndEducationProducts, 53 | StringRes.ResearchAndEducationProductsDesc 54 | ), 55 | LabReagents( 56 | "check", 57 | "Lab Reagents Icon", 58 | IconCategory.SOLID, 59 | StringRes.LabReagents, 60 | StringRes.LabReagentsDesc 61 | ), 62 | LabFurniture( 63 | "couch", 64 | "Lab Furniture Icon", 65 | IconCategory.SOLID, 66 | StringRes.LabFurniture, 67 | StringRes.LabFurnitureDesc 68 | ), 69 | AfterSalesService( 70 | "tools", 71 | "After Sales Service Icon", 72 | IconCategory.SOLID, 73 | StringRes.AfterSalesService, 74 | StringRes.AfterSalesServiceDesc 75 | ) 76 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/sections/testimonial/models/Testimonial.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.sections.testimonial.models 2 | 3 | import net.freshplatform.alrayada_web.utils.constants.PublicRes 4 | 5 | enum class Testimonial( 6 | val image: String, 7 | val fullName: String, 8 | val profession: String, 9 | val review: String 10 | ) { 11 | First( 12 | image = PublicRes.Assets.Images.LOGO, 13 | fullName = "Albert Einstein", 14 | profession = "Software developer", 15 | review = "I have never met this man in my life and I never will, amidst the digital symphony of ones and zeros, you wield your keyboard like a maestro's baton, composing lines of code that dance to the rhythm of innovation. With every keystroke, you're writing the future of technology, crafting a melody that echoes through the corridors of progress." 16 | ), 17 | Second( 18 | image = PublicRes.Assets.Images.LOGO, 19 | fullName = "Steve Jobs", 20 | profession = "Electric scientist", 21 | review = "Embarking on a journey of creativity, you weave code and colors into a digital tapestry that dances with innovation. With each keystroke, you're like a modern-day alchemist, turning ideas into pixels and dreams into reality." 22 | ), 23 | Third( 24 | image = PublicRes.Assets.Images.LOGO, 25 | fullName = "Thomas Edison", 26 | profession = "CEO of Apple", 27 | review = "Navigating through the binary seas of code, you're the captain of your digital ship, steering through the waves of algorithms and syntax with confidence and curiosity. Your quest for knowledge and creation sets you on a course for innovation's horizon." 28 | ), 29 | Fourth( 30 | image = PublicRes.Assets.Images.LOGO, 31 | fullName = "John wick", 32 | profession = "Retired Assassin", 33 | review = "I don't know much about this guy but I know he didn't kill my dog and never will" 34 | ), 35 | Fifth( 36 | image = PublicRes.Assets.Images.LOGO, 37 | fullName = "Marcin Iwinski", 38 | profession = "2077", 39 | review = "Like a conductor of technology's symphony, you orchestrate lines of code that harmonize into digital melodies. Your keyboard is your baton, and your monitor is the stage where your ideas take center stage, captivating the world with your technological compositions." 40 | ), 41 | Sixth( 42 | image = PublicRes.Assets.Images.LOGO, 43 | fullName = "Robert C. Martin", 44 | profession = "Clean Guy", 45 | review = "Uncle Bob think he can save his and others code and he is right, In the vast galaxy of the internet, you're the intrepid explorer, venturing through websites and codebases like a modern-day astronaut. Your curiosity fuels your journey, and your keyboard becomes your spacecraft's control panel as you navigate the cosmos of information." 46 | ), 47 | Seven( 48 | image = PublicRes.Assets.Images.LOGO, 49 | fullName = "Marcin Iwinski", 50 | profession = "2013", 51 | review = "Not much left here" 52 | ), 53 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/styles/ButtonStyles.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.styles 2 | 3 | import net.freshplatform.alrayada_web.models.ThemeColors 4 | import com.varabyte.kobweb.compose.css.Cursor 5 | import com.varabyte.kobweb.compose.css.Transition 6 | import com.varabyte.kobweb.compose.ui.Modifier 7 | import com.varabyte.kobweb.compose.ui.graphics.Colors 8 | import com.varabyte.kobweb.compose.ui.modifiers.* 9 | import com.varabyte.kobweb.silk.style.CssStyle 10 | import com.varabyte.kobweb.silk.style.selectors.hover 11 | import org.jetbrains.compose.web.css.ms 12 | import org.jetbrains.compose.web.css.px 13 | 14 | val MainButtonStyle = CssStyle { 15 | base { 16 | Modifier.width(100.px) 17 | .height(40.px) 18 | .border(width = 0.px) 19 | .borderRadius(5.px) 20 | .backgroundColor(ThemeColors.Primary.colorValue) 21 | .color(Colors.White) 22 | .cursor(Cursor.Pointer) 23 | .transition( 24 | Transition.of(property = "width", duration = 200.ms), 25 | Transition.of(property = "background-color", duration = 200.ms), 26 | ) 27 | } 28 | hover { 29 | Modifier 30 | .width(120.px) 31 | .backgroundColor(ThemeColors.OnPrimary.colorValue) 32 | } 33 | 34 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/styles/SelectStyles.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.styles 2 | 3 | import net.freshplatform.alrayada_web.models.ThemeColors 4 | import com.varabyte.kobweb.compose.css.Transition 5 | import com.varabyte.kobweb.compose.ui.Modifier 6 | import com.varabyte.kobweb.compose.ui.modifiers.* 7 | import com.varabyte.kobweb.silk.style.CssStyle 8 | import com.varabyte.kobweb.silk.style.selectors.focus 9 | import org.jetbrains.compose.web.css.LineStyle 10 | import org.jetbrains.compose.web.css.ms 11 | import org.jetbrains.compose.web.css.px 12 | 13 | val MySelectStyle = CssStyle { 14 | base { 15 | Modifier 16 | .minHeight(60.px) 17 | .minWidth(80.px) 18 | .border(width = 2.px, style = LineStyle.Solid, color = ThemeColors.LightGray.colorValue) 19 | .backgroundColor(ThemeColors.LighterGray.colorValue) 20 | .borderRadius(8.px) 21 | .fontSize(18.px) 22 | .padding(leftRight = 12.px) 23 | .transition( 24 | Transition.of(property = "border-color", duration = 150.ms), 25 | Transition.of(property = "border-shadow", duration = 200.ms), 26 | ) 27 | } 28 | focus { 29 | Modifier 30 | .border(width = 3.px, style = LineStyle.Solid, color = ThemeColors.Primary.colorValue) 31 | .outline(style = LineStyle.None) 32 | .boxShadow( 33 | color = ThemeColors.Primary.colorValue, 34 | spreadRadius = 1.px 35 | ) 36 | } 37 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/styles/TextStyles.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.styles 2 | 3 | import net.freshplatform.alrayada_web.models.ThemeColors 4 | import com.varabyte.kobweb.compose.css.Transition 5 | import com.varabyte.kobweb.compose.ui.Modifier 6 | import com.varabyte.kobweb.compose.ui.modifiers.color 7 | import com.varabyte.kobweb.compose.ui.modifiers.transition 8 | import com.varabyte.kobweb.compose.ui.styleModifier 9 | import com.varabyte.kobweb.silk.style.CssStyle 10 | import com.varabyte.kobweb.silk.style.base 11 | import com.varabyte.kobweb.silk.style.selectors.hover 12 | import org.jetbrains.compose.web.css.Color 13 | import org.jetbrains.compose.web.css.ms 14 | 15 | val DescTextStyle1 = CssStyle { 16 | base { 17 | Modifier 18 | .color(Color("#898E9A")) 19 | .transition(Transition.of(property = "color", duration = 150.ms)) 20 | } 21 | hover { 22 | Modifier 23 | .color(ThemeColors.Secondary.colorValue) 24 | } 25 | } 26 | 27 | val ReadableTextStyleOnWhiteBackground = CssStyle.base { 28 | Modifier 29 | .styleModifier { 30 | property("text-shadow", "1px 1px 1px rgba(0, 0, 0, 0.1)") 31 | } 32 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/utils/Animations.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.utils 2 | 3 | import kotlinx.coroutines.delay 4 | 5 | /** 6 | * Animate from 0 to $toNumber and it will be affected by $delayTime 7 | * */ 8 | suspend fun animateNumber( 9 | number: Int, 10 | delayTime: Long = 10L, 11 | onUpdate: (Int) -> Unit 12 | ) { 13 | (0..number).forEach { currentValue -> 14 | delay(delayTime) 15 | onUpdate(currentValue) 16 | } 17 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/utils/DateUtils.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.utils 2 | 3 | import kotlin.js.Date 4 | 5 | // Programmers only date bugs 6 | 7 | fun isLastDayOfTheYear(): Boolean { 8 | val currentDate = Date() 9 | val currentYear = currentDate.getFullYear() 10 | val december31 = Date(currentYear, 11, 31) 11 | 12 | return currentDate.getTime() == december31.getTime() 13 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/utils/DocumentUtils.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.utils 2 | 3 | import kotlinx.browser.document 4 | import org.w3c.dom.HTMLInputElement 5 | import org.w3c.dom.HTMLTextAreaElement 6 | 7 | fun getInputValueById(inputId: String): String { 8 | val element = 9 | document.getElementById(inputId) ?: throw NullPointerException("Can't find input element with id = $inputId") 10 | return try { 11 | val inputElement = element as HTMLInputElement 12 | inputElement.value 13 | } catch (e: ClassCastException) { 14 | val textAreaElement = element as HTMLTextAreaElement 15 | 16 | textAreaElement.value 17 | } catch (e: ClassCastException) { 18 | throw Exception("Can't cast this element to $HTMLInputElement") 19 | } catch (e: Exception) { 20 | throw e 21 | } 22 | } 23 | 24 | data class DocumentConfig( 25 | var title: String? = null, 26 | var description: String? = null 27 | ) 28 | 29 | fun updateDocument( 30 | block: DocumentConfig.() -> Unit 31 | ) { 32 | val documentConfig = DocumentConfig() 33 | documentConfig.block() 34 | documentConfig.apply { 35 | title?.let { 36 | document.title = it 37 | } 38 | description?.let { 39 | document.querySelector("meta[name=\"description\"]") 40 | ?.setAttribute("content", it) 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/utils/Viewport.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.utils 2 | 3 | import androidx.compose.runtime.* 4 | import kotlinx.browser.document 5 | import kotlinx.browser.window 6 | import org.w3c.dom.events.EventListener 7 | 8 | @Composable 9 | fun ObserveViewportEntered( 10 | sectionId: String, 11 | distanceFromTop: Double, 12 | onViewportEntered: () -> Unit 13 | ) { 14 | var viewportEntered by remember { mutableStateOf(false) } 15 | val listener = remember { 16 | EventListener { 17 | val sectionElement = 18 | document.getElementById(sectionId) 19 | ?: throw NullPointerException("Can't find any element with id = $sectionId, when trying to observe the viewport") 20 | val top = sectionElement.getBoundingClientRect().top 21 | if (top < distanceFromTop) { 22 | viewportEntered = true 23 | } 24 | } 25 | } 26 | 27 | LaunchedEffect(viewportEntered) { 28 | if (!viewportEntered) { 29 | window.addEventListener(type = "scroll", callback = listener) 30 | return@LaunchedEffect 31 | } 32 | onViewportEntered() 33 | window.removeEventListener(type = "scroll", callback = listener) 34 | } 35 | 36 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/utils/constants/Constants.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.utils.constants 2 | 3 | object Constants { 4 | const val SECTION_MAX_HEIGHT = 7000 5 | const val ANIMATION_ENABLED = true 6 | 7 | const val LOREM_IPSUM_LONG = 8 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lectus vitae ligula faucibus venenatis non eu justo. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum.\n" 9 | 10 | const val BASE_URL = "https://alrayada.net" 11 | 12 | object SocialMediaLinks { 13 | const val FACEBOOK = "https://facebook.com" 14 | const val TWITTER = "https://twitter.com" 15 | const val INSTAGRAM = "https://instagram.com" 16 | const val LINKEDIN = "https://linkedin.com" 17 | const val WEBSITE = "${BASE_URL}/" 18 | } 19 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/utils/constants/PublicRes.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.utils.constants 2 | 3 | object PublicRes { 4 | object Assets { 5 | private const val PATH = "assets" 6 | 7 | object Images { 8 | private const val PATH = "${Assets.PATH}/images" 9 | const val ABOUT = "$PATH/about_image.webp" 10 | 11 | const val LOGO = "$PATH/logo.webp" 12 | 13 | object Brands { 14 | private const val PATH = "${Images.PATH}/brands" 15 | const val SNIBE_LOGO = "${PATH}/snibe_logo.webp" 16 | const val DIRUI_LOGO = "${PATH}/dirui_logo.webp" 17 | const val LIFOTRONIC_LOGO = "${PATH}/lifotronic_logo.webp" 18 | const val URIT_LOGO = "${PATH}/urit_logo.webp" 19 | const val CARETIUM_LOGO = "${PATH}/caretium.webp" 20 | 21 | } 22 | 23 | object Labs { 24 | private const val PATH = "${Images.PATH}/labs" 25 | const val MEDICAL_LAB1 = "$PATH/medical_lab1.webp" 26 | const val MEDICAL_LAB2 = "$PATH/medical_lab2.webp" 27 | } 28 | 29 | object MobileApp { 30 | private const val PATH = "${Images.PATH}/mobile_app" 31 | const val QR_CODE = "${PATH}/qr_code.webp" 32 | } 33 | 34 | object Testimonials { 35 | private const val PATH = "${Images.PATH}/testimonials" 36 | 37 | // const val ALBERT_EINSTEIN = "$PATH/albert_einstein.jpg" 38 | } 39 | } 40 | 41 | object Svg { 42 | private const val PATH = "${Assets.PATH}/svg" 43 | const val BACKGROUND = "$PATH/background.svg" 44 | const val MAIN = "${PATH}/main_image.svg" 45 | 46 | const val MOBILE_DEVELOPMENT1 = "$PATH/mobile_development1.svg" 47 | 48 | object Waves { 49 | private const val PATH = "${Svg.PATH}/waves" 50 | const val WAVE_1 = "$PATH/wave_1.svg" 51 | const val WAVE_2 = "$PATH/wave_2.svg" 52 | const val WAVE_3 = "$PATH/wave_3.svg" 53 | const val WAVE_4 = "$PATH/wave_4.svg" 54 | const val WAVE_5 = "$PATH/wave_5.svg" 55 | } 56 | } 57 | } 58 | } -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/utils/constants/SectionsConstants.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.utils.constants 2 | 3 | import net.freshplatform.alrayada_web.core.router.Routes 4 | import net.freshplatform.alrayada_web.js.encodeURIComponent 5 | 6 | object SectionsConstants { 7 | object Location { 8 | const val MAP_API = "https://maps.google.com/maps?q=33.3118022,44.2733333&z=15&output=embed" 9 | } 10 | 11 | object Footer { 12 | const val REPOSITORY_URL = "https://github.com/FreshKernel/alrayada-web" 13 | } 14 | 15 | object Contact { 16 | const val FORM_URL = "https://formspree.io/f/xjvqwrjq" 17 | private const val WHATSAPP_URL = "https://wa.me/+9647901520604" 18 | 19 | fun whatsappUrlWithText(text: String) = "${WHATSAPP_URL}?text=${encodeURIComponent(text)}" 20 | } 21 | 22 | object MobileApp { 23 | private const val DYNAMIC_DOWNLOAD_LINK = Routes.DOWNLOAD_MOBILE_APP 24 | const val GOOGLE_PLAY = "https://play.google.com/store/apps/details?id=net.freshplatform.alrayada" 25 | const val APPLE_APP_STORE = DYNAMIC_DOWNLOAD_LINK 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/utils/extensions/ModifierExtensions.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.utils.extensions 2 | 3 | -------------------------------------------------------------------------------- /site/src/jsMain/kotlin/net/freshplatform/alrayada_web/utils/extensions/StringExtensions.kt: -------------------------------------------------------------------------------- 1 | package net.freshplatform.alrayada_web.utils.extensions 2 | 3 | import kotlinx.browser.document 4 | import org.w3c.dom.Element 5 | 6 | fun String.removeCharAtIndex(index: Int): String { 7 | val string = this 8 | if (index < 0 || index >= string.length) { 9 | return string 10 | } 11 | return string.substring(0, index) + string.substring(index + 1) 12 | } 13 | 14 | fun String.maximumAtFirst(n: Int): String { 15 | if (this.length > n) { 16 | return "${this.take(n)}..." 17 | } 18 | return this.take(n) 19 | } 20 | 21 | fun String.asFragmentIdentifier(): String = "#${this}" 22 | 23 | fun String.getElementByThisId(): Element? { 24 | return document.getElementById(this) 25 | } 26 | 27 | fun String.requireElementByThisId(): Element { 28 | return this.getElementByThisId() 29 | ?: throw NullPointerException("Can't find element with id = $this") 30 | } -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/apple-touch-icon.png -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/images/about_image.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/assets/images/about_image.webp -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/images/brands/caretium.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/assets/images/brands/caretium.webp -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/images/brands/dirui_logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/assets/images/brands/dirui_logo.webp -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/images/brands/lifotronic_logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/assets/images/brands/lifotronic_logo.webp -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/images/brands/snibe_logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/assets/images/brands/snibe_logo.webp -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/images/brands/urit_logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/assets/images/brands/urit_logo.webp -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/images/labs/medical_lab1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/assets/images/labs/medical_lab1.webp -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/images/labs/medical_lab2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/assets/images/labs/medical_lab2.webp -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/images/logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/assets/images/logo.webp -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/images/mobile_app/qr_code.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/assets/images/mobile_app/qr_code.webp -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/svg/background.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/svg/waves/wave_1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/svg/waves/wave_2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/svg/waves/wave_3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/svg/waves/wave_4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/assets/svg/waves/wave_5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/favicon-16x16.png -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/favicon-32x32.png -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FreshKernel/alrayada-web/7262d353267c5cb4bc239cd10956a60647a4853e/site/src/jsMain/resources/public/favicon.ico -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"Alrayada Alarabiah","short_name":"Alrayada","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /site/src/jsMain/resources/public/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | https://alrayada.net/ 5 | 2023-10-15T12:57:19+00:00 6 | 1.00 7 | 11 | 15 | 19 | 20 | 21 | https://alrayada.net/privacy-policy 22 | 2023-10-15T12:57:20+00:00 23 | 0.80 24 | 28 | 32 | 36 | 37 | 38 | https://alrayada.net/download-mobile-app 39 | 2023-10-15T12:57:20+00:00 40 | 0.80 41 | 45 | 49 | 53 | 54 | -------------------------------------------------------------------------------- /site/src/jsTest/kotlin/EncodeURIComponentTest.kt: -------------------------------------------------------------------------------- 1 | import net.freshplatform.alrayada_web.js.encodeURIComponent 2 | import kotlin.test.Test 3 | import kotlin.test.assertEquals 4 | 5 | class EncodeURIComponentTest { 6 | @Test 7 | fun encodesSpacesAsPercent20() { 8 | assertEquals( 9 | expected = "Hello%20World", 10 | actual = encodeURIComponent("Hello World"), 11 | ) 12 | } 13 | @Test 14 | fun encodesSpecialCharactersCorrectly() { 15 | assertEquals( 16 | expected = "a%2Fb%3Fc%3Dd%26e%3Df", 17 | actual = encodeURIComponent("a/b?c=d&e=f"), 18 | ) 19 | } 20 | } 21 | --------------------------------------------------------------------------------