Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 0 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,34 +1,3 @@
# NextJS and NextUI Landing Page Template

You can deploy here directly to vercel [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/Siumauricio/landing-template-nextui)

This is a template for NextJS and NextUI.

[NextJS](https://nextjs.org/)
[NextUI](https://nextui.org/)

You can see the demo here: https://landing-template-nextui.vercel.app/
For improve this template, you can create a pull request or open an issue here [Issues](https://github.com/Siumauricio/landing-template-nextui/issues) or [Pull Request](
https://github.com/Siumauricio/landing-template-nextui/pulls)

### Dark Mode
![Landing Page Dark Mode](./public/Screenshot_2.png)

### Light Mode
![Landing Page Light Mode](./public/Screenshot_3.png)

- Hero Section
- Features Section 1
- Features Section 2
- Features Section 3
- Testimonials Section
- CTA Section
- Pricing Section
- FAQ Section
- Footer Section
- Dark Mode Support
- Full Responsive

## For Run

Install dependencies
Expand Down
44 changes: 44 additions & 0 deletions components/bannerHome/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import {Button, Divider, Input, Text} from '@nextui-org/react';
import React from 'react';
import {CheckIcon} from '../icons/CheckIcon';
import {Box} from '../styles/box';
import {Flex} from '../styles/flex';

export const BannerHome = () => {
return (
<>
<Flex
css={{
'gap': '$15',
'px': '$6',
'flexDirection': 'column',
'alignContent': 'center',
'justifyContent': 'center',
'alignItems': 'center',
'width': '100%',

'@sm': {
flexDirection: 'row',
mt: '$20',
},
}}
justify={'center'}
>
<Text

css={{
display: 'inline',

}}
style= {{textShadow: ' 0px 4px 4px lightgrey', fontSize: '4rem'}}
color="orange"
>
CORAL Consulting Services
</Text>
</Flex>
<Divider
css={{position: 'absolute', inset: '0p', left: '0', mt: '$10'}}
/>
</>
);
};
80 changes: 80 additions & 0 deletions components/contactUs/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { Button, Card, Divider, Input, Text, Textarea } from '@nextui-org/react';
import React from 'react';
import { Box } from '../styles/box';
import { Flex } from '../styles/flex';

export const ContactUsForm = () => {
return (
<>
<Flex
direction={'column'}
css={{
'gap': '0rem',
'justifyContent': 'center',
'alignItems': 'center',
'px': '$6',
'py': '$20',
'@sm': {
justifyContent: 'space-around',
px: '$32',
},
'@md': {
px: '$64',
},
}}
>
<Flex direction="column" css={{gap: '2rem', maxWidth: '800px', width: '100%'}}>
<Card style={{padding: 20}}>
<Card.Body>
<Text h2 style={{color: 'orange'}}>Contact Us</Text>
<Flex
css={{
py: '$10',
gap: '$5',
}}
>
<Flex direction={'column'} css={{gap: '1.5rem', width: '100%'}}>
<Input
label="Name"
placeholder="Enter your name"
fullWidth
required
/>
<Input
label="Email"
placeholder="Enter your email"
fullWidth
required
/>
<Input
label="Subject"
placeholder="Enter the subject"
fullWidth
/>
<Textarea
label="Message"
placeholder="Enter your message"
fullWidth
required
rows={6}
/>
<Button
auto
style={{backgroundColor: 'orange'}}
>
Submit
</Button>
</Flex>
</Flex>
</Card.Body>
</Card>
</Flex>

</Flex>

<Divider
css={{position: 'absolute', inset: '0p', left: '0', mt: '$5'}}
/>
</>
);
};
148 changes: 22 additions & 126 deletions components/faq/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,9 @@ export const Faq = () => {
direction={'column'}
>
<Flex align={'center'} direction={'column'}>
<Text span css={{color: '$blue600'}}>
FAQ
</Text>
<Text h2>You Have Questions?</Text>
<Text
span
css={{
maxWidth: '700px',
color: '$accents8',
textAlign: 'center',
}}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
condimentum, nisl ut aliquam lacinia, nisl nisl aliquet
aliquet
</Text>

<Text h2 style={{color: 'orange'}}>FAQ - About us</Text>

</Flex>

<Flex
Expand All @@ -44,143 +31,52 @@ export const Faq = () => {
direction={'column'}
>
<Flex css={{gap: '$5'}} justify={'center'}>
<BoxIcon />

<Flex direction={'column'} css={{gap: '$3'}}>
<Text h3>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit?
<Text h3 style={{color: 'orange'}}>
What industries does the company serve?
</Text>
<Text
span
css={{
color: '$accents8',
}}

>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed condimentum, nisl ut aliquam lacinia, nisl nisl
aliquet aliquet Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed condimentum, nisl ut aliquam
lacinia, nisl nisl aliquet aliquet Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Sed condimentum, nisl
ut aliquam lacinia, nisl nisl aliquet aliquet Lorem
ipsum dolor sit amet, aliquam lacinia, nisl nisl aliquet
aliquet
</Text>
<Text
span
css={{
color: '$accents8',
}}
>
elit. Sed condimentum, nisl ut aliquam lacinia, nisl
nisl aliquet aliquet elit. Sed condimentum, nisl ut
aliquam lacinia, nisl nisl aliquet aliquet elit. Sed
condimentum, nisl ut aliquam lacinia, nisl nisl aliquet
aliquet elit. Sed condimentum, nisl ut aliquam lacinia,
nisl nisl aliquet aliquet
Coral Consulting Services serves a diverse range of industries, providing comprehensive IT services, software development, professional training, outsourcing, and support solutions. Their expertise spans various sectors, including but not limited to finance, healthcare, technology, manufacturing, and more. By offering a broad spectrum of services, Warrior Tech Solutions aims to cater to the unique needs of businesses across different industries, helping them optimize their IT infrastructure, enhance software capabilities, and empower their workforce through training and support services.
</Text>

</Flex>
</Flex>

<Flex css={{gap: '$5'}} justify={'center'}>
<BoxIcon />

<Flex direction={'column'} css={{gap: '$3'}}>
<Text h3>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit?
<Text h3 style={{color: 'orange'}}>
Can you provide an overview of the company&rsquo;s mission and values?
</Text>
<Text
span
css={{
color: '$accents8',
}}

>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed condimentum, nisl ut aliquam lacinia, nisl nisl
aliquet aliquet Lorem ipsum dolor sit amet, consectetur
adipiscing adipiscing elit. Sed condimentum, nisl ut
aliquam lacinia, nisl nisl aliquet aliquet Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Sed
condimentum, nisl ut aliquam lacinia, nisl nisl aliquet
aliquet
</Text>
<Text
span
css={{
color: '$accents8',
}}
>
elit. Sed condimentum, nisl ut aliquam lacinia, nisl
nisl aliquet aliquet elit. Sed condimentum, nisl ut
aliquam lacinia, nisl nisl aliquet aliquet elit. Sed
condimentum, aliquet
Mission may revolve around delivering high-quality, innovative solutions to clients, fostering continuous learning and development through professional training, ensuring client satisfaction through reliable support services, and promoting excellence in software development. Values may emphasize integrity, collaboration, customer-centricity, and a commitment to staying at the forefront of technological advancements to provide cutting-edge solutions to their clients.
</Text>

</Flex>
</Flex>

<Flex css={{gap: '$5'}} justify={'center'}>
<BoxIcon />
<Flex direction={'column'} css={{gap: '$3'}}>
<Text h3>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit?
</Text>
<Text
span
css={{
color: '$accents8',
}}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed condimentum, nisl ut aliquam lacinia, nisl nisl
aliquet
</Text>
<Text
span
css={{
color: '$accents8',
}}
>
elit. Sed condimentum, nisl ut aliquam lacinia, nisl
nisl aliquet aliquet elit. Sed condimentum, nisl ut
aliquam lacinia, nisl nisl aliquet aliquet elit. Sed
condimentum, Sed condimentum, nisl ut aliquam lacinia,
nisl nisl aliquet aliquet
</Text>
</Flex>
</Flex>


<Flex css={{gap: '$5'}} justify={'center'}>
<BoxIcon />

<Flex direction={'column'} css={{gap: '$3'}}>
<Text h3>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit?
</Text>
<Text
span
css={{
color: '$accents8',
}}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed condimentum, nisl ut aliquam lacinia, nisl nisl
aliquet aliquet Lorem ipsum dolor sit amet, consectetur
adipiscing
<Text h3 style={{color: 'orange'}}>
What is the company&rsquo;s commitment to customer satisfaction?
</Text>
<Text
span
css={{
color: '$accents8',
}}

>
elit. Sed condimentum, nisl ut aliquam lacinia, nisl
nisl aliquet aliquet elit. Sed condimentum, nisl ut
aliquam lacinia, nisl nisl aliquet aliquet elit. Sed
condimentum, nisl ut aliquam lacinia, nisl nisl aliquet
aliquet elit. Sed condimentum, nisl ut aliquam lacinia,
nisl nisl aliquet aliquet
Our commitment to customer satisfaction is paramount. We strive to deliver excellence in IT services, software development, training, outsourcing, and support. By prioritizing client needs, maintaining open communication, and ensuring the highest quality in all our offerings, we aim to exceed expectations. Our customer-centric approach is geared towards building lasting partnerships, where client success and satisfaction are at the forefront of our business ethos.
</Text>

</Flex>
</Flex>
</Flex>
Expand Down
Loading