make the landing page look beautiful 😍😍😍
This commit is contained in:
grngxd
parent
a72ebe853f
commit
d36c98cb49
22 changed files with 481 additions and 29 deletions
40
src/components/misc/GradientBorder.tsx
Normal file
40
src/components/misc/GradientBorder.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { component$, CSSProperties, QwikIntrinsicElements, Slot } from "@builder.io/qwik";
|
||||
|
||||
type GradientProps = {
|
||||
size: string;
|
||||
from: string;
|
||||
to: string;
|
||||
direction?: string;
|
||||
};
|
||||
|
||||
export default component$((props: GradientProps & QwikIntrinsicElements["div"]) => {
|
||||
const {
|
||||
size,
|
||||
from,
|
||||
to,
|
||||
direction,
|
||||
style: userStyle,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
const borderStyle: CSSProperties = {
|
||||
padding: size,
|
||||
background: `linear-gradient(${direction || "to bottom"}, ${from}, ${to})`,
|
||||
display: "inline-block",
|
||||
};
|
||||
|
||||
// Only spread userStyle if it's an object
|
||||
const mergedStyle =
|
||||
userStyle && typeof userStyle === "object"
|
||||
? { ...borderStyle, ...userStyle }
|
||||
: borderStyle;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={mergedStyle}
|
||||
{...rest}
|
||||
>
|
||||
<Slot />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
39
src/components/misc/Icons.tsx
Normal file
39
src/components/misc/Icons.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import { QwikIntrinsicElements } from "@builder.io/qwik";
|
||||
|
||||
export function SolarUploadLinear(props: QwikIntrinsicElements['svg'], key: string) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} key={key}><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M17 9.002c2.175.012 3.353.109 4.121.877C22 10.758 22 12.172 22 15v1c0 2.829 0 4.243-.879 5.122C20.243 22 18.828 22 16 22H8c-2.828 0-4.243 0-5.121-.878C2 20.242 2 18.829 2 16v-1c0-2.828 0-4.242.879-5.121c.768-.768 1.946-.865 4.121-.877"></path><path stroke-linejoin="round" d="M12 15V2m0 0l3 3.5M12 2L9 5.5"></path></g></svg>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export function SolarTrashBin2Bold(props: QwikIntrinsicElements['svg'], key: string) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} key={key}><path fill="currentColor" d="M2.75 6.167c0-.46.345-.834.771-.834h2.665c.529-.015.996-.378 1.176-.916l.03-.095l.115-.372c.07-.228.131-.427.217-.605c.338-.702.964-1.189 1.687-1.314c.184-.031.377-.031.6-.031h3.478c.223 0 .417 0 .6.031c.723.125 1.35.612 1.687 1.314c.086.178.147.377.217.605l.115.372l.03.095c.18.538.74.902 1.27.916h2.57c.427 0 .772.373.772.834S20.405 7 19.979 7H3.52c-.426 0-.771-.373-.771-.833M11.607 22h.787c2.707 0 4.06 0 4.941-.863c.88-.864.97-2.28 1.15-5.111l.26-4.081c.098-1.537.147-2.305-.295-2.792s-1.187-.487-2.679-.487H8.23c-1.491 0-2.237 0-2.679.487s-.392 1.255-.295 2.792l.26 4.08c.18 2.833.27 4.248 1.15 5.112S8.9 22 11.607 22" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export function SolarClipboardAddBold(props: QwikIntrinsicElements['svg'], key: string) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} key={key}><path fill="currentColor" d="M9.5 2A1.5 1.5 0 0 0 8 3.5v1A1.5 1.5 0 0 0 9.5 6h5A1.5 1.5 0 0 0 16 4.5v-1A1.5 1.5 0 0 0 14.5 2z" /><path fill="currentColor" fill-rule="evenodd" d="M3.879 4.877c.569-.57 1.363-.77 2.621-.84V4.5a3 3 0 0 0 3 3h5a3 3 0 0 0 3-3v-.463c1.258.07 2.052.27 2.621.84C21 5.756 21 7.17 21 9.998v6c0 2.829 0 4.243-.879 5.122c-.878.878-2.293.878-5.121.878H9c-2.828 0-4.243 0-5.121-.878C3 20.24 3 18.827 3 15.998v-6c0-2.828 0-4.242.879-5.121M12.75 11a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V17a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25z" clip-rule="evenodd" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function SolarLinkRoundBold(props: QwikIntrinsicElements['svg'], key: string) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} key={key}><path fill="currentColor" fill-rule="evenodd" d="M1.25 9A6.75 6.75 0 0 1 8 2.25h4a6.75 6.75 0 0 1 0 13.5h-2a.75.75 0 0 1 0-1.5h2a5.25 5.25 0 1 0 0-10.5H8a5.25 5.25 0 0 0-3.913 8.75a.75.75 0 0 1-1.118 1A6.73 6.73 0 0 1 1.25 9M12 9.75a5.25 5.25 0 1 0 0 10.5h4a5.25 5.25 0 0 0 3.913-8.75a.75.75 0 1 1 1.118-1A6.75 6.75 0 0 1 16 21.75h-4a6.75 6.75 0 0 1 0-13.5h2a.75.75 0 0 1 0 1.5z" clip-rule="evenodd" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export function SolarDownloadMinimalisticBold(props: QwikIntrinsicElements['svg'], key: string) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} key={key}><path fill="currentColor" d="M12.554 16.506a.75.75 0 0 1-1.107 0l-4-4.375a.75.75 0 0 1 1.107-1.012l2.696 2.95V3a.75.75 0 0 1 1.5 0v11.068l2.697-2.95a.75.75 0 1 1 1.107 1.013z" /><path fill="currentColor" d="M3.75 15a.75.75 0 0 0-1.5 0v.055c0 1.367 0 2.47.117 3.337c.12.9.38 1.658.981 2.26c.602.602 1.36.86 2.26.982c.867.116 1.97.116 3.337.116h6.11c1.367 0 2.47 0 3.337-.116c.9-.122 1.658-.38 2.26-.982s.86-1.36.982-2.26c.116-.867.116-1.97.116-3.337V15a.75.75 0 0 0-1.5 0c0 1.435-.002 2.436-.103 3.192c-.099.734-.28 1.122-.556 1.399c-.277.277-.665.457-1.4.556c-.755.101-1.756.103-3.191.103H9c-1.435 0-2.437-.002-3.192-.103c-.734-.099-1.122-.28-1.399-.556c-.277-.277-.457-.665-.556-1.4c-.101-.755-.103-1.756-.103-3.191" /></svg>
|
||||
)
|
||||
}
|
||||
export function SvgSpinnersBarsRotateFade(props: QwikIntrinsicElements['svg'], key: string) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} key={key}><g><rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".14" /><rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".29" transform="rotate(30 12 12)" /><rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".43" transform="rotate(60 12 12)" /><rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".57" transform="rotate(90 12 12)" /><rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".71" transform="rotate(120 12 12)" /><rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".86" transform="rotate(150 12 12)" /><rect width="2" height="5" x="11" y="1" fill="currentColor" transform="rotate(180 12 12)" /><animateTransform attributeName="transform" calcMode="discrete" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" /></g></svg>
|
||||
)
|
||||
}
|
||||
9
src/components/misc/StereoLogo.tsx
Normal file
9
src/components/misc/StereoLogo.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { component$, QwikIntrinsicElements } from "@builder.io/qwik";
|
||||
|
||||
export default component$((props: QwikIntrinsicElements['svg']) => {
|
||||
return (
|
||||
<svg width="281" height="248" viewBox="0 0 281 248" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M0.744835 19.1645C0.340705 16.0258 0.876443 12.8377 2.2843 10.0034L6.37392 1.7703C7.01957 0.470487 8.7912 0.269553 9.71155 1.39175L85.375 93.6495H195.875L271.538 1.39175C272.459 0.269551 274.23 0.470487 274.876 1.77029L278.966 10.0034C280.374 12.8377 280.909 16.0258 280.505 19.1645L264.378 144.419C256.8 203.277 206.688 247.35 147.344 247.35H133.906C74.5619 247.35 24.4504 203.277 16.872 144.419L0.744835 19.1645Z" fill="currentColor"/>
|
||||
</svg>
|
||||
)
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue