first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,60 @@
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
|
||||
const AboutTabs = () => {
|
||||
return (
|
||||
<>
|
||||
<Tabs>
|
||||
<TabList className="nav nav-tabs md-mt-50">
|
||||
<Tab className="nav-link font-slab">Our Story</Tab>
|
||||
<Tab className="nav-link font-slab">Our Mission</Tab>
|
||||
<Tab className="nav-link font-slab">Our Vision</Tab>
|
||||
</TabList>
|
||||
{/* End TabList */}
|
||||
|
||||
<div className="tab-content mt-20">
|
||||
<TabPanel>
|
||||
<p className="font-rubik">
|
||||
Lorem ipsum dolor sit amet, consecteur adipiscng elit sed do
|
||||
eiusmod tempor non sunt
|
||||
</p>
|
||||
<p className="font-rubik">
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore nulla
|
||||
pariaturExcepteur sint occaecat cu proident, sunter in culpa qui
|
||||
officia deserunt mollit .
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<p className="font-rubik">
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting
|
||||
industry
|
||||
</p>
|
||||
<p className="font-rubik">
|
||||
Contrary to popular belief, Lorem Ipsum is not simply random text.
|
||||
It has roots in a piece of classical Latin literature from 45 BC,
|
||||
making it over 2000 years old. Richard McClintock, a Latin
|
||||
professor.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<p className="font-rubik">
|
||||
There are many variations of passages of Lorem Ipsum available,
|
||||
but the majority,
|
||||
</p>
|
||||
<p className="font-rubik">
|
||||
Many desktop publishing packages and web page editors now use
|
||||
Lorem Ipsum as their default model text, and a search for 'lorem
|
||||
ipsum' will uncover many web sites still in their infancy.
|
||||
</p>
|
||||
</TabPanel>
|
||||
</div>
|
||||
{/* End TabContent */}
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutTabs;
|
||||
@@ -0,0 +1,70 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
|
||||
const DocAsTabs = () => {
|
||||
return (
|
||||
<>
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab>
|
||||
<div className="d-flex align-items-center">
|
||||
<Image width="17" height="18" src="/images/icon/90.svg" alt="icon" />
|
||||
<p>Team Box</p>
|
||||
</div>
|
||||
</Tab>
|
||||
{/* End .d-felx */}
|
||||
<Tab>
|
||||
<div className="d-flex align-items-center ">
|
||||
<Image width="17" height="18" src="/images/icon/91.svg" alt="icon" />
|
||||
<p>Project & Task</p>
|
||||
</div>
|
||||
</Tab>
|
||||
{/* End .d-felx */}
|
||||
<Tab>
|
||||
<div className="d-flex align-items-center">
|
||||
<Image width={18} height={18} src="/images/icon/92.svg" alt="icon" />
|
||||
<p>Note & Docs</p>
|
||||
</div>
|
||||
</Tab>
|
||||
{/* End .d-felx */}
|
||||
</TabList>
|
||||
|
||||
<div className="mt-50 sm-mt-30">
|
||||
<TabPanel>
|
||||
<Image width={1155} height={685} style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_11.png"
|
||||
alt="screen"
|
||||
className="m-auto"
|
||||
data-aos="fade"
|
||||
data-aos-duration="1200"
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Image width={1155} height={685} style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_15.png"
|
||||
alt="screen"
|
||||
className="m-auto"
|
||||
data-aos="fade"
|
||||
data-aos-duration="1200"
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Image width={1155} height={685} style={{height:'fit-content'}}
|
||||
src="/images/assets/screen_16.png"
|
||||
alt="screen"
|
||||
className="m-auto"
|
||||
data-aos="fade"
|
||||
data-aos-duration="1200"
|
||||
/>
|
||||
</TabPanel>
|
||||
</div>
|
||||
{/* /.pricing-table-area-six */}
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocAsTabs;
|
||||
@@ -0,0 +1,126 @@
|
||||
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
|
||||
const tabList = [
|
||||
{ iconOne: "105", iconTwo: "105-c" },
|
||||
{ iconOne: "106", iconTwo: "106-c" },
|
||||
{ iconOne: "107", iconTwo: "107-c" },
|
||||
{ iconOne: "108", iconTwo: "108-c" },
|
||||
{ iconOne: "109", iconTwo: "109-c" },
|
||||
{ iconOne: "110", iconTwo: "110-c" },
|
||||
{ iconOne: "111", iconTwo: "111-c" },
|
||||
];
|
||||
|
||||
const tabListContent = [
|
||||
{
|
||||
img: "img_81",
|
||||
innerText: "Track Human faces",
|
||||
title: "Motation Tracking",
|
||||
description: `From its medieval origins to the digital earn everything
|
||||
there is to know about the ubi lorem ipsum passage.`,
|
||||
},
|
||||
{
|
||||
img: "img_92",
|
||||
innerText: "keyframing experience",
|
||||
title: "Keyframing",
|
||||
description: `From its medieval origins to the digital earn everything
|
||||
there is to know about the ubi lorem ipsum passage.`,
|
||||
},
|
||||
{
|
||||
img: "img_93",
|
||||
innerText: "Audio track down",
|
||||
title: "Audio Ducking",
|
||||
description: `From its medieval origins to the digital earn everything
|
||||
there is to know about the ubi lorem ipsum passage.`,
|
||||
},
|
||||
{
|
||||
img: "img_94",
|
||||
innerText: "Take the color",
|
||||
title: "Color Matching",
|
||||
description: `From its medieval origins to the digital earn everything
|
||||
there is to know about the ubi lorem ipsum passage.`,
|
||||
},
|
||||
{
|
||||
img: "img_95",
|
||||
innerText: "Edit videos at up to 4K",
|
||||
title: "4K Editing Support",
|
||||
description: `From its medieval origins to the digital earn everything
|
||||
there is to know about the ubi lorem ipsum passage.`,
|
||||
},
|
||||
{
|
||||
img: "img_96",
|
||||
innerText: "Remove unwanted noise",
|
||||
title: "Noise Removal",
|
||||
description: `From its medieval origins to the digital earn everything
|
||||
there is to know about the ubi lorem ipsum passage.`,
|
||||
},
|
||||
{
|
||||
img: "img_97",
|
||||
innerText: "Layer multiple video clips",
|
||||
title: "Picture in Picture (PIP)",
|
||||
description: `From its medieval origins to the digital earn everything
|
||||
there is to know about the ubi lorem ipsum passage.`,
|
||||
},
|
||||
];
|
||||
|
||||
const DocEditorTabs = () => {
|
||||
return (
|
||||
<>
|
||||
<Tabs>
|
||||
<TabList>
|
||||
{tabList.map((img, i) => (
|
||||
<Tab key={i}>
|
||||
<div className="nav-link d-flex align-items-center justify-content-center">
|
||||
<Image width={55} height={55} style={{width:'100%',height:'fit-content'}}
|
||||
src={`/images/icon/${img.iconOne}.svg`}
|
||||
alt="icon"
|
||||
className="current tran3s"
|
||||
/>
|
||||
<Image width={55} height={55} style={{objectFit:'contain'}}
|
||||
src={`/images/icon/${img.iconTwo}.svg`}
|
||||
alt="icon"
|
||||
className="hover tran3s"
|
||||
/>
|
||||
</div>
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
|
||||
<div className="mt-60 sm-mt-40 tab-content">
|
||||
{tabListContent.map((tabContent, i) => (
|
||||
<TabPanel key={i}>
|
||||
<div className="row no-gutters align-items-center">
|
||||
<div className="col-md-6">
|
||||
<div className="img-holder">
|
||||
<Image width={768} height={520} style={{height:'fit-content'}}
|
||||
src={`/images/media/${tabContent.img}.png`}
|
||||
alt="media"
|
||||
/>
|
||||
<div className="ripple-box d-flex align-items-center justify-content-center">
|
||||
<p>{tabContent.innerText}</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
{/* /.img-holder */}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="text-wrapper">
|
||||
<h4>{tabContent.title}</h4>
|
||||
<p>{tabContent.description}</p>
|
||||
</div>{" "}
|
||||
{/* /.text-wrapper */}
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
))}
|
||||
</div>
|
||||
{/* /.pricing-table-area-six */}
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocEditorTabs;
|
||||
@@ -0,0 +1,84 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Slider from "react-slick";
|
||||
import Image from "next/image";
|
||||
export default function SlickAsNav() {
|
||||
const [nav1, setNav1] = useState();
|
||||
const [nav2, setNav2] = useState();
|
||||
|
||||
var settings = {
|
||||
slidesToShow: 3,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 420,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider
|
||||
className="slick-nav-none"
|
||||
asNavFor={nav2}
|
||||
ref={(slider1) => setNav1(slider1)}
|
||||
autoplay={true}
|
||||
>
|
||||
<div className="item">
|
||||
<Image width={1174} height={663} style={{height:'fit-content'}} src="/images/assets/feature-img-12.png" alt="feature" />
|
||||
</div>
|
||||
<div className="item">
|
||||
<Image width={1174} height={663} style={{height:'fit-content'}} src="/images/assets/feature-img-12.png" alt="feature" />
|
||||
</div>
|
||||
<div className="item">
|
||||
<Image width={1174} height={663} style={{height:'fit-content'}} src="/images/assets/feature-img-12.png" alt="feature" />
|
||||
</div>
|
||||
</Slider>
|
||||
{/* Top Image slide */}
|
||||
|
||||
<Slider
|
||||
{...settings}
|
||||
asNavFor={nav1}
|
||||
ref={(slider2) => setNav2(slider2)}
|
||||
swipeToSlide={true}
|
||||
focusOnSelect={true}
|
||||
className="slick-nav-custom"
|
||||
>
|
||||
<div className="block-style-eleven mt-40">
|
||||
<div className="num font-rubik">01</div>
|
||||
<div className="title">Personal Notes</div>
|
||||
<p className="font-rubik">
|
||||
A place to think and track ideas for you and your team
|
||||
</p>
|
||||
</div>
|
||||
{/* /.block-style-eleven */}
|
||||
<div className="block-style-eleven mt-40">
|
||||
<div className="num font-rubik">02</div>
|
||||
<div className="title">Knowledge Base</div>
|
||||
<p className="font-rubik">
|
||||
A home for your team, best practices and thoughts.
|
||||
</p>
|
||||
</div>
|
||||
{/* /.block-style-eleven */}
|
||||
<div className="block-style-eleven mt-40">
|
||||
<div className="num font-rubik">03</div>
|
||||
<div className="title">Products Doc</div>
|
||||
<p className="font-rubik">
|
||||
Beautiful docs for your APIs, Products, FAQs, & User Guides,
|
||||
</p>
|
||||
</div>
|
||||
{/* /.block-style-eleven */}
|
||||
</Slider>
|
||||
{/* Bottom text slide */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
import Slider from "react-slick";
|
||||
|
||||
export default function DocSlickAsNavTwo() {
|
||||
const [nav1, setNav1] = useState();
|
||||
const [nav2, setNav2] = useState();
|
||||
|
||||
var settings = {
|
||||
slidesToShow: 3,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 420,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider
|
||||
{...settings}
|
||||
asNavFor={nav1}
|
||||
ref={(slider2) => setNav2(slider2)}
|
||||
swipeToSlide={true}
|
||||
focusOnSelect={true}
|
||||
className="slick-nav-custom "
|
||||
>
|
||||
<div className="d-flex item_content">
|
||||
<div className="icon d-flex align-items-center justify-content-center">
|
||||
<Image width="11" height="15" src="/images/icon/81.svg" alt="icon" />
|
||||
</div>
|
||||
<p>
|
||||
Create task for any <br />
|
||||
team person
|
||||
</p>
|
||||
</div>
|
||||
{/* /.d-flex */}
|
||||
<div className="d-flex item_content">
|
||||
<div className="icon d-flex align-items-center justify-content-center">
|
||||
<Image width="11" height="15" src="/images/icon/81.svg" alt="icon" />
|
||||
</div>
|
||||
<p>
|
||||
Make timeframe for <br />
|
||||
do the task
|
||||
</p>
|
||||
</div>
|
||||
{/* /.d-flex */}
|
||||
<div className="d-flex item_content">
|
||||
<div className="icon d-flex align-items-center justify-content-center">
|
||||
<Image width="11" height="15" src="/images/icon/81.svg" alt="icon" />
|
||||
</div>
|
||||
<p>
|
||||
Get task complated by <br />
|
||||
your member
|
||||
</p>
|
||||
</div>
|
||||
{/* /.d-flex */}
|
||||
</Slider>
|
||||
{/* Bottom text slide */}
|
||||
|
||||
<div className="position-relative">
|
||||
<Slider
|
||||
className="slick-nav-none carousel-inner"
|
||||
asNavFor={nav2}
|
||||
fade={true}
|
||||
speed={600}
|
||||
ref={(slider1) => setNav1(slider1)}
|
||||
>
|
||||
<div className="carousel-item">
|
||||
<Image width={1160} height={700} style={{height:'fit-content'}} src="/images/assets/screen_07.png" alt="feature" />
|
||||
</div>
|
||||
<div className="carousel-item">
|
||||
<Image width={1160} height={700} style={{height:'fit-content'}} src="/images/assets/screen_08.png" alt="feature" />
|
||||
</div>
|
||||
<div className="carousel-item">
|
||||
<Image width={1160} height={700} style={{height:'fit-content'}} src="/images/assets/screen_09.png" alt="feature" />
|
||||
</div>
|
||||
</Slider>
|
||||
{/* Top Image slide */}
|
||||
<Image width="151" height="151"
|
||||
src="/images/shape/152.svg"
|
||||
alt="shape"
|
||||
className="shapes shape-one"
|
||||
/>
|
||||
<Image width={292} height={292}
|
||||
src="/images/shape/153.png"
|
||||
alt="shape"
|
||||
className="shapes shape-two"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user