Skip to content

Commit

Permalink
feat: add components and plugins required for landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@colinscz
colinscz committed Dec 31, 2024
1 parent 990742f commit ad86342
Show file tree
Hide file tree
Showing 99 changed files with 3,688 additions and 0 deletions.
112 changes: 112 additions & 0 deletions components/Benefits.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<script setup lang="ts">
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
Sparkle,
Tag,
Paintbrush,
Blocks,
LineChart,
Wallet,
} from "lucide-vue-next";
interface BenefitsProps {
icon: string;
title: string;
description: string;
}
const benefitList: BenefitsProps[] = [
{
icon: "blocks",
title: "Build Brand Trust",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. A odio velit cum aliquam. Natus consectetur dolores.",
},
{
icon: "lineChart",
title: "More Leads",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. A odio velit cum aliquam, natus consectetur.",
},
{
icon: "wallet",
title: "Higher Conversions",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus consectetur. A odio velit cum aliquam",
},
{
icon: "sparkle",
title: "Test Marketing Ideas",
description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. A odio velit cum aliquam. Natus consectetur dolores.",
},
];
const iconMap: Record<
string,
| typeof Sparkle
| typeof Tag
| typeof Paintbrush
| typeof Blocks
| typeof LineChart
| typeof Wallet
> = {
sparkle: Sparkle,
tag: Tag,
paintbrush: Paintbrush,
blocks: Blocks,
lineChart: LineChart,
wallet: Wallet,
};
</script>

<template>
<section
id="benefits"
class="container py-24 sm:py-32"
>
<div class="grid lg:grid-cols-2 place-items-center lg:gap-24">
<div>
<h2 class="text-lg text-primary mb-2 tracking-wider">Benefits</h2>

<h2 class="text-3xl md:text-4xl font-bold mb-4">
Your Shortcut to Success
</h2>
<p class="text-xl text-muted-foreground mb-8">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non ducimus
reprehenderit architecto rerum similique facere odit deleniti
necessitatibus quo quae.
</p>
</div>

<div class="grid lg:grid-cols-2 gap-4 w-full">
<Card
v-for="({ icon, title, description }, index) in benefitList"
:key="title"
class="bg-muted/50 dark:bg-card hover:bg-background dark:hover:bg-background transition-all delay-75 group/number"
>
<CardHeader>
<div class="flex justify-between">
<component
class="size-8 mb-6 text-primary"
:is="iconMap[icon]"
/>

<span
class="text-5xl text-muted-foreground/15 font-medium transition-all delay-75 group-hover/number:text-muted-foreground/30"
>0{{ index + 1 }}</span
>
</div>

<CardTitle>{{ title }}</CardTitle>
</CardHeader>

<CardContent class="text-muted-foreground">
{{ description }}
</CardContent>
</Card>
</div>
</div>
</section>
</template>
60 changes: 60 additions & 0 deletions components/Community.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<script setup lang="ts">
import {
Card,
CardHeader,
CardTitle,
CardFooter,
CardContent,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import DiscordIcon from "@/icons/DiscordIcon.vue";
</script>

<template>
<section
id="community"
class="py-12"
>
<hr />
<div class="container py-20 sm:py-20">
<div class="lg:w-[60%] mx-auto">
<Card
class="bg-background shadow-none text-center flex flex-col items-center justify-center border-0"
>
<CardHeader>
<CardTitle class="text-4xl md:text-5xl font-bold">
<Component
class="w-20 h-20 m-auto mb-4"
:is="DiscordIcon"
/>
Ready to join this
<span
class="text-transparent bg-gradient-to-r from-[#D247BF] to-primary bg-clip-text"
>
Community?
</span>
</CardTitle>
</CardHeader>
<CardContent class="lg:w-[80%] text-xl text-muted-foreground">
Join our vibrant Discord community! Connect, share, and grow with
like-minded enthusiasts. Click to dive in! 🚀
</CardContent>

<CardFooter>
<Button as-child>
<a
href="https://discord.com/"
target="_blank"
>
Join Discord
</a>
</Button>
</CardFooter>
</Card>
</div>
</div>
<hr />
</section>
</template>
201 changes: 201 additions & 0 deletions components/Contact.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { Button } from "./ui/button";
import { Card, CardHeader, CardContent, CardFooter } from "./ui/card";
import { Label } from "./ui/label";
import { Input } from "./ui/input";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "./ui/select";
import { Textarea } from "./ui/textarea";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { AlertCircle, Building2, Phone, Mail, Clock } from "lucide-vue-next";
interface ContactFormeProps {
firstName: string;
lastName: string;
email: string;
subject: string;
message: string;
}
const contactForm = reactive<ContactFormeProps>({
firstName: "",
lastName: "",
email: "",
subject: "Web Development",
message: "",
});
const invalidInputForm = ref<boolean>(false);
const handleSubmit = () => {
const { firstName, lastName, email, subject, message } = contactForm;
console.log(contactForm);
const mailToLink = `mailto:[email protected]?subject=${subject}&body=Hello I am ${firstName} ${lastName}, my Email is ${email}. %0D%0A${message}`;
window.location.href = mailToLink;
};
</script>

<template>
<section
id="contact"
class="container py-24 sm:py-32"
>
<section class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<div class="mb-4">
<h2 class="text-lg text-primary mb-2 tracking-wider">Contact</h2>

<h2 class="text-3xl md:text-4xl font-bold">Connect With Us</h2>
</div>
<p class="mb-8 text-muted-foreground lg:w-5/6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum
ipsam sint enim exercitationem ex autem corrupti quas tenetur
</p>

<div class="flex flex-col gap-4">
<div>
<div class="flex gap-2 mb-1">
<Building2 />
<div class="font-bold">Find Us</div>
</div>

<div>742 Evergreen Terrace, Springfield, IL 62704</div>
</div>

<div>
<div class="flex gap-2 mb-1">
<Phone />
<div class="font-bold">Call Us</div>
</div>

<div>+1 (619) 123-4567</div>
</div>

<div>
<div class="flex gap-2 mb-1">
<Mail />
<div class="font-bold">Mail Us</div>
</div>

<div>[email protected]</div>
</div>

<div>
<div class="flex gap-2">
<Clock />
<div class="font-bold">Visit Us</div>
</div>

<div>
<div>Monday - Friday</div>
<div>8AM - 4PM</div>
</div>
</div>
</div>
</div>

<!-- form -->
<Card class="bg-muted/60 dark:bg-card">
<CardHeader class="text-primary text-2xl"> </CardHeader>
<CardContent>
<form
@submit.prevent="handleSubmit"
class="grid gap-4"
>
<div class="flex flex-col md:flex-row gap-8">
<div class="flex flex-col w-full gap-1.5">
<Label for="first-name">First Name</Label>
<Input
id="first-name"
type="text"
placeholder="Leopoldo"
v-model="contactForm.firstName"
/>
</div>

<div class="flex flex-col w-full gap-1.5">
<Label for="last-name">Last Name</Label>
<Input
id="last-name"
type="text"
placeholder="Miranda"
v-model="contactForm.lastName"
/>
</div>
</div>

<div class="flex flex-col gap-1.5">
<Label for="email">Email</Label>
<Input
id="email"
type="email"
placeholder="[email protected]"
v-model="contactForm.email"
/>
</div>

<div class="flex flex-col gap-1.5">
<Label for="subject">Subject</Label>

<Select v-model="contactForm.subject">
<SelectTrigger>
<SelectValue placeholder="Select a subject" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="Web Development">
Web Development
</SelectItem>
<SelectItem value="Mobile Development">
Mobile Development
</SelectItem>
<SelectItem value="Figma Design"> Figma Design </SelectItem>
<SelectItem value="REST API "> REST API </SelectItem>
<SelectItem value="FullStack Project">
FullStack Project
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>

<div class="flex flex-col gap-1.5">
<Label for="message">Message</Label>
<Textarea
id="message"
placeholder="Your message..."
rows="5"
v-model="contactForm.message"
/>
</div>

<Alert
v-if="invalidInputForm"
variant="destructive"
>
<AlertCircle class="w-4 h-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>
There is an error in the form. Please check your input.
</AlertDescription>
</Alert>

<Button class="mt-4">Send message</Button>
</form>
</CardContent>

<CardFooter></CardFooter>
</Card>
</section>
</section>
</template>
Loading

0 comments on commit ad86342

Please sign in to comment.