Skip to content

Commit 961b904

Browse files
javakianjavakian
authored
Add files via upload
0 parents  commit 961b904

29 files changed

+5667
-0
lines changed

‎README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
```
12+
13+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14+
15+
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16+
17+
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18+
19+
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20+
21+
## Learn More
22+
23+
To learn more about Next.js, take a look at the following resources:
24+
25+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27+
28+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29+
30+
## Deploy on Vercel
31+
32+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33+
34+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎components/Carousel.js

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from 'react';
2+
import Image from 'next/image';
3+
4+
export default class Carousel extends React.Component {
5+
constructor(props) {
6+
super(props);
7+
8+
this.state = {
9+
slide: [{ display: 'block' }, { display: 'none' }, { display: 'none' }],
10+
slideCurrent: 0,
11+
};
12+
13+
this.changeCarousel = this.changeCarousel.bind(this);
14+
}
15+
16+
changeCarousel() {
17+
let objRet = {
18+
slide: this.state.slide.map((it, index) => {
19+
return { display: (index == this.state.slideCurrent ? 'block' : 'none') };
20+
})
21+
};
22+
23+
objRet.slideCurrent = this.state.slideCurrent + 1;
24+
25+
if (objRet.slideCurrent > 2) {
26+
objRet.slideCurrent = 0;
27+
}
28+
29+
this.setState(objRet);
30+
31+
setTimeout(this.changeCarousel, 3000);
32+
}
33+
34+
componentDidMount() {
35+
this.changeCarousel();
36+
}
37+
38+
render() {
39+
return (
40+
41+
<React.Fragment>
42+
<div className="w3-content" >
43+
<style jsx>{` max-width:2000px; `} </style>
44+
<div className="mySlides w3-display-container w3-center" style={this.state.slide[0]}>
45+
<Image src="/la.jpg" alt="Los Angeles" height={1200} width={1200} />
46+
<div className="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
47+
<br /> <br />
48+
<h3>Los Angeles</h3>
49+
<br /> <br />
50+
<p><b>We had the best time playing at Venice Beach!</b></p>
51+
</div>
52+
</div>
53+
<div className="mySlides w3-display-container w3-center" style={this.state.slide[1]}>
54+
55+
<Image src="/ny.jpg" alt="Los Angeles" height={1200} width={1200} />
56+
<div className="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
57+
<br />
58+
<br />
59+
<h3>New York</h3>
60+
<br /> <br />
61+
<p><b>The atmosphere in New York is lorem ipsum.</b></p>
62+
</div>
63+
</div>
64+
<div className="mySlides w3-display-container w3-center" style={this.state.slide[2]}>
65+
<Image src="/paris.jpg" alt="Los Angeles" height={1200} width={1200} />
66+
<div className="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
67+
<br />
68+
<br />
69+
<h3>Chicago</h3>
70+
<br /> <br />
71+
<p><b>Thank you, Chicago - A night we won't forget.</b></p>
72+
</div>
73+
</div>
74+
</div>
75+
76+
</React.Fragment>
77+
)
78+
}
79+
}
80+

‎components/Footer.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Head from 'next/head';
2+
import Image from 'next/image';
3+
import footer from '../components/Footer';
4+
import styles from '../styles/Home.module.css';
5+
6+
export default function Footer() {
7+
return (
8+
<>
9+
<footer>
10+
<div className={styles.footer}>
11+
12+
<a
13+
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
14+
target="_blank"
15+
rel="noopener noreferrer"
16+
>
17+
Powered by{' '}
18+
<span className={styles.logo}>
19+
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
20+
</span>
21+
</a>
22+
</div>
23+
</footer>
24+
</>
25+
)
26+
}

‎components/Navbar.js

+185
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
import Head from 'next/head';
2+
import Image from 'next/image';
3+
import Link from 'next/link';
4+
import index from '../pages/index';
5+
import about from '../pages/about';
6+
import tech from '../pages/tech';
7+
import misc from '../pages/misc';
8+
9+
function Navbar() {
10+
return (
11+
<>
12+
13+
<nav className="relative bg-white border-b-2 border-gray-300 text-gray-900">
14+
<div className="container mx-auto flex justify-between">
15+
/* <div className="relative block p-4 lg:p-6 text-xl text-blue-600 font-bold">Logo</div> */
16+
<ul className="flex">
17+
{/*Regular Link*/}
18+
<li className="hover:bg-blue-800 hover:text-white">
19+
<a href="#" className="relative block py-6 px-2 lg:p-6 text-sm lg:text-base font-bold">Normal</a>
20+
</li>
21+
{/*Toggleable Link*/}
22+
<li className="toggleable hover:bg-blue-800 hover:text-white">
23+
<input type="checkbox" defaultValue="selected" id="toggle-one" className="toggle-input" />
24+
<label htmlFor="toggle-one" className="block cursor-pointer py-6 px-4 lg:p-6 text-sm lg:text-base font-bold">Click</label>
25+
<div role="toggle" className="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-blue-800">
26+
<div className="container mx-auto w-full flex flex-wrap justify-between mx-2">
27+
<ul className="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
28+
<h3 className="font-bold text-xl text-white text-bold mb-2">Heading 1</h3>
29+
<li>
30+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
31+
</li>
32+
<li>
33+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
34+
</li>
35+
<li>
36+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
37+
</li>
38+
<li>
39+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
40+
</li>
41+
<li>
42+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
43+
</li>
44+
</ul>
45+
<ul className="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-r-0 lg:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
46+
<h3 className="font-bold text-xl text-white text-bold mb-2">Heading 2</h3>
47+
<li>
48+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
49+
</li>
50+
<li>
51+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
52+
</li>
53+
<li>
54+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
55+
</li>
56+
<li>
57+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
58+
</li>
59+
<li>
60+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
61+
</li>
62+
</ul>
63+
<ul className="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-b-0 sm:border-r md:border-b-0 pb-6 pt-6 lg:pt-3">
64+
<h3 className="font-bold text-xl text-white text-bold">Heading 3</h3>
65+
<li>
66+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
67+
</li>
68+
<li>
69+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
70+
</li>
71+
<li>
72+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
73+
</li>
74+
<li>
75+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
76+
</li>
77+
<li>
78+
<a href="#" className="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
79+
</li>
80+
</ul>
81+
<ul className="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 pb-6 pt-6 lg:pt-3">
82+
<h3 className="font-bold text-xl text-white text-bold mb-2">Heading 4</h3>
83+
<li className="pt-3">
84+
<img src="https://placehold.it/205x172" />
85+
</li>
86+
</ul>
87+
</div>
88+
</div>
89+
</li>
90+
{/* ## Toggleable Link Template ##
91+
92+
<li class="toggleable"><input type="checkbox" value="selected" id="toggle-xxx" class="toggle-input"><label for="toggle-xxx" class="cursor-pointer">Click</label><div role="toggle" class="mega-menu">
93+
Add your mega menu content
94+
</div></li>
95+
96+
*/}
97+
{/*Hoverable Link*/}
98+
<li className="hoverable hover:bg-blue-800 hover:text-white">
99+
<a href="#" className="relative block py-6 px-4 lg:p-6 text-sm lg:text-base font-bold hover:bg-blue-800 hover:text-white">Hover</a>
100+
<div className="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-blue-800">
101+
<div className="container mx-auto w-full flex flex-wrap justify-between mx-2">
102+
<div className="w-full text-white mb-8">
103+
<h2 className="font-bold text-2xl">Main Hero Message for the menu section</h2>
104+
<p>Sub-hero message, not too long and not too short. Make it just right!</p>
105+
</div>
106+
<ul className="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
107+
<div className="flex items-center">
108+
<svg className="h-8 mb-3 mr-3 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
109+
<path d="M3 6c0-1.1.9-2 2-2h8l4-4h2v16h-2l-4-4H5a2 2 0 0 1-2-2H1V6h2zm8 9v5H8l-1.67-5H5v-2h8v2h-2z" />
110+
</svg>
111+
<h3 className="font-bold text-xl text-white text-bold mb-2">Heading 1</h3>
112+
</div>
113+
<p className="text-gray-100 text-sm">Quarterly sales are at an all-time low create spaces to explore the accountable talk and blind vampires.</p>
114+
<div className="flex items-center py-3">
115+
<svg className="h-6 pr-3 fill-current text-blue-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
116+
<path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z" />
117+
</svg>
118+
<a href="#" className="text-white bold border-b-2 border-blue-300 hover:text-blue-300">Find out more...</a>
119+
</div>
120+
</ul>
121+
<ul className="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-r-0 lg:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
122+
<div className="flex items-center">
123+
<svg className="h-8 mb-3 mr-3 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
124+
<path d="M4.13 12H4a2 2 0 1 0 1.8 1.11L7.86 10a2.03 2.03 0 0 0 .65-.07l1.55 1.55a2 2 0 1 0 3.72-.37L15.87 8H16a2 2 0 1 0-1.8-1.11L12.14 10a2.03 2.03 0 0 0-.65.07L9.93 8.52a2 2 0 1 0-3.72.37L4.13 12zM0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4z" />
125+
</svg>
126+
<h3 className="font-bold text-xl text-white text-bold mb-2">Heading 2</h3>
127+
</div>
128+
<p className="text-gray-100 text-sm">Prioritize these line items game-plan draw a line in the sand come up with something buzzworthy UX upstream selling.</p>
129+
<div className="flex items-center py-3">
130+
<svg className="h-6 pr-3 fill-current text-blue-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
131+
<path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z" />
132+
</svg>
133+
<a href="#" className="text-white bold border-b-2 border-blue-300 hover:text-blue-300">Find out more...</a>
134+
</div>
135+
</ul>
136+
<ul className="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-b-0 sm:border-r md:border-b-0 pb-6 pt-6 lg:pt-3">
137+
<div className="flex items-center">
138+
<svg className="h-8 mb-3 mr-3 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
139+
<path d="M2 4v14h14v-6l2-2v10H0V2h10L8 4H2zm10.3-.3l4 4L8 16H4v-4l8.3-8.3zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z" />
140+
</svg>
141+
<h3 className="font-bold text-xl text-white text-bold mb-2">Heading 3</h3>
142+
</div>
143+
<p className="text-gray-100 text-sm">This proposal is a win-win situation which will cause a stellar paradigm shift, let's touch base off-line before we fire the new ux experience.</p>
144+
<div className="flex items-center py-3">
145+
<svg className="h-6 pr-3 fill-current text-blue-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
146+
<path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z" />
147+
</svg>
148+
<a href="#" className="text-white bold border-b-2 border-blue-300 hover:text-blue-300">Find out more...</a>
149+
</div>
150+
</ul>
151+
<ul className="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 pb-6 pt-6 lg:pt-3">
152+
<div className="flex items-center">
153+
<svg className="h-8 mb-3 mr-3 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
154+
<path d="M9 12H1v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6h-8v2H9v-2zm0-1H0V5c0-1.1.9-2 2-2h4V2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1h4a2 2 0 0 1 2 2v6h-9V9H9v2zm3-8V2H8v1h4z" />
155+
</svg>
156+
<h3 className="font-bold text-xl text-white text-bold mb-2">Heading 4</h3>
157+
</div>
158+
<p className="text-gray-100 text-sm">This is a no-brainer to wash your face, or we need to future-proof this high performance keywords granularity.</p>
159+
<div className="flex items-center py-3">
160+
<svg className="h-6 pr-3 fill-current text-blue-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
161+
<path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z" />
162+
</svg>
163+
<a href="#" className="text-white bold border-b-2 border-blue-300 hover:text-blue-300">Find out more...</a>
164+
</div>
165+
</ul>
166+
</div>
167+
</div>
168+
</li>
169+
{/* ## Hoverable Link Template ##
170+
171+
<li class="hoverable hover:bg-blue-800 hover:text-white"><a href="#" class="relative block">x</a><div class="mega-menu">
172+
Add your mega menu content
173+
</div></li>
174+
175+
*/}
176+
</ul>
177+
</div>
178+
</nav>
179+
180+
181+
</>
182+
)
183+
}
184+
185+
export default Navbar

0 commit comments

Comments
 (0)