diff --git a/src/components/footer.html b/src/components/footer.html index d628616..caf2c07 100644 --- a/src/components/footer.html +++ b/src/components/footer.html @@ -17,17 +17,31 @@
@@ -74,17 +118,25 @@
- {{> icons/arrow-up }} + {{> icons/arrow-up }}
diff --git a/src/components/icons/adjustments.html b/src/components/icons/adjustments.html new file mode 100644 index 0000000..463b1dc --- /dev/null +++ b/src/components/icons/adjustments.html @@ -0,0 +1,29 @@ + + + + + + + + + + diff --git a/src/components/icons/free-rights.html b/src/components/icons/free-rights.html new file mode 100644 index 0000000..3c51a27 --- /dev/null +++ b/src/components/icons/free-rights.html @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + diff --git a/src/components/icons/logo-model.html b/src/components/icons/logo-model.html new file mode 100644 index 0000000..ad19e03 --- /dev/null +++ b/src/components/icons/logo-model.html @@ -0,0 +1,232 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/icons/settings.html b/src/components/icons/settings.html new file mode 100644 index 0000000..b4ee2b1 --- /dev/null +++ b/src/components/icons/settings.html @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + diff --git a/src/components/illustrations/slm.html b/src/components/illustrations/slm.html new file mode 100644 index 0000000..9e32b37 --- /dev/null +++ b/src/components/illustrations/slm.html @@ -0,0 +1,283 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/models-slm.html b/src/components/models-slm.html new file mode 100644 index 0000000..d65e885 --- /dev/null +++ b/src/components/models-slm.html @@ -0,0 +1,63 @@ +
+
+
+ +

Models

+ +
+ +

Prem's Specialized SLMs

+

+ A Suite of Foundational Open Source SLMs to Supercharge Business + Applications. +

+ +
+
+
+ +

Prem-1b-RAG

+

+ Specialized at extracting content in a meaningful way. +

+ + +
+
+ +
+
+ +

Prem-1b-Json

+

+ Specifically designed for function-calling and APIs integrations. +

+ + +
+
+ +
+
+ +

Prem-1b-Summarizer

+

+ Specialized to handle RAG use cases for companies internal data. +

+ + +
+
+
+ +
+ {{#>button tag="a" href="./contact.html" }} Schedule a call {{/button}} +
+
+
diff --git a/src/components/nav.html b/src/components/nav.html index adcf540..48f3ad7 100644 --- a/src/components/nav.html +++ b/src/components/nav.html @@ -21,6 +21,15 @@
For Business
+
  • + +
    Research
    +     +
  • For Business
    • +
  • + Research +
  • +
    + +

    Latest communications

    + +
    + +

    + The Newest Insights and
    + Research from Our AI Team +

    + +
    +
    + +
    + SLM Journey Unveiled +
    + +

    SLM Journey Unveiled

    +

    + In recent months, the landscape of language models has been enriched + by the emergence of several small language models... +

    +
    By Nicola Sosio
    +     + + +
    + Introducing Prem-1B +
    + +

    Introducing Prem-1B

    +

    + With great enthusiasm, we unveil the Prem-1B series, an open-source, + multipurpose large language model developed by Prem AI... +

    +
    By Rohit Gupta, Nicola Sosio
    +     +
    +
    + +
    + {{#>button tag="a" href="https://blog.premai.io/" target="_blank" + rel="noopener" }} Discover more {{/button}} +
    + diff --git a/src/components/slm.html b/src/components/slm.html new file mode 100644 index 0000000..e80e63c --- /dev/null +++ b/src/components/slm.html @@ -0,0 +1,25 @@ +
    +
    +
    +

    + Introducing Prem's + Small Language Models (SLM) +

    + +

    + Over 90% of LLM applications involve summarization of Retrieval + Augmented Generation (RAG) tasks, where smaller, specialized models are + more effective.
    +
    + Prem is pioneering a new class of efficient and cost-effective OS + foundational Small Language Models (SLMs) as alternatives to Mistral 7B. + These streamlined models are designed for fine-tuning, precisely meeting + the unique demands of specific business scenarios. +

    +
    + +
    +
    {{> illustrations/slm }}
    +
    +
    +
    diff --git a/src/images/blog/introducing-prem1b.jpeg b/src/images/blog/introducing-prem1b.jpeg new file mode 100644 index 0000000..0914b33 Binary files /dev/null and b/src/images/blog/introducing-prem1b.jpeg differ diff --git a/src/images/blog/slm-journey.webp b/src/images/blog/slm-journey.webp new file mode 100644 index 0000000..8150b73 Binary files /dev/null and b/src/images/blog/slm-journey.webp differ diff --git a/src/images/llms.png b/src/images/llms.png new file mode 100644 index 0000000..8b43dc8 Binary files /dev/null and b/src/images/llms.png differ diff --git a/src/images/research.png b/src/images/research.png new file mode 100644 index 0000000..55022ca Binary files /dev/null and b/src/images/research.png differ diff --git a/src/images/sel-models.png b/src/images/sel-models.png new file mode 100644 index 0000000..f9eff09 Binary files /dev/null and b/src/images/sel-models.png differ diff --git a/src/metadata.json b/src/metadata.json index b256771..911d776 100644 --- a/src/metadata.json +++ b/src/metadata.json @@ -34,6 +34,16 @@ "title": "Prem - AI that you Own. Always - Cookies", "description": "Accelerating the advent of personalized LLMs." }, + "/research.html": { + "pageName": "research", + "title": "Prem - AI that you Own. Always - Research", + "description": "Accelerating the advent of personalized LLMs." + }, + "/template-feature.html": { + "pageName": "template-feature", + "title": "Prem - AI that you Own. Always - Template Feature", + "description": "Accelerating the advent of personalized LLMs." + }, "/terms.html": { "pageName": "terms", "title": "Prem - AI that you Own. Always - Terms", diff --git a/src/research.html b/src/research.html new file mode 100644 index 0000000..7b664d6 --- /dev/null +++ b/src/research.html @@ -0,0 +1,63 @@ + + + {{> head}} + + + {{> pre-content}} {{> page-loader}} + +
    + {{> nav}} {{#>hero variant="center" class="is-research js-hero" }} + + + +
    +
    + +

    + Lorem ipsum dolor sit +

    + +
    + +

    + The Future is small +

    + +
    + {{#>button tag="a" href="https://app.premai.io/accounts/signup/" + target="_blank" rel="noopener" class="js-cta" }} Try it now + {{/button}} +
    + +
    + Business Related screens overview +
    +
    + + {{/hero}} + +
    {{> slm}} {{> models-slm}} {{> research-blog}} {{> book}}
    + + {{> footer}} +
    + + {{> tail}} + + diff --git a/src/scripts/transitions/page.js b/src/scripts/transitions/page.js index 1e65caf..73755cb 100644 --- a/src/scripts/transitions/page.js +++ b/src/scripts/transitions/page.js @@ -85,7 +85,9 @@ export const hidePage = ({ break; } case "developers": - case "business": { + case "business": + case "research": + case "feature": { const centerHero = container.querySelector(".js-hero"); const centerHeroLabel = centerHero.querySelector(".js-divider-label"); const centerHeroTitle = centerHero.querySelector(".js-title"); @@ -93,13 +95,17 @@ export const hidePage = ({ const centerHeroMedia = centerHero.querySelector(".js-media"); const centerHeroCta = centerHero.querySelector(".js-cta"); - gsap.set( - [centerHeroLabel, centerHeroTitle, centerHeroSubtitle, centerHeroMedia], - { + gsap.set([centerHeroLabel, centerHeroTitle, centerHeroMedia], { + opacity: 0, + y: 40, + }); + + if (centerHeroSubtitle) { + gsap.set(centerHeroSubtitle, { opacity: 0, y: 40, - }, - ); + }); + } if (centerHeroCta) { gsap.set(centerHeroCta, { opacity: 0, y: 40 }); @@ -297,7 +303,9 @@ export const revealPage = ({ pageName, container = document, cb = false }) => { break; } case "developers": - case "business": { + case "business": + case "research": + case "feature": { const centerHero = container.querySelector(".js-hero"); const centerHeroLabel = centerHero.querySelector(".js-divider-label"); const centerHeroTitle = centerHero.querySelector(".js-title"); diff --git a/src/styles/components/hero.css b/src/styles/components/hero.css index a5fc97c..5bb80c8 100644 --- a/src/styles/components/hero.css +++ b/src/styles/components/hero.css @@ -169,6 +169,48 @@ @apply mb-12; } } + + &.is-research { + .hero__title { + @apply mb-10; + } + } + + &.is-feature { + .hero__title { + @apply mb-4; + } + + .hero__subtitle { + @apply mb-12; + } + + .hero__cta { + @apply mb-24; + } + + .hero__media { + @apply w-full; + } + + .hero__feature-container { + @apply w-[95%] md:w-[85%] lg:w-[826px] mx-auto relative rounded-3xl border border-white border-opacity-30 aspect-[1/0.634] z-[10]; + background: var(--secondary-gradient); + } + + .hero__feature-media { + @apply absolute top-[5%] left-[2.5%] w-[95%] h-[90%] rounded-2xl overflow-hidden bg-pink; + background: radial-gradient( + 249.84% 249.84% at 50% 100%, + rgba(245, 142, 142, 0.65) 0%, + rgba(127, 150, 255, 0) 88.5% + ); + } + + .hero__feature-img { + @apply absolute top-[10%] left-[10%] w-[80%] h-[80%] object-cover; + } + } } @media screen and (min-width: 1600px) { diff --git a/src/styles/components/model-card.css b/src/styles/components/model-card.css new file mode 100644 index 0000000..fd7b642 --- /dev/null +++ b/src/styles/components/model-card.css @@ -0,0 +1,45 @@ +.model-card { + @apply w-full relative rounded-2xl h-full border border-white border-opacity-30 text-center py-10 px-8; + background: var(--secondary-gradient); +} + +.model-card__logo { + @apply mb-9; + svg { + @apply w-[88px] h-auto block mx-auto; + } +} + +.model-card__title { + @apply text-[24px] leading-[1.16667] font-medium mb-4; +} + +.model-card--rag { + box-shadow: + 0px 0px 9px rgba(242, 122, 121, 0.6), + 0px 4px 4px rgba(0, 0, 0, 0.25); + .model-card__logo, + .model-card__title { + @apply text-pink; + } +} + +.model-card--json { + box-shadow: + 0px 0px 9px rgba(242, 211, 152, 0.6), + 0px 4px 4px rgba(0, 0, 0, 0.25); + .model-card__logo, + .model-card__title { + @apply text-caramel; + } +} + +.model-card--sum { + box-shadow: + 0px 0px 9px rgba(251, 179, 94, 0.6), + 0px 4px 4px rgba(0, 0, 0, 0.25); + .model-card__logo, + .model-card__title { + @apply text-orange; + } +} diff --git a/src/styles/components/models-slm.css b/src/styles/components/models-slm.css new file mode 100644 index 0000000..3cb4798 --- /dev/null +++ b/src/styles/components/models-slm.css @@ -0,0 +1,31 @@ +.models-slm { + @apply mb-56; +} + +.models-slm__container { + @apply flex-col; +} + +.models-slm__label { + @apply mb-8; +} + +.models-slm__title { + @apply text-center mb-8; +} + +.models-slm__text { + @apply text-center text-gray-200 mb-16 max-w-[450px] mx-auto; +} + +.models-slm__content { + @apply flex-col flex justify-center items-stretch gap-y-7 md:gap-y-0 gap-x-0 md:flex-row md:gap-x-7 lg:gap-x-14 mb-16; +} + +.models-slm__item { + @apply w-full md:w-[30%] lg:w-[314px]; +} + +.models-slm__cta { + @apply flex justify-center; +} diff --git a/src/styles/components/nav.css b/src/styles/components/nav.css index b08f38a..806a710 100644 --- a/src/styles/components/nav.css +++ b/src/styles/components/nav.css @@ -28,11 +28,11 @@ } .nav__items { - @apply hidden lg:flex justify-center items-center py-2 px-4 gap-x-3 rounded-3xl border border-white border-opacity-20 bg-gray-800; + @apply hidden lg:flex justify-center items-center px-3 gap-x-2 py-2 xl:px-4 xl:gap-x-3 rounded-3xl border border-white border-opacity-20 bg-gray-800; } .nav__link { - @apply relative flex py-3 px-4 rounded-3xl border-b border-b-gray-800; + @apply relative flex text-[14px] py-2 px-3 xl:py-3 xl:px-4 rounded-3xl border-b border-b-gray-800; transition: border-color 0.4s var(--ease-power4); &::after { diff --git a/src/styles/components/slm.css b/src/styles/components/slm.css new file mode 100644 index 0000000..9e89ed3 --- /dev/null +++ b/src/styles/components/slm.css @@ -0,0 +1,26 @@ +.slm { + @apply mb-28 lg:mb-48; +} + +.slm__container { + @apply flex-col md:flex-row items-center max-w-[1200px] justify-between; +} + +.slm__content { + @apply w-full md:w-[54%]; +} + +.slm__title { + @apply text-[28px] md:text-[32px] xl:text-[44px] leading-[1.136] font-medium mb-5; +} + +.slm__text { + @apply text-[16px] lg:text-[18px] leading-[1.333] text-gray-200; +} + +.slm__media { + @apply w-full md:w-[44%] xl:w-[40%]; + svg { + @apply w-full h-auto; + } +} diff --git a/src/styles/components/solution.css b/src/styles/components/solution.css index d0facaf..2ef3e9f 100644 --- a/src/styles/components/solution.css +++ b/src/styles/components/solution.css @@ -79,6 +79,12 @@ } } +.solution--feature { + .solution__title { + @apply mb-20; + } +} + @media screen and (max-width: 767px) { .solution__stats { scroll-snap-type: x mandatory; diff --git a/src/styles/components/status.css b/src/styles/components/status.css index bba3136..1edc7be 100644 --- a/src/styles/components/status.css +++ b/src/styles/components/status.css @@ -41,3 +41,29 @@ .status__ill-mobile { @apply w-full h-auto md:hidden block; } + +.status--llms { + @apply relative justify-between lg:py-16 xl:py-36 lg:px-16; + + &::before { + content: ""; + @apply absolute inset-0 rounded-2xl pointer-events-none; + background: radial-gradient( + 108.94% 125.47% at 120% 80%, + rgba(245, 142, 142, 0.35) 0%, + rgba(127, 150, 255, 0.02) 88.5% + ); + } + + .status__ill { + @apply relative right-auto bottom-auto w-[90%] md:w-[45%]; + } + + .status__title { + @apply text-[28px] lg:text-[36px]; + } + + .status__content { + @apply order-1 mb-5 md:mb-0 md:order-1; + } +} diff --git a/src/styles/components/timeline.css b/src/styles/components/timeline.css index f55beb4..c10cd7a 100644 --- a/src/styles/components/timeline.css +++ b/src/styles/components/timeline.css @@ -51,3 +51,61 @@ .timeline__item-text { @apply text-[12px] md:text-[14px]; } + +.timeline__section--media { + .timeline { + @apply max-w-[1160px]; + } + + .timeline__item { + @apply md:flex md:items-center md:justify-between; + + &:not(:last-child) { + @apply mb-24; + } + + &:nth-child(2n) { + @apply md:flex md:flex-row-reverse; + + .timeline__media { + @apply flex md:justify-end; + } + + .timeline__item-text { + @apply md:mr-[30%]; + } + } + + &:nth-child(2n + 1) { + @apply md:text-right; + .timeline__item-text { + @apply md:ml-[30%]; + } + } + } + + .timeline__item-text { + @apply w-[70%]; + } + + .timeline__item-icon { + @apply md:top-1/2 md:-translate-y-1/2; + } + + .timeline__media-wrap { + @apply w-[91%] aspect-[1/0.673] rounded-xl p-2 md:p-3; + background: linear-gradient( + 283.58deg, + #ffffff 0%, + rgba(255, 255, 255, 0) 100% + ); + + img { + @apply w-full h-full object-cover rounded-xl bg-black; + } + } + + .timeline__media { + @apply w-[80%] ml-[17.5%] mt-10 md:mt-0 md:ml-0 md:w-[45%] relative; + } +} diff --git a/src/styles/main.css b/src/styles/main.css index f7e4a1f..da9a586 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -25,7 +25,9 @@ @import "./components/certifications.css"; @import "./components/platform-pw.css"; @import "./components/platform.css"; +@import "./components/model-card.css"; @import "./components/models.css"; +@import "./components/models-slm.css"; @import "./components/solution.css"; @import "./components/compute.css"; @import "./components/testimonials.css"; @@ -35,6 +37,7 @@ @import "./components/customer.css"; @import "./components/vision.css"; @import "./components/mission.css"; +@import "./components/slm.css"; @import "./components/services.css"; @import "./components/workflow.css"; @import "./components/timeline.css"; diff --git a/src/template-feature.html b/src/template-feature.html new file mode 100644 index 0000000..770071b --- /dev/null +++ b/src/template-feature.html @@ -0,0 +1,194 @@ + + + {{> head}} + + + {{> pre-content}} {{> page-loader}} + +
    + {{> nav}} {{#>hero variant="center" class="is-feature js-hero" }} + + + +
    +
    + +

    Prem Lab

    + +
    + +

    + Compare multiple LLMS
    + at the same time. +

    + +

    + Empirically test different models over the same prompt and choose the + right onw for your use case. +

    + +
    + {{#>button tag="a" href="https://app.premai.io/accounts/signup/" + target="_blank" rel="noopener" class="js-cta" }} Try Prem now + {{/button}} +
    + +
    +
    +
    + Experiment and Test +
    +
    + + +
    +
    + + {{/hero}} + +
    + {{#>timeline variant="media" }} +
    +
    +

    1. Select the models

    +

    + Decide which LLMs you want to compare across a complete and update + list. +

    +
    +
    +
    + +
    +
    + + +
    + +
    +
    +

    2. Choose your parameters

    +

    + Decide which LLMs you want to compare across a complete and update + list. +

    +
    +
    +
    + +
    +
    + + +
    + + {{/timeline}} + +
    +
    + +

    Lorem ipsum dolor

    + +
    + +

    + Benefits +

    + +
    +
    +
    +
    + {{> icons/free-rights}} +
    +

    + Prem Playground is Free.

    + Experiment and test with all the state of the art LLMs + available on the market. +

    +
    +
    +
    {{> icons/settings}}
    +

    + Make your Decision with Technical Insights.

    + Compare latency and quality in a single sandbox. +

    +
    +
    +
    + {{> icons/adjustments}} +
    +

    + Flexible for Advance Usage.

    + Tweak the parameters for your needs. +

    +
    +
    +
    +
    + +
    +
    +
    +

    + Choose the LLMs that fits your needs, + it's Free +

    +

    + Let’s connect and explore how Prem can tailor solutions to meet + your unique needs. +

    +

    +
    + {{#>button tag="a" href="https://app.premai.io/accounts/signup/" + target="_blank" rel="noopener" }} Try Prem now {{/button}} +
    +
    + + + + +
    +
    +
    + + {{> footer}} +
    + + {{> tail}} + + diff --git a/tailwind.config.js b/tailwind.config.js index 3f12e87..3bd5725 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -19,6 +19,7 @@ module.exports = { pink: "#f58e8e", wine: "#b57487", caramel: "#f2d398", + orange: "#fbb35e", malibu: "#7f96ff", }, extend: {