Skip to content

Commit

Permalink
Merge pull request #337 from mukilan2815/main
Browse files Browse the repository at this point in the history 
Getting started ui changes
  • Loading branch information
@subhadeeproy3902
subhadeeproy3902 authored Jun 20, 2024
2 parents 5a98f1e + ba5935a commit d5dcf85
Showing 1 changed file with 171 additions and 148 deletions.
319 changes: 171 additions & 148 deletions src/app/gettingstarted/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,206 +1,229 @@

import { Button } from "@/components/ui/button";
import type { Metadata } from "next";
import Header from "@/components/shared/Header";
import ScrollToTopButton from "@/components/shared/ScrollUp";

export const metadata: Metadata = {
title: "Blox AI | Geeting Started",
title: "Blox AI | Getting Started",
description: "Let's get you started with Blox AI.",
};

const page = () => {
const Page = () => {
return (
<>
<Header />
<div className="container mx-auto px-4 py-8">
<div className="bg-gradient-to-r from-primary to-secondary text-white py-16 rounded-lg mb-8">
<div className="max-w-3xl mx-auto text-center">
<h1 className="text-4xl font-bold mb-4">Welcome to BloxAI</h1>
<p className="text-lg mb-8">
Craft stunning flowcharts, diagrams, and visuals effortlessly.
</p>
<Button variant="default" size="lg">
Get Started
</Button>
<section className="mb-12">
<div className="bg-gradient-to-r from-primary to-secondary text-white py-16 rounded-lg mb-8">
<div className="max-w-3xl mx-auto text-center">
<h1 className="text-5xl font-bold mb-6">Welcome to BloxAI</h1>
<p className="text-xl mb-8">
Craft stunning flowcharts, diagrams, and visuals effortlessly.
</p>
<Button variant="default" size="lg">
Get Started
</Button>
</div>
</div>
</div>
<div className="mb-8">
<h2 className="text-3xl font-bold mb-6 text-center">
Powerful Features
</h2>
</section>

<section className="mb-12">
<h1 className="flex justify-center items-center font-bold text-3xl mb-5">
Features
</h1>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="bg-secondary p-6 rounded-lg shadow-md">
<h3 className="text-xl font-bold mb-4">
<div className="bg-secondary p-8 rounded-lg shadow-lg">
<h2 className="text-3xl font-bold mb-4">
Real-time Collaboration
</h3>
<p className="text-gray-600 dark:text-gray-400">
</h2>
<p className="text-gray-100">
Work together with your team in real-time, allowing seamless
collaboration on diagrams and flowcharts.
</p>
</div>
<div className="bg-secondary p-6 rounded-lg shadow-md">
<h3 className="text-xl font-bold mb-4">Intuitive Editor</h3>
<p className="text-gray-600 dark:text-gray-400">
<div className="bg-secondary p-8 rounded-lg shadow-lg">
<h2 className="text-3xl font-bold mb-4">Intuitive Editor</h2>
<p className="text-gray-100">
Our intuitive editor makes it easy to create stunning visuals,
with a wide range of tools and features at your fingertips.
</p>
</div>
<div className="bg-secondary p-6 rounded-lg shadow-md">
<h3 className="text-xl font-bold mb-4">Secure Sharing</h3>
<p className="text-gray-600 dark:text-gray-400">
<div className="bg-secondary p-8 rounded-lg shadow-lg">
<h2 className="text-3xl font-bold mb-4">Secure Sharing</h2>
<p className="text-gray-100">
Share your creations with peace of mind, thanks to our secure
sharing options and access controls.
</p>
</div>
</div>
</div>
<div className="mb-8">
<h2 className="text-3xl font-bold mb-6 text-center">How to Use</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div className="space-y-4">
<div className="flex items-center">
<span className="bg-primary text-white rounded-full w-8 h-8 flex justify-center items-center p-2 mr-4">
1
</span>
<p className="text-lg font-semibold">
Open the Excalidraw canvas
</p>
</div>
<div className="flex items-center">
<span className="bg-primary text-white rounded-full w-8 h-8 flex justify-center items-center p-2 mr-4">
2
</span>
<p className="text-lg font-semibold">
Start drawing your diagrams
</p>
</div>
<div className="flex items-center">
<span className="bg-primary text-white rounded-full w-8 h-8 flex justify-center items-center p-2 mr-4">
3
</span>
<p className="text-lg font-semibold">
Collaborate with your team in real-time
</p>
</section>
<hr />
<section className="mb-12 mt-10">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div>
<h2 className="text-4xl font-bold mb-8 text-center">
How to Use
</h2>
<div className="space-y-6">
<div className="flex items-center">
<span className="bg-primary text-white rounded-full w-10 h-10 flex justify-center items-center p-2 mr-6">
1
</span>
<p className="text-xl font-semibold">
Open the Excalidraw canvas
</p>
</div>
<div className="flex items-center">
<span className="bg-primary text-white rounded-full w-10 h-10 flex justify-center items-center p-2 mr-6">
2
</span>
<p className="text-xl font-semibold">
Start drawing your diagrams
</p>
</div>
<div className="flex items-center">
<span className="bg-primary text-white rounded-full w-10 h-10 flex justify-center items-center p-2 mr-6">
3
</span>
<p className="text-xl font-semibold">
Collaborate with your team in real-time
</p>
</div>
</div>
</div>
</div>
</div>
<div className="mb-8">
<h2 className="text-3xl font-bold mb-6 text-center">
Frequently Asked Questions
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="bg-secondary p-6 rounded-lg shadow-md">
<h3 className="text-xl font-bold mb-4">What is BloxAI?</h3>
<p className="text-gray-600 dark:text-gray-400">
BloxAI is a powerful diagramming tool that allows you to create
stunning visuals, flowcharts, and diagrams effortlessly.
</p>
</div>
<div className="bg-secondary p-6 rounded-lg shadow-md">
<h3 className="text-xl font-bold mb-4">
Can I collaborate with my team?
</h3>
<p className="text-gray-600 dark:text-gray-400">
Yes, BloxAI supports real-time collaboration, allowing you and
your team members to work on the same diagram simultaneously.
</p>
</div>
<div className="bg-secondary p-6 rounded-lg shadow-md">
<h3 className="text-xl font-bold mb-4">
Is BloxAI secure and private?
</h3>
<p className="text-gray-600 dark:text-gray-400">
Absolutely! We prioritize security and privacy, ensuring that
your data is safe and secure at all times.
</p>
</div>
<div className="bg-secondary p-6 rounded-lg shadow-md">
<h3 className="text-xl font-bold mb-4">
Can I export my diagrams?
</h3>
<p className="text-gray-600 dark:text-gray-400">
Yes, you can export your diagrams in various formats, including
PNG, SVG, and PDF, making it easy to share or print your work.
</p>
<div>
<h2 className="text-4xl font-bold mb-8 text-center">
Frequently Asked Questions
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<div className="bg-secondary p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-4">What is BloxAI?</h3>
<p className="text-gray-100">
BloxAI is a powerful diagramming tool that allows you to
create stunning visuals, flowcharts, and diagrams
effortlessly.
</p>
</div>
<div className="bg-secondary p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-4">
Can I collaborate with my team?
</h3>
<p className="text-gray-100">
Yes, BloxAI supports real-time collaboration, allowing you
and your team members to work on the same diagram
simultaneously.
</p>
</div>
<div className="bg-secondary p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-4">
Is BloxAI secure and private?
</h3>
<p className="text-gray-100">
Absolutely! We prioritize security and privacy, ensuring
that your data is safe and secure at all times.
</p>
</div>
<div className="bg-secondary p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold mb-4">
Can I export my diagrams?
</h3>
<p className="text-gray-100">
Yes, you can export your diagrams in various formats,
including PNG, SVG, and PDF, making it easy to share or
print your work.
</p>
</div>
</div>
</div>
</div>
</div>

<div className="mb-8">
<h2 className="text-3xl font-bold mb-6 text-center">
What Our Users Say
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="bg-secondary p-6 rounded-lg shadow-md">
<p className="text-gray-600 dark:text-gray-400 mb-4">
</section>
<hr />
<section className="mb-12 mt-10">
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
<div className="bg-secondary p-8 rounded-lg shadow-lg">
<h2 className="text-4xl font-bold mb-8 text-center">
What Our Users Say
</h2>
<p className="text-gray-100 mb-4">
&quot;BloxAI has been a game-changer for our team. The real-time
collaboration features have streamlined our workflow, and the
intuitive editor makes creating diagrams a breeze.&quot;
</p>
<p className="font-bold">- John Doe, Project Manager</p>
<p className="font-bold text-gray-200">
- John Doe, Project Manager
</p>
</div>
<div className="bg-secondary p-6 rounded-lg shadow-md">
<p className="text-gray-600 dark:text-gray-400 mb-4">
<div className="bg-secondary p-8 rounded-lg shadow-lg">
<p className="text-gray-100 mb-4">
&quot;The secure sharing options and access controls give us
peace of mind when sharing our work. We highly recommend BloxAI
to any team that needs a powerful diagramming tool.&quot;
</p>
<p className="font-bold">- Jane Smith, Team Lead</p>
<p className="font-bold text-gray-200">- Jane Smith, Team Lead</p>
</div>
<div className="bg-secondary p-6 rounded-lg shadow-md">
<p className="text-gray-600 dark:text-gray-400 mb-4">
<div className="bg-secondary p-8 rounded-lg shadow-lg">
<p className="text-gray-100 mb-4">
&quot;BloxAI&apos;s real-time collaboration and intuitive editor
have made our diagramming process much more efficient. It&apos;s
a must-have tool for any team.&quot;
</p>
<p className="font-bold">- Bob Johnson, Product Manager</p>
<p className="font-bold text-gray-200">
- Bob Johnson, Product Manager
</p>
</div>
</div>
</div>
</section>

<div className="bg-primary text-white p-8 rounded-lg">
<h2 className="text-3xl font-bold mb-6">Get in Touch</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<p className="mb-4">
Have any questions or need assistance? Feel free to reach out to
us.
</p>
<p className="mb-4">
<strong>Email:</strong> [email protected]
</p>
<p className="mb-4">
<strong>Phone:</strong> +91 86373 73116
</p>
</div>
<div>
<p className="mb-4">
You can also visit our office or send us a letter:
</p>
<p className="mb-4">
<strong>Address:</strong> 123 Main Street, City, State 12345
</p>
<section className="mb-12">
<div className="bg-primary text-white p-8 rounded-lg">
<h2 className="text-4xl font-bold mb-8 text-center">
Get in Touch
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<div>
<p className="text-gray-100 mb-6">
Have any questions or need assistance? Feel free to reach out
to us.
</p>
<p className="text-gray-100 mb-4">
<strong>Email:</strong> [email protected]
</p>
<p className="text-gray-100 mb-4">
<strong>Phone:</strong> +91 86373 73116
</p>
</div>
<div>
<p className="text-gray-100 mb-6">
You can also visit our office or send us a letter:
</p>
<p className="text-gray-100 mb-4">
<strong>Address:</strong> 123 Main Street, City, State 12345
</p>
</div>
</div>
</div>
</div>
<div className="bg-secondary p-8 mt-8 rounded-lg text-center">
<p className="mb-4">© 2024 BloxAI. All rights reserved.</p>
<p>
<a href="#" className="text-primary underline">
Privacy Policy
</a>{" "}
|{" "}
<a href="#" className="text-primary underline">
Terms of Service
</a>
</p>
</div>
</section>

<section>
<div className="bg-secondary p-8 rounded-lg text-center">
<p className="text-gray-100 mb-4">
© 2024 BloxAI. All rights reserved.
</p>
<p>
<a href="#" className="text-primary underline">
Privacy Policy
</a>{" "}
|{" "}
<a href="#" className="text-primary underline">
Terms of Service
</a>
</p>
</div>
</section>
</div>
<ScrollToTopButton />
</>
);
};

export default page;
export default Page;

0 comments on commit d5dcf85

Please sign in to comment.