76 lines
4.5 KiB
Rust
76 lines
4.5 KiB
Rust
use dioxus::prelude::*;
|
|
|
|
#[component]
|
|
pub fn Hero() -> Element {
|
|
rsx! {
|
|
// We can create elements inside the rsx macro with the element name followed by a block of attributes and children.
|
|
div {
|
|
class: "content container mb6t29",
|
|
div {
|
|
class: "col self-center flex-1 md:flex-row md:self-stretch justify-center lg:justify-between items-center p-y-0px p-x-10px",
|
|
div {
|
|
class: "md:flex-1 gap-10px",
|
|
h1 {
|
|
class: "font-[var(--title-f)] font-black tracking-[4px] text-center text-2.5em sm:text-[3em] md:text-[3.5em] lg:text-[4em] md:text-left",
|
|
style: "background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: text; background-color: ; -webkit-background-clip: text;",
|
|
"Danilo"
|
|
" "
|
|
"Cesa"
|
|
}
|
|
p {
|
|
class: "text-[var(--tertiary-text)] text-center md:text-left text-[1.2em] font-extralight",
|
|
"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti, rerum. Debitis accusantium deleniti enim iste dignissimos? Similique, exercitationem! Odit vero, numquam quae ratione maxime sunt reiciendis laudantium quaerat iure ipsum!"
|
|
}
|
|
}
|
|
// h1 {
|
|
// class: "text-4xl md:text-6xl font-bold mb-4",
|
|
// "Hey, I'm Dan"
|
|
// }
|
|
// p {
|
|
// class: "text-lg md:text-xl text-gray-400",
|
|
// "Full Stack Developer"
|
|
// }
|
|
}
|
|
// div {
|
|
// class: "p-4 rounded-lg hover:border-cyan-500 transition duration-300",
|
|
// p {
|
|
// class: "text-gray-400",
|
|
// "I'm a passionate software developer with a background in computer science and a keen interest in frontend technologies."
|
|
// }
|
|
// }
|
|
// div {
|
|
// class: "row justify-center md:justify-start p-y-15px p-x-0px gap-2",
|
|
// a {
|
|
// class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md transition duration-300",
|
|
// href: "#contact",
|
|
// svg {
|
|
// class: "inline-block",
|
|
// view_box: "0 0 24 24",
|
|
// fill: "var(--accent-text)",
|
|
// height: "20px",
|
|
// width: "20px",
|
|
// path {
|
|
// d: "M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"
|
|
// }
|
|
// }
|
|
// }
|
|
// a {
|
|
// class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md transition duration-300",
|
|
// href: "#contact",
|
|
// svg {
|
|
// class: "inline-block",
|
|
// view_box: "0 0 16 16",
|
|
// fill: "var(--accent-text)",
|
|
// height: "20px",
|
|
// width: "20px",
|
|
// path {
|
|
// d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
}
|
|
}
|
|
}
|