364 lines
11 KiB
HTML
364 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<!--SEO Meta Tags-->
|
|
<meta charset="utf-8" />
|
|
<!-- SITE TITLE -->
|
|
<title>Veltio - React Event Management Website Theme + NextJS + TailwindCSS</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
<meta content="Responsive NextJS + TailwindCSS Landing Page Template" name="description" />
|
|
<meta name="keywords" content="Landing, NextJS , TailwindCSS, Landing page, Template, NFT, Landing">
|
|
<meta content="Themesdesign" name="author" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
<link rel="shortcut icon" href="favicon.ico">
|
|
|
|
<!-- Google-Fonts -->
|
|
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800">
|
|
|
|
<!-- Bootstrap Core CSS -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/prettify.css" />
|
|
|
|
<!-- Custom CSS -->
|
|
<link href="css/styles.css" rel="stylesheet">
|
|
<!-- Highlight js -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/atom-one-dark.min.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar navbar-default navbar-fixed-top">
|
|
<div class="container-fluid">
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
<div class="text-center">
|
|
<a class="logo" href="#">Veltio - React Event Management Website Theme + NextJS + TailwindCSS
|
|
Documentation</a>
|
|
</div>
|
|
</div><!-- /.container-fluid -->
|
|
</nav>
|
|
|
|
<div id="wrapper">
|
|
|
|
<!-- Sidebar -->
|
|
<div id="sidebar-wrapper">
|
|
<ul class="sidebar-nav">
|
|
<li>
|
|
<a href="#runproject">Run Project</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#customizer">Customizer</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#structure">Structure</a>
|
|
</li>
|
|
<li>
|
|
<a href="#credits">Plugins & Resources (Credits)</a>
|
|
</li>
|
|
<li>
|
|
<a href="#support">Support</a>
|
|
</li>
|
|
<li><a href="#changelog">Change Log</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /#sidebar-wrapper -->
|
|
|
|
<!-- Page Content -->
|
|
<div id="page-content-wrapper">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="right-bar">
|
|
|
|
<div>
|
|
|
|
<div id="runproject">
|
|
<h3 class="page-header">Thank you for purchasing our template</h3>
|
|
|
|
<div>
|
|
<div class="alert alert-info">
|
|
|
|
<strong>Version:</strong> 1.0.0<br>
|
|
<strong>Created:</strong> January 08, 2023<br>
|
|
<strong>Last Updated:</strong> January 08, 2023<br><br>
|
|
|
|
In this document, we provide all kinds of good information with all the
|
|
details you need to use our template. We hope you have fun and enjoy working
|
|
with our template <br>
|
|
<p>If you have any question or need support contact via <br> <br>
|
|
<p class="text-primary">
|
|
- <strong><a
|
|
href="https://www.templatemonster.com/authors/softivus">SOFTIVUS</a></strong>
|
|
</p>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="page-header">Getting Started
|
|
</h2>
|
|
<h3>Run Project</h3>
|
|
<p>
|
|
<b>1. Download and install Node.js and NPM : </b> You can download Node.js from <a
|
|
href="https://nodejs.org" target="_blank">https://nodejs.org</a>. NPM comes
|
|
bundled with Node.js.
|
|
</p>
|
|
|
|
<p>
|
|
<b>2. Purchase Item: </b> After downloading zip from Templatemonstar, unzip it in your
|
|
desired location.
|
|
</p>
|
|
|
|
<p>
|
|
<b>3. Use cmd With Windows or IOS : </b> Open this folder in
|
|
console / terminal. Run the command in console: <b>npm install</b> or <b>yarn
|
|
install</b>
|
|
</p>
|
|
|
|
<p>
|
|
<b>4.</b> Now to run development server, run below command: console: <b>npm run
|
|
dev</b>
|
|
or <b>yarn dev</b>
|
|
</p>
|
|
<p>
|
|
<b>5.</b> Now you will find some output after running above command in console.
|
|
</p>
|
|
<p>
|
|
<b>6.</b> Click or open the URL on your browser: <b> http://localhost:3000 </b>
|
|
</p>
|
|
|
|
<p>
|
|
<b>7.</b>.Thats all! Now you should see your site.
|
|
</p>
|
|
|
|
|
|
<p class="m-t-20">
|
|
<b>For the case Visual Studio Code</b>
|
|
Open Folder Project (open Visual Studio Code) => Open Terminal (Ctrl + `) => Type
|
|
command: <b>npm install</b> --> <b>npm run dev</b>
|
|
</p>
|
|
|
|
|
|
<div id="customizer" class="com-container">
|
|
<h4 class="page-header">How to customize Template</h4>
|
|
<p>Instructions below help you to change the content, customize css and jsx for the
|
|
template</p>
|
|
|
|
<ul>
|
|
<li> Change Site Title </li><br>
|
|
<img src="img/site-title.png" alt="" width="1200px"><br><br>
|
|
<li> Change or replace favicon </li><br>
|
|
<img src="img/favicon.png" alt="" width="1200px"><br><br>
|
|
<li> Update the home page </li><br>
|
|
<img src="img/home.png" alt="" width="1200px"><br><br>
|
|
<li> Edit Menu Names</li><br><br>
|
|
<img src="img/menu.png" alt="" width="1200px"><br><br>
|
|
<li> Edit global CSS for template </li><br>
|
|
<img src="img/global-css.png" alt="" width="1200px"><br><br>
|
|
<li> Edit fake Data for template </li><br><br>
|
|
<img src="img/fake-data.png" alt="" width="1200px"><br><br>
|
|
<li> Edit tailwindcss CSS config</li><br><br>
|
|
<img src="img/tailwindcss.png" alt="" width="1200px"><br><br>
|
|
<li> Edit public images </li><br><br>
|
|
<img src="img/public-img.png" alt="" width="1200px">
|
|
<li> Edit Social Links </li><br><br>
|
|
<img src="img/social-link.png" alt="" width="1200px">
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div id="structure" class="com-container">
|
|
<h4 class="page-header">Structure</h4>
|
|
<p>I have tried to follow the standards and modular structure while developing the
|
|
theme. Following sections are explaining the theme File & Folder, structure.
|
|
</p>
|
|
|
|
<div class="row p-t-20">
|
|
<div class="col-sm-12">
|
|
<h4>File & Folder Structure</h4>
|
|
<hr />
|
|
|
|
<pre class="prettyprint">
|
|
├── components
|
|
│ ├── layout.js
|
|
├── fakedata
|
|
├── pages
|
|
│ ├── about
|
|
│ │ ├── index.js
|
|
│ ├── api
|
|
│ │ ├── hello.js
|
|
│ ├── contact
|
|
│ │ ├── index.js
|
|
│ ├── pricing
|
|
│ │ ├── index.js
|
|
│ ├── _app.js
|
|
│ ├── _error.js
|
|
│ ├── index.js
|
|
├── public
|
|
│ ├── images
|
|
│ ├── favicon.ico
|
|
├── styles
|
|
│ ├── globals.css
|
|
├── next.config.js
|
|
└── package-lock.json
|
|
├── package.json
|
|
├── postcss.config.js
|
|
├── tailwind.config.js
|
|
├── yarn.lock
|
|
</pre>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12 p-t-30">
|
|
<h4>Home.js Structure</h4>
|
|
<hr />
|
|
|
|
<pre>
|
|
<code>
|
|
import Head from "next/head";
|
|
import About from "../components/about/About";
|
|
import Banner from "../components/banner/Banner";
|
|
import Conference from "../components/conference/Conference";
|
|
import Event from "../components/event/Event";
|
|
import Gallery from "../components/gallery/Gallery";
|
|
import Pricing from "../components/pricing/Pricing";
|
|
import Statics from "../components/statics/Statics";
|
|
import Team from "../components/team/Team";
|
|
import Review from '../components/review/Review'
|
|
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Veltio </title>
|
|
<meta name="description" content="Event Management website using nextjs and tailwindcss" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<Banner />
|
|
<About />
|
|
<Statics />
|
|
<Team />
|
|
<Event />
|
|
<Conference />
|
|
<Pricing />
|
|
<Gallery />
|
|
<Review />
|
|
</>
|
|
)
|
|
}
|
|
</code>
|
|
</pre>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="credits" class="com-container">
|
|
<h4 class="page-header">Credits & Official Documentation</h4>
|
|
<p>We've used the following resources as listed. These are some awesome creation
|
|
and we are thankful to the community.</p>
|
|
|
|
<ul>
|
|
<li><a href="https://nextjs.org/docs/" rel="nofollow" target="_blank">Next
|
|
JS</a></li>
|
|
<li><a href="https://reactjs.org/" rel="nofollow" target="_blank">React</a></li>
|
|
<li><a href="https://reactjs.org/" rel="nofollow" target="_blank">React dom</a></li>
|
|
|
|
<li><a href="https://tailwindcss.com/docs/" rel="nofollow"
|
|
target="_blank">Tailwindcss</a></li>
|
|
<li><a href="https://react-icons.github.io/react-icons" rel="nofollow"
|
|
target="_blank">React Icons</a></li>
|
|
|
|
<li><a href="https://formik.org/">Formik</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="support" class="com-container">
|
|
<h4 class="page-header">Support</h4>
|
|
<p class="m-t-20">
|
|
If you have any question and need support contact the link bellow
|
|
I will ready
|
|
support for you. Thank so much
|
|
</p>
|
|
|
|
<p>
|
|
Stay Awesome!
|
|
</p>
|
|
|
|
<p class="text-primary">
|
|
- <strong><a
|
|
href="https://www.templatemonster.com/authors/softivus">SOFTIVUS</a></strong>
|
|
</p>
|
|
</div>
|
|
|
|
<div id="changelog">
|
|
|
|
<h4 class="page-header">Changelog</h4>
|
|
|
|
<p style="margin-top: 20px;"><span
|
|
style="text-decoration: underline; font-weight: 600;">Version 1.0.0
|
|
</span> <small class="text-muted"> January 08,
|
|
2023</small>
|
|
</p>
|
|
|
|
<ul>
|
|
<li>
|
|
Initial release
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /#page-content-wrapper -->
|
|
|
|
<div class="text-center">
|
|
<p class="copy">Copyright © 2023 <a
|
|
href="https://www.templatemonster.com/authors/softivus/s">SOFTIVUS</a></p>
|
|
</div>
|
|
</div>
|
|
<!-- /#wrapper -->
|
|
|
|
<!-- jQuery -->
|
|
<script src="js/jquery.js"></script>
|
|
|
|
<!-- Bootstrap Core JavaScript -->
|
|
<script src="js/bootstrap.min.js"></script>
|
|
|
|
<script src="js/jquery.easing.min.js"></script>
|
|
|
|
<script type="text/javascript" src="js/prettify.js"></script>
|
|
|
|
<!-- Menu Toggle Script -->
|
|
<script>
|
|
|
|
//jQuery for page scrolling feature - requires jQuery Easing plugin
|
|
$(function () {
|
|
$('.sidebar-nav a').bind('click', function (event) {
|
|
var $anchor = $(this);
|
|
$('html, body').stop().animate({
|
|
scrollTop: $($anchor.attr('href')).offset().top - 100
|
|
}, 1500, 'easeInOutExpo');
|
|
event.preventDefault();
|
|
});
|
|
});
|
|
</script>
|
|
<!-- Code highlight -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
|
|
<script>hljs.highlightAll();</script>
|
|
</body>
|
|
|
|
</html> |