finish homepage
This commit is contained in:
Surjith S M
@@ -1,62 +0,0 @@
|
||||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 0.15rem;
|
||||
background-color: white;
|
||||
background-image: var(--accent-gradient);
|
||||
background-size: 400%;
|
||||
border-radius: 0.5rem;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: 1rem 1.3rem;
|
||||
border-radius: 0.35rem;
|
||||
color: #111;
|
||||
background-color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
color: #444;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
</style>
|
||||
15
src/components/cta.astro
Normal file
15
src/components/cta.astro
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
import Link from "./ui/link.astro";
|
||||
---
|
||||
|
||||
<div
|
||||
class="bg-black px-20 py-20 mt-20 mx-auto max-w-5xl rounded-lg flex flex-col items-center text-center">
|
||||
<h2 class="text-white text-3xl md:text-6xl">Build faster websites.</h2>
|
||||
<p class="text-slate-500 mt-4 text-lg md:text-xl">
|
||||
Pull content from anywhere and serve it fast with Astro's next-gen island
|
||||
architecture.
|
||||
</p>
|
||||
<div class="flex mt-5">
|
||||
<Link href="#" style="inverted">Get Started</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,40 +1,49 @@
|
||||
---
|
||||
// @ts-ignore
|
||||
import { Icon } from "astro-icon";
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: "Bring Your Own Framework",
|
||||
description:
|
||||
"Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.",
|
||||
icon: "bx:bxs-briefcase",
|
||||
},
|
||||
{
|
||||
title: "100% Static HTML, No JS",
|
||||
description:
|
||||
"Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.",
|
||||
icon: "bx:bxs-window-alt",
|
||||
},
|
||||
{
|
||||
title: "On-Demand Components",
|
||||
description:
|
||||
"Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.",
|
||||
icon: "bx:bxs-data",
|
||||
},
|
||||
{
|
||||
title: "Broad Integration",
|
||||
description:
|
||||
"Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.",
|
||||
icon: "bx:bxs-bot",
|
||||
},
|
||||
{
|
||||
title: "SEO Enabled",
|
||||
description:
|
||||
"Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.",
|
||||
icon: "bx:bxs-file-find",
|
||||
},
|
||||
{
|
||||
title: "Community",
|
||||
description:
|
||||
"Astro is an open source project powered by hundreds of contributors making thousands of individual contributions.",
|
||||
icon: "bx:bxs-user",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<div>
|
||||
<h2 class="text-2xl lg:text-5xl font-bold lg:tracking-tight">
|
||||
<div class="mt-16 md:mt-0">
|
||||
<h2 class="text-4xl lg:text-5xl font-bold lg:tracking-tight">
|
||||
Everything you need to start a website
|
||||
</h2>
|
||||
<p class="text-lg mt-4 text-slate-600">
|
||||
@@ -46,9 +55,14 @@ const features = [
|
||||
<div class="grid sm:grid-cols-2 md:grid-cols-3 mt-10 gap-16">
|
||||
{
|
||||
features.map((item) => (
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg">{item.title}</h3>{" "}
|
||||
<p class="text-slate-500 mt-2 leading-relaxed">{item.description}</p>
|
||||
<div class="flex gap-4 items-start">
|
||||
<div class="mt-1 bg-black rounded-full p-2 w-8 h-8 shrink-0">
|
||||
<Icon class="text-white" name={item.icon} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg">{item.title}</h3>{" "}
|
||||
<p class="text-slate-500 mt-2 leading-relaxed">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
14
src/components/footer.astro
Normal file
14
src/components/footer.astro
Normal file
@@ -0,0 +1,14 @@
|
||||
<footer class="my-20">
|
||||
<p class="text-center text-sm text-slate-500">
|
||||
Copyright © {new Date().getFullYear()} Astroship. All rights reserved.
|
||||
</p>
|
||||
<p class="text-center text-xs text-slate-500 mt-1">
|
||||
Made by <a
|
||||
href="https://web3templates.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="hover:underline">
|
||||
Web3Templates
|
||||
</a>
|
||||
</p>
|
||||
</footer>
|
||||
@@ -4,8 +4,8 @@ import heroImage from "assets/hero.png";
|
||||
import Link from "@components/ui/link.astro";
|
||||
---
|
||||
|
||||
<main class="grid lg:grid-cols-2 place-items-center py-8">
|
||||
<div class="py-6 md:order-1">
|
||||
<main class="grid lg:grid-cols-2 place-items-center pt-16 pb-8 md:pt-8">
|
||||
<div class="py-6 md:order-1 hidden md:block">
|
||||
<Image
|
||||
src={heroImage}
|
||||
alt="Astronaut in the air"
|
||||
@@ -14,7 +14,7 @@ import Link from "@components/ui/link.astro";
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-4xl lg:text-7xl font-bold lg:tracking-tight">
|
||||
<h1 class="text-5xl lg:text-7xl font-bold lg:tracking-tight">
|
||||
Marketing website done with Astro
|
||||
</h1>
|
||||
<p class="text-lg mt-4 text-slate-600 max-w-xl">
|
||||
|
||||
16
src/components/logos.astro
Normal file
16
src/components/logos.astro
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
// @ts-ignore
|
||||
import { Icon } from "astro-icon";
|
||||
---
|
||||
|
||||
<div class="mt-24">
|
||||
<h2 class="text-center text-slate-500">Works with your technologies</h2>
|
||||
<div class="flex gap-8 md:gap-20 items-center justify-center mt-10 flex-wrap">
|
||||
<Icon class="h-8 md:h-12" name="simple-icons:react" />
|
||||
<Icon class="h-8 md:h-12" name="simple-icons:svelte" />
|
||||
<Icon class="h-8 md:h-14" name="simple-icons:tailwindcss" />
|
||||
<Icon class="h-8 md:h-16" name="simple-icons:alpinedotjs" />
|
||||
<Icon class="h-8 md:h-12" name="simple-icons:vercel" />
|
||||
<Icon class="h-8 md:h-12" name="simple-icons:astro" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -2,7 +2,7 @@
|
||||
interface Props {
|
||||
href: string;
|
||||
size?: string;
|
||||
style?: string;
|
||||
style?: "outline" | "primary" | "inverted";
|
||||
class?: string;
|
||||
[x: string]: any;
|
||||
}
|
||||
@@ -24,6 +24,7 @@ const styles = {
|
||||
outline: "border-2 border-black hover:bg-black text-black hover:text-white",
|
||||
primary:
|
||||
"bg-black text-white hover:bg-slate-900 border-2 border-transparent",
|
||||
inverted: "bg-white text-black border-2 border-transparent",
|
||||
};
|
||||
---
|
||||
|
||||
|
||||
@@ -6,13 +6,13 @@ import "@fontsource/inter/variable.css";
|
||||
export interface Props {
|
||||
title: string;
|
||||
}
|
||||
const { src } = await getImage({
|
||||
src: "../../assets/hero.png",
|
||||
width: 800,
|
||||
height: 742,
|
||||
format: "avif",
|
||||
});
|
||||
console.log(src);
|
||||
// const { src } = await getImage({
|
||||
// src: "../../assets/hero.png",
|
||||
// width: 800,
|
||||
// height: 742,
|
||||
// format: "avif",
|
||||
// });
|
||||
// console.log(src);
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
@@ -25,7 +25,7 @@ const { title } = Astro.props;
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<link rel="preload" as="image" href={src} alt="Hero" />
|
||||
<!-- <link rel="preload" as="image" href={src} alt="Hero" /> -->
|
||||
<title>{title} {title && "|"} Astro Ship</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
---
|
||||
import Card from "@components/Card.astro";
|
||||
import Container from "@components/container.astro";
|
||||
import Cta from "@components/cta.astro";
|
||||
import Features from "@components/features.astro";
|
||||
import Footer from "@components/footer.astro";
|
||||
import Hero from "@components/hero.astro";
|
||||
import Logos from "@components/logos.astro";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
---
|
||||
|
||||
@@ -10,5 +12,8 @@ import Layout from "@layouts/Layout.astro";
|
||||
<Container>
|
||||
<Hero />
|
||||
<Features />
|
||||
<Logos />
|
||||
<Cta />
|
||||
<Footer />
|
||||
</Container>
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user