docs: add hub page named trial -> /trial
This commit is contained in:
Arista Indrajaya
parent
e4ff358bfa
commit
2dc90f8012
@ -321,6 +321,11 @@ const config = {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
to: "trial",
|
||||||
|
label: "Trial",
|
||||||
|
position: "right",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
to: "blog",
|
to: "blog",
|
||||||
label: "Blog",
|
label: "Blog",
|
||||||
|
|||||||
37
docs/src/components/HomepagePrimaryFeatures/index.js
Normal file
37
docs/src/components/HomepagePrimaryFeatures/index.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import styles from "../HomepagePrimaryFeatures/styles.module.css";
|
||||||
|
import clsx from "clsx";
|
||||||
|
|
||||||
|
export default function HomepagePrimaryFeatures() {
|
||||||
|
return (
|
||||||
|
<section className={styles.features}>
|
||||||
|
<div className="container">
|
||||||
|
<div className={clsx(styles.cards)}>
|
||||||
|
<div className={clsx(styles.card, styles.cardBluish)}>
|
||||||
|
<div>
|
||||||
|
<p>Installation</p>
|
||||||
|
<h3>Set up Jan with our guide, ensuring a smooth installation process across multiple platforms.</h3>
|
||||||
|
</div>
|
||||||
|
<div >
|
||||||
|
<a href={"/quickstart/install"}>Get Started</a>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cardImage}>
|
||||||
|
<img alt={"Card Image"} src={"/img/homepage-new/rocket.png"} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={clsx(styles.card, styles.cardPinkish)}>
|
||||||
|
<div>
|
||||||
|
<p>Models</p>
|
||||||
|
<h3>Explore the available AI models, each pre-configured for immediate use to streamline your projects.</h3>
|
||||||
|
</div>
|
||||||
|
<div >
|
||||||
|
<a href={"/quickstart/models-list"}>Support</a>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cardImage}>
|
||||||
|
<img alt={"Card Image"} src={"/img/homepage-new/chat.png"} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
.features {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5rem 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.cards {
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
min-width: 250px;
|
||||||
|
min-height: 275px;
|
||||||
|
max-height: 325px;
|
||||||
|
flex: 1;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card p {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardImage {
|
||||||
|
position: absolute;
|
||||||
|
right: 1rem;
|
||||||
|
bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardImage img {
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.cardImage {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardBluish {
|
||||||
|
background: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(185,202,237,1) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardPinkish {
|
||||||
|
background: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(215,194,238,1) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card a {
|
||||||
|
all: unset;
|
||||||
|
color: white;
|
||||||
|
background-color: #1C1E21;
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card a:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
67
docs/src/components/HomepageSecondaryFeatures/index.js
Normal file
67
docs/src/components/HomepageSecondaryFeatures/index.js
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import styles from "../HomepageSecondaryFeatures/styles.module.css";
|
||||||
|
import clsx from "clsx";
|
||||||
|
|
||||||
|
export default function HomepageSecondaryFeatures() {
|
||||||
|
return (
|
||||||
|
<section className={styles.features}>
|
||||||
|
<div className="container">
|
||||||
|
<div className={clsx(styles.cards)}>
|
||||||
|
<div className={clsx(styles.card)}>
|
||||||
|
<div>
|
||||||
|
<div className={styles.cardLogo}>
|
||||||
|
<img alt={"Feature logo"} src={"/img/homepage-new/bg-rocket.png"}/>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cardContent}>
|
||||||
|
<h3>Quickstart</h3>
|
||||||
|
<p>Jump right in with our Quickstart guide, designed to get you going with simple steps and clear instructions for a smooth setup.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cardFooter}>
|
||||||
|
<a href={"/quickstart/"}>Learn Here
|
||||||
|
{/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill={"currentColor"}>
|
||||||
|
<path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
|
||||||
|
</svg> */}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={clsx(styles.card)}>
|
||||||
|
<div>
|
||||||
|
<div className={styles.cardLogo}>
|
||||||
|
<img alt={"Feature logo"} src={"/img/homepage-new/bg-wrench.png"}/>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cardContent}>
|
||||||
|
<h3>Integrations</h3>
|
||||||
|
<p>Discover how Jan seamlessly integrates with 9 different system, streamlining your application for maximum efficiency.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cardFooter}>
|
||||||
|
<a href={"/category/integrations/"}>Learn Here
|
||||||
|
{/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill={"currentColor"}>
|
||||||
|
<path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
|
||||||
|
</svg> */}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={clsx(styles.card)}>
|
||||||
|
<div>
|
||||||
|
<div className={styles.cardLogo}>
|
||||||
|
<img alt={"Feature logo"} src={"/img/homepage-new/bg-book.png"}/>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cardContent}>
|
||||||
|
<h3>Error Codes</h3>
|
||||||
|
<p>Navigate through common error codes with explanations and solutions to resolve them quickly.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cardFooter}>
|
||||||
|
<a href={"/category/error-codes/"}>Learn Here
|
||||||
|
{/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill={"currentColor"}>
|
||||||
|
<path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
|
||||||
|
</svg> */}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
.features {
|
||||||
|
padding-top: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.cards {
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: #ECECEF;
|
||||||
|
width: 30%;
|
||||||
|
border-radius: 15px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardContent {
|
||||||
|
margin-top: 3rem;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardLogo {
|
||||||
|
height: 130px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardFooter {
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardLogo img {
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card p {
|
||||||
|
font-size: 1rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h3 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card a {
|
||||||
|
all: unset;
|
||||||
|
color: white;
|
||||||
|
background-color: #1C1E21;
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card a svg {
|
||||||
|
padding-top: 12px;
|
||||||
|
height: 1.5rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card a:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
68
docs/src/components/HomepageTerinaryFeatures/index.js
Normal file
68
docs/src/components/HomepageTerinaryFeatures/index.js
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
import styles from "../HomepageTerinaryFeatures/styles.module.css";
|
||||||
|
import clsx from "clsx";
|
||||||
|
|
||||||
|
export default function HomepageTerinaryFeatures() {
|
||||||
|
return (
|
||||||
|
<section className={styles.features}>
|
||||||
|
<div className="container">
|
||||||
|
<div className={clsx(styles.cards)}>
|
||||||
|
<div className={clsx(styles.card)}>
|
||||||
|
<div className={styles.cardHeader}>
|
||||||
|
<img alt={"Icon"} src={"/img/homepage-new/roket.png"}/>
|
||||||
|
<h3>Get Started</h3>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cardContent}>
|
||||||
|
<p>Dive into the Jan basics and get set up quickly.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Quickstart</li>
|
||||||
|
<li>Installation</li>
|
||||||
|
<li>Pre-configured Models</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={clsx(styles.card)}>
|
||||||
|
<div className={styles.cardHeader}>
|
||||||
|
<img alt={"Icon"} src={"/img/homepage-new/buku.png"}/>
|
||||||
|
<h3>Best Practices</h3>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cardContent}>
|
||||||
|
<p>Learn the best practices for optimizing thread management and local server use.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Thread Management</li>
|
||||||
|
<li>Local Server</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={clsx(styles.card)}>
|
||||||
|
<div className={styles.cardHeader}>
|
||||||
|
<img alt={"Icon"} src={"/img/homepage-new/setting.png"}/>
|
||||||
|
<h3>Features:</h3>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cardContent}>
|
||||||
|
<p>Explore our key features designed to enhance your experience.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Advanced Models Setup</li>
|
||||||
|
<li>Extensions</li>
|
||||||
|
<li>Integrations</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={clsx(styles.card)}>
|
||||||
|
<div className={styles.cardHeader}>
|
||||||
|
<img alt={"Icon"} src={"/img/homepage-new/doa.png"}/>
|
||||||
|
<h3>Troubleshooting</h3>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cardContent}>
|
||||||
|
<p>Find solutions to common issues, including error codes, frequent errors, and FAQs.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Error Codes</li>
|
||||||
|
<li>Common Errors</li>
|
||||||
|
<li>FAQ</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
.features {
|
||||||
|
padding-top: 5rem;
|
||||||
|
padding-bottom: 5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.cards {
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: #ECECEF;
|
||||||
|
width: 275px;
|
||||||
|
border-radius: 15px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
/* justify-content: space-between; */
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardContent {
|
||||||
|
margin-top: 1rem;
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardContent li {
|
||||||
|
font-weight: 600;
|
||||||
|
list-style: circle;
|
||||||
|
margin: 1rem;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardContent li::marker {
|
||||||
|
color: #2563EB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardHeader {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardHeader img {
|
||||||
|
/*width: 40px;*/
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card p {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
52
docs/src/pages/trial.js
Normal file
52
docs/src/pages/trial.js
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
import clsx from 'clsx';
|
||||||
|
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||||
|
import Layout from '@theme/Layout';
|
||||||
|
import Heading from '@theme/Heading';
|
||||||
|
import styles from './trial.module.css';
|
||||||
|
import HomepagePrimaryFeatures from "../components/HomepagePrimaryFeatures";
|
||||||
|
import HomepageSecondaryFeatures from "../components/HomepageSecondaryFeatures";
|
||||||
|
import HomepageTerinaryFeatures from "../components/HomepageTerinaryFeatures";
|
||||||
|
import { DocSearch } from '@docsearch/react';
|
||||||
|
|
||||||
|
function HomepageHeader() {
|
||||||
|
return (
|
||||||
|
<header className={clsx(styles.heroBanner)}>
|
||||||
|
<div className="container">
|
||||||
|
<Heading as="h1" className={clsx(styles.heroTitle)}>
|
||||||
|
Hello, how can we help?
|
||||||
|
</Heading>
|
||||||
|
<div className={styles.searchBar}>
|
||||||
|
<DocSearch />
|
||||||
|
</div>
|
||||||
|
{/* <div className={styles.searchBar}>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill={"currentColor"}>
|
||||||
|
<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
|
||||||
|
<input placeholder={"Search for questions or topics ..."}/>
|
||||||
|
<button>Search</button>
|
||||||
|
</div> */}
|
||||||
|
<p className={clsx(styles.heroSubtitle)}>
|
||||||
|
Open-source ChatGPT alternative that runs 100% offline on your computer.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
const {siteConfig} = useDocusaurusContext();
|
||||||
|
return (
|
||||||
|
<Layout
|
||||||
|
title={`Home | ${siteConfig.title}`}
|
||||||
|
description="Description will go into a meta tag in <head />"
|
||||||
|
>
|
||||||
|
<div className={clsx(styles.homeBg)}>
|
||||||
|
<HomepageHeader />
|
||||||
|
<main style={{backgroundColor: "whitesmoke"}}>
|
||||||
|
<HomepagePrimaryFeatures />
|
||||||
|
<HomepageSecondaryFeatures />
|
||||||
|
<HomepageTerinaryFeatures />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
96
docs/src/pages/trial.module.css
Normal file
96
docs/src/pages/trial.module.css
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
/**
|
||||||
|
* CSS files with the .module.css suffix will be treated as CSS modules
|
||||||
|
* and scoped locally.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.heroBanner {
|
||||||
|
padding: 4rem 0;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 996px) {
|
||||||
|
.heroBanner {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1400px) {
|
||||||
|
.homeBg {
|
||||||
|
background-size: auto 600px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.homeBg {
|
||||||
|
background-image: url("/img/homepage-new/bg.png") !important;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroTitle {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
margin-top: 4rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.heroTitle {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.searchBar {
|
||||||
|
background-color: white;
|
||||||
|
max-width: 580px;
|
||||||
|
height: 50px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
border-radius: 25px;
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBar svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
align-self: center;
|
||||||
|
margin-left: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
color: #B8C2C8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBar input {
|
||||||
|
flex: auto;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
margin: 6px 8px 6px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBar input:focus {
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBar input::placeholder {
|
||||||
|
color: #B8C2C8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBar button {
|
||||||
|
height: 40px;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: white;
|
||||||
|
color: gray;
|
||||||
|
align-self: center;
|
||||||
|
padding: 0px 5px;
|
||||||
|
margin: 0px 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroSubtitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user